/* ============================================================
   Clearmatter — About (the person page), v2 rebuild
   Daylight page: white/linen alternating, one dark band (the close).
   Reuses home/subpage tokens + Header/Footer/buttons/links from styles.css.
   ============================================================ */

/* ---- shared section head (eyebrow + H2), reused by Story/Bring ---- */
.abt-head{max-width:680px;margin-bottom:clamp(28px,3.6vw,44px);}
.abt-head__eye{display:block;margin-bottom:clamp(14px,1.8vw,20px);}
.abt-head__h{
  font-weight:400;letter-spacing:-.012em;text-wrap:pretty;
  font-size:clamp(30px,4vw,46px);line-height:1.12;color:var(--midnight);margin:0;
}

/* ---------------------------------------------------------
   1 — Hero, linen. Split: text left, portrait right, her face leads.
   --------------------------------------------------------- */
.abt-hero{background:var(--linen);padding-block:calc(clamp(140px,15vw,208px) + 26px) clamp(56px,8vw,96px);overflow:hidden;}
.abt-hero .wrap{position:relative;z-index:1;}
.abt-hero__grid{display:grid;grid-template-columns:1fr minmax(0,380px);gap:clamp(40px,6vw,88px);align-items:center;}
.abt-hero__eye{display:block;margin-bottom:clamp(18px,2.2vw,26px);}
.abt-hero__title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(40px,9vw,92px);line-height:.98;letter-spacing:-.02em;
  color:var(--midnight);margin:0;text-wrap:balance;
}
.abt-hero__name{color:var(--forest);}
.abt-hero__lede{margin:clamp(24px,3vw,34px) 0 0;max-width:44ch;font-size:clamp(18px,2vw,22px);line-height:1.55;color:var(--iron);font-weight:400;text-wrap:pretty;}
.abt-hero__lead{display:block;}
.abt-hero__avatar{display:none;}
.abt-hero__photo{margin:0;aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:var(--greige);}
.abt-hero__photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 20%;}
.abt-hero__actions{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(18px,2.4vw,30px);margin-top:clamp(30px,3.6vw,42px);}
.abt-hero__lines{display:flex;align-items:center;gap:10px;}
.abt-hero__dot{color:var(--greige-deep);font-size:14px;}

/* entrance */
.js .abt-hero__title,.js .abt-hero__lede,.js .abt-hero__actions,.js .abt-hero__photo{opacity:0;}
.js .abt-hero__title{transform:translateY(24px);transition:opacity 1s var(--ease),transform 1.05s var(--ease);}
.js .abt-hero__lede{transform:translateY(18px);transition:opacity 1s var(--ease) .12s,transform 1s var(--ease) .12s;}
.js .abt-hero__actions{transform:translateY(16px);transition:opacity 1s var(--ease) .2s,transform 1s var(--ease) .2s;}
.js .abt-hero__photo{transition:opacity 1.15s var(--ease) .16s;}
.abt-hero.in .abt-hero__title,.abt-hero.in .abt-hero__lede,.abt-hero.in .abt-hero__actions{opacity:1;transform:none;}
.abt-hero.in .abt-hero__photo{opacity:1;}

/* ---------------------------------------------------------
   2 — The story, white. Single measure, generous line height
   (Work with me's Why-coaching grammar). One photo card floated
   mid-story, never full-bleed.
   --------------------------------------------------------- */
.abt-story{background:var(--white);padding-block:clamp(72px,11vw,128px);}
.abt-story--photo{
  position:relative;isolation:isolate;overflow:hidden;background:#0c0e0a;
  padding-block:0;margin:clamp(20px,3.4vw,44px) clamp(16px,4vw,56px);border-radius:18px;
}
.abt-story--photo .wrap{position:relative;z-index:2;max-width:960px;padding-block:clamp(64px,10vw,116px);}
.abt-story__bg{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;
  object-fit:cover;object-position:82% 45%;
  filter:sepia(.14) saturate(1.04) brightness(.82) contrast(1.02);
}
.abt-story__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(96deg,rgba(8,16,12,.86) 0%,rgba(8,16,12,.78) 40%,rgba(8,16,12,.5) 68%,rgba(8,16,12,.2) 100%),
    linear-gradient(0deg, rgba(8,16,12,.3) 0%, rgba(8,16,12,.06) 30%, transparent 60%);
}
.abt-story--photo .abt-head__h,.abt-story--photo .abt-head__eye{color:var(--linen);}
.abt-bio{max-width:760px;font-size:clamp(18px,1.7vw,21px);line-height:1.85;color:var(--slate);}
.abt-story--photo .abt-bio{color:var(--linen);text-shadow:0 1px 10px rgba(8,10,7,.4);}
.abt-story--photo :focus-visible{outline-color:var(--linen);}
.abt-bio p{margin:0 0 1.05em;text-wrap:pretty;}
.abt-bio__link{display:inline-flex;margin-top:.4em;}

/* ---------------------------------------------------------
   3 — What I bring, linen. Two quiet columns; no icons; the
   design line sits apart beneath, italic and small.
   --------------------------------------------------------- */
.abt-bring{background:var(--linen);padding-block:clamp(72px,11vw,128px);position:relative;overflow:hidden;}
.abt-turn{position:absolute;top:0;left:0;right:0;height:100px;opacity:.32;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);}
.abt-turn svg{width:100%;height:100%;display:block;}
.abt-bring__grid{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(40px,6vw,72px);align-items:start;}
.abt-bring__left{margin:0;font-size:clamp(17px,1.4vw,19px);line-height:1.75;color:var(--slate);text-wrap:pretty;}
.abt-bring__lead{margin:0 0 .8em;font-size:14px;letter-spacing:.02em;text-transform:uppercase;color:var(--iron);font-weight:500;}
.abt-bring__list{list-style:none;margin:0 0 1em;padding:0;display:flex;flex-direction:column;gap:.6em;}
.abt-bring__list li{
  position:relative;padding-left:20px;font-family:var(--serif);font-size:clamp(19px,1.7vw,22px);
  color:var(--midnight);
}
.abt-bring__list li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:1px;background:var(--dune);}
.abt-bring__note{margin:0;font-size:15px;line-height:1.6;color:var(--iron);}
.abt-bring__aside{
  margin:clamp(40px,5vw,60px) 0 0;max-width:56ch;font-style:italic;font-size:15px;line-height:1.6;color:var(--iron);
}
@media (max-width:768px){
  .abt-bring__grid{grid-template-columns:1fr;gap:clamp(28px,5vw,40px);}
}

/* ---------------------------------------------------------
   4 — Credentials, white. One paragraph, one badge, quiet.
   --------------------------------------------------------- */
.abt-creds{background:var(--white);padding-block:clamp(64px,9vw,108px);}
.abt-creds__p{max-width:680px;margin:0 0 clamp(24px,3vw,34px);font-size:clamp(17px,1.4vw,19px);line-height:1.7;color:var(--slate);text-wrap:pretty;}
.abt-creds__row{display:flex;align-items:center;gap:16px;}
.abt-creds__badge{height:56px;width:auto;display:block;}
.abt-creds__note{margin:10px 0 0;font-style:italic;font-size:14px;color:var(--iron);}

/* ---------------------------------------------------------
   5 — Outside the work, linen. Footnote register: quiet, small
   measure, text only.
   --------------------------------------------------------- */
.abt-outside{background:var(--linen);padding-block:clamp(56px,8vw,92px);}
.abt-outside__body{max-width:600px;margin-top:clamp(14px,1.8vw,20px);display:flex;flex-direction:column;gap:1em;}
.abt-outside__body p{margin:0;font-size:15.5px;line-height:1.72;color:var(--iron);text-wrap:pretty;}

/* ---------------------------------------------------------
   6 — Close, dark. Photo + scrim, belief line as H2, one filled
   button + one text link.
   --------------------------------------------------------- */
.abt-cta--photo{
  position:relative;isolation:isolate;overflow:hidden;background:#0c0e0a;
  min-height:clamp(520px,72vh,760px);padding-block:clamp(84px,13vw,150px);
  display:flex;align-items:center;
}
.abt-cta__bg{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;
  object-fit:cover;object-position:center 62%;
  filter:sepia(.16) saturate(1.06) brightness(.86) contrast(1.02);
}
.abt-cta__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 100% at 50% 50%, rgba(24,17,10,.82) 0%, rgba(24,17,10,.66) 42%, rgba(24,17,10,.4) 74%, rgba(24,17,10,.28) 100%),
    linear-gradient(0deg, rgba(24,17,10,.4) 0%, rgba(24,17,10,.12) 34%, transparent 64%);
}
.abt-cta--photo .wrap{position:relative;z-index:2;width:100%;}
.abt-cta__inner{max-width:640px;margin-inline:auto;text-align:center;text-shadow:0 1px 12px rgba(8,10,7,.45);}
.abt-cta__h{margin:0 0 clamp(16px,2vw,22px);color:var(--linen);font-weight:400;letter-spacing:-.012em;font-size:clamp(34px,5vw,56px);line-height:1.06;}
.abt-cta__b{margin:0 0 clamp(28px,3.4vw,40px);color:var(--linen);font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.4vw,26px);line-height:1.34;text-wrap:pretty;}
.abt-cta__acts{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:clamp(16px,2vw,26px);}
.abt-cta__alt{color:var(--linen);}
.abt-cta--photo :focus-visible{outline-color:var(--linen);}

/* ---------------------------------------------------------
   Responsive — hero, follows home/subpage patterns
   --------------------------------------------------------- */
@media (max-width:840px){
  .abt-hero__grid{grid-template-columns:1fr minmax(0,300px);gap:clamp(28px,4.5vw,52px);align-items:start;}
}
@media (max-width:768px){
  .abt-hero__grid{grid-template-columns:1fr;gap:0;align-items:start;}
  .abt-hero__photo{display:none;}
  .abt-hero__lead{display:flex;align-items:center;gap:clamp(18px,4vw,28px);}
  .abt-hero__avatar{display:block;order:2;flex:0 0 auto;width:clamp(100px,30vw,132px);height:clamp(100px,30vw,132px);aspect-ratio:1/1;border-radius:50%;object-fit:cover;object-position:center 18%;background:var(--greige);}
  .abt-hero__lead .abt-hero__title{order:1;flex:0 1 auto;min-width:0;font-size:clamp(40px,11vw,52px);line-height:1.02;}
  .abt-hero__lead .abt-hero__name{display:block;}
}
@media (max-width:640px){
  .abt-story--photo{margin:clamp(14px,4vw,20px);}
}
@media (max-width:560px){
  .abt-hero{padding-block:calc(clamp(114px,26vw,150px)) clamp(48px,10vw,64px);}
  .abt-hero__title{font-size:clamp(44px,13vw,64px);line-height:.99;}
  .abt-bio{font-size:16.5px;line-height:1.7;}
}

@media (prefers-reduced-motion:reduce){
  .abt-hero__title,.abt-hero__lede,.abt-hero__actions,.abt-hero__photo{opacity:1 !important;transform:none !important;transition:none !important;}
}