/* ============================================================
   GIAN · Shared Design System  v2
   15 languages · RTL · Responsive
   ============================================================ */

/* 1. Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* 2. Design Tokens */
:root {
  --bg:  #F9F8F5;
  --ink: #111111;
  --mu:  #777773;
  --mu2: #BDBDB7;
  --bd:  #E2E2DA;

  --font-en:  "Iowan Old Style", "Apple Garamond", "Baskerville", "Times New Roman", "Droid Serif", Times, "Source Serif Pro", serif;
  --font-zh:  "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", "SimSun", "STSong", serif;
  --font-ja:  "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", "MS Mincho", serif;
  --font-ko:  "Noto Serif KR", "Batang", "Malgun Gothic", serif;
  --font-hi:  "Noto Serif Devanagari", "Mangal", serif;
  --font-bn:  "Noto Serif Bengali", "Vrinda", serif;
  --font-ar:  "Noto Naskh Arabic", "Amiri", "Scheherazade New", serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1.125rem;
  --text-lg:   1.333rem;
  --text-xl:   1.777rem;
  --text-2xl:  2.369rem;
  --text-hero: clamp(3.15rem, 8vw, 4.209rem);

  --space-sm:  1rem;
  --space-md:  2.5rem;
  --space-lg:  6rem;
  --space-xl:  10rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:  #111110;
    --ink: #EBEBE6;
    --mu:  #888884;
    --mu2: #444442;
    --bd:  #252523;
  }
}

/* 3. Base */
html {
  background: var(--bg);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-size: var(--text-base);
  line-height: 1.8;
  padding-inline: max(0px, env(safe-area-inset-left)) max(0px, env(safe-area-inset-right));
  padding-block-end: var(--space-lg);
  max-width: 48rem;
  margin: 0 auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

*:focus-visible {
  outline: 1px solid var(--mu);
  outline-offset: 4px;
  border-radius: 2px;
}

/* 4. Nav */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  border-block-end: 1px solid var(--bd);
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.1em;
  transition: opacity 0.3s ease;
}
.nav-brand:hover { opacity: 0.6; }
.nav-brand img { width: 1.5rem; height: 1.5rem; display: block; }

/* Back-to-portal link */
.nav-home {
  font-size: var(--text-xs);
  font-family: var(--font-en);
  color: var(--mu);
  text-decoration: none;
  letter-spacing: 0.06em;
  transition: color 0.3s ease;
  white-space: nowrap;
}
.nav-home:hover { color: var(--ink); }

/* RTL nav swap */
[dir="rtl"] .nav { flex-direction: row-reverse; }

/* 5. Hero */
.hero {
  padding-block: var(--space-xl) var(--space-lg);
  text-align: center;
}
.hero-logo img {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1.5rem;
  display: block;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
.hero-logo:hover img { opacity: 1; }

.wordmark {
  font-size: var(--text-hero);
  font-weight: 500;
  letter-spacing: 0.26em;
  line-height: 1;
  text-indent: 0.26em;
  margin-block-end: var(--space-md);
}

.tagline {
  font-size: var(--text-sm);
  color: var(--mu);
  letter-spacing: 0.08em;
}

/* 6. Sections */
.wrap { padding-inline: var(--space-md); }

.sec {
  border-block-start: 1px solid var(--bd);
  padding-block: var(--space-lg) var(--space-xl);
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.sec.is-visible { opacity: 1; transform: translateY(0); }

.ql {
  font-size: var(--text-xs);
  color: var(--mu2);
  margin-block-end: var(--space-md);
  letter-spacing: 0.08em;
}

h2 {
  margin-block-end: var(--space-md);
  text-wrap: balance;
  font-weight: 500;
}

p {
  margin-block-end: var(--space-sm);
  color: var(--mu);
  text-wrap: pretty;
}
p:last-of-type { margin-block-end: 0; }

/* 7. Social links */
.socials {
  display: flex;
  gap: 2rem;
  margin-block-start: var(--space-md);
  flex-wrap: wrap;
}
.socials a {
  font-size: var(--text-sm);
  font-family: var(--font-en);
  color: var(--mu);
  text-decoration: none;
  letter-spacing: 0.06em;
  transition: color 0.3s ease;
}
.socials a:hover { color: var(--ink); }

/* 8. Footer — full-width rule matching nav, outside .wrap */
.footer {
  border-block-start: 1px solid var(--bd);
  padding-block: var(--space-md);
  padding-inline: var(--space-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.1em;
  transition: opacity 0.3s ease;
}
.footer-brand:hover { opacity: 0.6; }
.footer-brand img { width: 1.25rem; height: 1.25rem; display: block; }
.footer-copy {
  font-size: var(--text-xs);
  color: var(--mu2);
  font-family: var(--font-en);
  letter-spacing: 0.05em;
}


/* ============================================================
   Language-specific typography
   ============================================================ */

/* English */
.lang-en .nav-brand    { font-family: var(--font-en); letter-spacing: 0.22em; }
.lang-en .wordmark     { font-family: var(--font-en); }
.lang-en .tagline      { font-family: var(--font-en); letter-spacing: 0.18em; text-transform: uppercase; }
.lang-en .ql           { font-family: var(--font-en); letter-spacing: 0.12em; text-transform: uppercase; }
.lang-en h2            { font-family: var(--font-en); font-size: var(--text-2xl); line-height: 1.2; font-style: italic; }
.lang-en p             { font-family: var(--font-en); font-size: var(--text-lg); }
.lang-en .footer-brand { font-family: var(--font-en); letter-spacing: 0.2em; }

/* Chinese */
.lang-zh .nav-brand    { font-family: var(--font-zh); letter-spacing: 0.1em; }
.lang-zh .wordmark     { font-family: var(--font-zh); letter-spacing: 0.08em; text-indent: 0.08em; }
.lang-zh .tagline      { font-family: var(--font-zh); letter-spacing: 0.06em; }
.lang-zh .ql           { font-family: var(--font-zh); font-size: var(--text-sm); letter-spacing: 0.04em; }
.lang-zh h2            { font-family: var(--font-zh); font-size: var(--text-xl); line-height: 1.4; }
.lang-zh p             { font-family: var(--font-zh); font-size: var(--text-base); }
.lang-zh .footer-brand { font-family: var(--font-zh); letter-spacing: 0.1em; }

/* Japanese */
.lang-ja .nav-brand    { font-family: var(--font-ja); letter-spacing: 0.1em; }
.lang-ja .wordmark     { font-family: var(--font-ja); letter-spacing: 0.08em; text-indent: 0.08em; }
.lang-ja .tagline      { font-family: var(--font-ja); letter-spacing: 0.06em; }
.lang-ja .ql           { font-family: var(--font-ja); font-size: var(--text-sm); }
.lang-ja h2            { font-family: var(--font-ja); font-size: var(--text-xl); line-height: 1.5; }
.lang-ja p             { font-family: var(--font-ja); font-size: var(--text-base); }
.lang-ja .footer-brand { font-family: var(--font-ja); letter-spacing: 0.1em; }

/* Korean */
.lang-ko .nav-brand    { font-family: var(--font-ko); }
.lang-ko .wordmark     { font-family: var(--font-ko); letter-spacing: 0.04em; text-indent: 0.04em; }
.lang-ko .tagline      { font-family: var(--font-ko); }
.lang-ko .ql           { font-family: var(--font-ko); font-size: var(--text-sm); }
.lang-ko h2            { font-family: var(--font-ko); font-size: var(--text-xl); line-height: 1.4; }
.lang-ko p             { font-family: var(--font-ko); font-size: var(--text-base); }
.lang-ko .footer-brand { font-family: var(--font-ko); }

/* Hindi (Devanagari) */
.lang-hi body          { line-height: 2; }
.lang-hi .nav-brand    { font-family: var(--font-hi); }
.lang-hi .wordmark     { font-family: var(--font-en); }  /* GIAN stays roman */
.lang-hi .tagline      { font-family: var(--font-hi); letter-spacing: 0.04em; }
.lang-hi .ql           { font-family: var(--font-hi); font-size: var(--text-sm); }
.lang-hi h2            { font-family: var(--font-hi); font-size: var(--text-xl); line-height: 1.5; }
.lang-hi p             { font-family: var(--font-hi); font-size: var(--text-base); }
.lang-hi .footer-brand { font-family: var(--font-en); }

/* Bengali */
.lang-bn body          { line-height: 2; }
.lang-bn .nav-brand    { font-family: var(--font-bn); }
.lang-bn .wordmark     { font-family: var(--font-en); }
.lang-bn .tagline      { font-family: var(--font-bn); }
.lang-bn .ql           { font-family: var(--font-bn); font-size: var(--text-sm); }
.lang-bn h2            { font-family: var(--font-bn); font-size: var(--text-xl); line-height: 1.5; }
.lang-bn p             { font-family: var(--font-bn); font-size: var(--text-base); }
.lang-bn .footer-brand { font-family: var(--font-en); }

/* Arabic — RTL */
.lang-ar               { direction: rtl; text-align: right; }
.lang-ar body          { line-height: 2; }
.lang-ar .nav-brand    { font-family: var(--font-ar); flex-direction: row-reverse; }
.lang-ar .wordmark     { font-family: var(--font-en); direction: ltr; } /* GIAN stays LTR */
.lang-ar .tagline      { font-family: var(--font-ar); }
.lang-ar .ql           { font-family: var(--font-ar); font-size: var(--text-sm); }
.lang-ar h2            { font-family: var(--font-ar); font-size: var(--text-xl); line-height: 1.6; }
.lang-ar p             { font-family: var(--font-ar); font-size: var(--text-base); }
.lang-ar .footer-brand { font-family: var(--font-en); direction: ltr; }
.lang-ar .socials      { justify-content: flex-end; }

/* Spanish */
.lang-es .nav-brand    { font-family: var(--font-en); letter-spacing: 0.22em; }
.lang-es .wordmark     { font-family: var(--font-en); }
.lang-es .tagline      { font-family: var(--font-en); }
.lang-es .ql           { font-family: var(--font-en); letter-spacing: 0.1em; }
.lang-es h2            { font-family: var(--font-en); font-size: var(--text-2xl); line-height: 1.2; font-style: italic; }
.lang-es p             { font-family: var(--font-en); font-size: var(--text-lg); }
.lang-es .footer-brand { font-family: var(--font-en); letter-spacing: 0.2em; }

/* Portuguese */
.lang-pt .nav-brand    { font-family: var(--font-en); letter-spacing: 0.22em; }
.lang-pt .wordmark     { font-family: var(--font-en); }
.lang-pt .tagline      { font-family: var(--font-en); }
.lang-pt .ql           { font-family: var(--font-en); letter-spacing: 0.1em; }
.lang-pt h2            { font-family: var(--font-en); font-size: var(--text-2xl); line-height: 1.2; font-style: italic; }
.lang-pt p             { font-family: var(--font-en); font-size: var(--text-lg); }
.lang-pt .footer-brand { font-family: var(--font-en); letter-spacing: 0.2em; }

/* Russian */
.lang-ru .nav-brand    { font-family: var(--font-en); letter-spacing: 0.1em; }
.lang-ru .wordmark     { font-family: var(--font-en); }
.lang-ru .tagline      { letter-spacing: 0.04em; }
.lang-ru .ql           { letter-spacing: 0.06em; }
.lang-ru h2            { font-family: var(--font-en); font-size: var(--text-xl); line-height: 1.3; }
.lang-ru p             { font-size: var(--text-base); }
.lang-ru .footer-brand { font-family: var(--font-en); letter-spacing: 0.2em; }

/* German */
.lang-de .nav-brand    { font-family: var(--font-en); letter-spacing: 0.22em; }
.lang-de .wordmark     { font-family: var(--font-en); }
.lang-de .tagline      { font-family: var(--font-en); }
.lang-de .ql           { font-family: var(--font-en); letter-spacing: 0.1em; }
.lang-de h2            { font-family: var(--font-en); font-size: var(--text-2xl); line-height: 1.2; font-style: italic; }
.lang-de p             { font-family: var(--font-en); font-size: var(--text-lg); }
.lang-de .footer-brand { font-family: var(--font-en); letter-spacing: 0.2em; }

/* French */
.lang-fr .nav-brand    { font-family: var(--font-en); letter-spacing: 0.22em; }
.lang-fr .wordmark     { font-family: var(--font-en); }
.lang-fr .tagline      { font-family: var(--font-en); }
.lang-fr .ql           { font-family: var(--font-en); letter-spacing: 0.1em; }
.lang-fr h2            { font-family: var(--font-en); font-size: var(--text-2xl); line-height: 1.2; font-style: italic; }
.lang-fr p             { font-family: var(--font-en); font-size: var(--text-lg); }
.lang-fr .footer-brand { font-family: var(--font-en); letter-spacing: 0.2em; }

/* Indonesian */
.lang-id .nav-brand    { font-family: var(--font-en); letter-spacing: 0.22em; }
.lang-id .wordmark     { font-family: var(--font-en); }
.lang-id .tagline      { font-family: var(--font-en); }
.lang-id .ql           { font-family: var(--font-en); letter-spacing: 0.1em; }
.lang-id h2            { font-family: var(--font-en); font-size: var(--text-2xl); line-height: 1.2; font-style: italic; }
.lang-id p             { font-family: var(--font-en); font-size: var(--text-lg); }
.lang-id .footer-brand { font-family: var(--font-en); letter-spacing: 0.2em; }

/* Vietnamese */
.lang-vi .nav-brand    { font-family: var(--font-en); letter-spacing: 0.22em; }
.lang-vi .wordmark     { font-family: var(--font-en); }
.lang-vi .tagline      { font-family: var(--font-en); }
.lang-vi .ql           { font-family: var(--font-en); letter-spacing: 0.1em; }
.lang-vi h2            { font-family: var(--font-en); font-size: var(--text-xl); line-height: 1.4; }
.lang-vi p             { font-family: var(--font-en); font-size: var(--text-lg); }
.lang-vi .footer-brand { font-family: var(--font-en); letter-spacing: 0.2em; }

/* Swahili */
.lang-sw .nav-brand    { font-family: var(--font-en); letter-spacing: 0.22em; }
.lang-sw .wordmark     { font-family: var(--font-en); }
.lang-sw .tagline      { font-family: var(--font-en); }
.lang-sw .ql           { font-family: var(--font-en); letter-spacing: 0.1em; }
.lang-sw h2            { font-family: var(--font-en); font-size: var(--text-2xl); line-height: 1.2; font-style: italic; }
.lang-sw p             { font-family: var(--font-en); font-size: var(--text-lg); }
.lang-sw .footer-brand { font-family: var(--font-en); letter-spacing: 0.2em; }


/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 600px) {
  :root {
    --text-base: 1.0625rem;
    --space-md: 1.75rem;
    --space-lg: 4rem;
    --space-xl: 6rem;
  }
  .nav, .wrap, .footer {
    padding-inline: max(1.5rem, env(safe-area-inset-left))
                    max(1.5rem, env(safe-area-inset-right));
  }
  .hero { padding-block: var(--space-xl) var(--space-lg); }
  .socials { justify-content: center; }
  .footer { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .sec { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}