/* ============================================================
   ABOUT PAGE
   Page specific styles. Everything here is prefixed .ab- so it
   cannot collide with the shared component classes in site.css.

   Direction: the Serena editorial layout. A split founder hero
   with a framed portrait and a handwritten signature, a dark
   band of figures, centred section headings, and a full width
   photograph that holds still while the page travels over it.
   The site tokens already carry that palette, so nothing here
   hard codes a colour.
   ============================================================ */

.ab-note{
  font-family:var(--script);
  font-size:clamp(1.35rem,2.2vw,1.75rem);
  line-height:1.3;
  color:var(--terracotta-deep);
  max-width:26ch;
}

/* Centred section heading, the shape every block below the hero
   opens with. --ab-head-color lets the dark bands reuse it. */
.ab-head{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  text-align:center;margin-inline:auto;
  max-width:46rem;
  margin-bottom:clamp(40px,5vw,64px);
}
.ab-head h2{color:var(--ab-head-color,var(--green))}
.ab-head .eyebrow{color:var(--ab-eyebrow-color,var(--green))}
.ab-head p{
  font-size:clamp(1rem,1.5vw,1.06rem);line-height:1.7;
  color:var(--ab-head-body,var(--ink-soft));text-wrap:balance;
}

/* ------------------------------------------------------------
   HERO
   Copy left, framed portrait right, signature closing the column
   the way a letter would.
   ------------------------------------------------------------ */
.ab-hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(40px,6vw,96px);
  align-items:center;
}
.ab-hero__name{
  font-size:clamp(2.8rem,6vw,4.6rem);
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--green);
  margin-block:.22em .2em;
}
.ab-hero__role{
  font-size:.7rem;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;line-height:1;color:var(--ink-soft);
  margin-bottom:clamp(20px,2.6vw,28px);
}
.ab-hero__lead{max-width:46ch}
.ab-hero__note{margin-top:clamp(24px,3vw,36px)}

/* Signature. Cursive, set large, sitting under the prose like a
   signed letter rather than a caption. */
.ab-sign{
  font-family:var(--script);
  font-size:clamp(2.1rem,3.8vw,3rem);
  line-height:1.1;
  color:var(--green);
  text-transform:capitalize;
  margin-top:clamp(24px,3.4vw,40px);
}

/* Framed portrait. A hairline frame with a cream mat inside it,
   so the photograph reads as something hung rather than placed. */
.ab-frame{
  padding:clamp(10px,1vw,14px);
  border:1px solid var(--sand-deep);
  border-radius:calc(var(--radius) + 12px);
  background:var(--cream);
}

/* The warm band that travels across the photograph as the page
   scrolls, driven by --sweep (0 to 1) from about.js. The photo
   was taken at golden hour, so the light already moves in it. */
.ab-portrait{
  position:relative;margin:0;
  border-radius:var(--radius);
  overflow:hidden;
  isolation:isolate;
}
.ab-portrait img{
  width:100%;height:auto;display:block;
  object-fit:cover;object-position:center bottom;
}
.ab-portrait::after{
  content:"";
  position:absolute;inset:-20% -60%;
  z-index:1;pointer-events:none;
  background:linear-gradient(
    104deg,
    rgba(255,214,158,0) 34%,
    rgba(255,206,140,.42) 50%,
    rgba(255,214,158,0) 66%
  );
  transform:translateX(calc((var(--sweep,.5) * 120%) - 60%));
  mix-blend-mode:soft-light;
}

/* ------------------------------------------------------------
   BACKGROUND
   Straight prose on one measure under a centred heading. The
   opening paragraph is set in the display serif and the rest in
   the body sans, so the section opens on a formal note and then
   drops into her own voice.
   ------------------------------------------------------------ */
.ab-bio__body{
  display:flex;flex-direction:column;gap:clamp(18px,2.2vw,26px);
  max-width:68ch;margin-inline:auto;
}
/* Scoped to :not(.ab-note) so the handwritten line in this section
   keeps its own type, and the lead is qualified to the same weight
   of selector so neither needs !important to win. */
.ab-bio__body p:not(.ab-note){
  font-size:clamp(1rem,1.5vw,1.08rem);
  line-height:1.78;color:var(--ink-soft);
}
.ab-bio__body p.ab-bio__lead{
  font-family:var(--serif);
  font-size:clamp(1.5rem,2.6vw,2.05rem);
  line-height:1.34;
  color:var(--ink);
  letter-spacing:-.01em;
}
.ab-bio__note{margin-top:clamp(10px,1.6vw,18px)}

/* ------------------------------------------------------------
   TENETS
   Three ideas, not three steps, so they carry no numbering. The
   hairline above each is the only rule on the page.
   ------------------------------------------------------------ */
.ab-tenets{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(32px,4.5vw,56px);
}
.ab-tenet{
  display:flex;flex-direction:column;gap:16px;
  padding-top:clamp(24px,3vw,32px);
  border-top:1px solid var(--sand-deep);
}
.ab-tenet__title{font-size:clamp(1.6rem,2.6vw,2.1rem);line-height:1.2;color:var(--green)}
.ab-tenet__body{font-size:clamp(1rem,1.5vw,1.06rem);line-height:1.75;color:var(--ink-soft)}
.ab-tenets__note{
  display:block;margin-inline:auto;margin-top:clamp(40px,5vw,60px);
  text-align:center;max-width:none;
}

/* ------------------------------------------------------------
   STILL BAND
   A photograph that holds its position while the page travels
   over it. The image layer is anchored to the viewport with
   background-attachment rather than a fixed child, because a
   fixed child cannot be clipped to a section without also
   losing the pinning that makes the effect. The green ground
   underneath carries the contrast for the cream headline; the
   photograph only tints it.
   ------------------------------------------------------------ */
.ab-still{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:var(--green-deep);
  /* Arched into the cream CTA below, the same curve the CTA and the
     figures band already use, so all three edges are one gesture. */
  border-radius:0 0 clamp(28px,4vw,48px) clamp(28px,4vw,48px);
  min-height:min(78vh,720px);
  display:grid;place-items:center;
  padding-block:clamp(96px,12vw,160px);
}
.ab-still__bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("hero-v2.jpg") center center / cover no-repeat fixed;
  mix-blend-mode:overlay;
  opacity:.24;
}
.ab-still__inner{position:relative;z-index:2;text-align:center}
.ab-still h2{
  color:var(--cream);
  font-size:clamp(2.8rem,7vw,5.4rem);
  line-height:1.1;letter-spacing:-.02em;
  max-width:18ch;margin-inline:auto;text-wrap:balance;
}
.ab-still__flower{
  position:absolute;z-index:1;pointer-events:none;
  width:clamp(120px,18vw,260px);opacity:.18;
}
.ab-still__flower--l{left:clamp(-40px,2vw,32px);bottom:-6%}
.ab-still__flower--r{right:clamp(-40px,2vw,32px);top:-6%;transform:scaleX(-1) rotate(8deg)}

/* ------------------------------------------------------------
   CLOSING
   Cream, because green belongs to the band above and the footer
   below, and three dark blocks in a row read as one. The page
   ends the way a letter does.
   ------------------------------------------------------------ */
.ab-close{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(32px,6vw,88px);
  align-items:start;
}
.ab-close__head{position:sticky;top:calc(72px + 32px);display:flex;flex-direction:column;gap:16px}
.ab-close__head h2{color:var(--green)}
.ab-close__body{display:flex;flex-direction:column;gap:20px}
/* Same scoping as .ab-bio__body: the generic paragraph rule would
   otherwise outrank .ab-sign and flatten the signature to body type. */
.ab-close__body p:not(.ab-sign):not(.ab-note){
  font-size:clamp(1rem,1.5vw,1.06rem);line-height:1.75;
  color:var(--ink-soft);max-width:58ch;
}
.ab-close__body p.ab-sign{
  color:var(--terracotta-deep);
  margin-top:clamp(12px,2vw,20px);
}
.ab-close__actions{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  margin-top:clamp(16px,2.5vw,28px);
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width:1099px){
  .ab-hero__grid{grid-template-columns:1fr;gap:clamp(32px,6vw,56px)}
  .ab-hero__media{max-width:560px}
  .ab-tenets{grid-template-columns:1fr;gap:clamp(24px,4vw,32px)}
  .ab-close{grid-template-columns:1fr;gap:24px}
  .ab-close__head{position:static}
}
@media (max-width:809px){
  /* Pinning the photograph costs more than it gives on a phone,
     where the band is short and the layer is expensive to
     composite. It becomes an ordinary background here. */
  .ab-still{min-height:0}
  .ab-still__bg{background-attachment:scroll}
  .ab-still__flower{width:clamp(96px,26vw,150px)}
}

@media (prefers-reduced-motion:reduce){
  .ab-portrait::after{display:none}
  .ab-still__bg{background-attachment:scroll}
}