/* Our story (about.html). Builds on styles.css; scoped to main.our-story. */

/* Opening: names and faces first, in front of the sun. */
.story-open { text-align: center; padding-top: clamp(20px, 3vw, 36px); padding-bottom: 16px; }
.story-open .eyebrow { margin-bottom: 6px; }
.story-open h1 { margin: 0 auto .5em; font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.1; text-wrap: balance; }
.pair { position: relative; margin: 0 auto; max-width: 560px; }
.pair::before {
  content: ""; position: absolute; z-index: 0;
  left: 50%; top: 4%; width: 112%; aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(199, 152, 6, .34) 0%, rgba(199, 152, 6, .16) 38%, rgba(199, 152, 6, .05) 58%, transparent 70%);
}
.pair img { position: relative; z-index: 1; display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
          mask-image: linear-gradient(to bottom, #000 82%, transparent); }
.pair figcaption {
  position: relative; z-index: 1; display: flex; justify-content: space-around;
  margin-top: -6px; font-family: var(--font-head); font-size: clamp(1.2rem, 2.4vw, 1.55rem);
}

.our-story .lede { font-size: clamp(1.15rem, 1.7vw, 1.32rem); line-height: 1.6; }
.story-overture { padding-top: 32px; }
.story-overture .art { margin-top: 8px; }

/* Your Wayshowers: the two journeys side by side */
.wayshowers .subtitle { text-align: center; font-family: var(--font-head); font-size: clamp(1.15rem, 1.8vw, 1.4rem); color: var(--gold-dark); margin: -.2em 0 40px; }
.journeys { gap: clamp(32px, 5vw, 64px); align-items: start; }
.journey-head { display: flex; align-items: center; gap: 24px; margin-bottom: 20px; }
.journey-head img { width: 116px; height: 116px; border-radius: 50%; object-fit: cover; flex: none; }
.journey-head h2 { text-align: left; margin: 0; font-size: clamp(2rem, 4vw, 2.8rem); }
.journey-head .role { margin: 4px 0 0; font-family: var(--font-head); font-style: italic; color: var(--gold-dark); font-size: 1.2rem; }
.journey .action { margin: 0 0 24px; }
.journey .action img { display: block; width: 100%; aspect-ratio: 5 / 3; object-fit: cover; border-radius: 4px; }
/* Two tall shots in the same 5:3 box as Susan's, so the columns line up. */
/* overflow and the minmax row stop the images' own height from stretching the box past 5:3 */
.journey .pair-shots div { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr); gap: 8px; aspect-ratio: 5 / 3; overflow: hidden; }
.journey .pair-shots img { aspect-ratio: auto; height: 100%; min-height: 0; object-position: center 25%; }
.journey .pair-shots img.little { object-position: 38% center; }
.journey .action figcaption { margin-top: 8px; font-size: .85rem; color: var(--muted); font-style: italic; }
.journey .pull {
  margin: 0 0 24px; padding: 4px 0 4px 20px; border-left: 3px solid var(--gold);
  font-family: var(--font-head); font-style: italic; font-size: clamp(1.3rem, 2.2vw, 1.6rem); line-height: 1.3;
}
.journey details.more { border: 0; border-top: 1px solid var(--rule); margin-top: 8px; padding: 16px 0 0; }
.journey details.more > summary { font-family: var(--font-body); font-size: 1rem; font-weight: 600; list-style: none; display: inline-block; border-bottom: 1.5px solid var(--gold); }
.journey details.more > summary::-webkit-details-marker { display: none; }
.journey details.more > summary::after { content: " +"; color: var(--gold-dark); }
.journey details.more[open] > summary::after { content: " \2013"; }
.journey details.more[open] > summary { margin-bottom: 20px; color: inherit; }
.journey .creds { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: .82rem; color: var(--muted); }
.journey .creds p { margin: 0 0 .5em; }

.our-story .art { margin: 0; }
.our-story .art img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 8px 28px rgba(31, 43, 36, .16); }
.our-story .art figcaption { margin-top: 10px; font-size: .85rem; color: var(--muted); }
.our-story .art-right { float: right; width: 46%; margin: 6px 0 12px 22px; }
@media (max-width: 600px) {
  .our-story .art-right { float: none; width: 70%; margin: 8px auto 20px; }
  .journey-head { gap: 16px; }
  .journey-head img { width: 96px; height: 96px; }
}

/* The line the opening lands on */
.our-story .closing {
  max-width: 760px; margin: 48px auto 0; text-align: center; text-wrap: balance;
  font-family: var(--font-head); font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.3;
}

/* Where to begin */
.doors-begin .begin-lede { text-align: center; text-wrap: balance; max-width: 620px; margin: -.2em auto 0;
  font-family: var(--font-head); font-style: italic; font-size: clamp(1.15rem, 1.8vw, 1.4rem); color: var(--ink-soft); }
.doors-begin .grid-3 { margin-top: 32px; }
.door {
  display: flex; flex-direction: column; gap: 6px; padding: 28px 24px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
  color: var(--ink); text-decoration: none; transition: border-color .2s, transform .2s;
}
.door:hover { border-color: var(--gold); transform: translateY(-2px); }
.door-k { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-dark); }
.door strong { font-family: var(--font-head); font-weight: 400; font-size: 1.6rem; line-height: 1.15; }
.door span:last-child { color: var(--ink-soft); }

/* We are All Alchemists as a faint watermark behind the opening and how they met,
   fading out downward (Cassidy's pick "A", 2026-10-21, over the collage framed beside
   the text, behind the bios, or bleeding in from the right). Credit: .wm-credit. */
main.our-story { position: relative; isolation: isolate; }
.story-open, .story-overture { position: relative; z-index: 1; }
main.our-story::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: 0 0 auto 0; height: 1500px; opacity: .11; filter: sepia(.5); mix-blend-mode: multiply;
  background: url('../images/we-are-all-alchemists.webp') center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 55%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 55%, transparent);
}
.our-story .wm-credit { text-align: center; font-size: .8rem; color: var(--muted); margin-top: 28px; }

/* The Women Who Dance for God (Susan Reardon, 2022), one dancer each side of the bios:
   the dark-haired dancer (dance-left.webp) beside Susan, the fair one with the bun
   (dance-right.webp) beside Cassidy, both cut by tools/images/cut_dancers.py. Faint,
   fading toward the bios and downward, the middle left clear. The faces sit in the open
   space either side of the heading; the figures run on faintly behind the bios. Cassidy's
   pick, 2026-10-30, over a band of its own, the painting whole and stretched across the
   section (both figures lost behind the bios), or a place on Our method. Credit: .wm-credit. */
.wayshowers { position: relative; isolation: isolate; overflow: hidden; }
.wayshowers > .container { position: relative; z-index: 1; }
.wayshowers::before, .wayshowers::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  --w: min(26vw, 400px); top: calc(var(--w) * -.4); width: var(--w); aspect-ratio: 470 / 1260;
  opacity: .22; filter: sepia(.35); mix-blend-mode: multiply;
  background: center top / 100% auto no-repeat;
}
.wayshowers::before {
  left: 0; background-image: url('../images/dance-left.webp');
  -webkit-mask-image: linear-gradient(to right, #000 55%, transparent), linear-gradient(#000 60%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, #000 55%, transparent), linear-gradient(#000 60%, transparent);
          mask-composite: intersect;
}
.wayshowers::after {
  right: 0; background-image: url('../images/dance-right.webp');
  -webkit-mask-image: linear-gradient(to left, #000 55%, transparent), linear-gradient(#000 60%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to left, #000 55%, transparent), linear-gradient(#000 60%, transparent);
          mask-composite: intersect;
}
@media (max-width: 720px) { .wayshowers::before, .wayshowers::after { width: 34vw; opacity: .12; } }

/* The mentors line closes the credentials block: a lineage read as evidence,
   not as story, which is why these names sit in the small print rather than
   in the prose above. */
.journey .creds .mentors { margin-top: .9em; padding-top: .7em; border-top: 1px solid var(--rule); }