/* ============================================================
   STONE EDGE SISTERS — Brand Stylesheet
   Fonts:  Cormorant Garamond (sub for Marlide display)
           EB Garamond (sub for Adobe Caslon — scripture/teaching)
           Montserrat (information & clarity)
   Colors: Parchment cream bg · Forest green anchor · Clay/blush accent · Sage
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Montserrat:wght@300;400;500;600;700&display=swap');

/* ---- Tokens ---- */
:root {
  --sis-bg:           #F4EEE3;   /* warm parchment — main background */
  --sis-bg-2:         #EAE0CF;   /* deeper parchment — alternate sections */
  --sis-deep:         #293828;   /* forest green — headings, deep sections */
  --sis-deep-2:       #3D5240;   /* mid forest — hover, raised surface */
  --sis-sage:         #718E79;   /* sage green — eyebrows, accents */
  --sis-sage-light:   #B8CCBA;   /* pale sage — decorative, bg tints */
  --sis-clay:         #9E5440;   /* clay/terracotta — primary accent (AA on cream) */
  --sis-clay-light:   #DBAea0;   /* light blush — highlights */
  --sis-ink:          #1E1B17;   /* near-black warm */
  --sis-ink-2:        #4A4540;   /* secondary text */
  --sis-stone:        #6E6760;   /* labels, meta (AA on cream) */
  --sis-line:         rgba(30,27,23,0.1);
  --sis-line-soft:    rgba(30,27,23,0.06);
  --sis-white:        #FFFFFF;

  --sis-display:  'Cormorant Garamond', 'Georgia', serif;
  --sis-reading:  'EB Garamond', 'Georgia', serif;
  --sis-body:     'Montserrat', system-ui, sans-serif;

  --sis-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sis-maxw: 1200px;
  --sis-gutter: clamp(20px, 5vw, 80px);
}

/* ============================================================
   PAGE ROOT
   ============================================================ */
body.sisters-page {
  background: var(--sis-bg);
  color: var(--sis-ink);
  font-family: var(--sis-body);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.sis-wrap {
  width: 100%;
  max-width: var(--sis-maxw);
  margin-inline: auto;
  padding-inline: var(--sis-gutter);
}
.sis-section { padding-block: clamp(72px, 10vw, 130px); }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.sis-eyebrow {
  font-family: var(--sis-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #4F6A58;
  display: block;
  margin: 0;
}

.sis-h1 {
  font-family: var(--sis-display);
  font-size: clamp(2.75rem, 7vw, 6rem);
  font-weight: 300;
  line-height: 1.0;
  color: var(--sis-deep);
  margin: 0;
  text-wrap: pretty;
}
.sis-h2 {
  font-family: var(--sis-display);
  font-size: clamp(2.125rem, 4.5vw, 4rem);
  font-weight: 300;
  line-height: 1.08;
  color: var(--sis-deep);
  margin: 0;
  text-wrap: pretty;
}
.sis-h3 {
  font-family: var(--sis-display);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.15;
  color: var(--sis-deep);
  margin: 0;
}

/* Italic serif accent (emotional words inside headings) */
.sis-h1 em, .sis-h2 em {
  font-style: italic;
  font-weight: 300;
  color: var(--sis-clay);
}

.sis-lead {
  font-family: var(--sis-body);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--sis-ink-2);
  margin: 0;
  text-wrap: pretty;
}
.sis-body-t {
  font-family: var(--sis-body);
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--sis-ink-2);
  margin: 0;
  text-wrap: pretty;
}
.sis-scripture {
  font-family: var(--sis-reading);
  font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.75rem);
  line-height: 1.55;
  color: var(--sis-deep);
  margin: 0;
}
.sis-scripture cite {
  font-family: var(--sis-body);
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sis-stone);
  display: block;
  margin-top: 20px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.sis-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sis-body); font-weight: 600; font-size: 0.6875rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 15px 30px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background 0.3s var(--sis-ease), border-color 0.3s var(--sis-ease),
              color 0.3s var(--sis-ease), transform 0.2s var(--sis-ease);
  white-space: nowrap;
}
.sis-btn .arrow { transition: transform 0.35s var(--sis-ease); }
.sis-btn:hover .arrow { transform: translateX(4px); }

.sis-btn--deep   { background: var(--sis-deep); color: var(--sis-bg); }
.sis-btn--deep:hover { background: var(--sis-deep-2); }

.sis-btn--outline {
  background: transparent; color: var(--sis-deep);
  border-color: rgba(41,56,40,0.28);
}
.sis-btn--outline:hover { border-color: var(--sis-deep); background: rgba(41,56,40,0.05); }

.sis-btn--white  { background: var(--sis-bg); color: var(--sis-deep); }
.sis-btn--white:hover  { background: var(--sis-white); }

.sis-btn--ghost-white {
  background: transparent; color: var(--sis-bg);
  border-color: rgba(244,238,227,0.35);
}
.sis-btn--ghost-white:hover { background: rgba(244,238,227,0.1); border-color: rgba(244,238,227,0.7); }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .sis-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.75s var(--sis-ease), transform 0.75s var(--sis-ease); }
  .sis-reveal.in { opacity: 1; transform: none; }
  .sis-reveal--left { transform: translateX(-28px); }
  .sis-reveal--right { transform: translateX(28px); }
  .sis-reveal--left.in, .sis-reveal--right.in { transform: none; }
  .sis-reveal--scale { transform: scale(1.05); transition: opacity 0.8s var(--sis-ease), transform 0.8s var(--sis-ease); }
  .sis-reveal--scale.in { transform: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.sis-hero {
  position: relative;
  min-height: 95svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
}
.sis-hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
}
.sis-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(
    95deg,
    rgba(30,27,23,0.62) 0%,
    rgba(30,27,23,0.42) 34%,
    rgba(30,27,23,0.12) 62%,
    rgba(30,27,23,0.05) 100%
  ),
  linear-gradient(
    180deg,
    rgba(41,56,40,0.30) 0%,
    rgba(30,27,23,0.16) 30%,
    rgba(30,27,23,0.78) 72%,
    rgba(30,27,23,0.94) 100%
  );
}
.sis-hero__inner {
  position: relative; z-index: 2;
  padding-bottom: clamp(56px, 8vw, 100px);
  padding-top: 180px;
  max-width: 860px;
}
.sis-hero__ministry {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--sis-body); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--sis-sage-light); margin-bottom: 22px;
}
.sis-hero__ministry::before {
  content: ""; width: 28px; height: 1px; background: var(--sis-sage);
}
.sis-hero__title {
  font-family: var(--sis-display);
  font-size: clamp(3.5rem, 9vw, 8rem);
  font-weight: 300; line-height: 0.96;
  color: var(--sis-bg);
  margin: 0;
}
.sis-hero__title em {
  font-style: italic;
  color: var(--sis-clay-light);
}
.sis-hero__sub {
  font-family: var(--sis-body); font-size: clamp(0.9rem, 1.4vw, 1.1rem);
  font-weight: 300; line-height: 1.7;
  color: rgba(244,238,227,0.75);
  max-width: 48ch; margin-top: 24px;
}
.sis-hero__actions {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px;
}

/* ============================================================
   SPLIT LAYOUT
   ============================================================ */
.sis-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(44px, 8vw, 110px);
  align-items: center;
}
.sis-split--reverse { direction: rtl; }
.sis-split--reverse > * { direction: ltr; }

.sis-split__copy > * + * { margin-top: 22px; }
.sis-split__copy .sis-eyebrow { margin-bottom: 4px; }

.sis-split__media { position: relative; }
.sis-split__media img {
  width: 100%; aspect-ratio: 4/5;
  object-fit: cover; border-radius: 3px;
  display: block;
}
.sis-split__deco {
  position: absolute;
  width: 55%; aspect-ratio: 1;
  background: var(--sis-sage-light);
  border-radius: 3px;
  bottom: -28px; right: -28px;
  z-index: -1; opacity: 0.45;
}

/* ============================================================
   PILLARS (dark green band)
   ============================================================ */
.sis-pillars { background: var(--sis-deep); }
.sis-pillars .sis-eyebrow { color: var(--sis-sage-light); }
.sis-pillars .sis-h2 { color: var(--sis-bg); }
.sis-pillars .sis-h2 em { color: var(--sis-clay-light); }
.sis-pillars__head { margin-bottom: 60px; }

.sis-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(244,238,227,0.1);
}
.sis-pillar {
  padding: clamp(32px, 4vw, 52px);
  border-right: 1px solid rgba(244,238,227,0.1);
  display: flex; flex-direction: column; gap: 16px;
}
.sis-pillar:last-child { border-right: none; }
.sis-pillar__n {
  font-family: var(--sis-body); font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--sis-sage-light);
}
.sis-pillar__title {
  font-family: var(--sis-display);
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 300; font-style: italic; line-height: 1.05;
  color: var(--sis-bg);
}
.sis-pillar__body {
  font-family: var(--sis-body); font-size: 0.875rem;
  font-weight: 300; line-height: 1.75;
  color: rgba(244,238,227,0.62);
}

/* ============================================================
   SCRIPTURE / QUOTE
   ============================================================ */
.sis-quote { background: var(--sis-bg-2); text-align: center; }
.sis-quote__rule {
  width: 40px; height: 1px;
  background: var(--sis-sage); margin: 0 auto 32px;
}
.sis-quote__inner { max-width: 680px; margin-inline: auto; }

/* ============================================================
   VALUES BAND (no judgment)
   ============================================================ */
.sis-values { background: var(--sis-bg); }
.sis-values__head > * + * { margin-top: 18px; }
.sis-values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 4vw, 56px) clamp(44px, 8vw, 100px);
  margin-top: 64px;
}
.sis-value {
  padding-top: 24px;
  border-top: 1px solid var(--sis-line);
}
.sis-value__title {
  font-family: var(--sis-display);
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  font-weight: 400; font-style: italic;
  color: var(--sis-deep); margin-bottom: 12px;
}
.sis-value__body {
  font-family: var(--sis-body); font-size: 0.875rem;
  font-weight: 300; line-height: 1.75;
  color: var(--sis-ink-2);
}

/* ============================================================
   PHOTO STRIP
   ============================================================ */
.sis-photos {
  background: var(--sis-bg-2);
  padding-block: 0;
  overflow: hidden;
}
.sis-photos-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 3px;
}
.sis-photos-grid img {
  width: 100%; display: block;
  object-fit: cover;
}
.sis-photos-grid img:first-child { aspect-ratio: 4/5; }
.sis-photos-grid img:not(:first-child) { aspect-ratio: 3/4; }

/* ============================================================
   DETAILS CARDS
   ============================================================ */
.sis-details { background: var(--sis-bg-2); }
.sis-details__head > * + * { margin-top: 18px; }
.sis-details-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 24px);
  margin-top: 56px;
}
.sis-detail-card {
  background: var(--sis-bg);
  border: 1px solid var(--sis-line);
  border-radius: 3px;
  padding: clamp(28px, 3.5vw, 48px);
}
.sis-detail-card__label {
  font-family: var(--sis-body); font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--sis-clay); display: block; margin-bottom: 12px;
}
.sis-detail-card__title {
  font-family: var(--sis-display);
  font-size: clamp(1.375rem, 2vw, 1.875rem);
  font-weight: 400; color: var(--sis-deep); margin-bottom: 12px;
  line-height: 1.15;
}
.sis-detail-card__body {
  font-family: var(--sis-body); font-size: 0.875rem;
  font-weight: 300; line-height: 1.7; color: var(--sis-ink-2);
}

/* ============================================================
   CTA BAND
   ============================================================ */
.sis-cta { background: var(--sis-deep); text-align: center; }
.sis-cta .sis-eyebrow { color: var(--sis-sage-light); justify-content: center; }
.sis-cta .sis-h2 { color: var(--sis-bg); margin-top: 18px; }
.sis-cta .sis-h2 em { color: var(--sis-clay-light); }
.sis-cta .sis-lead { color: rgba(244,238,227,0.65); max-width: 44ch; margin-inline: auto; margin-top: 20px; }
.sis-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 44px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .sis-split { grid-template-columns: 1fr; }
  .sis-split--reverse { direction: ltr; }
  .sis-split__deco { display: none; }
  .sis-pillars-grid { grid-template-columns: 1fr; }
  .sis-pillar { border-right: none; border-bottom: 1px solid rgba(244,238,227,0.1); }
  .sis-pillar:last-child { border-bottom: none; }
  .sis-values-grid { grid-template-columns: 1fr; gap: 32px; }
  .sis-details-grid { grid-template-columns: 1fr; }
  .sis-photos-grid { grid-template-columns: 1fr 1fr; }
  .sis-photos-grid img:first-child { grid-column: span 2; aspect-ratio: 16/9; }
}
@media (max-width: 600px) {
  .sis-photos-grid { grid-template-columns: 1fr; }
  .sis-photos-grid img:first-child { grid-column: auto; aspect-ratio: 4/3; }
  .sis-photos-grid img:not(:first-child) { aspect-ratio: 4/3; }
}