/* ==================================================================
   About page (about.html). Loads after styles.css and only targets
   body.about-page / .about, so the home page is untouched.
   Same tokens as home: --pink, --ink, Montserrat (display) + Figtree (body).
   ================================================================== */
.about-page{min-height:0;overflow-x:hidden}
.about{--ab-gap:clamp(72px,9vw,132px);--ab-fs:clamp(18px,1.45vw,21px)}
.about p{font:400 var(--ab-fs)/1.62 var(--body);letter-spacing:-.006em;color:#2c2c2e}

/* desktop nav: current page in pink */
@media (min-width:761px){html:not([data-tmenu]) .about-page .nav > .links > a[aria-current="page"]{color:var(--pink)}}

/* hero */
.ab-hero{padding-top:clamp(40px,6vw,96px);padding-bottom:var(--ab-gap)}
.about .ab-hero h1{font:900 clamp(56px,9.2vw,150px)/.92 var(--display);letter-spacing:-.045em;color:var(--ink);margin:0 0 0 -.05em;white-space:normal;text-wrap:balance}
.about .ab-lead{margin-top:clamp(24px,2.6vw,40px);max-width:22em;font:400 clamp(24px,2.6vw,38px)/1.28 var(--body);letter-spacing:-.018em;color:#151517;text-wrap:pretty}

/* sections: heading column + reading column */
.ab-sec{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,5vw,96px);padding-top:var(--ab-gap);padding-bottom:var(--ab-gap);position:relative}
.ab-sec::before{content:"";position:absolute;top:0;left:48px;right:48px;height:1px;background:#ECECEE}
.ab-side h2{position:sticky;top:40px;font:800 clamp(34px,3.6vw,56px)/1.02 var(--display);letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.ab-side h2::before{content:"";display:block;width:44px;height:4px;border-radius:2px;background:var(--pink);margin-bottom:clamp(18px,1.8vw,26px)}
.ab-body{max-width:640px}
.ab-body > * + *{margin-top:1.15em}
.about .ab-turn{font:800 clamp(24px,2.2vw,32px)/1.18 var(--display);letter-spacing:-.03em;color:var(--ink);margin-top:1.3em;margin-bottom:.15em;text-wrap:balance}

/* pull quote (bold line in her copy) */
.about .ab-pull{margin:clamp(40px,4vw,56px) 0;padding:clamp(28px,2.6vw,36px) 0;border-top:1px solid #ECECEE;border-bottom:1px solid #ECECEE}
.about .ab-pull strong{display:block;font:900 clamp(32px,3.4vw,52px)/1.04 var(--display);letter-spacing:-.04em;color:var(--ink);text-wrap:balance}
.about .ab-pull strong::first-line{color:inherit}

/* iMessage exchange (lines of her copy as bubbles). Apple = blue sent bubble with tails;
   html[data-device="android"] = green, no iMessage chrome. */
.ab-chat{display:flex;flex-direction:column;gap:6px;overflow:hidden;padding:0 2px 2px;margin:clamp(36px,3.6vw,52px) 0;max-width:500px;font-size:clamp(17px,1.3vw,19px)}
.about .ab-b{position:relative;max-width:80%;padding:.5em .85em .52em;border-radius:1.1em;font:400 1em/1.32 var(--ios);letter-spacing:-.022em;font-synthesis:none;-webkit-font-smoothing:antialiased}
.about .ab-b.out{align-self:flex-end;margin-right:.32em;background:linear-gradient(#3FA6FF,var(--im-bot));color:#fff}
.about .ab-b.in{align-self:flex-start;margin-left:.32em;margin-top:4px;background:#E9E9EB;color:#000}
.ab-b::before,.ab-b::after{content:"";position:absolute;bottom:0;height:1em}
.ab-b.in::before{left:-.35em;width:1em;background:#E9E9EB;border-bottom-right-radius:.8em .7em}
.ab-b.in::after{left:-1.3em;width:1.3em;height:1.2em;background:var(--bg);border-bottom-right-radius:.5em}
.ab-b.out::before{right:-.35em;width:1em;background:var(--im-bot);border-bottom-left-radius:.8em .7em}
.ab-b.out::after{right:-1.3em;width:1.3em;height:1.2em;background:var(--bg);border-bottom-left-radius:.5em}
html[data-device="android"] .about .ab-b.out{background:linear-gradient(#4CD964,#26AD48)}
html[data-device="android"] .ab-b.out::before{background:#26AD48}
/* Android phone (default for non-Apple): Messages-style rounded bubbles, Roboto */
html[data-android="2"] .about .ab-b{font-family:var(--and);letter-spacing:0;border-radius:22px;padding:.55em .95em;margin-left:0;margin-right:0}
html[data-android="2"] .about .ab-b.out{background:var(--and-out);border-bottom-right-radius:6px}
html[data-android="2"] .about .ab-b.in{background:var(--and-in);color:var(--and-ink);border-bottom-left-radius:6px}
html[data-android="2"] .ab-b::before,html[data-android="2"] .ab-b::after{display:none}

/* closing line + button */
.ab-close{position:relative;padding-top:var(--ab-gap);padding-bottom:clamp(96px,10vw,150px);display:flex;flex-direction:column;align-items:flex-start}
.ab-close::before{content:"";position:absolute;top:0;left:48px;right:48px;height:1px;background:#ECECEE}
.about .ab-final{max-width:15em;font:900 clamp(40px,5.6vw,88px)/1 var(--display);letter-spacing:-.045em;color:var(--ink);margin-left:-.04em}
.about .ab-final strong{font-weight:900}
.about .ab-final span{display:block}
.about .ab-final span + span{margin-top:.12em}
.about .ab-final em{font-style:normal;color:var(--pink)}
.about .ab-close .cta{margin-top:clamp(40px,4vw,60px)}

/* footer: in the page flow here (home pins it to the bottom of a one-screen layout) */
.about-page .site-foot{position:static;padding-top:28px;padding-bottom:28px;border-top:1px solid #ECECEE;flex-wrap:wrap;row-gap:10px}

/* laptop / landscape tablet */
@media (min-width:761px) and (max-width:1100px){
  .ab-sec{grid-template-columns:minmax(0,4fr) minmax(0,6fr)}
}

/* iPad portrait and any 761+ portrait screen: single reading column, centered */
@media (min-width:761px) and (orientation:portrait){
  .about{--ab-gap:clamp(64px,8vw,96px);--ab-fs:20px}
  .ab-hero{padding-top:clamp(32px,4vh,64px)}
  .about .ab-hero h1{font-size:clamp(72px,11vw,120px)}
  .about .ab-lead{font-size:clamp(26px,3.6vw,34px)}
  .ab-sec{grid-template-columns:minmax(0,1fr);row-gap:36px}
  .ab-intro .ab-side{display:none}
  .ab-side h2{position:static;font-size:clamp(40px,6vw,56px)}
  .ab-body{max-width:680px}
  .about .ab-close .cta{width:min(100%,520px)}
  .about-page .site-foot{justify-content:flex-start;padding-bottom:28px}
}

/* phones */
@media (max-width:760px){
  .about{--ab-gap:64px;--ab-fs:18px}
  /* sticky header: no logo (it lives in the menu), hamburger right */
  .about-page .nav{position:sticky;top:0;background:var(--bg);transition:box-shadow .2s}
  .about-page.scrolled .nav{box-shadow:0 1px 0 #ECECEE}
  .about-page.menu-open .nav{box-shadow:none}
  .about-page .menu-btn{margin-left:auto}
  .ab-hero{padding-top:28px;padding-bottom:var(--ab-gap)}
  .about .ab-hero h1{font-size:clamp(44px,13.6vw,64px);line-height:.95;letter-spacing:-.04em;margin-left:-.03em}
  .about .ab-lead{margin-top:20px;font-size:clamp(21px,5.9vw,25px);line-height:1.3}
  .ab-sec{grid-template-columns:minmax(0,1fr);row-gap:28px}
  .ab-sec::before,.ab-close::before{left:16px;right:16px}
  .ab-intro .ab-side{display:none}
  .ab-side h2{position:static;font-size:clamp(32px,9.4vw,40px);line-height:1.04}
  .ab-side h2::before{width:36px;margin-bottom:16px}
  .about .ab-turn{font-size:clamp(22px,6.2vw,26px)}
  .about .ab-pull{margin:36px 0;padding:26px 0}
  .about .ab-pull strong{font-size:clamp(30px,8.6vw,38px);line-height:1.06}
  .ab-chat{margin:34px 0;font-size:var(--mb-fs,17px);max-width:none}
  .about .ab-b{max-width:84%}
  .ab-close{padding-bottom:56px;align-items:stretch}
  .about .ab-final{font-size:clamp(36px,10.6vw,48px);line-height:1.02;max-width:none}
  /* same pill as home, full width */
  .about .ab-close .cta{margin-top:36px;--m-cta-h:68px;align-self:stretch;width:100%}
  .about-page .site-foot{display:flex;justify-content:center;gap:18px;padding:22px 16px calc(26px + env(safe-area-inset-bottom))}
}
@media (max-width:360px){.about{--ab-fs:17px}}

/* intro flows straight under the lead (no divider, no empty heading column) */
.ab-hero{padding-bottom:clamp(36px,4vw,60px)}
.ab-sec.ab-intro{display:block;padding-top:0}
.ab-intro::before,.ab-intro .ab-side{display:none}
.ab-intro .ab-body{max-width:680px}
@media (min-width:761px) and (orientation:portrait){.about .ab-hero h1{font-size:clamp(64px,10vw,112px)}}
@media (max-width:760px){.ab-hero{padding-bottom:32px}}

/* founder, Oct 22: on phones, "Homegirl" in the title is brand pink; "About" stays black */
@media (max-width:760px){.about .ab-hero h1 .ab-h1-brand{color:var(--pink)}}