/* styles the About page needs on top of blog.css */
.sec{box-shadow:inset 0 1px 0 var(--line);
  padding-top:clamp(3.5rem,8vw,6rem);padding-bottom:clamp(3.5rem,8vw,6rem)}
.sec--tall{padding-top:clamp(4.5rem,11vw,8.5rem);padding-bottom:clamp(4.5rem,11vw,8.5rem)}
.sec h2{font-family:var(--title);font-weight:var(--titleW);
  font-size:clamp(2.4rem,5.4vw,4.4rem);line-height:var(--titleLh);
  letter-spacing:var(--titleTrack);color:var(--ink);max-width:19ch}
.hgroup{margin-bottom:clamp(2.5rem,5vw,4rem)}
.hgroup--tight{margin-bottom:clamp(1.25rem,2.5vw,2rem)}

.about{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
picture{display:contents}
.about__img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:52% 34%}
.about p{color:var(--muted);margin-bottom:1.1rem;max-width:62ch}
.about p:last-child{margin-bottom:0}
.about__first{margin-top:1.5rem}
.pull{font-family:var(--title);font-weight:var(--titleW);letter-spacing:var(--titleTrack);
  line-height:1.3;font-size:clamp(1.6rem,3vw,2.4rem);color:var(--ink);
  margin-block:clamp(1.75rem,3vw,2.25rem);padding-left:1.35rem;
  border-left:2px solid var(--blueFill);max-width:30ch}

.next{margin-top:clamp(3.5rem,8vw,6rem)}
.next__now{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:1rem 1.5rem;
  padding:clamp(1.25rem,2.4vw,1.75rem);border:1px solid var(--line2);
  background:color-mix(in srgb,var(--blue) 6%,transparent)}
.next__y{font-size:var(--fsMicro);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.next__now h3{font-size:1.7rem;line-height:1.1;margin-bottom:.5rem}
.next__now p{color:var(--muted);font-size:var(--fsBody);max-width:60ch}
.next__lede{margin-top:clamp(2rem,4vw,2.75rem);color:var(--muted);max-width:56ch}
.dreams{list-style:none;margin-top:1.25rem;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:.1rem 2rem}
.dreams li{position:relative;padding:.45rem 0 .45rem 1.4rem;color:var(--ink);opacity:.88;
  box-shadow:inset 0 -1px 0 var(--line)}
.dreams li::before{content:'';position:absolute;left:.15rem;top:1.05em;
  width:.4rem;height:.4rem;border:1px solid var(--blue);transform:rotate(45deg)}

@media(max-width:60rem){
  .about{grid-template-columns:1fr}
  .about__fig{order:-1;max-width:34rem}
  .about__img{aspect-ratio:4/3;object-position:52% 26%}}
@media(max-width:34rem){
  .about__img{aspect-ratio:1/1;object-position:52% 28%}
  .next__now{grid-template-columns:1fr;gap:.35rem}}