/* Anthology of Light — landing page styles
   ------------------------------------------------------------------
   Warm, editorial, calm. One hero section with a soft light glow.
   Plain CSS (no build step) so it works with the default GitHub Pages
   Jekyll pipeline. */

:root {
  --paper:      #faf5ec;  /* warm cream background           */
  --paper-deep: #f1e8d6;  /* slightly deeper cream for glow  */
  --ink:        #2c2823;  /* deep warm near-black for text   */
  --ink-soft:   #5b5346;  /* muted warm grey for body copy   */
  --gold:       #b98a3e;  /* soft amber accent — "light"     */

  --measure: 38rem;       /* comfortable reading width       */
}

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

html {
  -webkit-text-size-adjust: 100%;
  /* Canvas color behind the page — a deeper cream/gold that peeks through in
     the elastic overscroll gutter when you rubber-band past the top. */
  background-color: #e8d6ac;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Hero layout ------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding: clamp(1.5rem, 4vw, 3rem);
  overflow-x: clip;
}

/* Lockup: logo mark + wordmark, with the radial "light" centered behind it. */
.lockup {
  position: relative;
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
}

.hero__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(150vw, 1040px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle at center,
    #fffdf6 0%,
    #f3e5c9 38%,
    rgba(241, 232, 214, 0) 72%
  );
  z-index: -1;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* No align-items:center — children stretch to full width (flex default) and
     wrap; the text itself is centered via text-align, which avoids the
     max-content overflow that align-items:center causes on narrow screens. */
  text-align: center;
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-block: 4rem;
}

/* ---- Logo + wordmark --------------------------------------------- */

.hero__logo {
  display: block;
  width: auto;
  height: clamp(48px, 6vw, 62px);
  margin: 0 auto clamp(0.5rem, 1.25vw, 0.7rem);
}

.wordmark {
  display: block;
  width: clamp(140px, 18vw, 176px);
  height: auto;
  margin: 0 auto;
}

/* ---- Mission statement ------------------------------------------- */

.hero__statement {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 300;
  font-size: clamp(1.75rem, 1.05rem + 3vw, 3.75rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.hero__statement span {
  display: block;
  margin-top: 0.35em;
  color: var(--gold);
  font-style: italic;
  font-weight: 400;
}

.hero__body {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  max-width: 34rem;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.hero__coda {
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  color: var(--ink);
}

/* ---- Modalities --------------------------------------------------- */

.modalities {
  padding: clamp(3.5rem, 9vw, 6.5rem) clamp(1.5rem, 4vw, 3rem);
}

.modalities__inner {
  max-width: 56rem;
  margin-inline: auto;
  text-align: center;
}

.modalities__kicker {
  margin: 0 0 0.75rem;
  font-family: "Fraunces", Georgia, serif;
  font-size: 0.9rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
}

.modalities__lede {
  margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 300;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  color: var(--ink);
}

.modalities__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Flex + centered wrapping so five items lay out 3-over-2 with the bottom
     row centered under the top row. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(2.25rem, 4vw, 3rem) clamp(2rem, 4vw, 3.5rem);
}

.modality {
  flex: 0 1 14rem;
}

.modality__icon {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto 1rem;
  color: var(--gold);
}

.modality__name {
  margin: 0 0 0.4rem;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--ink);
}

.modality__desc {
  margin: 0 auto;
  max-width: 18rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.55;
}

.modalities__note {
  margin: clamp(2.75rem, 5vw, 3.75rem) 0 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.modalities__note a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.modalities__note a:hover {
  text-decoration-thickness: 2px;
}

/* ---- Footer ------------------------------------------------------ */

.site-footer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.site-footer__links {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.site-footer a {
  color: var(--ink-soft);
  text-decoration: none;
  opacity: 0.9;
}

.site-footer a:hover {
  color: var(--gold);
}

.site-footer__dot { opacity: 0.5; }

.site-footer__copy {
  margin: 0;
  opacity: 0.65;
}

/* ---- Legal / content pages --------------------------------------- */

.page {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  max-width: 44rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 3rem);
}

.page__top {
  padding-block: 0.5rem 2.5rem;
  text-align: center;
}

.page__brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.page__mark { height: 38px; width: auto; }
.page__wordmark { width: 108px; height: auto; }

.page__body { flex: 1; }

.page__title {
  margin: 0 0 0.25rem;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.5rem);
  letter-spacing: -0.01em;
  color: var(--ink);
}

.page__meta {
  margin: 0 0 2.25rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.legal { color: var(--ink-soft); }

.legal h2 {
  margin: 2rem 0 0.5rem;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--ink);
}

.legal p { margin: 0 0 1rem; }
.legal a { color: var(--gold); }

.page .site-footer {
  margin-top: 3rem;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__inner > * {
    animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .lockup          { animation-delay: 0.05s; }
  .hero__statement { animation-delay: 0.15s; }
  .hero__body      { animation-delay: 0.30s; }
  .hero__coda      { animation-delay: 0.45s; }

  /* Slow, gentle breathing of the light behind the lockup. */
  .hero__glow {
    animation: haloPulse 8s ease-in-out infinite;
  }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(0.75rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes haloPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.82; }
  50%      { transform: translate(-50%, -50%) scale(1.32); opacity: 1; }
}