/* -----------------------------------------------------------
   1. FONT DECLARATIONS (LOCAL)
----------------------------------------------------------- */
/* Primary Body Font */
@font-face {
  font-family: 'Sorts Mill Goudy';
  src: url('./fonts/sorts-mill-goudy-regular.ttf');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sorts Mill Goudy';
  src: url('./fonts/sorts-mill-goudy-italic.ttf');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Display / Headers */
@font-face {
  font-family: 'Aboreto';
  src: url('./fonts/aboreto-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Special / Linguistic (Latin & IPA) */
@font-face {
  font-family: 'Gentium Plus';
  src: url('./fonts/gentium-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* -----------------------------------------------------------
   2. VARIABLES & CONFIG
----------------------------------------------------------- */
:root {
  /* -- Palette -- */
  --clr-bg: #fdfdfd;
  --clr-text-main: SlateGray;
  --clr-text-dark: #1a1a1a;
  --clr-accent: #708AD0;

  /* -- Typography -- */
  --ff-primary: "Sorts Mill Goudy", serif;
  --ff-display: "Aboreto", sans-serif;
  
  /* -- Special Term Stack --
     1. Gentium Plus: Will render the Latin and IPA.
     2. serif: Will pick up the Devanagari (using system default).
  */
  --ff-term: "Gentium Plus", serif;

  /* -- Spacing -- */
  --spacing-md: 1em;
  --spacing-lg: 2.5em;
}


/* -----------------------------------------------------------
   3. GLOBAL DEFAULTS
----------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-family: var(--ff-primary);
  font-size: 18px;
  color: var(--clr-text-main);
  background-color: var(--clr-bg);
}

body {
  /* content-box keeps padding OUTSIDE the width */
  box-sizing: content-box; 
  
  margin: 0 auto;
  max-width: 36em;
  padding: 50px;
  
  font-size: 1.1em;
  hyphens: auto;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

@media (max-width: 600px) {
  body {
    font-size: 0.9em;
    padding: 12px;
  }
}

p {
  margin: var(--spacing-md) 0;
  text-align: justify;
  text-justify: inter-word;
}

a, a:visited {
  color: var(--clr-text-dark);
}


/* -----------------------------------------------------------
   4. COMPONENT: ANEKAANTA HEADER
----------------------------------------------------------- */
.anekaanta-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  font-size: 1.3rem;
}

.anekaanta-logo {
  width: 5em;
  margin: 0;
  display: block;
}

.anekaanta-text {
  font-family: var(--ff-display);
  font-size: 2.2em;
  letter-spacing: 0.07em;
  color: var(--clr-accent);
  margin: 0;
  padding: 0;
}

.anekaanta-tagline {
  font-family: var(--ff-display);
  font-size: 1em;
  letter-spacing: 0.15em;
  color: var(--clr-text-main);
  text-align: center;
  white-space: normal;
  margin-top: 0.2em;
  width: min(90%, 50rem);
  display: flex;
  align-items: center;
  gap: 0.3em;
}

.anekaanta-tagline::before,
.anekaanta-tagline::after {
  content: "";
  flex: 3;
  height: 1px;
  background-color: var(--clr-text-main);
}


/* -----------------------------------------------------------
   5. UTILITIES: SPECIAL TERMS
----------------------------------------------------------- */
.term {
  font-family: var(--ff-term);
  font-size: 0.95em; 
  font-weight: 400;
}

.email-domain {
  color: var(--clr-accent);
}

.email-link {
  color: inherit;
  text-decoration: none;
}

.email-link:hover {
  text-decoration: underline;
}


/* -----------------------------------------------------------
   6. PRINT STYLES
----------------------------------------------------------- */
@media print {
  html {
    background-color: white;
  }
  body {
    color: black;
    background-color: transparent;
    font-size: 12pt;
    max-width: 100%;
    padding: 0;
    orphans: 3;
    widows: 3;
  }
}