/* The Crowned Stage: general fundraising page.
   Token values are from design-system spec v1.0 (Phase 2); jewel tints are
   hex literals and the tint token is --jewel-tint (D-042). */

/* ---------- Fonts (self-hosted, SIL OFL 1.1; see /fonts/README.md) ---------- */

@font-face {
  font-family: "Playfair Display";
  src: url("/fonts/PlayfairDisplay-wght.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("/fonts/PlayfairDisplay-Italic-wght.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-opsz-wght-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playball";
  src: url("/fonts/Playball-Regular-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallbacks to limit layout shift while the fonts load. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 105.21%;
  ascent-override: 92.08%;
  descent-override: 22.93%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Playfair Fallback";
  src: local("Times New Roman"), local("Liberation Serif"), local("Times");
  size-adjust: 107.86%;
  ascent-override: 100.32%;
  descent-override: 23.27%;
  line-gap-override: 0%;
}

/* ---------- Tokens ---------- */

:root {
  --color-bg: #0e0d0c;
  --color-surface: #1c1a18;
  --color-surface-raised: #262320;
  --color-text: #efe6d6;
  --color-text-muted: #b9ae9c;
  --color-gold: #e9c46a;
  --color-gold-hover: #f2d58a;
  --color-gold-active: #d8b158;
  --color-on-gold: #0e0d0c;
  --color-border-ui: #8a7f6e;
  --color-border-deco: #3a332a;
  --color-focus: #efe6d6;
  --color-error: #ff8f85;
  --color-success: #9fd6ad;
  --color-disabled: #7d7363;
  --gold-foil: linear-gradient(180deg, #fff1c6 0%, #f0cf7a 38%, #c8952f 72%, #f3d787 100%);

  --font-display: "Playfair Display", "Playfair Fallback", Georgia, serif;
  --font-body: "Inter", "Inter Fallback", system-ui, sans-serif;
  --font-name: "Playball", Georgia, serif;

  --type-wordmark: clamp(2.75rem, 2rem + 5vw, 5rem);
  --type-display: clamp(2.5rem, 1.6rem + 4.5vw, 4.5rem);
  --type-h2: clamp(1.75rem, 1.4rem + 1.75vw, 2.5rem);
  --type-body: 1.125rem;
  --type-small: 1rem;
  --type-label: 0.875rem;
  --type-button: 1.0625rem;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --gutter: 16px;
  --section-pad: var(--space-8);
  --content-max: 72rem;
  --header-h: 64px;
  --radius: 2px;
}

[data-jewel="violet"] {
  --jewel: #a259ff;
  --jewel-deep: #4a0f8a;
  --jewel-tint: #2c2234;
  --jewel-glow-max: 0.35;
  /* rgba forms of --jewel and --jewel-deep for the generated glow */
  --jewel-glow: rgba(162, 89, 255, 0.35);
  --jewel-deep-glow: rgba(74, 15, 138, 0.22);
}

@media (min-width: 37.5rem) {
  :root { --gutter: 24px; }
}
@media (min-width: 64rem) {
  :root { --gutter: 32px; --section-pad: var(--space-9); }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: 1.6;
  font-optical-sizing: auto;
}

p { margin: 0; }
img, svg { display: block; max-width: 100%; }

a { color: var(--color-gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-gold-hover); text-decoration-thickness: 2px; }
a:active { color: var(--color-gold-active); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
main:focus { outline: none; }

.container {
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.label {
  font-size: var(--type-label);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--type-h2);
  line-height: 1.15;
  text-wrap: balance;
}
.small { font-size: var(--type-small); line-height: 1.5; }
.muted { color: var(--color-text-muted); }

.hairline { height: 1px; background: var(--color-border-deco); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--radius);
  font: 500 var(--type-button)/1 var(--font-body);
  text-decoration: none;
  text-align: center;
}
.btn--primary { background: var(--color-gold); color: var(--color-on-gold); }
.btn--primary:hover { background: var(--color-gold-hover); color: var(--color-on-gold); }
.btn--primary:active { background: var(--color-gold-active); color: var(--color-on-gold); }
.btn--sm { min-height: 40px; padding: 0 var(--space-4); font-size: 0.9375rem; }

/* ---------- Skip link ---------- */

.skip-link {
  position: absolute;
  z-index: 10;
  left: var(--space-4);
  top: var(--space-2);
  transform: translateY(-200%);
  padding: var(--space-3) var(--space-4);
  background: var(--color-gold);
  color: var(--color-on-gold);
  border-radius: var(--radius);
  font-weight: 500;
  text-decoration: none;
}
.skip-link:focus { transform: none; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  min-height: var(--header-h);
  background: rgba(14, 13, 12, 0.94);
  border-bottom: 1px solid var(--color-border-deco);
}
.site-header__inner {
  min-height: var(--header-h);
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.site-header__name {
  font-family: var(--font-name);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-gold);
  text-decoration: none;
  min-width: 0;
  overflow-wrap: anywhere;
  padding-block: var(--space-2);
}
.site-header .btn { flex: none; }
.site-header__name:hover { color: var(--color-gold-hover); }

/* ---------- Hero (spectacle zone) ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: 40px var(--space-8);
}
.hero__inner {
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  position: relative;
  z-index: 1;
}
.crown { color: var(--color-gold); }
.crown__gem { fill: var(--jewel, currentColor); }
.crown--hero { width: 96px; height: 64px; margin-top: var(--space-2); }

.wordmark {
  margin: var(--space-1) 0 0;
  font-family: var(--font-name);
  font-weight: 400;
  font-size: var(--type-wordmark);
  line-height: 1.1;
}
.wordmark__shimmer { display: none; }
.wordmark__text {
  position: relative;
  display: inline-block;
  background: var(--gold-foil);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* keep descenders inside the clipped background */
  padding-bottom: 0.08em;
}
/* High-contrast / forced colours: show plain text instead of clipped foil. */
@media (forced-colors: active) {
  .wordmark__text { background: none; color: CanvasText; }
  .wordmark__shimmer { display: none; }
}

.hero__rule { width: 160px; height: 1px; background: var(--color-gold); opacity: 0.6; }
.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.08em;
}

.hero__portrait {
  position: relative;
  margin-top: var(--space-4);
  width: 240px;
}
.hero__glow {
  position: absolute;
  left: 50%;
  top: 30%;
  width: 520px;
  height: 520px;
  margin-left: -260px;
  margin-top: -260px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--jewel-glow), var(--jewel-deep-glow) 55%, rgba(14, 13, 12, 0) 100%);
  pointer-events: none;
}
.hero__floor { display: none; }
.hero__img {
  position: relative;
  width: 240px;
  height: 300px;
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
}

/* On phones the call to action sits on a solid base below the glow. */
.hero__call {
  position: relative;
  z-index: 1;
  align-self: stretch;
  margin-inline: calc(-1 * var(--gutter));
  padding: var(--space-5) var(--gutter) 0;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.hero__display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-display);
  line-height: 1.05;
  color: var(--color-gold);
  text-wrap: balance;
}
.hero__lede { max-width: 34em; }
.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
}
.btn--block-phone { width: 100%; max-width: 358px; }
.hero__facts { margin-top: var(--space-2); font-size: var(--type-small); line-height: 1.5; color: var(--color-text-muted); }

/* ---------- The run (content zone) ---------- */

.run { padding-block: var(--section-pad); }
.crown-divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.crown-divider span { flex: 1; height: 1px; background: var(--color-border-deco); }
.crown--small { width: 42px; height: 28px; flex: none; }
.run__head .label { margin-bottom: var(--space-3); }
.run__head { margin-bottom: var(--space-5); }
.run__body { display: flex; flex-direction: column; gap: var(--space-4); max-width: 34em; }
.run__closing {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.35;
  color: var(--color-gold);
}

/* ---------- Giving (calm zone: untinted, no ornament, no motion) ---------- */

.giving {
  padding-block: var(--section-pad);
  background: var(--color-surface);
  border-block: 1px solid var(--color-border-deco);
}
.giving__grid { display: flex; flex-direction: column; }
.giving__text .h2 { margin-bottom: var(--space-5); }
.giving__text > p { margin-bottom: var(--space-4); }
.cover-tiles {
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}
.cover-tiles li {
  padding: var(--space-4);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-deco);
  border-radius: var(--radius);
  overflow-wrap: anywhere;
}
.giving__form { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }

.donor-box {
  position: relative;
  max-width: 100%;
}
.donor-box iframe {
  display: block;
  max-width: 100%;
  border: 0;
}
.donor-box__status {
  padding: var(--space-4);
  border: 1px solid var(--color-border-deco);
  border-radius: var(--radius);
  background: var(--color-surface-raised);
  font-size: var(--type-small);
  line-height: 1.5;
}
.donor-box[data-state="ready"] .donor-box__status { display: none; }
.donor-box[data-state="failed"] .donor-box__status,
.donor-box[data-state="slow"] .donor-box__status { color: var(--color-text); }
/* A frame that never reported in is collapsed so the fallback stays close.
   If it loads later, the "ready" state brings it back. SpotFund sets inline
   display on the frame and an inline height on its wrapper, hence !important. */
.donor-box[data-state="failed"] > div:has(> iframe),
.donor-box[data-state="slow"] > div:has(> iframe),
.donor-box[data-state="failed"] iframe,
.donor-box[data-state="slow"] iframe { display: none !important; }
#support:focus { outline: none; }
.donor-box__noscript {
  padding: var(--space-4);
  border: 1px solid var(--color-border-deco);
  background: var(--color-surface-raised);
  font-size: var(--type-small);
  line-height: 1.5;
}
.giving__fallback a { display: inline-block; padding-block: 10px; }

.giving__note { margin-top: var(--space-6); }
.giving__note .hairline { margin-bottom: var(--space-5); }
.giving__note p { font-size: var(--type-small); line-height: 1.5; color: var(--color-text-muted); }
.giving__note--wide { display: none; }

/* ---------- Footer (quiet zone) ---------- */

.site-footer {
  padding-block: var(--space-7) var(--space-8);
  color: var(--color-text-muted);
  font-size: var(--type-small);
  line-height: 1.5;
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
}
.site-footer__mark { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.crown--footer { width: 30px; height: 20px; }
.site-footer__name { font-family: var(--font-name); font-size: 1.25rem; color: var(--color-gold); }
.site-footer__text { display: flex; flex-direction: column; gap: var(--space-4); max-width: 34em; }
.site-footer__copy { font-size: var(--type-label); }

/* ---------- Wide layout (64rem and up) ---------- */

@media (min-width: 64rem) {
  .hero { padding-block: var(--space-8) var(--space-9); }
  .hero__inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto;
    column-gap: var(--gutter);
    align-items: end;
    text-align: left;
  }
  .hero__portrait {
    grid-column: 1 / span 6;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: center;
    width: 236px;
    height: 760px;
    margin-top: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  .hero__glow { top: 360px; width: 640px; height: 640px; margin-left: -320px; margin-top: -320px; }
  .hero__floor {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 8px;
    width: 360px;
    height: 28px;
    margin-left: -180px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(233, 196, 106, 0.25), rgba(14, 13, 12, 0));
  }
  .hero__img {
    width: 236px;
    height: 720px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero__lockup { grid-column: 7 / span 6; grid-row: 1; align-items: flex-start; gap: var(--space-4); }
  .crown--hero { width: 120px; height: 80px; margin-top: 0; }
  .hero__rule { width: 240px; }
  .hero__title { font-size: 1.375rem; }
  .hero__call {
    grid-column: 7 / span 6;
    grid-row: 2;
    align-self: start;
    align-items: flex-start;
    margin: var(--space-6) 0 0;
    padding: 0;
    background: none;
  }
  .hero__actions { flex-direction: row; align-items: center; gap: var(--space-6); margin-top: var(--space-2); }
  .btn--block-phone { width: auto; }
  .hero__facts { margin-top: 0; }

  .run__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .run__head { grid-column: 1 / span 5; margin-bottom: 0; }
  .run__body { grid-column: 6 / span 7; }
  .run__closing { font-size: 1.5rem; }

  .giving__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .giving__text { grid-column: 1 / span 6; }
  .cover-tiles { gap: var(--space-4); }
  .giving__form { grid-column: 8 / span 5; }
  .giving__note--wide { display: block; margin-top: var(--space-2); }
  .giving__note--phone { display: none; }

  .site-footer { padding-block: var(--space-8) 80px; }
  .site-footer__inner { flex-direction: row; align-items: flex-start; justify-content: space-between; text-align: left; gap: var(--space-7); }
  .site-footer__mark { flex-direction: row; gap: var(--space-3); align-items: center; }
  .site-footer__name { font-size: 1.375rem; }
  .site-footer__text { gap: var(--space-2); max-width: 36em; }
}

/* ---------- Hero motion: ends within 5 s, then holds still (D-029) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .hero__glow { animation: glow-breathe 2.4s ease-in-out 0.2s 2 alternate both; }
  .wordmark__shimmer {
    display: block;
    position: absolute;
    inset: 0 0 auto 0;
    padding-bottom: 0.08em;
    background: linear-gradient(100deg, transparent 35%, rgba(255, 249, 230, 0.85) 50%, transparent 65%) no-repeat;
    background-size: 250% 100%;
    background-position: 130% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    pointer-events: none;
    animation: wordmark-shimmer 1.6s ease-in-out 0.6s 1 both;
  }
}
@keyframes glow-breathe {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0.96; transform: scale(1.04); }
}
@keyframes wordmark-shimmer {
  from { background-position: 130% 0; opacity: 1; }
  90% { opacity: 1; }
  to { background-position: -30% 0; opacity: 0; }
}