/* ==========================================================================
   51st All India Sociological Conference (AISC) 2026
   Hosted by KIIT University, Bhubaneswar
   --------------------------------------------------------------------------
   base.css — Design tokens, reset, typography, layout primitives, utilities
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- Brand: KIIT-inspired academic blue ------------------------------- */
  --c-ink:          #0A1B33;   /* Deepest navy — headings on light          */
  --c-navy-900:     #0B2545;   /* Navy — dark section backgrounds           */
  --c-navy-800:     #10305A;
  --c-blue-700:     #14427E;   /* Primary brand blue                        */
  --c-blue-600:     #1A539B;
  --c-blue-500:     #2367BC;   /* Interactive blue                          */
  --c-blue-300:     #7FA8DA;
  --c-blue-100:     #DCE7F6;
  --c-blue-50:      #EEF3FB;

  /* --- Accent: subtle gold / ochre -------------------------------------- */
  --c-gold:         #B8862B;   /* Decorative gold (rules, icons, motifs)    */
  --c-gold-600:     #9A6F1E;
  --c-gold-ink:     #78561A;   /* Accessible gold for text on light         */
  --c-gold-200:     #E9D49B;
  --c-gold-50:      #FBF5E7;

  /* --- Accent: Odisha terracotta (pattachitra ochre-red) ---------------- */
  --c-terra:        #A8452B;
  --c-terra-ink:    #8A3720;
  --c-terra-50:     #FBF0EC;

  /* --- Neutrals --------------------------------------------------------- */
  --c-white:        #FFFFFF;
  --c-warm:         #FBF9F5;   /* Warm white — editorial sections           */
  --c-mist:         #F2F5FA;   /* Cool light — alternating sections         */
  --c-line:         #E2E7EF;   /* Hairline borders                          */
  --c-line-warm:    #EAE3D6;
  --c-muted:        #5B6B82;   /* Secondary body text (AA on white)         */
  --c-body:         #33445C;   /* Primary body text                         */

  /* --- Typography ------------------------------------------------------- */
  --font-display: "Playfair Display", "Georgia", "Times New Roman", serif;
  --font-body:    "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-xs:    0.75rem;    /* 12px */
  --fs-sm:    0.8125rem;  /* 13px */
  --fs-base:  1rem;       /* 16px */
  --fs-md:    1.0625rem;  /* 17px */
  --fs-lg:    1.25rem;
  --fs-xl:    1.5rem;
  --fs-2xl:   1.875rem;
  --fs-3xl:   2.25rem;
  --fs-4xl:   3rem;
  --fs-5xl:   3.75rem;

  /* Fluid editorial display sizes */
  --fs-hero:    clamp(2.35rem, 1.1rem + 5.2vw, 5rem);
  --fs-section: clamp(1.75rem, 1.05rem + 2.4vw, 2.85rem);
  --fs-lede:    clamp(1.02rem, 0.96rem + 0.34vw, 1.22rem);

  /* --- Spacing scale ---------------------------------------------------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  2.5rem;
  --sp-8:  3rem;
  --sp-9:  4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;

  /* Vertical rhythm for full-width sections */
  --section-y: clamp(3.5rem, 2rem + 5vw, 6.5rem);

  /* --- Layout ----------------------------------------------------------- */
  --container:      1200px;
  --container-wide: 1360px;
  --container-text: 760px;
  --gutter: clamp(1rem, 0.4rem + 2.4vw, 2.5rem);

  /* --- Radii, shadows, motion ------------------------------------------- */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(10, 27, 51, .05), 0 2px 8px rgba(10, 27, 51, .05);
  --sh-2: 0 2px 6px rgba(10, 27, 51, .06), 0 10px 26px rgba(10, 27, 51, .08);
  --sh-3: 0 6px 14px rgba(10, 27, 51, .08), 0 22px 50px rgba(10, 27, 51, .13);
  --sh-inset-line: inset 0 0 0 1px var(--c-line);

  --ease: cubic-bezier(.22, .68, .32, 1);
  --t-fast: .18s var(--ease);
  --t-med:  .32s var(--ease);
  --t-slow: .7s var(--ease);

  --header-h: 62px; /* min-height of the nav row */

  /* Live height of the whole sticky header. main.js measures the header and
     overwrites this; the value here is a sane fallback before JS runs and is
     what the mobile drawer and backdrop are positioned against. */
  --header-h-actual: 118px;

  /* Stacking order, lowest first. The header sits ABOVE the drawer and the
     backdrop so the hamburger stays tappable while the menu is open — the
     drawer opens beneath the header rather than over it. */
  --z-float:    150;   /* back-to-top */
  --z-backdrop: 180;
  --z-drawer:   190;
  --z-header:   200;
  --z-skip:     400;   /* skip link must clear everything */
}

/* --------------------------------------------------------------------------
   1b. METRICS-MATCHED FONT FALLBACK
   Before Inter arrives, the system fallback (Segoe UI on Windows) sets ~6%
   wider. On the 10-item desktop menu that is enough to overflow the header
   row for the duration of the font swap. Scaling the fallback down to Inter's
   metrics removes that flash and cuts layout shift generally.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter Fallback";
  src: local("Segoe UI"), local("Helvetica Neue"), local("Arial");
  size-adjust: 94%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Offset in-page anchors so the sticky header never covers a heading.
     --header-stuck is the header's own height, which is constant at every
     scroll position; main.js measures it and overwrites this value. */
  scroll-padding-top: calc(var(--header-stuck, 124px) + 20px);
  overflow-anchor: none;
}

/* Belt and braces for anything linked to directly */
:target { scroll-margin-top: calc(var(--header-stuck, 124px) + 20px); }

body {
  margin: 0;
  /* overflow-x guard: no horizontal scrolling at any breakpoint */
  overflow-x: hidden;
  /* See html { overflow-anchor } above — belt and braces, since setting
     overflow-x here makes body a scroll container too. */
  overflow-anchor: none;
  background: var(--c-white);
  color: var(--c-body);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: 1.68;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--sp-4); }
p, ul, ol, dl, figure, table, blockquote { margin: 0 0 var(--sp-5); }
:where(p, ul, ol, figure, table, blockquote):last-child { margin-bottom: 0; }

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
svg { flex-shrink: 0; }

a { color: var(--c-blue-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--c-blue-500); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--sp-7) 0; }

table { border-collapse: collapse; width: 100%; }

ul, ol { padding-left: 1.25em; }
li { margin-bottom: .4em; }
li:last-child { margin-bottom: 7px; }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
.display,
h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--c-ink);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.015em;
}

h4, h5, h6 {
  font-family: var(--font-body);
  color: var(--c-ink);
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.6rem); }
h2 { font-size: var(--fs-section); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem); }
h4 { font-size: 1.0625rem; }
h5 { font-size: 0.95rem; }
h6 { font-size: 0.875rem; }

/* Editorial stacked headline — "Culture. Region. Pedagogy." */
.headline-stack {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0;
}
.headline-stack > span { display: block; }

/* Eyebrow / kicker above a section title */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-gold-ink);
  margin: 0 0 var(--sp-3);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--c-gold);
  flex: none;
}
.eyebrow--center { justify-content: center; }
.eyebrow--plain::before { display: none; }

/* Lede paragraph under a heading */
.lede {
  font-size: var(--fs-lede);
  line-height: 1.66;
  color: var(--c-muted);
  max-width: 68ch;
}

.text-serif { font-family: var(--font-display); }
.text-muted { color: var(--c-muted); }
.text-small { font-size: var(--fs-sm); line-height: 1.6; }
.text-center { text-align: center; }
.text-balance { text-wrap: balance; }

/* Pull-quote used in theme / decolonisation sections */
.pullquote {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem);
  line-height: 1.32;
  font-style: italic;
  color: var(--c-ink);
  border-left: 3px solid var(--c-gold);
  padding-left: clamp(1rem, 2vw, 1.75rem);
  margin: var(--sp-6) 0;
}
.pullquote cite {
  display: block;
  margin-top: var(--sp-3);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--fs-sm);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }
.container--text { max-width: var(--container-text); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.section--flush-top { padding-top: 0; }

/* Section surfaces */
.surface-white { background: var(--c-white); }
.surface-warm  { background: var(--c-warm); }
.surface-mist  { background: var(--c-mist); }
.surface-navy  { background: var(--c-navy-900); }
.surface-blue  { background: var(--c-blue-700); }

/* Text inversion for dark surfaces */
.surface-navy,
.surface-blue { color: rgba(255, 255, 255, .84); }
.surface-navy h1, .surface-navy h2, .surface-navy h3,
.surface-navy h4, .surface-navy h5, .surface-navy h6,
.surface-blue h1, .surface-blue h2, .surface-blue h3,
.surface-blue h4, .surface-blue h5, .surface-blue h6 { color: #fff; }
.surface-navy .lede, .surface-blue .lede { color: rgba(255, 255, 255, .74); }
.surface-navy .eyebrow, .surface-blue .eyebrow { color: var(--c-gold-200); }
.surface-navy .eyebrow::before, .surface-blue .eyebrow::before { background: var(--c-gold-200); }
.surface-navy a:not(.btn), .surface-blue a:not(.btn) { color: var(--c-gold-200); }

/* Section header block */
.section-head { max-width: 780px; margin-bottom: clamp(2rem, 1.2rem + 2vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-bottom: var(--sp-4); }
.section-head p:last-child { margin-bottom: 0; }

/* Grid helpers */
.grid { display: grid; gap: clamp(1rem, .6rem + 1.4vw, 1.75rem); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* Two-column editorial split */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 1rem + 3vw, 4rem);
  align-items: center;
}
.split--text-first > :first-child { order: -1; }
.split--45 { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
.split--55 { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }
.split--top { align-items: start; }

.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.row--center { justify-content: center; }
.row--between { justify-content: space-between; align-items: center; }

/* Decorative hairline divider with a gold diamond */
.rule-ornament {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--c-line);
}
.rule-ornament::before,
.rule-ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
}
.rule-ornament span {
  width: 7px; height: 7px;
  background: var(--c-gold);
  transform: rotate(45deg);
  flex: none;
}

/* --------------------------------------------------------------------------
   5. ACCESSIBILITY UTILITIES
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip-to-content link, revealed on keyboard focus */
.skip-link {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -140%);
  z-index: var(--z-skip);
  background: var(--c-navy-900);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--t-fast);
}
.skip-link:focus-visible { transform: translate(-50%, 0); color: #fff; }

/* Consistent, visible focus ring across the whole site */
:focus-visible {
  outline: 3px solid var(--c-blue-500);
  outline-offset: 2px;
  border-radius: 3px;
}
.surface-navy :focus-visible,
.surface-blue :focus-visible,
.site-footer :focus-visible { outline-color: var(--c-gold-200); }

/* --------------------------------------------------------------------------
   6. SCROLL-REVEAL ANIMATION
   Lightweight: driven by IntersectionObserver in main.js (no library).
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--t-slow) var(--d, 0s),
    transform var(--t-slow) var(--d, 0s);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-28px); }
[data-reveal="right"] { transform: translateX(28px); }
[data-reveal="fade"]  { transform: none; }
[data-reveal="zoom"]  { transform: scale(.955); }

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Below 900px the two-column splits have already collapsed to one full-width
   column, so a horizontal reveal offset has nothing to slide across — and a
   full-width element translated sideways pokes past the viewport edge, which
   is real horizontal overflow (masked, but present). Reveal vertically instead. */
@media (max-width: 900px) {
  [data-reveal="left"],
  [data-reveal="right"] { transform: translateY(26px); }
}

/* Honour the user's motion preference */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   7. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .backtotop, .announce-bar, .hero__motif { display: none !important; }
  body { font-size: 11pt; color: #000; }
  .section { padding-block: 1rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}