/* ============================================================
   home-v2.css — preview stylesheet for /home-v2/
   All selectors scoped to body.home-v2 so the live site is untouched.
   Translates Dhun's liturgical composition into the existing
   aubergine/ochre/paper system, honoring the Chakana glyphs.
   ============================================================ */

/* ------------------------------------------------------------
   HERO — centered liturgical composition
   (overrides hero__content grid from main.css)
   ------------------------------------------------------------ */
.home-v2 .hero-v2 { min-height: 100svh; }

.home-v2 .hero-v2__content {
  position: relative;
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: clamp(var(--s-lg), 10vh, var(--s-2xl)) var(--s-md) var(--s-lg);
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
}

.home-v2 .hero-v2__block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-md);
  max-width: 48rem;
}

.home-v2 .hero-v2__eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--paper);
  opacity: 0.92;
  margin: 0;
  padding-left: 0.42em; /* offset tracking so it optically centers */
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}

.home-v2 .hero-v2__glyph {
  display: block;
  width: 34px;
  height: 34px;
  color: var(--ochre-light, #C49668);
  opacity: 0.92;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45));
}
.home-v2 .hero-v2__glyph svg { width: 100%; height: 100%; display: block; }

.home-v2 .hero-v2__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(3.5rem, 10.5vw, 9rem);
  line-height: 0.94;
  letter-spacing: -0.022em;
  color: var(--paper);
  margin: 0;
  text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}

.home-v2 .hero-v2__lede {
  max-width: 42ch;
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: rgba(240, 233, 218, 0.92);
  font-family: var(--font-body);
  margin: 0;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}

.home-v2 .hero-v2__cta {
  display: inline-flex;
  align-items: center;
  padding: 0.95rem 2rem;
  margin-top: var(--s-xs);
  font-family: var(--font-body);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--paper);
  text-decoration: none;
  background: rgba(240, 233, 218, 0.06);
  border: 1px solid rgba(240, 233, 218, 0.38);
  border-radius: 999px;
  backdrop-filter: blur(2px);
  opacity: 0;
  transform: translateY(14px);
  animation:
    cta-enter 1400ms var(--ease-out) 1100ms forwards,
    cta-breathe 4.2s ease-in-out 2700ms infinite;
  transition: background 420ms var(--ease),
              border-color 420ms var(--ease),
              color 420ms var(--ease),
              letter-spacing 520ms var(--ease),
              box-shadow 520ms var(--ease);
}
.home-v2 .hero-v2__cta:hover {
  background: rgba(240, 233, 218, 0.14);
  border-color: rgba(240, 233, 218, 0.82);
  color: var(--paper);
  letter-spacing: 0.38em;
  box-shadow: 0 0 0 6px rgba(240, 233, 218, 0.06);
  animation-play-state: running, paused;
}
.home-v2 .hero-v2__cta-arrow {
  display: inline-block;
  margin-left: 0.85rem;
  font-family: var(--font-body);
  letter-spacing: 0;
  transition: transform 420ms var(--ease);
}
.home-v2 .hero-v2__cta:hover .hero-v2__cta-arrow {
  transform: translateY(4px);
}

@keyframes cta-enter {
  0% {
    opacity: 0;
    transform: translateY(14px);
    letter-spacing: 0.24em;
  }
  60% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    letter-spacing: 0.32em;
  }
}

@keyframes cta-breathe {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(240, 233, 218, 0);
    border-color: rgba(240, 233, 218, 0.38);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(240, 233, 218, 0.055);
    border-color: rgba(240, 233, 218, 0.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-v2 .hero-v2__cta {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

@media (max-width: 720px) {
  /* Hero: tighter top space so title sits closer to the header, not floating in a big gap */
  .home-v2 .hero-v2 { min-height: 88svh; }
  .home-v2 .hero-v2__content {
    padding: var(--s-md) var(--s-md) var(--s-lg);
    min-height: 88svh;
    align-items: flex-start;
    padding-top: calc(var(--s-xl) + 2rem);
  }
  .home-v2 .hero-v2__block { gap: var(--s-sm); }
  .home-v2 .hero-v2__title { font-size: clamp(3rem, 15vw, 5rem); }
  .home-v2 .hero-v2__eyebrow { font-size: 0.72rem; letter-spacing: 0.32em; }
  .home-v2 .hero-v2__lede { font-size: 1.05rem; line-height: 1.55; max-width: 34ch; }
  .home-v2 .hero-v2__cta { padding: 0.9rem 1.5rem; letter-spacing: 0.26em; font-size: 0.78rem; }
  .home-v2 .hero-v2__glyph { width: 28px; height: 28px; }
}

/* ------------------------------------------------------------
   WELCOME — single editorial statement, centered
   ------------------------------------------------------------ */
.home-v2 .welcome-v2 { padding-block: var(--s-xl); }

.home-v2 .welcome-v2 .page-read {
  text-align: center;
  max-width: 46rem;
}

.home-v2 .welcome-v2__glyph {
  display: block;
  width: 38px;
  height: 38px;
  color: var(--ochre);
  margin: 0 auto var(--s-md);
  opacity: 0.85;
}
.home-v2 .welcome-v2__glyph svg { width: 100%; height: 100%; display: block; }

.home-v2 .welcome-v2__statement {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 auto var(--s-lg);
  max-width: 22ch;
  /* Offset for anchor-scroll so the title lands below the sticky header,
     not hidden behind it. Applied to the actual #welcome-heading target. */
  scroll-margin-top: 120px;
}

.home-v2 .welcome-v2__prose {
  max-width: 32rem;
  margin: 0 auto;
  text-align: left;
}
.home-v2 .welcome-v2__prose p {
  font-size: var(--fs-base);
  line-height: 1.78;
  color: var(--ink-soft);
  margin-bottom: var(--s-sm);
}
.home-v2 .welcome-v2__prose p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   SECTION CARDS — arched (chapel) tops
   ------------------------------------------------------------ */
.home-v2 .section-cards-v2-wrap {
  position: relative;
  background: var(--paper-deep);
  padding-block: var(--s-xl) calc(var(--s-xl) + 16px);
  margin-top: 80px;
  isolation: isolate;
}

/* Domed top edge — half-ellipse of paper-deep rising above the flat top.
   Bulges into the paper zone above, creating a cathedral-ceiling transition. */
.home-v2 .section-cards-v2-wrap::before {
  content: "";
  position: absolute;
  top: -80px;
  left: -6%;
  right: -6%;
  height: 160px;
  background: var(--paper-deep);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  z-index: -1;
  pointer-events: none;
}

.home-v2 .section-cards-v2__header {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto var(--s-xl);
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
}
.home-v2 .section-cards-v2__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2rem, 4.8vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
.home-v2 .section-cards-v2__lede {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

.home-v2 .section-cards-v2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-lg);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 720px) {
  .home-v2 .section-cards-v2 { grid-template-columns: repeat(2, 1fr); gap: var(--s-lg); }
}
@media (min-width: 1100px) {
  .home-v2 .section-cards-v2 { grid-template-columns: repeat(3, 1fr); gap: var(--s-md) var(--s-lg); }
}

.home-v2 .section-card-v2 {
  display: block;
  position: relative;
  list-style: none;
}

/* Full-card arched frame — anchor wraps everything so the whole card is clickable.
   border-radius with fixed vertical radius gives a chapel dome. */
.home-v2 .section-card-v2__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  text-decoration: none;
  color: var(--paper);
  border-top-left-radius: 50% 46%;
  border-top-right-radius: 50% 46%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 14px 30px -20px rgba(31,22,18,0.3);
  transition: box-shadow 600ms var(--ease),
              transform 600ms var(--ease-out);
  isolation: isolate;
}
.home-v2 .section-card-v2__frame:hover {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 26px 48px -22px rgba(46,26,40,0.45);
}

/* Photo layer — separate element so it can scale independently of the mask */
.home-v2 .section-card-v2__photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(0.85) contrast(1.05) brightness(0.72);
  transform: scale(1.02);
  transition: transform 1400ms var(--ease-out),
              filter 700ms var(--ease);
  z-index: 0;
}
.home-v2 .section-card-v2__frame:hover .section-card-v2__photo {
  transform: scale(1.08);
  filter: saturate(0.92) contrast(1.05) brightness(0.82);
}

/* Dark gradient scrim — ensures legibility of overlaid text */
.home-v2 .section-card-v2__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(20,14,12,0.28) 0%,
      rgba(20,14,12,0.40) 45%,
      rgba(46,26,40,0.88) 100%);
  z-index: 1;
  transition: opacity 600ms var(--ease);
}
.home-v2 .section-card-v2__frame:hover .section-card-v2__scrim {
  opacity: 0.9;
}

/* Content — sits at bottom, overlays photo */
.home-v2 .section-card-v2__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--s-lg) var(--s-md) var(--s-lg);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  z-index: 2;
  color: var(--paper);
  transform: translateY(0);
  transition: transform 700ms var(--ease-out);
}
.home-v2 .section-card-v2__frame:hover .section-card-v2__content {
  transform: translateY(-4px);
}

.home-v2 .section-card-v2__eyebrow {
  font-family: var(--font-body);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: rgba(240, 233, 218, 0.82);
  margin: 0;
  font-weight: 500;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.home-v2 .section-card-v2__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.85rem, 2.6vw, 2.35rem);
  line-height: 1.05;
  letter-spacing: -0.008em;
  color: var(--paper);
  margin: 0;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
  transition: letter-spacing 620ms var(--ease);
}
.home-v2 .section-card-v2__frame:hover .section-card-v2__title {
  letter-spacing: 0.006em;
}

.home-v2 .section-card-v2__text {
  font-family: var(--font-body);
  font-size: 0.93rem;
  line-height: 1.65;
  color: rgba(240, 233, 218, 0.85);
  margin: 0;
  max-width: 34ch;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
  /* Clip long bodies so cards stay uniform at this scale */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-v2 .section-card-v2__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: var(--s-xs);
  font-family: var(--font-body);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--ochre-light, #C49668);
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(196, 150, 104, 0.4);
  align-self: flex-start;
  transition: color 420ms var(--ease),
              border-color 420ms var(--ease),
              gap 420ms var(--ease);
}
.home-v2 .section-card-v2__arrow {
  display: inline-block;
  transition: transform 420ms var(--ease);
}
.home-v2 .section-card-v2__frame:hover .section-card-v2__cta {
  color: var(--paper);
  border-color: var(--paper);
  gap: 0.85rem;
}
.home-v2 .section-card-v2__frame:hover .section-card-v2__arrow {
  transform: translateX(3px);
}

/* Focus-visible for keyboard users */
.home-v2 .section-card-v2__frame:focus-visible {
  outline: 2px solid var(--ochre-light, #C49668);
  outline-offset: 4px;
}

@media (max-width: 720px) {
  /* Cards: square (was 3/4 — too tall). Less empty photo, content reads first. */
  .home-v2 .section-card-v2__frame { aspect-ratio: 1 / 1; }
  .home-v2 .section-card-v2__content {
    padding: var(--s-md) var(--s-md) var(--s-md);
    gap: 0.4rem;
  }
  /* Bump title for mobile readability */
  .home-v2 .section-card-v2__title { font-size: clamp(1.6rem, 6vw, 2rem); }
  .home-v2 .section-card-v2__text { font-size: 0.95rem; -webkit-line-clamp: 2; }
  /* Trim the scrim so photo isn't dominated by dark gradient */
  .home-v2 .section-card-v2__scrim {
    background:
      linear-gradient(180deg,
        rgba(20,14,12,0.2) 0%,
        rgba(20,14,12,0.4) 50%,
        rgba(46,26,40,0.82) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-v2 .section-card-v2__photo,
  .home-v2 .section-card-v2__content,
  .home-v2 .section-card-v2__title,
  .home-v2 .section-card-v2__cta,
  .home-v2 .section-card-v2__arrow { transition: none; }
  .home-v2 .section-card-v2__frame:hover .section-card-v2__photo { transform: scale(1.02); }
  .home-v2 .section-card-v2__frame:hover .section-card-v2__content { transform: none; }
}

/* ------------------------------------------------------------
   ALLIANCES — paper intro + aubergine arched panel
   ------------------------------------------------------------ */
.home-v2 .alliances-v2-wrap { padding-block: var(--s-xl) var(--s-md); }

.home-v2 .alliances-v2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-lg);
  align-items: stretch;
}
@media (min-width: 900px) {
  .home-v2 .alliances-v2 {
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--s-xl);
    align-items: start;
  }
}

.home-v2 .alliances-v2__intro {
  padding: var(--s-md) 0;
}
.home-v2 .alliances-v2__eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-weight: 600;
  color: var(--ochre-deep);
  margin: 0 0 var(--s-sm);
}
.home-v2 .alliances-v2__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 var(--s-md);
}
.home-v2 .alliances-v2__title em {
  font-style: italic;
  color: var(--aubergine);
}
.home-v2 .alliances-v2__lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 28ch;
  margin: 0;
}

/* The aubergine arched panel */
.home-v2 .alliances-v2__panel {
  background: var(--aubergine);
  color: var(--paper);
  padding: calc(var(--s-xl) + 10px) var(--s-lg) var(--s-xl);
  border-top-left-radius: 50% 80px;
  border-top-right-radius: 50% 80px;
  position: relative;
}

.home-v2 .alliances-v2__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.home-v2 .alliances-v2__item {
  position: relative;
  padding: var(--s-md) 0 var(--s-md) var(--s-lg);
  border-bottom: 1px solid rgba(240, 233, 218, 0.18);
}
.home-v2 .alliances-v2__item:first-child { padding-top: 0; }
.home-v2 .alliances-v2__item:last-child { border-bottom: none; padding-bottom: 0; }

/* Vertical rule + dot marker — architectural elevation feel */
.home-v2 .alliances-v2__dot {
  position: absolute;
  left: 6px;
  top: calc(var(--s-md) + 0.65em);
  width: 8px;
  height: 8px;
  background: var(--ochre-light, #C49668);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--aubergine);
}
.home-v2 .alliances-v2__item:first-child .alliances-v2__dot {
  top: 0.65em;
}
.home-v2 .alliances-v2__item::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(240, 233, 218, 0.22);
}
.home-v2 .alliances-v2__item:first-child::before { top: 1.5em; }
.home-v2 .alliances-v2__item:last-child::before { bottom: calc(100% - 1.5em); }

.home-v2 .alliances-v2__content {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.home-v2 .alliances-v2__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.1;
  color: var(--paper);
  margin: 0;
  letter-spacing: -0.005em;
}
.home-v2 .alliances-v2__body {
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.7;
  color: rgba(240, 233, 218, 0.82);
  margin: 0;
  max-width: 56ch;
}
.home-v2 .alliances-v2__link {
  font-family: var(--font-body);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--ochre-light, #C49668);
  text-decoration: none;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid rgba(196, 150, 104, 0.35);
  align-self: flex-start;
  transition: color var(--dur-sm) var(--ease),
              border-color var(--dur-sm) var(--ease);
}
.home-v2 .alliances-v2__link::after {
  content: " \2192";
  letter-spacing: 0;
}
.home-v2 .alliances-v2__link:hover {
  color: var(--paper);
  border-color: var(--paper);
}

@media (max-width: 720px) {
  .home-v2 .alliances-v2__panel {
    padding: calc(var(--s-xl) + 6px) var(--s-md) var(--s-lg);
    border-top-left-radius: 50% 52px;
    border-top-right-radius: 50% 52px;
  }
}

/* ------------------------------------------------------------
   Hide the original stepped-corner section-cards + chakana rule
   (not rendered on this page, but defensive)
   ------------------------------------------------------------ */
.home-v2 .chakana-rule { display: none; }

/* ------------------------------------------------------------
   FOOTER — inherits the sitewide clean flat footer.
   (Dome removed for cross-page consistency.)
   ------------------------------------------------------------ */