/* ===========================================================
   KD THEME - about.css  (about page only)
   Editorial "dossier" redesign. Scoped under .page-about.
   Uses tokens from base.css (--bg --fg --acc --dim --dimb --mut
   --fd --fb --eout), the shared .g grid, and .rv reveals.
   =========================================================== */

/* utility voice */
.page-about .ab-eyebrow{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--fb);font-size:.68rem;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;color:var(--mut);
}
.page-about .ab-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--acc);flex:none}
.page-about .ab-metaline,
.page-about .ab-count{
  font-family:var(--fb);font-size:.68rem;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;color:var(--mut);white-space:nowrap;
}

/* ── HERO ── */
.page-about .ab-hero{
  position:relative;overflow:hidden;
  padding:38vh 5vw 14vh;border-bottom:1px solid var(--dimb);
}
.page-about .ab-hero .g{
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.5) 0%, transparent 70%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.5) 0%, transparent 70%);
}
.page-about .ab-hero__head{
  position:relative;z-index:1;display:flex;justify-content:space-between;
  align-items:baseline;gap:1.5rem;margin-bottom:2.5rem;
}
.page-about .ab-hero__name{
  position:relative;z-index:1;
  font-family:var(--fd);font-weight:400;line-height:.82;
  letter-spacing:.005em;text-transform:uppercase;
}
.page-about .ab-hero__im{
  display:block;font-size:clamp(1.4rem,3.2vw,2.6rem);
  letter-spacing:.32em;color:var(--mut);margin-bottom:.4rem;padding-left:.18em;
}
.page-about .ab-hero__big{display:block;font-size:clamp(5rem,20vw,17rem)}
.page-about .ab-hero__tag{
  position:relative;z-index:1;margin-top:2.4rem;
  font-family:var(--fb);font-weight:300;font-style:italic;
  font-size:clamp(1.15rem,2.4vw,1.9rem);max-width:24ch;
}

/* ── section frame ── */
.page-about .ab-sec{
  position:relative;overflow:hidden;
  padding:9vh 5vw;border-bottom:1px solid var(--dimb);
}
.page-about .ab-sec--grid .g{
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 100%);
}
.page-about .ab-sec__head{
  position:relative;z-index:1;display:flex;justify-content:space-between;
  align-items:baseline;gap:2rem;margin-bottom:3.5rem;
}
.page-about .ab-sec__title{
  font-family:var(--fd);font-weight:400;line-height:.9;text-transform:uppercase;
  letter-spacing:.01em;font-size:clamp(2.4rem,6vw,4.6rem);
}

/* ── WHO ── */
.page-about .ab-who{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:clamp(2rem,6vw,7rem)}
.page-about .ab-who__aside{position:relative;z-index:1;align-self:start}
.page-about .ab-who__lead{position:relative;z-index:1}
.page-about .ab-who__desc{
  font-family:var(--fb);font-weight:300;line-height:1.42;
  font-size:clamp(1.25rem,2.3vw,1.85rem);max-width:36ch;
}
.page-about .ab-who__passion{
  margin-top:2rem;color:var(--mut);max-width:44ch;
  font-size:clamp(1.02rem,1.7vw,1.28rem);line-height:1.5;
}
.page-about .ab-who__passion span{color:var(--acc);font-weight:500}

/* ── CAPABILITIES (expandable ledger) ── */
.page-about .ab-cap{position:relative;z-index:1;border-top:1px solid var(--dim)}
.page-about .ab-cap__row{
  display:block;width:100%;padding:0;font:inherit;color:inherit;
  text-align:left;background:none;border:0;border-bottom:1px solid var(--dim);cursor:pointer;
}
.page-about .ab-cap__bar{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.5rem 0;
}
.page-about .ab-cap__name{
  font-family:var(--fd);font-weight:400;line-height:1;text-transform:uppercase;
  letter-spacing:.02em;font-size:clamp(1.6rem,4vw,3rem);
  transition:transform .5s var(--eout),color .35s;
}
.page-about .ab-cap__plus{position:relative;width:20px;height:20px;flex:none;opacity:.55;transition:opacity .3s,color .35s}
.page-about .ab-cap__plus::before,
.page-about .ab-cap__plus::after{content:'';position:absolute;left:50%;top:50%;background:currentColor}
.page-about .ab-cap__plus::before{width:20px;height:1.5px;transform:translate(-50%,-50%)}
.page-about .ab-cap__plus::after{width:1.5px;height:20px;transform:translate(-50%,-50%);transition:transform .5s var(--eout)}
.page-about .ab-cap__desc{display:block;overflow:hidden;max-height:0;transition:max-height .55s var(--eout)}
.page-about .ab-cap__desc span{
  display:block;padding:0 0 1.8rem;max-width:54ch;color:var(--mut);
  font-family:var(--fb);font-size:1.02rem;line-height:1.5;
}
.page-about .ab-cap__row:hover .ab-cap__name,
.page-about .ab-cap__row:focus-visible .ab-cap__name{color:var(--acc);transform:translateX(.6rem)}
.page-about .ab-cap__row:hover .ab-cap__plus,
.page-about .ab-cap__row:focus-visible .ab-cap__plus{opacity:1;color:var(--acc)}
.page-about .ab-cap__row.is-open .ab-cap__name{color:var(--acc)}
.page-about .ab-cap__row.is-open .ab-cap__plus::after{transform:translate(-50%,-50%) rotate(90deg)}

/* ── DISCIPLINES (flowing word-set) ── */
.page-about .ab-disc{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:baseline}
.page-about .ab-disc__item{
  font-family:var(--fd);font-weight:400;line-height:1.08;text-transform:uppercase;
  letter-spacing:.015em;font-size:clamp(1.8rem,5.4vw,4rem);
  color:var(--fg);opacity:.85;transition:color .3s var(--eout),opacity .3s;
}
.page-about .ab-disc__item:not(:last-child)::after{content:'/';color:var(--mut);margin:0 .35em;opacity:.5}
.page-about .ab-disc__item:hover{color:var(--acc);opacity:1}

/* ── CREDENTIALS (dossier ledger with leader dots) ── */
.page-about .ab-cred{position:relative;z-index:1;border-top:1px solid var(--dim)}
.page-about .ab-cred__row{
  display:flex;align-items:baseline;gap:.6em;
  padding:1.15rem 0;border-bottom:1px solid var(--dim);
}
.page-about .ab-cred__title{
  flex:none;max-width:70%;font-family:var(--fb);font-weight:400;
  font-size:clamp(1rem,1.7vw,1.22rem);transition:transform .4s var(--eout),color .3s;
}
.page-about .ab-cred__lead{flex:1;height:0;border-bottom:1px dotted var(--mut);transform:translateY(-.28em);opacity:.55}
.page-about .ab-cred__meta{
  flex:none;white-space:nowrap;font-family:var(--fb);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mut);transition:color .3s;
}
.page-about .ab-cred__row:hover .ab-cred__title{transform:translateX(.5rem);color:var(--acc)}
.page-about .ab-cred__row:hover .ab-cred__meta{color:var(--fg)}

/* ── responsive ── */
@media (max-width:760px){
  .page-about .ab-hero{padding:30vh 5vw 10vh}
  .page-about .ab-who{grid-template-columns:1fr;gap:2rem}
  .page-about .ab-cred__title{max-width:62%}
}
@media (prefers-reduced-motion:reduce){
  .page-about .ab-cap__desc,
  .page-about .ab-cap__name,
  .page-about .ab-disc__item{transition:none}
}

/* ===========================================================
   OceanWP integration fixes
   (About sections are transparent; OceanWP paints an opaque
   white wrapper + overrides heading fonts on inner pages.)
   =========================================================== */

/* Let the dark --bg show through OceanWP's page wrappers */
body:has(.page-about){ background: var(--bg); }
body:has(.page-about) #main,
body:has(.page-about) #content,
body:has(.page-about) #content-wrap,
body:has(.page-about) .content-area,
body:has(.page-about) article.page,
body:has(.page-about) .entry-content,
body:has(.page-about) .single-page,
body:has(.page-about) #wrap,
body:has(.page-about) #outer-wrap{
  background: transparent !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Belt-and-suspenders: keep the accordion marker sized on inline spans */
.page-about .ab-cap__plus{ display: inline-block; }

/* Beat OceanWP's .entry-content heading typography */
body:has(.page-about) .ab-hero__im,
body:has(.page-about) .ab-hero__big,
body:has(.page-about) .ab-sec__title,
body:has(.page-about) .ab-cap__name,
body:has(.page-about) .ab-disc__item{
  font-family: var(--fd) !important;
  font-weight: 400 !important;
}
body:has(.page-about) .ab-hero__tag,
body:has(.page-about) .ab-who__desc,
body:has(.page-about) .ab-who__passion,
body:has(.page-about) .ab-cap__desc span,
body:has(.page-about) .ab-cred__title{
  font-family: var(--fb) !important;
}