/* ==========================================================================
   51st All India Sociological Conference (AISC) 2026 — KIIT University
   --------------------------------------------------------------------------
   components.css — Reusable UI: header, navigation, buttons, cards, tables,
   timelines, accordions, placeholders (TBA / image), footer.
   ========================================================================== */

/* ==========================================================================
   1. ANNOUNCEMENT BAR
   ========================================================================== */
.announce-bar {
  background: linear-gradient(90deg, var(--c-navy-900), var(--c-blue-700) 55%, var(--c-navy-800));
  color: rgba(255, 255, 255, .92);
  font-size: var(--fs-sm);
  letter-spacing: .01em;
}
.announce-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 38px;
  padding-block: .4rem;
  text-align: center;
  flex-wrap: wrap;
}
.announce-bar strong { font-weight: 650; color: #fff; }
.announce-bar .tag {
  background: var(--c-gold);
  color: #2A1D05;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .18rem .55rem;
  border-radius: var(--r-sm);
}

/* ==========================================================================
   2. SITE HEADER — two rows: brand bar + nav bar. Height is constant at
   every scroll position (rest and scrolled render identically) — a shrink
   transition used to run here, but a height change on a sticky element
   fights the browser's scroll anchoring and reads as the header
   blinking/jumping mid-scroll. `.is-scrolled` now only ever adds a shadow,
   which is paint-only and can't shift layout.
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  /* Above the drawer and backdrop — see the stacking scale in base.css. */
  z-index: var(--z-header);
  background: #fff;
  border-bottom: 1px solid var(--c-line);
  transition: box-shadow var(--t-med);
}
/* While the menu is open the header carries the drawer's shadow line. */
body.nav-open .site-header { box-shadow: 0 4px 22px rgba(10, 27, 51, .14); }
.site-header.is-scrolled { box-shadow: 0 4px 22px rgba(10, 27, 51, .10); }

.brandbar__left {
  display: flex;
  align-items: center;
  gap: clamp(.7rem, .4rem + 1vw, 1.25rem);
  min-width: 0;
}

.brandbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-5);
  padding-block: .85rem;
}

/* Conference lockup (mark + wordmark) */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.brand__mark { width: 46px; height: 46px; flex: none; }
.brand__text { min-width: 0; }
.brand__ordinal {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--c-gold-ink);
  line-height: 1.2;
}
.brand__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.18;
  color: var(--c-ink);
  letter-spacing: -0.015em;
}
.brand__sub {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  line-height: 1.4;
  margin-top: 1px;
}

/* ---- Co-branding: KIIT logo + AISC conference logo --------------------
   Two separate images, never merged, side by side with a hairline between.
   The KIIT asset swaps from the full lockup to the square mark on small
   screens, where the lockup's wordmark would be too small to read. */
.cobrand {
  display: flex;
  align-items: center;
  gap: clamp(.7rem, .4rem + 1vw, 1.25rem);
  min-width: 0;
}

.cobrand__kiit {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
}
/* Sized by height so neither asset can ever be stretched */
.cobrand__kiit-full {
  display: block;
  width: auto;
  height: 50px;
}
.cobrand__kiit-mark {
  display: none;
  width: auto;
  height: 40px;
}

.cobrand__rule {
  flex: none;
  width: 1px;
  align-self: stretch;
  min-height: 38px;
  background: var(--c-line);
}

/* Host / society lockup on the right of the brand row */
.host-lockup {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}
.host-lockup__item {
  text-align: left;
  line-height: 1.32;
  padding-left: var(--sp-5);
  border-left: 1px solid var(--c-line);
}
.host-lockup__item:first-child { border-left: 0; padding-left: 0; }
.host-lockup__label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.host-lockup__value {
  display: block;
  font-size: .9rem;
  font-weight: 650;
  color: var(--c-ink);
}

/* --- Navigation row --- */
/* Nav row: the menu takes the space that is left after the Register button
   has been given its intrinsic width. `auto` on the button means it is never
   squeezed, and the menu column can never grow underneath it. */
.navbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--header-h);
}

/* The duplicate compact mark that used to appear here on scroll is gone: the
   branding above stays visible instead, so the navigation row holds only the
   menu and the Register button and its width never changes. The element is
   left in the markup (harmless, and keeps the ten pages identical) but is
   never rendered. */
.navbar__mini { display: none; }

.nav { flex: 1; min-width: 0; }
.nav__list {
  display: flex;
  align-items: center;
  /* Fluid gap: the 10-item menu must fit on one line from 1301px upwards.
     The max is capped low because the header container stops growing at
     1360px while a vw-based gap would keep expanding past it. */
  gap: clamp(.5rem, .05rem + .6vw, .68rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  display: block;
  position: relative;
  padding: .5rem .1rem;
  font-size: clamp(.68rem, .6rem + .12vw, .73rem);
  font-weight: 650;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--c-body);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-fast);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med);
}
.nav__link:hover { color: var(--c-blue-700); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--c-blue-700); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* Compact by design — every pixel here is a pixel the ten-item menu loses.
   Selector is doubled so it beats .btn--sm, which is defined further down. */
.navbar .navbar__cta,
.navbar__cta {
  flex: none;
  justify-self: end;
  padding: .52rem .95rem;
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  white-space: nowrap;
}

/* Hamburger — hidden on large screens.
   The drawer (.nav) is a descendant of .site-header, so it shares the
   header's stacking context and would paint over this button no matter how
   high the header's own z-index is. Lifting the toggle above the drawer's
   z-index inside that same context is what keeps it tappable while open. */
.nav-toggle {
  display: none;
  position: relative;
  z-index: calc(var(--z-drawer) + 10);
  align-items: center;
  gap: .55rem;
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  padding: .5rem .7rem;
  color: var(--c-ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.nav-toggle__bars { position: relative; width: 18px; height: 12px; flex: none; }
.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--t-med), opacity var(--t-fast);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 5px; }
.nav-toggle__bars span:nth-child(3) { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* --- Mobile drawer --- */
.nav-backdrop {
  position: fixed;
  /* Starts below the sticky header so the header — and therefore the
     hamburger — is never covered or dimmed while the menu is open. */
  top: var(--header-h-actual);
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(10, 27, 51, .5);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-med), visibility var(--t-med);
  z-index: var(--z-backdrop);
}
body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .82rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 650;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  text-align: center;
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform var(--t-fast),
              box-shadow var(--t-fast);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 15px; height: 15px; }

.btn--primary {
  background: var(--c-blue-700);
  border-color: var(--c-blue-700);
  color: #fff;
  box-shadow: 0 4px 14px rgba(20, 66, 126, .26);
}
.btn--primary:hover { background: var(--c-blue-600); border-color: var(--c-blue-600); color: #fff; box-shadow: 0 8px 22px rgba(20, 66, 126, .32); }

.btn--gold {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: #231904;
  box-shadow: 0 4px 14px rgba(184, 134, 43, .3);
}
.btn--gold:hover { background: var(--c-gold-600); border-color: var(--c-gold-600); color: #fff; }

.btn--outline {
  background: transparent;
  border-color: var(--c-line);
  color: var(--c-ink);
}
.btn--outline:hover { border-color: var(--c-blue-700); color: var(--c-blue-700); background: var(--c-blue-50); }

.btn--ghost-light {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .34);
  color: #fff;
  backdrop-filter: blur(4px);
}
.btn--ghost-light:hover { background: rgba(255, 255, 255, .16); border-color: #fff; color: #fff; }

.btn--sm { padding: .55rem 1.05rem; font-size: var(--fs-xs); }
.btn--lg { padding: 1rem 2rem; font-size: .875rem; }
.btn--xl { padding: 1rem 5rem; font-size: 1.05rem; box-shadow: var(--sh-2); }
.btn--xl:hover { box-shadow: var(--sh-3); }
.btn--block { width: 100%; }

/* Disabled / "coming soon" state — kept focusable-free and clearly inert */
.btn.is-disabled,
.btn[aria-disabled="true"] {
  background: var(--c-mist);
  border-color: var(--c-line);
  color: var(--c-muted);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}
.surface-navy .btn.is-disabled,
.surface-blue .btn.is-disabled {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .2);
  color: rgba(255, 255, 255, .55);
}

/* Text link with animated arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .8125rem;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-blue-700);
}
.link-arrow svg { width: 14px; height: 14px; transition: transform var(--t-fast); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ==========================================================================
   4. BADGES, PILLS & THE "TBA" PLACEHOLDER SYSTEM
   Every piece of information not yet officially confirmed for 2026 uses
   one of these, so unconfirmed content is always visually unambiguous.
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .28rem .7rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1.4;
}
.badge--blue  { background: var(--c-blue-50);  color: var(--c-blue-700); }
.badge--gold  { background: var(--c-gold-50);  color: var(--c-gold-ink); }
.badge--terra { background: var(--c-terra-50); color: var(--c-terra-ink); }
.badge--neutral { background: var(--c-mist); color: var(--c-muted); }

/* Inline TBA chip — use in place of any unconfirmed value */
.tba {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .2rem .6rem;
  border: 1px dashed var(--c-gold);
  border-radius: var(--r-sm);
  background: var(--c-gold-50);
  color: var(--c-gold-ink);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  /* Must wrap: long chips such as "2026 list to be announced by the ISS"
     otherwise overflow narrow card columns at tablet widths. */
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
}
.tba::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-gold);
  flex: none;
}
.surface-navy .tba, .surface-blue .tba, .site-footer .tba {
  background: rgba(233, 212, 155, .1);
  border-color: rgba(233, 212, 155, .5);
  color: var(--c-gold-200);
}
.surface-navy .tba::before, .surface-blue .tba::before, .site-footer .tba::before { background: var(--c-gold-200); }

/* Block-level notice for whole sections awaiting official information */
.notice {
  display: flex;
  gap: var(--sp-4);
  padding: clamp(1.1rem, .8rem + 1vw, 1.6rem);
  border-radius: var(--r-md);
  background: var(--c-gold-50);
  border: 1px dashed var(--c-gold-200);
}
.notice__icon {
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--c-gold);
  color: #fff;
}
.notice__icon svg { width: 17px; height: 17px; }
.notice__body { min-width: 0; }
.notice__title {
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-gold-ink);
  margin: 0 0 .35rem;
}
.notice p { font-size: .95rem; color: var(--c-body); margin-bottom: .5rem; }
.notice--info { background: var(--c-blue-50); border-color: var(--c-blue-100); }
.notice--info .notice__icon { background: var(--c-blue-700); }
.notice--info .notice__title { color: var(--c-blue-700); }

/* Large empty-state panel: "will be announced soon" */
.awaiting {
  text-align: center;
  padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) var(--gutter);
  border: 1px dashed var(--c-line);
  border-radius: var(--r-lg);
  background:
    linear-gradient(0deg, rgba(251, 245, 231, .55), rgba(251, 245, 231, .55)),
    repeating-linear-gradient(-45deg, transparent 0 11px, rgba(184, 134, 43, .06) 11px 22px);
}
.awaiting__icon {
  width: 58px; height: 58px;
  margin: 0 auto var(--sp-4);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--c-gold-200);
  color: var(--c-gold);
}
.awaiting__icon svg { width: 26px; height: 26px; }
.awaiting h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); margin-bottom: var(--sp-3); }
.awaiting p { max-width: 54ch; margin-inline: auto; color: var(--c-muted); font-size: .95rem; }

/* ==========================================================================
   5. CARDS
   ========================================================================== */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: clamp(1.35rem, 1rem + 1.1vw, 2rem);
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.card--hover:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-3);
  border-color: var(--c-blue-100);
}
.card h3, .card h4 { margin-bottom: var(--sp-3); }
.card p { font-size: .95rem; color: var(--c-muted); }
.card__foot { margin-top: auto; padding-top: var(--sp-4); }

/* Card with a numbered index (challenges, plenaries) */
.card__index {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--c-blue-100);
  margin-bottom: var(--sp-3);
  transition: color var(--t-med);
}
.card--hover:hover .card__index { color: var(--c-gold-200); }

/* Icon tile inside a card */
.card__icon {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--c-blue-50);
  color: var(--c-blue-700);
  margin-bottom: var(--sp-4);
}
.card__icon svg { width: 23px; height: 23px; }
.card__icon--gold  { background: var(--c-gold-50);  color: var(--c-gold-ink); }
.card__icon--terra { background: var(--c-terra-50); color: var(--c-terra-ink); }

/* Tag list inside cards */
.taglist { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: var(--sp-4) 0 0; padding: 0; }
.taglist li {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--c-body);
  background: var(--c-mist);
  border-radius: var(--r-sm);
  padding: .26rem .6rem;
}
.surface-navy .taglist li, .surface-blue .taglist li {
  background: rgba(255, 255, 255, .09);
  color: rgba(255, 255, 255, .85);
}

/* Dark card variant for use on navy sections */
.card--dark {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(255, 255, 255, .13);
  backdrop-filter: blur(3px);
}
.card--dark p { color: rgba(255, 255, 255, .72); }
.card--dark .card__index { color: rgba(233, 212, 155, .35); }
.card--dark .card__icon { background: rgba(233, 212, 155, .13); color: var(--c-gold-200); }

/* Profile card — speakers & committee members */
.profile {
  text-align: center;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-5);
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.profile:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.profile__photo {
  width: 108px; height: 108px;
  margin: 0 auto var(--sp-4);
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-mist);
  border: 1px solid var(--c-line);
  display: grid;
  place-items: center;
  color: var(--c-blue-300);
}
.profile__photo img { width: 100%; height: 100%; object-fit: cover; }
.profile__photo svg { width: 46px; height: 46px; }
.profile__name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 650; color: var(--c-ink); margin: 0 0 .25rem; }
.profile__role { font-size: var(--fs-sm); font-weight: 650; color: var(--c-gold-ink); letter-spacing: .04em; text-transform: uppercase; margin: 0 0 .4rem; }
.profile__org  { font-size: var(--fs-sm); color: var(--c-muted); margin: 0; }
.profile__bio  { font-size: var(--fs-sm); color: var(--c-muted); margin: var(--sp-3) 0 0; text-align: left; }

/* Chief Patron — a single, larger, premium variant of .profile */
.profile--feature {
  max-width: 420px;
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-6);
  border-color: var(--c-gold-200);
  background: linear-gradient(180deg, #fff 0%, var(--c-gold-50) 100%);
  box-shadow: var(--sh-2);
}
.profile--feature:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.profile--feature .profile__photo {
  width: 172px; height: 172px;
  border: 3px solid var(--c-gold);
  color: var(--c-gold-600);
}
.profile--feature .profile__photo svg { width: 74px; height: 74px; }
.profile--feature .profile__name { font-size: 1.55rem; margin-top: var(--sp-2); }
.profile--feature .profile__role { font-size: var(--fs-md); }

/* Sub-groupings within a committee section (Office Bearers / Members, etc.) */
.committee-group { margin-top: var(--sp-7); }
.committee-group:first-of-type { margin-top: var(--sp-6); }
.committee-group__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 650;
  color: var(--c-ink);
  margin: 0 0 var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--c-gold-200);
}

/* ==========================================================================
   6. IMAGE PLACEHOLDER SYSTEM
   Used wherever an official photograph is not yet available. Always
   labelled, so no placeholder can be mistaken for real imagery.
   ========================================================================== */
.imgph {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-mist);
  border: 1px solid var(--c-line);
}
.imgph__inner {
  position: relative;
  aspect-ratio: var(--ratio, 4 / 3);
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  text-align: center;
  background-image:
    linear-gradient(135deg, rgba(20, 66, 126, .055), rgba(184, 134, 43, .06)),
    repeating-linear-gradient(-45deg, transparent 0 13px, rgba(20, 66, 126, .045) 13px 26px);
}
.imgph__label {
  position: relative;
  max-width: 90%;
}
.imgph__label svg { width: 30px; height: 30px; margin: 0 auto .6rem; color: var(--c-blue-300); }
.imgph__label strong {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-navy-800);
  letter-spacing: .02em;
  line-height: 1.4;
}
.imgph__label span {
  display: block;
  margin-top: .3rem;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-gold-ink);
}
.imgph figcaption {
  padding: .7rem 1rem;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  background: #fff;
  border-top: 1px solid var(--c-line);
}
/* Ratio modifiers */
.imgph--wide   { --ratio: 16 / 9; }
.imgph--square { --ratio: 1 / 1; }
.imgph--tall   { --ratio: 3 / 4; }

/* ==========================================================================
   7. TABLES (responsive)
   ========================================================================== */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: #fff;
}
.table {
  min-width: 620px;
  font-size: .9375rem;
}
.table caption {
  caption-side: top;
  text-align: left;
  padding: var(--sp-4) var(--sp-5) 0;
  font-size: var(--fs-sm);
  color: var(--c-muted);
}
.table th, .table td {
  padding: .95rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--c-line);
  vertical-align: middle;
}
.table thead th {
  background: var(--c-navy-900);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 0;
  white-space: nowrap;
}
.table thead th:first-child { border-top-left-radius: var(--r-lg); }
.table thead th:last-child  { border-top-right-radius: var(--r-lg); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:nth-child(even) { background: var(--c-blue-50); }
.table td:first-child { font-weight: 650; color: var(--c-ink); }
.table .tba { font-size: 11px; }

/* Scroll hint shown on narrow screens */
.table-hint {
  display: none;
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--c-muted);
  letter-spacing: .04em;
}

/* --- Wide data tables (fees, research committees) ---------------------
   These carry more columns than a phone can show. Rather than shrinking the
   type to an unreadable size, the table scrolls horizontally inside its
   wrapper and the first column stays pinned so the row's identity — the
   registration period, or the RC number — is never lost while scrolling. */
/* min-width keeps the table legible on a phone (the wrapper scrolls there);
   the columns are sized so the twelve-column fee table still fits whole
   inside the 1120px desktop container without scrolling. */
.table--wide {
  min-width: 820px;
  /* Fixed layout + an explicit <colgroup> is what actually caps the columns:
     min-width alone is only a floor, and the long header labels
     ("Accompanying person without Accommodation") would otherwise widen the
     table past the container and force it to scroll even on desktop. */
  table-layout: fixed;
}
.table--rc { min-width: 860px; }

.table--wide th, .table--wide td { padding: .6rem .5rem; font-size: .8125rem; }
.table--rc th,  .table--rc td    { padding: .7rem .85rem; font-size: .875rem; }

/* Grouped header row */
.table thead tr:first-child th.group {
  text-align: center;
  border-left: 1px solid rgba(255, 255, 255, .18);
}
.table thead tr + tr th {
  background: var(--c-navy-800);
  color: rgba(255, 255, 255, .92);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: none;
  font-weight: 600;
  white-space: normal;
  min-width: 76px;
  vertical-align: bottom;
  /* "Accommodation" is wider than its column in the twelve-column fee table,
     so allow it to hyphenate rather than bleed into the next cell. */
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

/* Pinned first column */
.table--sticky th[scope="row"],
.table--sticky td:first-child,
.table--sticky thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
  box-shadow: 1px 0 0 var(--c-line);
  text-align: left;
}
.table--sticky thead th:first-child {
  background: var(--c-navy-900);
  z-index: 3;
  box-shadow: 1px 0 0 rgba(255, 255, 255, .18);
}
.table--sticky tbody tr:nth-child(even) td:first-child,
.table--sticky tbody tr:nth-child(even) th[scope="row"] { background: var(--c-blue-50); }

/* Currency figures read better aligned and tabular */
.table .amt {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 600;
  color: var(--c-ink);
}
.table .amt--usd { color: var(--c-blue-700); }

/* Email cells must be allowed to break on narrow screens */
.table .email { word-break: break-all; font-size: .8125rem; }

/* Highlight the currently-open registration window */
.table tbody tr.is-current td,
.table tbody tr.is-current th[scope="row"] {
  background: var(--c-gold-50);
  box-shadow: inset 0 0 0 1px var(--c-gold-200);
}
.table tbody tr.is-current td:first-child { background: var(--c-gold-50); }

/* Simple definition list used for contact / venue details */
.deflist { display: grid; gap: var(--sp-4); margin: 0; }
.deflist > div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-line);
}
.deflist > div:last-child { border-bottom: 0; padding-bottom: 0; }
.deflist dt {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-muted);
  padding-top: 2px;
}
.deflist dd { margin: 0; color: var(--c-ink); font-size: .95rem; }

/* ==========================================================================
   8. TIMELINE (important dates, AISC heritage)
   ========================================================================== */
.timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--sp-7);
}
.timeline::before {
  content: "";
  position: absolute;
  top: 8px; bottom: 8px; left: 7px;
  width: 2px;
  background: linear-gradient(180deg, var(--c-gold), var(--c-blue-100) 85%);
}
.timeline__item {
  position: relative;
  margin: 0 0 var(--sp-6);
  padding-bottom: var(--sp-2);
}
.timeline__item:last-child { margin-bottom: 0; }
.timeline__item::before {
  content: "";
  position: absolute;
  top: 7px; left: calc(-1 * var(--sp-7) + 1px);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--c-blue-500);
  box-shadow: 0 0 0 4px rgba(35, 103, 188, .12);
}
.timeline__item--gold::before { border-color: var(--c-gold); box-shadow: 0 0 0 4px rgba(184, 134, 43, .16); }
.timeline__date {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-gold-ink);
  margin-bottom: .3rem;
}
.timeline__title { font-family: var(--font-body); font-size: 1.0625rem; font-weight: 650; color: var(--c-ink); margin: 0 0 .3rem; }
.timeline__desc  { font-size: .9375rem; color: var(--c-muted); margin: 0; }

.surface-navy .timeline::before { background: linear-gradient(180deg, var(--c-gold-200), rgba(255,255,255,.14) 85%); }
.surface-navy .timeline__item::before { background: var(--c-navy-900); border-color: var(--c-gold-200); box-shadow: 0 0 0 4px rgba(233,212,155,.12); }
.surface-navy .timeline__date { color: var(--c-gold-200); }
.surface-navy .timeline__title { color: #fff; }
.surface-navy .timeline__desc { color: rgba(255,255,255,.7); }

/* ==========================================================================
   9. ACCORDION (FAQ)
   ========================================================================== */
.accordion { border-top: 1px solid var(--c-line); }
.accordion__item { border-bottom: 1px solid var(--c-line); }
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: 1.35rem .25rem;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem);
  font-weight: 600;
  color: var(--c-ink);
  transition: color var(--t-fast);
}
.accordion__trigger:hover { color: var(--c-blue-700); }
.accordion__sign {
  position: relative;
  width: 26px; height: 26px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-med);
}
.accordion__sign::before,
.accordion__sign::after {
  content: "";
  position: absolute;
  inset: 50% 7px auto;
  height: 1.5px;
  background: currentColor;
  transform: translateY(-50%);
  transition: opacity var(--t-fast), transform var(--t-med);
}
.accordion__sign::after { transform: translateY(-50%) rotate(90deg); }
.accordion__trigger[aria-expanded="true"] .accordion__sign {
  background: var(--c-blue-700);
  border-color: var(--c-blue-700);
  color: #fff;
}
.accordion__trigger[aria-expanded="true"] .accordion__sign::after { transform: translateY(-50%) rotate(0deg); }

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-med);
}
.accordion__panel[data-open="true"] { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel p { padding: 0 .25rem 1.4rem; font-size: .975rem; color: var(--c-muted); max-width: 72ch; }
.accordion__panel p:last-child { margin-bottom: 0; }

/* ==========================================================================
   10. PAGE HERO (internal pages) & BREADCRUMB
   ========================================================================== */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--c-navy-900);
  color: #fff;
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
  isolation: isolate;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 130% at 12% 0%, rgba(35, 103, 188, .52), transparent 58%),
    radial-gradient(90% 110% at 100% 100%, rgba(184, 134, 43, .28), transparent 60%);
}
/* Faint Konark-wheel spoke motif in the corner */
.page-hero::after {
  content: "";
  position: absolute;
  right: -110px; top: 50%;
  width: 420px; height: 420px;
  transform: translateY(-50%);
  z-index: -1;
  opacity: .16;
  background: var(--motif-wheel) center / contain no-repeat;
  pointer-events: none;
}
.page-hero h1 { color: #fff; margin-bottom: var(--sp-4); max-width: 20ch; }
.page-hero .lede { color: rgba(255, 255, 255, .78); max-width: 62ch; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
  font-size: var(--fs-xs);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.breadcrumb li { margin: 0; color: rgba(255, 255, 255, .55); }
.breadcrumb li + li::before { content: "/"; margin-right: .5rem; opacity: .5; }
.breadcrumb a { color: rgba(255, 255, 255, .8); text-decoration: none; font-weight: 600; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--c-gold-200); font-weight: 650; }

/* ==========================================================================
   11. CTA BAND
   ========================================================================== */
.cta-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(115deg, var(--c-navy-900) 0%, var(--c-blue-700) 62%, var(--c-blue-600) 100%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  isolation: isolate;
}
.cta-band::after {
  content: "";
  position: absolute;
  right: -60px; bottom: -90px;
  width: 300px; height: 300px;
  z-index: -1;
  opacity: .17;
  background: var(--motif-wheel) center / contain no-repeat;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .8); }

/* ==========================================================================
   12. STATS STRIP
   ========================================================================== */
.factstrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.factstrip__item { background: #fff; padding: clamp(1.1rem, .8rem + 1vw, 1.75rem); }
.factstrip__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: .5rem;
}
.factstrip__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, .9rem + .6vw, 1.32rem);
  font-weight: 650;
  color: var(--c-ink);
  line-height: 1.32;
}
.factstrip__value small { display: block; font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 400; color: var(--c-muted); margin-top: .2rem; }

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.site-footer {
  background: var(--c-ink);
  color: rgba(255, 255, 255, .72);
  font-size: .9375rem;
}
.site-footer a { color: rgba(255, 255, 255, .72); text-decoration: none; transition: color var(--t-fast); }
.site-footer a:hover { color: var(--c-gold-200); }

.footer-top {
  padding-block: clamp(2.75rem, 1.8rem + 3.5vw, 4.5rem);
  border-bottom: 1px solid rgba(255, 255, 255, .11);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 1rem + 2.5vw, 3.5rem);
}
.footer-brand__mark { width: 52px; height: 52px; margin-bottom: var(--sp-4); }
.footer-brand h3 {
  font-size: 1.18rem;
  color: #fff;
  margin-bottom: var(--sp-3);
  line-height: 1.28;
}
.footer-brand__theme {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--c-gold-200);
  line-height: 1.45;
  margin-bottom: var(--sp-4);
}
.footer-brand p { font-size: .9rem; color: rgba(255, 255, 255, .6); }

.footer-col h4 {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid rgba(255, 255, 255, .13);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: .65rem; font-size: .9rem; }
.footer-col li:last-child { margin-bottom: 7px; }

.footer-bottom {
  padding-block: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .52);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--sp-5); }

/* ==========================================================================
   14. BACK TO TOP
   ========================================================================== */
.backtotop {
  position: fixed;
  right: clamp(1rem, 2vw, 2rem);
  bottom: clamp(1rem, 2vw, 2rem);
  z-index: var(--z-float);
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--c-blue-700);
  color: #fff;
  box-shadow: var(--sh-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--t-med), visibility var(--t-med), transform var(--t-med), background var(--t-fast);
}
.backtotop.is-visible { opacity: 1; visibility: visible; transform: none; }
.backtotop:hover { background: var(--c-navy-900); }
.backtotop svg { width: 18px; height: 18px; }

/* ==========================================================================
   15. FORMS (contact page)
   ========================================================================== */
.field { display: block; margin-bottom: var(--sp-5); }
.field__label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--c-ink);
  margin-bottom: .45rem;
}
.field__label .req { color: var(--c-terra); }
.field__hint { display: block; font-size: var(--fs-xs); color: var(--c-muted); margin-top: .4rem; }
.input, .textarea, .select {
  width: 100%;
  padding: .8rem 1rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: #fff;
  font-size: .95rem;
  color: var(--c-ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input:hover, .textarea:hover, .select:hover { border-color: var(--c-blue-300); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--c-blue-500);
  box-shadow: 0 0 0 3px rgba(35, 103, 188, .16);
}
.textarea { min-height: 150px; resize: vertical; }
.select { appearance: none; padding-right: 2.5rem; background-image: var(--icon-chevron); background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px; }

/* ==========================================================================
   16. RESPONSIVE
   ========================================================================== */

@media (max-width: 1400px) {
  .host-lockup { gap: var(--sp-4); }
  .host-lockup__item { padding-left: var(--sp-4); }
}
/* The Register button is no longer hidden in any desktop band — removing the
   duplicate mini-logo from the nav row freed enough width to keep it. */

/* --- Switch to hamburger navigation ---
   1260px is measured, not guessed: the complete ten-item menu plus the
   Register button need ~1101px and 1260px of viewport yields ~1187px of
   container, leaving ~86px of slack. Below this the menu would have to be
   squeezed, so the hamburger takes over instead. */
@media (max-width: 1259px) {
  /* The nav row becomes a compact action bar: [Register] ......... [Menu] */
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .navbar { min-height: 56px; }

  .nav {
    position: fixed;
    /* The drawer opens BELOW the sticky header, so the hamburger stays
       visible and tappable (it morphs into a close X) the whole time. */
    top: var(--header-h-actual);
    right: 0;
    bottom: 0;
    width: min(92vw, 380px);
    max-width: 100%;
    z-index: var(--z-drawer);
    background: #fff;
    box-shadow: -10px 0 40px rgba(10, 27, 51, .2);
    transform: translateX(100%);
    /* visibility keeps the closed drawer out of the tab order and the
       accessibility tree; it is transitioned so the slide still animates */
    visibility: hidden;
    transition: transform var(--t-med), visibility var(--t-med);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body.nav-open .nav { transform: translateX(0); visibility: visible; }

  /* The drawer's own title bar is redundant now that the header's hamburger
     is always visible above the panel and doubles as the close control. */
  .nav__head { display: none !important; }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-3) 0;
  }
  .nav__list li { margin: 0; }
  .nav__link {
    /* Comfortable ≥52px tap target */
    padding: 1rem var(--sp-5);
    font-size: .8125rem;
    letter-spacing: .09em;
    border-bottom: 1px solid var(--c-line);
  }
  .nav__link::after { display: none; }
  .nav__link:hover { background: var(--c-blue-50); }
  .nav__link[aria-current="page"] {
    background: var(--c-blue-50);
    box-shadow: inset 3px 0 0 var(--c-gold);
  }
  .nav__foot { display: block !important; padding: var(--sp-5); margin-top: auto; }
  .nav__foot .btn { width: 100%; }
  .nav__foot .btn + .btn { margin-top: var(--sp-3); }
}

/* Hide drawer-only chrome on desktop */
@media (min-width: 1260px) {
  .nav__head, .nav__foot { display: none; }
}

@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .split--45, .split--55 { grid-template-columns: minmax(0, 1fr); }
  .split--text-first > :first-child { order: 0; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .host-lockup__item:not(:first-child) { display: none; }
}

@media (max-width: 760px) {
  .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .table-hint { display: block; }
  .deflist > div { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .announce-bar__inner { font-size: var(--fs-xs); }
  .pullquote { padding-left: var(--sp-4); }
}

/* Tablet band — the hamburger is active from here down, and the brand row
   must stay a single tidy line. Without this the long theme sub-line and the
   two host-lockup items wrap and the row grows to 230-280px tall. */
@media (max-width: 1259px) {
  .brand__sub { display: none; }
}
@media (max-width: 1100px) {
  .host-lockup { display: none; }
}

/* Below 900px the KIIT wordmark lockup sets too small to read beside the
   conference name, so swap to the square mark. Both logos stay visible
   together at every width. */
@media (max-width: 900px) {
  .cobrand__kiit-full { display: none; }
  .cobrand__kiit-mark { display: block; height: 38px; }
}

@media (max-width: 620px) {
  .grid-2, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .brand__mark { width: 36px; height: 36px; }
  .brand__name { font-size: .95rem; }
  .cobrand__kiit-mark { height: 34px; }
  .cobrand__rule { min-height: 30px; }
  .host-lockup { display: none; }
  .brandbar { grid-template-columns: minmax(0, 1fr); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .btn { width: 100%; }
  .row .btn { width: auto; flex: 1 1 auto; }
  /* The header action bar keeps its intrinsic size */
  .navbar__cta { width: auto; padding: .5rem .9rem; font-size: 11px; }
  .timeline { padding-left: var(--sp-6); }
  .timeline__item::before { left: calc(-1 * var(--sp-6) + 1px); }
}

@media (max-width: 400px) {
  .row .btn { width: 100%; flex: 1 1 100%; }
}