/* about page styles -- extracted from site/templates/about.html.
   Edit here; pipeline/build.py copies site/assets/ into build/ and
   stamps the stylesheet links with a content hash. */
.ab-mast{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:#fff}
.ab-mast-bg{position:absolute;inset:0;z-index:-2;background-color:var(--ink);background-size:cover,cover;background-position:center 40%,center 40%}
.ab-mast::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,32,60,.96) 0%,rgba(5,32,60,.82) 45%,rgba(5,32,60,.45) 100%)}
.ab-mast .shell{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start;padding-block:18px 40px}
.ab-crumbs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0;list-style:none;font-size:12.5px;color:rgba(255,255,255,.7)}
.ab-crumbs a{color:rgba(255,255,255,.85)}.ab-crumbs li+li::before{content:"/";margin-right:8px;color:rgba(255,255,255,.35)}.ab-crumbs li:last-child{color:#fff;font-weight:600}
.ab-kicker{display:inline-block;margin:0 0 10px;padding:4px 10px;border-radius:4px;background:var(--accent);color:#fff;font-size:12px;font-weight:700}
.ab-mast h1{max-width:20ch;margin:0 0 12px;color:#fff;font-size:clamp(28px,3.4vw,42px);font-weight:800;line-height:1.12;letter-spacing:-.02em;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.ab-mast .lede{max-width:60ch;margin:0 0 20px;color:rgba(255,255,255,.9);font-size:16px;line-height:1.6;text-shadow:0 1px 10px rgba(0,0,0,.4)}
.ab-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 18px;border-radius:var(--r-sm);background:var(--accent);color:#fff!important;font-size:14.5px;font-weight:700;text-decoration:none!important;transition:background .15s}
.ab-btn:hover{background:var(--accent-dk)}
.ab-btn--ghost{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.4)}.ab-btn--ghost:hover{background:rgba(255,255,255,.2)}
.ab-actions{display:flex;flex-wrap:wrap;gap:10px}
.ab-side{padding:20px;border-radius:var(--r-md);background:#fff;color:var(--text);box-shadow:var(--shadow-pop)}
.ab-side h4{margin:0 0 4px;font-size:17px;font-weight:700}
.ab-side p{margin:0 0 12px;color:var(--body);font-size:13.5px;line-height:1.55}
.ab-side ul{margin:0 0 14px;padding:0;list-style:none;display:grid;gap:8px}
.ab-side li{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--text)}
.ab-side li svg{flex-shrink:0;margin-top:3px;color:var(--accent)}
.ab-side .ab-btn{width:100%}

.ab-page{padding:28px 0 8px;background:var(--page);color:var(--text)}
.ab-page .shell{display:grid;gap:18px}
.ab-card{padding:30px 34px;background:#fff;border-radius:var(--r-md);box-shadow:var(--shadow-card)}
.ab-card h2{margin:0 0 16px;font-size:clamp(21px,2.2vw,26px);font-weight:700;letter-spacing:-.015em}
.ab-card .sub{margin:-8px 0 18px;color:var(--body);font-size:15px}
.ab-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 32px}
.ab-story p{margin:0;color:#3b4050;font-size:16.5px;line-height:1.75;white-space:pre-line}
.ab-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none;counter-reset:s}
.ab-steps li{padding:20px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper)}
.ab-steps li::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:32px;height:32px;margin-bottom:12px;border-radius:50%;background:var(--accent);color:#fff;font-size:14px;font-weight:700}
.ab-steps h3{margin:0 0 6px;font-size:17px;font-weight:700}
.ab-steps p{margin:0;color:var(--body);font-size:15px;line-height:1.6}
.ab-std{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ab-std div{display:flex;gap:14px;padding:18px;border:1px solid var(--line);border-radius:var(--r-md)}
.ab-std .ic{flex-shrink:0;width:40px;height:40px;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.ab-std h3{margin:0 0 4px;font-size:16.5px;font-weight:700}
.ab-std p{margin:0;color:var(--body);font-size:15px;line-height:1.6}
.ab-fine{margin:0;color:var(--muted);font-size:13.5px;line-height:1.6}

@media (max-width:1050px){.ab-mast .shell{grid-template-columns:1fr}.ab-side{max-width:520px}.ab-steps{grid-template-columns:1fr}}
@media (max-width:767px){.ab-card{padding:22px 20px}.ab-story,.ab-std{grid-template-columns:1fr}.ab-story p{font-size:16px}}
@media (max-width:640px){.ab-mast h1{font-size:clamp(24px,7vw,32px)}.ab-actions .ab-btn{flex:1}}
