/* About page only. Everything else comes from site.css. */

/* opening */
.ab-open{padding-block:64px 64px}
.ab-open .h1{font-size:48px;margin-bottom:32px}
.ab-ph{display:none}
.ab-sort{position:relative;display:inline-block;white-space:nowrap}
.ab-sort svg{position:absolute;left:-2px;right:-2px;bottom:-.14em;width:calc(100% + 4px);height:.2em;pointer-events:none}
.ab-intro{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:40px;align-items:center}
.ab-shop{width:100%;aspect-ratio:300/180;height:auto}

/* the list */
.ab-three{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.ab-three svg{width:60px;height:60px;margin:0 0 14px -5px}
.ab-three p{font-family:var(--tight);font-weight:600;font-size:17px;letter-spacing:-.01em;line-height:1.25;text-wrap:balance}

/* pay someone, or do it yourself */
.ab-fork{display:grid;grid-template-columns:1fr 1px 1fr;gap:40px;align-items:center;text-align:center}
.ab-fork figcaption{margin-top:16px;font-family:var(--tight);font-weight:600;font-size:17px;letter-spacing:-.01em;line-height:1.3;text-wrap:balance}
.ab-fork svg{width:96px;height:96px;margin-inline:auto}
.ab-fork>i{display:block;align-self:stretch;background:rgba(247,247,245,.4)}

/* Luke's note */
.ab-luke{display:grid;grid-template-columns:112px minmax(0,1fr);gap:36px;align-items:start}
.headshot{display:block;width:112px;height:112px;border-radius:50%;object-fit:cover}
.ab-note{position:relative;padding:24px 28px;border:1px solid var(--ink);border-radius:14px}
.ab-note::before{content:"";position:absolute;left:-8px;top:44px;width:14px;height:14px;background:var(--paper);border-left:1px solid var(--ink);border-bottom:1px solid var(--ink);transform:rotate(45deg)}
.ab-note p{text-wrap:pretty}
.ab-note p+p{margin-top:12px}

@media (max-width:860px){
.ab-open{padding-block:36px 44px}
.ab-open .h1{font-size:clamp(27px,8vw,44px);margin-bottom:20px}
.ab-three{grid-template-columns:1fr;gap:18px}
.ab-three li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center}
.ab-three svg{width:44px;height:44px;margin:0 0 0 -3px}
.ab-three p{font-size:16px}
.ab-fork svg{width:72px;height:72px}
.ab-fork figcaption{font-size:16px}
}
@media (max-width:599px){
.ab-ph{display:inline}
.ab-open .h1{line-height:1.14}
.ab-sort svg{bottom:-.08em;height:.16em}
.ab-intro{grid-template-columns:1fr;gap:24px}
.ab-shop{width:190px}
.ab-fork{grid-template-columns:1fr;gap:20px;text-align:left}
.ab-fork figure{display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:center}
.ab-fork svg{width:56px;height:56px;margin:0}
.ab-fork figcaption{margin:0}
.ab-fork>i{display:none}
.ab-luke{grid-template-columns:1fr;gap:18px}
.headshot{width:72px;height:72px}
.ab-note{padding:20px 22px}
.ab-note::before{left:28px;top:-8px;border-left:1px solid var(--ink);border-bottom:0;border-top:1px solid var(--ink)}
}
.hw{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.hw h3{font-size:17px;margin-bottom:6px}
.hw p{line-height:1.5}
@media (max-width:760px){.hw{grid-template-columns:1fr;gap:24px}}