/* hero with the real portrait in the homepage's arch frame */
.phero--about .phero__in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center}
.phero--about .arch{justify-self:end;width:min(100%,400px)}
.phero--about .arch__frame img{object-position:center 18%;transform:none}
.phero--about .arch__badge b{font-size:30px}

/* the letter */
.letter{background:var(--sand);position:relative;overflow:hidden}
.letter__in{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(34px,6vw,90px);align-items:start}
.letter__side{position:sticky;top:120px}
.letter__side .h2{font-size:clamp(32px,3.6vw,48px)}
.letter__body{font-family:var(--display);font-size:clamp(19px,1.6vw,23px);line-height:1.62;color:var(--plum-800);font-weight:400;
  font-variation-settings:"SOFT" 70,"WONK" 1,"opsz" 36;letter-spacing:-.005em}
.letter__body p+p{margin-top:1.05em}
.letter__body p:first-child::first-letter{float:left;font-size:4.2em;line-height:.82;margin:.06em .1em 0 0;font-weight:600;color:var(--rose);
  font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 144}
.letter__pull{margin:1.4em 0;padding:26px 0 26px 30px;border-left:3px solid;border-image:linear-gradient(var(--sun),var(--rose)) 1;
  font-size:1.2em;line-height:1.36;font-style:italic;color:var(--plum-700)}
.letter__pull b{font-style:normal;font-weight:600;background:linear-gradient(160deg,var(--sun),var(--rose));-webkit-background-clip:text;background-clip:text;color:transparent}
.letter__sig{margin-top:1.6em;display:flex;align-items:center;gap:18px}
.letter__sig img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:center 20%;border:2px solid #fff;box-shadow:var(--shadow-soft)}
.letter__sig b{display:block;font-style:italic;font-size:1.25em;color:var(--plum-600);font-weight:500}
.letter__sig span{display:block;font-family:var(--body);font-size:13.5px;color:var(--muted);letter-spacing:.02em}

/* record */
.record{background:var(--plum-900);color:#fff;padding:clamp(52px,6vw,80px) 0;position:relative;overflow:hidden}
.record .proof__arc circle{fill:none;stroke-width:1}
.record__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;position:relative;z-index:2}
.rec b{display:block;font-family:var(--display);font-size:clamp(44px,4.8vw,66px);line-height:.9;font-weight:600;letter-spacing:-.035em;
  background:linear-gradient(160deg,#fff 30%,var(--sun-soft));-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 144}
.rec span{display:block;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-dark);font-size:14px;color:rgba(255,255,255,.64);line-height:1.55;max-width:26ch}

/* bio */
.bio{background:var(--paper)}
.bio__in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(34px,6vw,84px);align-items:center}
.bio p+p{margin-top:18px}
.bio__media{position:relative}
.bio__media .ph{border-radius:var(--r-lg);aspect-ratio:4/4.6}
.bio__tag{position:absolute;left:-22px;bottom:30px;background:var(--plum-800);color:#fff;border-radius:18px;padding:16px 20px;max-width:250px;box-shadow:var(--shadow-lift)}
.bio__tag b{display:block;font-family:var(--display);font-size:20px;line-height:1.2;color:var(--sun-soft);font-weight:600}
.bio__tag span{display:block;font-size:13px;color:rgba(255,255,255,.7);margin-top:4px;line-height:1.45}

/* pillars */
.pillars{background:var(--lilac)}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.pillar{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 28px 30px}
.pillar .why__dot{margin-bottom:22px}
.pillar h3{font-size:clamp(21px,1.9vw,25px);margin-bottom:12px}
.pillar p{font-size:15.4px;color:var(--muted);line-height:1.7}

/* reading list */
.reads{background:var(--paper)}
.rlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(30px,5vw,70px);counter-reset:none}
.rlist li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:22px 0;border-top:1px solid var(--line)}
.rlist__spine{width:44px;height:62px;border-radius:4px 7px 7px 4px;position:relative;box-shadow:inset 5px 0 0 rgba(0,0,0,.14),0 10px 18px -12px rgba(var(--plum-900-rgb),.6)}
.rlist__spine::after{content:"";position:absolute;left:10px;right:8px;top:12px;height:2px;background:rgba(255,255,255,.55);box-shadow:0 6px 0 rgba(255,255,255,.35)}
.rlist h3{font-family:var(--display);font-size:19px;line-height:1.25;font-weight:600;color:var(--plum-800);font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 48}
.rlist h3 em{font-style:italic;font-weight:500}
.rlist small{display:block;font-size:13px;font-weight:600;color:var(--rose);margin:4px 0 6px;letter-spacing:.02em}
.rlist p{font-size:14.6px;color:var(--muted);line-height:1.6}

@media(max-width:1080px){
  .phero--about .phero__in{grid-template-columns:minmax(0,1fr)}
  .phero--about .arch{justify-self:center;margin-top:10px}
  .letter__in,.bio__in{grid-template-columns:minmax(0,1fr)}
  .letter__side{position:static}
  .record__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 26px}
  .pgrid{grid-template-columns:minmax(0,1fr)}
  .bio__tag{left:14px}
}
@media(max-width:660px){
  .rlist{grid-template-columns:minmax(0,1fr)}
  .phero--about .arch{width:min(100%,300px)}
}