/* ============================================================
   Clearmatter — About v2, the block system
   Loaded LAST on About v2 only. Everything is scoped to .abt-main so v1
   (About.html) is untouched.

   This file exists to bring About onto Work with me's block grammar. That
   grammar, in one place:
     · one page measure (--col) shared by every one-column block, so heads,
       ledes and notes share left and right edges all the way down
     · every band opens the same way: eyebrow (forest) -> serif H2 (slate,
       one size sitewide) -> lede (18px Inter, one size sitewide)
     · lists and card grids are hairline-topped cells, never boxes
     · photographs appear as inset rounded cards carrying SHORT copy
     · one dark full-bleed close, one filled CTA
   ============================================================ */

.abt-main{--col:840px;}

/* ---- shared head -------------------------------------------------------
   Matched to .cn-main's head block: same size, same weight, same colour.
   About was running ~16% smaller heads at a 760px measure, which read as a
   different template rather than the same one. */
.abt-main .abt-head{max-width:var(--col);margin-bottom:clamp(30px,4vw,48px);}
.abt-main .abt-head__eye{display:block;color:var(--h-det,var(--forest));}
.abt-main .abt-head__h{
  margin:clamp(10px,1.2vw,14px) 0 0;font-family:var(--serif);font-weight:400;
  font-size:clamp(31px,4.3vw,52px);line-height:1.05;letter-spacing:-.015em;
  color:var(--slate);text-wrap:balance;
}
/* one lede size and face for the whole page, as on Work with me */
.abt-main .abt-lede{
  max-width:var(--col);margin:clamp(16px,2vw,24px) 0 0;
  font-family:var(--sans);font-weight:400;font-size:18px;line-height:1.6;
  letter-spacing:0;color:var(--slate);text-wrap:pretty;
}
.abt-main .abt-note{margin:clamp(20px,2.4vw,28px) 0 0;max-width:var(--col);font-size:15px;line-height:1.6;color:var(--iron);}
@media (max-width:720px){.abt-main .abt-lede{font-size:17px;}.abt-main .abt-head{max-width:none;}}

/* ---- 1 · Hero, white ---------------------------------------------------
   Layout unchanged (the portrait split is About's own). Only the lede is
   pulled onto the page's lede size. */
.abt-main .abt-hero__lede{font-size:clamp(18px,1.9vw,21px);}
/* Phones: the portrait comes FIRST, above the eyebrow, on the text's left edge
   — the page opens on her face the way desktop does. Then ABOUT, the H1 at full
   width, the lede and the links. (Pass 1 had it beside the title, which squeezed
   the display line into two or three short lines.) */
@media (max-width:767px){
  .abt-main .abt-hero__lead{display:block;}
  .abt-main .abt-hero__lead .abt-hero__title{font-size:clamp(44px,11.5vw,60px);line-height:1.05;}
  .abt-main .abt-hero__lead .abt-hero__name{display:inline;}
  .abt-main .abt-hero__lede{font-size:17px;line-height:1.6;}
  .abt-main .abt-hero__avatar{display:block;order:0;float:none;margin:0 0 clamp(22px,5.5vw,30px);width:140px;height:140px;aspect-ratio:1/1;border-radius:50%;object-fit:cover;object-position:center 18%;background:var(--greige);}
}

/* ---- 2 · The story, a rounded linen card -------------------------------
   Work with me's block-2 container: the same inset rounded card, at the same
   geometry — linen instead of a photograph, so the prose stays readable. Six
   paragraphs reversed on a dark image was the page's least readable moment,
   and the page's rule is one dark band; the photograph moves to the beat card
   below. */
.abt-main .abt-story{background:var(--white);padding:clamp(20px,3.4vw,44px) 0 0;}
.abt-main .abt-story__card{
  background:var(--linen);margin:0 clamp(16px,4vw,56px);border-radius:18px;
  padding-block:clamp(64px,9vw,116px);
}
.abt-main .abt-bio{max-width:var(--col);font-size:clamp(17px,1.5vw,19px);line-height:1.78;color:var(--slate);}
.abt-main .abt-bio p{margin:0 0 1.05em;text-wrap:pretty;}
.abt-main .abt-bio p:last-of-type{margin-bottom:0;}
.abt-main .abt-bio__link{display:inline-flex;margin-top:clamp(22px,2.6vw,30px);}
@media (max-width:640px){.abt-main .abt-story{padding-top:clamp(14px,4vw,20px);}.abt-main .abt-story__card{margin:0 clamp(14px,4vw,20px);}}

/* ---- 3 · The beat, an inset photo card ---------------------------------
   Work with me's cn-when idiom exactly: one rounded inset card, photograph +
   scrim, short copy in linen inside the wash. It carries the story's closing
   paragraph, which is the one line on the page that turns from her to the
   reader — it was buried at the bottom of the wall of text. Verbatim,
   relocated. White ground, so the card is the only thing in the band.
   padding-block, not the card's vertical margin — a margin collapses out of a
   zero-padding section and lets a strip of the page ground show through. */
.abt-main .abt-beat{background:var(--white);padding:clamp(20px,3.4vw,44px) 0;}
.abt-main .abt-beat__card{
  position:relative;isolation:isolate;overflow:hidden;background:#0c0e0a;
  margin:0 clamp(16px,4vw,56px);border-radius:18px;
  padding-block:clamp(78px,10.5vw,130px);
}
.abt-main .abt-beat__bg{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;object-position:82% 42%;
  filter:sepia(.14) saturate(1.04) brightness(.84) contrast(1.02);
}
.abt-main .abt-beat__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(96deg,rgba(8,16,12,.88) 0%,rgba(8,16,12,.78) 38%,rgba(8,16,12,.58) 60%,rgba(8,16,12,.26) 84%,rgba(8,16,12,.1) 100%),
    linear-gradient(180deg,rgba(8,16,12,.2) 0%,rgba(8,16,12,.04) 40%,rgba(8,16,12,.3) 100%);
}
.abt-main .abt-beat__card .wrap{position:relative;z-index:2;}
.abt-main .abt-beat__line{
  margin:0;max-width:min(640px,62%);
  font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.6vw,32px);
  line-height:1.26;letter-spacing:-.012em;color:var(--linen);text-wrap:pretty;
  text-shadow:0 1px 18px rgba(8,16,12,.5);
}
.abt-main .abt-beat__card :focus-visible{outline-color:var(--linen);}
@media (max-width:820px){.abt-main .abt-beat__line{max-width:none;}}
@media (max-width:640px){.abt-main .abt-beat{padding:clamp(14px,4vw,20px) 0;}.abt-main .abt-beat__card{margin:0 clamp(14px,4vw,20px);}}

/* ---- 4 · What I bring, white -------------------------------------------
   Was a two-column wall with a dune-tick list — the tick is a one-off that
   appears nowhere else on the site. Rebuilt on Work with me's cn-work
   grammar: head, lede at the page measure, then the four domains as
   hairline-topped cells, four up, with the label above them the way the
   outcomes ledger labels its columns. */
.abt-main .abt-bring{background:var(--white);padding-block:clamp(72px,10vw,120px);}
.abt-main .abt-bring__label{display:block;color:var(--h-det,var(--forest));margin:clamp(34px,4.4vw,58px) 0 clamp(14px,1.8vw,20px);}
.abt-main .abt-bring__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.6vw,34px) clamp(24px,3.2vw,44px);}
.abt-main .abt-bring__cell{border-top:1px solid var(--h-rule,rgba(45,106,79,.22));padding-top:clamp(14px,1.6vw,20px);}
.abt-main .abt-bring__t{
  margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(19px,1.8vw,23px);
  line-height:1.16;letter-spacing:-.01em;color:var(--grove);text-wrap:pretty;
}
@media (max-width:1000px){.abt-main .abt-bring__grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.abt-main .abt-bring__grid{grid-template-columns:1fr;}}

/* ---- 5 · Credentials, linen --------------------------------------------
   Head grammar like every other band; the copy takes the page measure with
   the accredited mark beside it. */
.abt-main .abt-creds{background:var(--linen);padding-block:clamp(64px,9vw,104px);}
.abt-main .abt-creds__grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,3.2vw,44px);align-items:start;max-width:var(--col);}
.abt-main .abt-creds__copy{display:flex;flex-direction:column;gap:clamp(14px,1.7vw,20px);}
.abt-main .abt-creds__copy .abt-lede{margin:0;max-width:none;}
.abt-main .abt-creds__badge{flex:0 0 auto;width:83px;height:83px;object-fit:contain;display:block;}
@media (max-width:640px){.abt-main .abt-creds__grid{grid-template-columns:1fr;}}

/* ---- 6 · Outside the work, white ---------------------------------------
   Stays a footnote — eyebrow only, no band of its own — but it was set at
   15.5px iron, smaller than anything else on the page, which read as legal
   fine print under the warmest copy on it. Quiet now comes from the measure,
   not from shrinking the type. */
.abt-main .abt-outside{background:var(--white);padding-block:clamp(56px,8vw,92px);}
.abt-main .abt-outside__body{max-width:66ch;margin-top:clamp(16px,2vw,24px);display:flex;flex-direction:column;gap:1em;}
.abt-main .abt-outside__body p{margin:0;font-size:17px;line-height:1.72;color:var(--slate);text-wrap:pretty;}

/* ---- 7 · Hand-off, two doors ------------------------------------------
   Linen cards on white, centred serif heading above both. The one place on
   the page that moves on interaction: the card lifts and its rule and arrow
   warm to the accent. */
.abt-main .abt-next{background:var(--linen);padding-block:clamp(48px,6.7vw,80px) clamp(72px,10vw,120px);}
.abt-main .abt-next__h{
  margin:0 auto clamp(28px,3.6vw,44px);max-width:20ch;text-align:center;
  font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.6vw,44px);
  line-height:1.08;letter-spacing:-.014em;color:var(--slate);text-wrap:balance;
}
.abt-main .abt-next__doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);}
.abt-main .abt-door{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(10px,1.2vw,14px);padding:clamp(28px,3.4vw,44px);
  background:var(--white);border-radius:12px;border:1px solid var(--linen-deep,#E4E3DE);
  text-decoration:none;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease),background-color .45s var(--ease);
}
.abt-main .abt-door__eye{display:block;color:var(--h-det,var(--forest));}
.abt-main .abt-door__line{
  font-family:var(--serif);font-weight:400;font-size:clamp(23px,2.4vw,30px);
  line-height:1.14;letter-spacing:-.012em;color:var(--grove);text-wrap:pretty;
}
.abt-main .abt-door__link{
  display:inline-flex;align-items:center;gap:9px;margin-top:clamp(6px,.8vw,10px);
  font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:.01em;
  color:var(--acc,var(--forest));border-bottom:1px solid transparent;padding-bottom:2px;
  transition:border-color .35s var(--ease);
}
.abt-main .abt-door__link i{transition:transform .35s var(--ease);}
.abt-main .abt-door:hover{
  transform:translateY(-4px);background:var(--white);
  border-color:var(--h-rule,rgba(45,106,79,.22));box-shadow:0 14px 34px -18px rgba(10,10,9,.3);
}
.abt-main .abt-door:hover .abt-door__link{border-color:var(--acc,var(--forest));}
.abt-main .abt-door:hover .abt-door__link i{transform:translateX(4px);}
.abt-main .abt-door:focus-visible{transform:translateY(-4px);}
@media (max-width:760px){.abt-main .abt-next__doors{grid-template-columns:1fr;}}
@media (prefers-reduced-motion:reduce){
  .abt-main .abt-door,.abt-main .abt-door__link i{transition:none;}
  .abt-main .abt-door:hover{transform:none;}
}