/* King's Daughters of Excellence — design tokens */
@import url('https://fonts.cdnfonts.com/css/glacial-indifference');
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

:root {
  /* Brand palette — sampled from the KDE brand-guideline swatches */
  --charcoal: #21261b;      /* deep charcoal-olive — grounding neutral */
  --charcoal-soft: #2e341f;
  --gold: #d3a02c;          /* mustard/gold accent */
  --gold-soft: #e8c46b;
  --plum: #5c1946;          /* deep plum/burgundy */
  --plum-soft: #7a2a60;
  --sage: #7f9575;          /* sage green */
  --sage-soft: #a3b697;
  --off-white: #f0efe9;     /* warm off-white, not pure white */
  --cream: #f7f6f1;

  --bg: var(--off-white);
  --surface: #ffffff;
  --ink: var(--charcoal);
  --ink-dim: #5b6152;
  --ink-faint: #8b9182;
  --border: rgba(33,38,27,0.12);

  --heading: 'Glacial Indifference', 'Poppins', ui-sans-serif, sans-serif;
  --body: 'Barlow', ui-sans-serif, system-ui, sans-serif;

  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 28px;

  --shadow-card: 0 1px 3px rgba(33,38,27,0.08), 0 8px 24px rgba(33,38,27,0.06);
  --shadow-pop: 0 16px 48px rgba(33,38,27,0.18);

  --max-content: 1440px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--ink);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-heading {
  font-family: var(--heading);
  color: var(--charcoal);
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.shell {
  width: 100%;
  max-width: var(--max-content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* fluid full-bleed section that still respects a comfortable reading measure on ultrawide */
.shell-wide {
  width: 100%;
  max-width: 1800px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--heading);
  font-weight: 700;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s ease, background 0.25s ease;
  cursor: pointer;
  border: none;
}
.btn-gold {
  background: var(--gold);
  color: var(--charcoal);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); background: var(--gold-soft); }
.btn-outline {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.55);
  color: inherit;
}
.btn-outline:hover { background: rgba(255,255,255,0.12); transform: translateY(-2px); }
.btn-lg {
  padding: clamp(0.95rem, 1.1vw, 1.35rem) clamp(1.9rem, 2.6vw, 3rem);
  font-size: clamp(0.98rem, 1.05vw, 1.2rem);
}
.bleed-title { font-family: var(--heading); font-weight: 700; font-size: clamp(2.3rem, 4.2vw, 4.25rem); line-height: 1.08; }

.crown-accent {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

/* scroll reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(.2,.8,.2,1), transform 0.8s cubic-bezier(.2,.8,.2,1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="scale"].is-visible { transform: scale(1); }

/* magnetic tilt card */
.tilt-card {
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

/* scroll progress bar */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--plum));
  z-index: 200;
  width: 0%;
  transition: width 0.1s linear;
}

.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--gold);
  margin-bottom: 1.25rem;
}
.section-divider::before, .section-divider::after {
  content: '';
  height: 1px;
  width: 40px;
  background: var(--gold);
  opacity: 0.5;
}

/* Event cards — shared component (Home preview + Events page) */
.events-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.event-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; }
.event-card-img { aspect-ratio: 4/3; overflow: hidden; position: relative; }
.event-card-img img { width: 100%; height: 100%; object-fit: cover; }
.event-date-badge {
  position: absolute; top: 1rem; left: 1rem; background: var(--off-white); color: var(--charcoal);
  font-family: var(--heading); font-weight: 700; border-radius: var(--radius-sm); padding: 0.4rem 0.7rem; font-size: 0.8rem;
}
@media (max-width: 900px) { .events-grid { grid-template-columns: 1fr; } }

/* Interior page header band — shared component used on every non-Home page */
.page-header { position: relative; min-height: 44vh; display: flex; align-items: center; overflow: hidden; background: var(--charcoal); }
.page-header-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.1); }
.page-header-scrim { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(33,38,27,0.55), rgba(92,25,70,0.75)); }
.page-header-content { position: relative; z-index: 2; color: var(--off-white); }
.page-header h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); color: var(--off-white); }

/* Full-bleed image bands — shared component used across pages */
.bleed {
  position: relative; width: 100%; overflow: hidden;
  min-height: 62vh; display: flex; align-items: center; justify-content: center;
  background: var(--charcoal);
}
.bleed-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transform: scale(1.1); will-change: transform;
}
.bleed-scrim-quote { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(33,38,27,0.55), rgba(92,25,70,0.72)); }
.bleed-scrim-give { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(92,25,70,0.88), rgba(33,38,27,0.75)); }
.bleed-content { position: relative; z-index: 2; color: var(--off-white); text-align: center; padding-inline: var(--gutter); max-width: 900px; }
.bleed-quote-mark { font-family: var(--heading); font-size: clamp(4rem, 10vw, 8rem); color: var(--gold); line-height: 0.5; opacity: 0.85; }
.bleed-quote-text { font-family: var(--heading); font-size: clamp(1.4rem, 3vw, 2.4rem); max-width: 24ch; margin-inline: auto; line-height: 1.3; }
.bleed-quote-attr { margin-top: 1.25rem; color: var(--gold-soft); font-family: var(--heading); font-weight: 700; letter-spacing: 0.04em; }
.give-amount-row { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2rem; }
.give-chip {
  background: rgba(240,239,233,0.1); border: 1px solid rgba(240,239,233,0.3); color: var(--off-white);
  padding: 0.6rem 1.4rem; border-radius: 999px; font-family: var(--heading); font-weight: 600; font-size: 0.95rem;
  transition: all 0.25s ease; cursor: default;
}
.give-chip:hover { background: var(--gold); color: var(--charcoal); border-color: var(--gold); transform: translateY(-2px); }
.btn-magnetic { transition: transform 0.15s ease-out, box-shadow 0.25s ease, background 0.25s ease; }

.eyebrow {
  font-family: var(--heading);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--gold);
}