/* The story behind Curveball (Troy, 3 Nov 2026: "On the about me section I want a personal message added to it", then
   "it's a bit cold", then "The timeline on the side needs to have the same heart and feel as the story" and "less wall
   of text"): his letter on warm paper with the photo of him and his wife taped beside it, told in chapters along the
   letter's own path, from her website to giving back. Who We Are only. */
.who-story { position: relative; overflow: hidden; padding-block: clamp(56px, 7vw, 104px); color: var(--ink);
  background: radial-gradient(70% 60% at 100% 0%, #ffd2bfcc, transparent 62%), radial-gradient(60% 55% at 0% 100%, #f9d3e6b3, transparent 60%), #fff4ea; }
.who-story__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.who-story__head { position: sticky; top: calc(var(--nav-h, 56px) + 32px); }
.who-story__title { margin: 0; font: 800 clamp(44px, 5vw, 72px)/1 var(--font-display); letter-spacing: -.045em; color: var(--ink); }
.who-story__title em { display: block; margin-top: .06em; padding-bottom: .06em; font: italic 400 1em/1.05 var(--font-aside); letter-spacing: -.03em; color: var(--violet); }
/* The two of them, as a taped-on photo. */
.who-story__photo { position: relative; width: min(100%, 320px); margin: clamp(26px, 3vw, 40px) 0 0; padding: 12px 12px 14px; background: #fffdf9; rotate: -4deg; box-shadow: 0 26px 44px -26px #9a3b1a80; }
.who-story__photo::before { content: ""; position: absolute; left: 50%; top: -13px; width: 96px; height: 26px; translate: -50% 0; rotate: 4deg; border-radius: 3px; background: #ff6a3d80; }
.who-story__photo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.who-story__photo figcaption { padding-top: 10px; text-align: center; font: italic 400 19px/1.2 var(--font-aside); color: #4a3a35; }
/* The letter, taped on. */
.who-letter { position: relative; padding: clamp(30px, 4vw, 56px); border-radius: 28px; background: #fffdf9; color: var(--ink); rotate: .6deg; box-shadow: 0 44px 80px -46px #9a3b1a8c, 0 2px 0 #fff inset; }
.who-letter::before { content: ""; position: absolute; left: 50%; top: -15px; width: 128px; height: 30px; translate: -50% 0; rotate: -3deg; border-radius: 4px; background: #ff6a3d73; }
.who-letter p { margin: 0; max-width: 62ch; font: 400 clamp(18px, 1.45vw, 20px)/1.65 var(--font-aside); color: #33303f; }
.who-letter .who-letter__lead { font: italic 400 clamp(26px, 2.4vw, 32px)/1.25 var(--font-aside); color: var(--violet); }
.who-letter mark { padding: 0 .1em; border-radius: .2em; color: inherit; background: linear-gradient(transparent 40%, #ffd2bf 40%, #ffd2bf 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* The path, chapter by chapter: a stitched coral line, a ring for each part of the story and a heart at the end. */
.who-letter__path { position: relative; list-style: none; margin: clamp(28px, 3vw, 38px) 0 0; padding: 0 0 0 40px; display: grid; gap: clamp(32px, 3vw, 42px); }
.who-letter__path::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 30px; width: 2px; opacity: .6; background: repeating-linear-gradient(#ff6a3d 0 7px, transparent 7px 13px); }
.who-chapter { --from-y: 18px; position: relative; }
.who-chapter::before { content: ""; position: absolute; left: -40px; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fffdf9; box-shadow: inset 0 0 0 2.5px var(--coral), 0 0 0 6px #fffdf9; }
.who-chapter--heart::before { content: "♥"; display: grid; place-items: center; background: var(--coral); color: #fffdf9; font: 13px/1 var(--font-body); box-shadow: 0 0 0 6px #fffdf9, 0 0 0 10px #ff6a3d29; }
.who-chapter h3 { margin: 0 0 14px; display: grid; justify-items: start; gap: 8px; font: italic 400 clamp(24px, 2.1vw, 29px)/1.15 var(--font-aside); letter-spacing: -.015em; color: var(--ink); }
.who-chapter h3 span { padding: 5px 12px 6px; border-radius: 999px; background: #ffe6da; color: #b13c16; font: italic 500 clamp(15px, 1.15vw, 16.5px)/1 var(--font-aside); letter-spacing: 0; }
.who-chapter p + p { margin-top: 1em; }
.who-letter .who-chapter__pull { font: italic 400 clamp(22px, 2vw, 26px)/1.35 var(--font-aside); color: var(--violet); }
.who-letter .who-letter__thanks { margin-top: clamp(32px, 3vw, 42px); }
.who-letter__sign { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding-top: 24px; border-top: 1px dashed #9a3b1a40; }
.who-letter__sign img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fffdf9, 0 0 0 5px var(--coral); }
.who-letter__sign span { display: grid; gap: 4px; font: italic 400 16px/1.2 var(--font-aside); color: #5b4d48; }
.who-letter__sign b { font: italic 400 38px/1 var(--font-aside); color: var(--violet); }
/* Each ring lands as its chapter arrives (the chapters use site.js's .reveal). */
.who-chapter.is-in::before { animation: who-ring .6s var(--settle) .2s both; }
@keyframes who-ring { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } }
html.reduce-motion .who-chapter::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .who-chapter::before { animation: none; } }
@media (max-width: 900px) {
  .who-story__grid { grid-template-columns: minmax(0, 1fr); }
  .who-story__head { position: static; }
  .who-story__photo { width: min(82%, 340px); margin: 34px auto 6px; }
  .who-letter { rotate: 0deg; }
}
@media (max-width: 520px) {
  .who-letter { padding: 30px 20px 26px 18px; }
  .who-letter__path { padding-left: 34px; }
  .who-letter__path::before { left: 10px; }
  .who-chapter::before { left: -34px; width: 22px; height: 22px; }
}