/* PAGE CSS: about
   Enqueued by functions.php when the slug matches.
   Lifted verbatim from the approved static build. */


/* ==========================================================
   PAGE: /about/
   Devices unique to this page: full-bleed portrait opener,
   first-person statement, vertical path, credentials ledger,
   full-bleed pull quote, community strip, teaching list.
   Shares no section structure with the homepage or the pillar.
   ========================================================== */

/* ---------- Opener: portrait to the edge ---------- */
/* portrait column reduced from 86fr at review: the headshot now takes 37%
   of the opener rather than 43%, and the copy column gains what it loses. */
.who{display:grid;grid-template-columns:74fr 126fr;align-items:center;background:var(--cream);}
/* frame carries the photograph's own ratio, so nothing is cropped away */
.who__media{position:relative;aspect-ratio:1000/1383;overflow:hidden;background:var(--ink-deep);}
/* 30% not 50%: the frame is slightly wider than the portrait, so cover
   crops top and bottom. biasing upward keeps his head clear of the edge
   and takes the loss from the jacket instead. */
.who__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;}
.who__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to right,rgba(16,41,53,.14) 0%,rgba(16,41,53,0) 30%,
    rgba(16,41,53,0) 74%,rgba(244,240,232,.34) 100%);}
.who__body{padding:calc(var(--barh) + clamp(48px,6vw,92px)) clamp(28px,5vw,92px) clamp(52px,6vw,96px);
  display:flex;flex-direction:column;justify-content:center;}
/* the 12ch cap sat exactly at the name's own length, so it could break
   between the two words. pinned instead. */
.who__body h1{font-size:clamp(34px,5.1vw,72px);line-height:1.03;margin-bottom:24px;
  max-width:none;white-space:nowrap;}
.who__lede{font-size:clamp(18px,1.85vw,22px);line-height:1.58;color:rgba(23,55,70,.88);max-width:44ch;}
.who__meta{display:flex;flex-wrap:wrap;gap:26px;margin-top:34px;padding-top:20px;
  border-top:1px solid var(--stone);
  font-family:var(--display);font-size:10.5px;text-transform:uppercase;letter-spacing:.2em;color:var(--slate);}

/* ---------- First-person statement ---------- */
.say__grid{display:grid;grid-template-columns:42fr 58fr;gap:clamp(32px,5vw,88px);align-items:start;}
.say h2{font-size:clamp(26px,3.1vw,42px);line-height:1.12;max-width:14ch;}
.say p{font-size:17.5px;line-height:1.74;color:rgba(23,55,70,.9);max-width:62ch;}
/* the opening paragraph carries the weight instead of a drop cap */
.say p:first-of-type{font-size:clamp(19px,2.05vw,25px);line-height:1.6;color:var(--ink);
  max-width:56ch;margin-bottom:1.3em;}

/* ---------- Vertical path ---------- */
.path{border-top:1px solid var(--stone);margin-top:clamp(44px,5vw,68px);}
.path__row{
  display:grid;grid-template-columns:110px minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(18px,3vw,52px);align-items:baseline;
  padding-block:clamp(22px,2.4vw,30px);border-bottom:1px solid var(--stone);
}
.path__yr{font-family:var(--display);font-size:clamp(15px,1.7vw,21px);font-weight:200;
  color:var(--gold);letter-spacing:.02em;}
.path__what{font-family:var(--display);font-weight:300;font-size:clamp(17px,1.8vw,22px);
  line-height:1.25;color:var(--ink);}
.path__note{font-size:16px;line-height:1.62;color:rgba(23,55,70,.78);margin:0;}

/* ---------- Credentials ledger ---------- */
.led{background:#F8F5EF;border:1px solid var(--stone);box-shadow:0 1px 44px rgba(23,55,70,.055);
  padding:clamp(30px,3.6vw,56px);}
.led__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;}
.led__cell{padding:clamp(20px,2.2vw,30px);border-top:1px solid var(--stone);}
.led__grid > .led__cell:nth-child(-n+2){border-top:0;padding-top:0;}
.led__grid > .led__cell:nth-child(odd){padding-left:0;}
.led__grid > .led__cell:nth-child(even){padding-right:0;border-left:1px solid var(--stone);}
.led__cell dt{font-family:var(--display);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.22em;color:var(--gold);margin:0 0 12px;}
.led__cell dd{margin:0;font-size:16.5px;line-height:1.6;color:rgba(23,55,70,.9);}
.led__cell dd span{display:block;}
.led__cell dd .led__gap{margin-top:10px;}
.led__note{font-size:14px;color:var(--slate);margin:0;max-width:none;}
/* sits inside the ledger grid, immediately under the designations cell, and
   spans both columns so the two sentences are not squeezed into one. */
.led__cell--note{grid-column:1 / -1;padding-left:0;padding-right:0;}

/* ---------- Full-bleed quote ---------- */
.quote{position:relative;overflow:hidden;background:var(--ink-deep);text-align:center;}
.quote blockquote{margin:0;font-family:var(--display);font-weight:200;font-style:italic;
  font-size:clamp(26px,4.2vw,58px);line-height:1.24;color:var(--cream);max-width:20ch;
  margin-inline:auto;letter-spacing:-.012em;}
.quote figcaption{margin-top:30px;font-family:var(--display);font-size:10.5px;
  text-transform:uppercase;letter-spacing:.24em;color:var(--gold);}

/* ---------- Community strip ---------- */
/* one line. 44 characters across the full content column. */
.life__title{max-width:none;white-space:nowrap;font-size:clamp(23px,3.35vw,44px);}
/* runs the full content column rather than sitting on a 60ch measure */
.life__intro{max-width:none;margin-top:18px;font-size:clamp(16px,1.55vw,19px);
  line-height:1.66;color:rgba(23,55,70,.88);}
.life__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,30px);
  margin-top:clamp(40px,5vw,64px);}
.life__cell figure{margin:0;position:relative;aspect-ratio:4/5;overflow:hidden;background:#1B3B49;}
.life__cell figure img{width:100%;height:100%;object-fit:cover;}
.life__slot{position:absolute;inset:0;display:grid;place-items:center;padding:20px;text-align:center;
  font-family:var(--display);font-size:10px;text-transform:uppercase;letter-spacing:.2em;
  color:rgba(244,240,232,.34);
  background-image:repeating-linear-gradient(to bottom,rgba(244,240,232,.05) 0 1px,transparent 1px 14%);}
.life__cell h3{font-size:19px;margin:22px 0 10px;}
.life__cell p{font-size:16px;line-height:1.62;color:rgba(23,55,70,.84);margin:0;}

/* ---------- Teaching ---------- */
/* broken to two lines in markup, so the split is fixed rather than incidental */
.teach__title{max-width:none;font-size:clamp(26px,3.1vw,42px);line-height:1.14;}
.teach__grid{display:grid;grid-template-columns:44fr 56fr;gap:clamp(32px,5vw,88px);align-items:start;}
.teach ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--stone);}
.teach li{padding-block:20px;border-bottom:1px solid var(--stone);
  display:grid;grid-template-columns:24px 1fr;gap:18px;align-items:baseline;
  font-size:16.5px;line-height:1.6;color:rgba(23,55,70,.9);}
/* a short gold rule, matching the hairline language used across the site.
   an outlined square read as an unchecked checkbox. */
.teach li::before{content:"";width:18px;height:1px;background:var(--gold);
  display:block;transform:translateY(-5px);}

/* ---------- Closing ---------- */
.end{position:relative;overflow:hidden;background:var(--ink-deep);}
.end__media{position:absolute;inset:0;z-index:0;}
.end__media img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;
  filter:saturate(.72) brightness(.94);}
/* the field is bright and the sky is a blue outside the palette, so the scrim
   is heavier here than elsewhere and warms toward the horizon. */
.end__media::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(rgba(16,41,53,.86),rgba(16,41,53,.86)),
    linear-gradient(to bottom,rgba(16,41,53,.55) 0%,rgba(16,41,53,.18) 46%,rgba(16,41,53,.62) 100%);}
.end__in{position:relative;z-index:1;text-align:center;}
.end h2{color:var(--cream);max-width:18ch;margin:0 auto 22px;}
.end p{color:rgba(244,240,232,.82);max-width:52ch;margin-inline:auto;}
.end__row{display:flex;flex-wrap:nowrap;gap:14px;justify-content:center;margin-top:30px;}
.end__row .btn{flex:0 0 auto;padding-inline:26px;}

@media (max-width:1080px){
  .who{grid-template-columns:1fr;}
  .who__media{aspect-ratio:1000/1383;}
  .who__body h1{white-space:normal;}
  .who__body{padding-top:clamp(40px,6vw,64px);}
  .life__title{white-space:normal;font-size:clamp(23px,4.2vw,34px);max-width:22ch;}
  .say__grid,.teach__grid{grid-template-columns:1fr;}
  .path__row{grid-template-columns:88px minmax(0,1fr);}
  .path__note{grid-column:2 / -1;margin-top:8px;}
  .life__grid{grid-template-columns:1fr;}
  .life__cell figure{aspect-ratio:16/10;}
}
@media (max-width:780px){
  .led__grid{grid-template-columns:1fr;}
  .led__grid > .led__cell{padding-inline:0;border-left:0;border-top:1px solid var(--stone);}
  .led__grid > .led__cell:nth-child(2){border-top:1px solid var(--stone);padding-top:clamp(20px,2.2vw,30px);}
  .end__row{flex-wrap:wrap;}
  .end__row .btn{width:100%;justify-content:center;}
}