/* About (/about/) only. Shared components live in /v2.css.
   Placeholder until Rachel's About copy arrives: sections marked data-swap get replaced. */

/* == PAGE HEAD ========================================================= */
/* Tagline in three parts. Phones: one per line (a centred divider breaks badly).
   Wider screens: one line with her middle dots. */
.about-head__sub span{display:block}
.about-head__sub i{display:none}
@media (min-width:721px){
  .about-head__sub span{display:inline}
  .about-head__sub i{display:inline;margin-inline:.45em;font-style:normal;color:var(--gold)}
}
/* Desktop hero photo, About only (2026-11-11 fix3). The red shawl photo has almost no sky above the hat,
   so the shared 3% top fade left a hard edge. Here the top fades over --ph-ft (15%), and an oval kept
   solid over the hat crown (crown apex at about 48% across, 4% down the file) keeps the crown whole.
   Layers: left fade, bottom fade (intersect) with (top fade added to the crown oval). Mask only, no pixels change. */
@media (min-width:1021px){
  .about-head .page-head__photo img{
    -webkit-mask:linear-gradient(90deg,transparent,#000 var(--ph-fl,42%)),linear-gradient(0deg,transparent,#000 18%),linear-gradient(180deg,transparent,#000 var(--ph-ft,15%)),radial-gradient(25% 18.5% at 48.75% 18.5%,#000 80%,transparent);
    -webkit-mask-composite:source-in,source-in,source-over,source-over;
    mask:linear-gradient(90deg,transparent,#000 var(--ph-fl,42%)),linear-gradient(0deg,transparent,#000 18%),linear-gradient(180deg,transparent,#000 var(--ph-ft,15%)),radial-gradient(25% 18.5% at 48.75% 18.5%,#000 80%,transparent);
    mask-composite:intersect,intersect,add,add}
}

/* == PHOTO + COPY SPLITS ============================================== */
.about-intro{padding-top:0}
.about-photo img,.about-ky img{filter:sepia(.07) saturate(1.05)}
/* Rachel's portrait keeps its real shape and shrinks in width instead */
.about-photo{width:min(100% - 14px,260px);justify-self:center}
.about-ky{width:min(100% - 14px,280px);justify-self:center}
.about-copy{min-width:0;text-align:center}
.about-copy>*+*{margin-top:1em}
.about-copy h2{font-size:clamp(1.85rem,2.9vw,2.5rem)}
.about-copy .kicker+h2{margin-top:10px}
.about-copy .text-link{margin-top:var(--group)}
@media (min-width:861px){
  .about-intro .split{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .about-lineage .split{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .about-photo{width:min(100% - 24px,360px)}
  .about-ky{width:min(100% - 24px,360px)}
  .about-copy{text-align:left}
}

/* == MY STORY ========================================================== */
.about-story__panel{position:relative;overflow:hidden}
.about-story__panel p{position:relative;z-index:1}
/* gold feather line art in the panel's open top corner, never behind words on phones */
.about-story__art{display:none}
@media (min-width:861px){
  .about-story__panel{max-width:44rem;padding-right:clamp(48px,9vw,140px)}
  .about-story__art{display:block;position:absolute;z-index:0;right:18px;top:50%;width:92px;height:auto;transform:translateY(-50%) rotate(8deg);opacity:.55;pointer-events:none}
}

/* == LINEAGE =========================================================== */
.about-mothers{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;list-style:none;padding:0}
.about-mothers li{padding:8px 16px;border-radius:999px;background:var(--panel-bg);box-shadow:inset 0 0 0 1px var(--panel-line);font:500 .9375rem/1.3 var(--caps);letter-spacing:.08em;color:var(--plum)}
.about-quote{margin:var(--stack) auto 0;max-width:30rem}
.about-quote blockquote p{font-size:clamp(1.4rem,2.4vw,1.85rem)}
@media (min-width:861px){
  .about-mothers{justify-content:flex-start}
}
/* deep band (2026-11-11): the lineage sits on plum (.band-deep in v2.css), replacing the lavender wash */
.band-deep .about-mothers li{background:rgba(251,247,239,.08);box-shadow:inset 0 0 0 1px rgba(227,201,142,.5);color:var(--gold-hi)}

/* == LIVING THE BEAUTY WAY ============================================ */
.about-beauty .lede{max-width:34em;margin-inline:auto}
.about-beauty__name{font:italic 600 1.15em/1 var(--serif);color:var(--plum);white-space:nowrap}
.about-beauty .pull-line{margin-bottom:var(--group)}

/* == CLOSING =========================================================== */
.about-cta__text{max-width:34em;margin-inline:auto;color:var(--plum-ink)}
/* About portrait is a short silent loop from Rachel's reel (2026-11-08) */
.about-reel{clip-path:inset(0 round var(--r-card));position:relative;z-index:1;box-shadow:0 0 0 1px rgba(201,162,76,.5),var(--shadow-card);border-radius:var(--r-card);display:block;width:100%;height:auto;aspect-ratio:720/1096;object-fit:cover;border-radius:inherit;background:#1d1620}
/* My Story with Rachel's blue-pool photo (2026-11-09) */
.about-story__row{display:grid;gap:var(--stack);justify-items:center}
.about-story__photo{width:min(100% - 14px,280px);margin-bottom:14px}
.about-story__photo img{aspect-ratio:4/5;object-fit:cover}
@media (min-width:861px){.about-story__row{grid-template-columns:minmax(0,4fr) minmax(0,7fr);align-items:center;max-width:1060px;margin-inline:auto}.about-story__photo{width:min(100% - 24px,340px);justify-self:end}.about-story__panel{justify-self:start}}
/* Living the Beauty Way: two real photos of Rachel (beach in white, red shawl by the sea), 2026-11-09 */
.about-beauty .wrap--narrow{max-width:min(100%,1000px)}
.about-beauty .lede,.about-beauty .pull-line{max-width:40rem}
.about-gallery{display:grid;gap:var(--stack);justify-items:center;margin:var(--stack) auto}
.about-gallery__wide{width:calc(100% - 14px)}
.about-gallery__wide img{aspect-ratio:3/2;object-fit:cover;object-position:50% 45%}
.about-gallery__tall{width:min(100% - 14px,280px)}
.about-gallery__tall img{aspect-ratio:4/5;object-fit:cover}
@media (min-width:861px){.about-gallery{grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:end;max-width:980px}.about-gallery__wide,.about-gallery__tall{width:calc(100% - 24px)}}
@media (min-width:861px){.about-gallery{grid-template-columns:minmax(0,15fr) minmax(0,8fr)}}
@media (min-width:861px){.about-gallery{align-items:stretch}.about-gallery__tall{display:flex}.about-gallery__tall img{height:100%;aspect-ratio:auto}}
/* 2026-11-11: the red shawl moved up to the hero; Rachel's night-festival reel takes its gallery slot.
   The reel keeps its own 720:1096 shape. Desktop columns 16:7 make the reel about as tall as the 3:2 beach photo. */
.about-gallery__reel{display:block}
@media (min-width:861px){.about-gallery:has(.about-gallery__reel){grid-template-columns:minmax(0,16fr) minmax(0,7fr);align-items:end}.about-gallery__tall.about-gallery__reel{display:block}}

/* == PHONES (2026-11-10): progressive disclosure, see MOBILE DISCLOSURE CONTRACT in v2.css ==
   My Story: the heading folds paragraphs two and three. Living the Beauty Way: the heading folds
   the long lede. --fold-gap:0 keeps the open spacing, so desktop does not change. */
.about-story__fold{--fold-gap:0px}
@media (max-width:759px){
  /* photo first, so the folded text opens right under its heading */
  .about-story__fold{display:flex;flex-direction:column;align-items:center}
  .about-story__fold>.section-head{order:0;width:100%;margin-bottom:var(--group)}
  .about-story__row{display:contents}
  .about-story__photo{order:-1;margin:0 0 var(--stack)}
  .about-story__panel{width:100%}
  .about-beauty__fold>.section-head{margin-bottom:var(--group)}
  .about-beauty__fold>.lede{margin-bottom:var(--group)}
  .about-beauty__fold .pull-line{margin-top:var(--group)}
}
/* Centered phone fold heads: the chevron follows the last word instead of sitting at the far
   edge of a wrapped heading. Same rule in inner-truth, psychosynthesis and about css; it can
   move to v2.css (.fold--center) once the shared file takes it. */
@media (max-width:759px){
  .fold--m.fold--center .fold__head .fold__btn{display:block;text-align:center}
  .fold--m.fold--center .fold__head .fold__text{display:inline}
  .fold--m.fold--center .fold__head .fold__chev{display:inline-grid;vertical-align:.12em;margin-left:10px}
}