/* ─────────────────────────────────────────────────────────────────────────────
   Gandhi-King Center for Nonviolence — shared site stylesheet.

   Design intent:
   - Quiet, dignified, NOT corporate. Reads like a memorial library, not a SaaS.
   - Warm cream background, charcoal ink, earthy gold accent (Gandhi flag
     saffron register). Forest green secondary nods to the King side.
   - Serif body (Crimson Pro) for readability and gravitas.
   - Display serif (Playfair Display) for hero typography.
   - Sans (Inter) only for nav, buttons, labels, and small-caps eyebrows.
   - Generous whitespace. No clutter. The Season for Nonviolence is the
     load-bearing surface; chrome stays out of its way.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --bg:          #faf6ec;   /* warm cream */
  --bg-soft:     #f1ebda;   /* slightly darker cream for cards / wells */
  --ink:         #1a1a18;   /* near-black charcoal for body text */
  --ink-soft:    #4a4842;   /* secondary text */
  --ink-muted:   #7a7770;   /* tertiary, captions */
  --gold:        #c9903a;   /* earthy saffron accent (Gandhi flag) */
  --gold-deep:   #a3742a;   /* hover/active state for gold */
  --forest:      #285c4d;   /* deep green, King memorial register */
  --rule:        rgba(184, 146, 42, 0.35); /* soft gold rule lines */
  --rule-soft:   rgba(26, 26, 24, 0.10);
  --max-w:       1180px;
  --max-w-read:  720px;     /* prose column for bios / posts */
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Crimson Pro', 'Georgia', 'Times New Roman', serif;
  font-size: 18px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--forest); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--gold-deep); }

h1, h2, h3, h4 {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 0.4em 0;
  letter-spacing: -0.005em;
}

h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.6rem); }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1em 0; }

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 28px;
}
.container--read {
  max-width: var(--max-w-read);
}

/* ─── Site header ─────────────────────────────────────────────── */
.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}
.site-header__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-logo {
  text-decoration: none;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.site-logo__mark {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.site-logo__tag {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.site-nav {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  align-items: center;
}
.site-nav a {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.site-nav a:hover,
.site-nav a.is-active {
  color: var(--gold-deep);
  border-bottom-color: var(--gold);
}
.site-nav .nav-donate {
  background: var(--gold);
  color: #fff;
  padding: 8px 16px;
  border: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
}
.site-nav .nav-donate:hover {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  color: #fff;
}

@media (max-width: 760px) {
  .site-header__inner { flex-direction: column; align-items: flex-start; }
  .site-nav { gap: 14px 18px; }
}

/* ─── Eyebrow + section title ─────────────────────────────────── */
.eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
  margin-bottom: 14px;
}

.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 2.6rem);
  margin-bottom: 0.5em;
}

/* ─── Composite hero image (homepage) ─────────────────────────── */
.composite-hero {
  background: var(--ink);
  padding: 0;
}
.composite-hero__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
  object-position: center;
}
.composite-hero__caption {
  background: var(--ink);
  color: rgba(250, 246, 236, 0.78);
  font-size: 0.88rem;
  font-style: italic;
  padding: 18px 0 22px;
  text-align: center;
  line-height: 1.55;
}
.composite-hero__caption .container { max-width: 760px; }

/* ─── Hero ────────────────────────────────────────────────────── */
.hero {
  padding: 80px 0 60px;
  border-bottom: 1px solid var(--rule);
}
.hero__title {
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  margin-bottom: 0.3em;
}
.hero__sub {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--ink-soft);
  max-width: 720px;
  margin-bottom: 28px;
}
.hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* ─── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 14px 24px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn--primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.btn--primary:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; }

.btn--gold {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}
.btn--gold:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: #fff; }

/* ─── Sections ────────────────────────────────────────────────── */
.section {
  padding: 70px 0;
}
.section--soft {
  background: var(--bg-soft);
}
.section--bordered {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* ─── Pillar grid (Education, Advocacy, Community Building, Outreach) ─ */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  margin-top: 40px;
}
.pillar-card {
  background: #fff;
  border: 1px solid var(--rule-soft);
  padding: 28px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s, transform 0.15s;
}
.pillar-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  color: var(--ink);
}
.pillar-card__num {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 12px;
}
.pillar-card__title {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  margin-bottom: 10px;
}
.pillar-card__desc {
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* ─── Board grid ──────────────────────────────────────────────── */
.board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 36px;
  margin-top: 50px;
}
.board-member {
  display: flex;
  flex-direction: column;
}
.board-member__photo {
  aspect-ratio: 4 / 5;
  background: var(--bg-soft);
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid var(--rule-soft);
}
.board-member__photo img {
  width: 100%; height: 100%; object-fit: cover;
}
.board-member__photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 3rem;
  color: var(--ink-muted);
}
.board-member__role {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 6px;
}
.board-member__name {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  margin-bottom: 12px;
}
.board-member__bio {
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.65;
}
.board-member__bio p { margin-bottom: 0.8em; }
.board-member__bio em {
  display: block;
  font-style: italic;
  color: var(--ink-soft);
  border-left: 2px solid var(--gold);
  padding: 4px 0 4px 14px;
  margin-top: 14px;
  font-size: 0.95em;
}

/* ─── Season for Nonviolence band ─────────────────────────────── */
.season {
  background: var(--ink);
  color: var(--bg);
  padding: 70px 0;
  text-align: center;
}
.season .eyebrow { color: var(--gold); }
.season__title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  color: #fff;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}
.season__sub {
  font-size: 1.15rem;
  color: rgba(250, 246, 236, 0.85);
  max-width: 620px;
  margin: 0 auto 28px;
}
.season__counter {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 8px;
}
.season .btn--gold { margin-top: 14px; }

/* ─── Quotes / pull text ──────────────────────────────────────── */
.pull-quote {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  line-height: 1.4;
  color: var(--ink);
  border-left: 3px solid var(--gold);
  padding: 6px 0 6px 24px;
  margin: 40px 0;
}
.pull-quote cite {
  display: block;
  margin-top: 14px;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ─── Event card (for upcoming engagements) ───────────────────── */
.event-card {
  background: #fff;
  border: 1px solid var(--rule-soft);
  padding: 26px 28px;
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  align-items: start;
}
.event-card__date {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
}
.event-card__title {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  margin-bottom: 8px;
}
.event-card__where {
  font-size: 0.9rem;
  color: var(--ink-muted);
  margin-bottom: 12px;
}
.event-card__desc {
  font-size: 1rem;
  color: var(--ink);
}
@media (max-width: 600px) {
  .event-card { grid-template-columns: 1fr; gap: 8px; }
}

/* ─── Donate page ─────────────────────────────────────────────── */
.donate-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
}
.donate-card {
  background: #fff;
  border: 1px solid var(--rule);
  padding: 32px;
}
.donate-card h3 { margin-bottom: 14px; }
.donate-tax {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
}
@media (max-width: 760px) {
  .donate-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ─── Footer ──────────────────────────────────────────────────── */
.site-footer {
  background: var(--ink);
  color: rgba(250, 246, 236, 0.78);
  padding: 50px 0 30px;
  margin-top: 80px;
  font-size: 0.92rem;
}
.site-footer a { color: var(--gold); }
.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 36px;
}
.site-footer h4 {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer__bottom {
  border-top: 1px solid rgba(250, 246, 236, 0.15);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.82rem;
  color: rgba(250, 246, 236, 0.55);
}
@media (max-width: 700px) {
  .site-footer__grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ─── Prose / blog post ───────────────────────────────────────── */
.prose {
  max-width: var(--max-w-read);
  margin: 0 auto;
}
.prose h2 { margin-top: 1.8em; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.4em; margin-bottom: 1em; }
.prose blockquote {
  border-left: 3px solid var(--gold);
  padding: 6px 0 6px 24px;
  margin: 24px 0;
  font-style: italic;
  color: var(--ink-soft);
}

/* ─── Archive page ────────────────────────────────────────────── */
.archive-legend {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin: 30px 0 40px;
  font-size: 0.9rem;
}
.archive-legend__item {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink-soft);
}
.archive-legend__dot {
  width: 12px; height: 12px; border-radius: 50%;
}
.archive-legend__dot--original    { background: var(--gold); }
.archive-legend__dot--period      { background: var(--forest); }
.archive-legend__dot--reproduction{ background: var(--ink-muted); }

.archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 36px;
  margin-top: 40px;
}
.archive-card {
  background: #fff;
  border: 1px solid var(--rule-soft);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.archive-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--bg-soft);
}
.archive-card__body {
  padding: 22px 24px 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.archive-card__category {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
}
.archive-card__category::before {
  content: '';
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
}
.archive-card__category--original    { color: var(--gold-deep); }
.archive-card__category--original::before    { background: var(--gold); }
.archive-card__category--period      { color: var(--forest); }
.archive-card__category--period::before      { background: var(--forest); }
.archive-card__category--reproduction{ color: var(--ink-muted); }
.archive-card__category--reproduction::before{ background: var(--ink-muted); }
.archive-card__date {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.archive-card__title {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  line-height: 1.25;
  margin-bottom: 12px;
  color: var(--ink);
}
.archive-card__desc {
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.6;
}

/* Featured exhibit row (Kings in India sub-exhibit teaser) */
.featured-exhibit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  padding: 32px;
  margin: 50px 0;
}
.featured-exhibit__img {
  aspect-ratio: 4 / 3;
  background: var(--ink);
  object-fit: cover;
  width: 100%;
}
@media (max-width: 760px) {
  .featured-exhibit { grid-template-columns: 1fr; }
}

/* Lending form */
.lend-form {
  max-width: 720px;
  margin: 50px auto 0;
  background: #fff;
  border: 1px solid var(--rule);
  padding: 36px;
}
.lend-form label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
  margin-bottom: 6px;
  margin-top: 18px;
}
.lend-form input[type="text"],
.lend-form input[type="email"],
.lend-form input[type="date"],
.lend-form textarea,
.lend-form select {
  width: 100%;
  font-family: 'Crimson Pro', serif;
  font-size: 1rem;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  background: #fff;
  color: var(--ink);
}
.lend-form textarea {
  min-height: 110px;
  resize: vertical;
}
.lend-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 600px) {
  .lend-form__row { grid-template-columns: 1fr; }
}
.lend-form__check {
  display: flex; align-items: flex-start; gap: 10px;
  font-family: 'Crimson Pro', serif;
  font-size: 0.95rem;
  margin-top: 18px;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}
.lend-form__check input[type="checkbox"] {
  margin-top: 6px;
  accent-color: var(--gold);
}
.lend-form button {
  margin-top: 28px;
}

/* ─── Portrait blink animation ─────────────────────────────────
   Two stacked images: an eyes-open base, an eyes-closed overlay
   that flashes for ~200ms every 8.4s. Same pattern as the ETL
   Newswire homepage blink. Used for the AI staff persona photos
   so they read as living agents at work, not static avatars.
   Respects prefers-reduced-motion. */
.portrait-blink {
  position: relative;
  overflow: hidden;
  background: var(--bg-soft);
  width: 100%;
  aspect-ratio: 4 / 5;
}
.portrait-blink img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.portrait-blink__closed {
  opacity: 0;
  animation: gk-portrait-blink 8.4s infinite;
}
@keyframes gk-portrait-blink {
  0%, 92%   { opacity: 0; }
  94%, 96%  { opacity: 1; }
  98%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .portrait-blink__closed { animation: none; opacity: 0; }
}

/* Hero portrait + bio side-by-side on persona pages */
.persona-hero {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: start;
}
.persona-hero .portrait-blink { aspect-ratio: 4 / 5; border: 1px solid var(--rule-soft); }
@media (max-width: 700px) {
  .persona-hero { grid-template-columns: 1fr; max-width: 360px; }
}

/* ─── Embedded video (YouTube / Vimeo) ───────────────────────── */
.video-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background: var(--ink);
  border: 1px solid var(--rule-soft);
  overflow: hidden;
  margin: 24px 0;
}
.video-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* ─── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}