/* /about — the entity page. Its job is to answer "who is Andrew Lauchner"
   directly and completely, and to be the one page that links to everything
   else, so the 129 pages of books, notes, tools and cases hang off a hub
   instead of off a sitemap. base.css owns the tokens, header, footer, .btn,
   .eyebrow and .wrap; only page-specific layout lives here. */
.ahero{padding:clamp(52px,6.5vw,92px) 0 clamp(26px,3vw,38px);border-top:0}
.ahero h1{font-size:var(--t-h1);margin-top:14px;max-width:16em}
.ahero .lede{font-size:clamp(19px,2.1vw,25px);line-height:1.45;max-width:36em;margin-top:22px;color:var(--cream);text-wrap:pretty}
.ahero .sub{margin-top:18px;max-width:var(--lane-text);font-size:17px;line-height:1.65;color:var(--muted)}
.ahero .ctarow{margin-top:clamp(24px,3vw,34px)}

.asec{padding-block:clamp(44px,5.5vw,76px);border-top:1px solid var(--rule)}
.asec > .wrap > .eyebrow{margin-bottom:12px}
.asec h2{font-size:clamp(25px,3.2vw,40px);line-height:1.1;letter-spacing:var(--track);max-width:18em;margin-bottom:18px;text-wrap:balance}
.asec p{font-size:17px;line-height:1.65;max-width:var(--lane-text)}
.asec p + p{margin-top:14px}

/* What I do: four blocks, the same four the homepage argues at length. */
.afour{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,30px);margin-top:clamp(24px,3vw,36px)}
@media(max-width:760px){.afour{grid-template-columns:1fr}}
.afour div{border-top:2px solid var(--edge);padding-top:14px}
.afour h3{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.afour p{font-size:15.5px;line-height:1.55;color:var(--muted);max-width:none}

/* The library. This is the internal-linking payload: every book, tool and
   note reachable from one page, with enough description that the link means
   something to a reader and to a crawler. */
.alib{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px);margin-top:clamp(22px,2.6vw,32px)}
@media(max-width:820px){.alib{grid-template-columns:1fr}}
.alib a{display:block;background:var(--well);border:1px solid var(--rule);border-radius:6px;padding:20px 22px;transition:border-color .18s ease}
.alib a:hover{border-color:var(--accent)}
.alib .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.alib b{display:block;font-family:var(--serif);font-size:23px;line-height:1.15;letter-spacing:var(--track);margin-top:7px}
.alib span{display:block;font-size:14.5px;line-height:1.5;color:var(--muted);margin-top:8px}
.alib em{font-style:normal;color:var(--accent)}

.alist{list-style:none;margin-top:18px;padding:0;max-width:var(--lane-text)}
.alist li{padding-top:13px;margin-top:13px;border-top:1px solid var(--hair);font-size:16px;line-height:1.55}
.alist li:first-child{margin-top:0;padding-top:0;border-top:0}
.alist a{border-bottom:1px solid var(--rule)}
.alist a:hover{border-color:var(--accent)}
.alist b{color:var(--cream)}

.afacts{margin-top:clamp(22px,2.6vw,32px);max-width:var(--lane-text)}
.afacts div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px;padding-top:13px;margin-top:13px;border-top:1px solid var(--hair);font-size:16px;line-height:1.55}
.afacts div:first-child{margin-top:0;padding-top:0;border-top:0}
.afacts dt{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);line-height:19px}
.afacts dd{margin:0}
@media(max-width:600px){.afacts div{grid-template-columns:1fr;gap:4px}}