/* ═══════════════════════════════════════════════════════════════════
   About — the narrative counterpart to personal.html.
   personal.html is an archive: plates, index rows, credential tables.
   This page is prose. Same specimen-plate world, but paced for reading:
   a wide measure, real paragraph rhythm, portrait carried at scale.
   Loads system.css first.
   ═══════════════════════════════════════════════════════════════════ */

/* ── nav — system.css carries no .nav; each property styles its own ── */
.nav{
  position:sticky;top:0;z-index:50;background:rgba(5,5,5,.88);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
[data-theme="light"] .nav{background:rgba(242,240,234,.9)}
.nav .wrap{display:flex;align-items:center;gap:20px;min-height:60px;flex-wrap:wrap}
.mark{
  font-family:var(--display);font-weight:640;font-stretch:110%;
  font-size:13px;letter-spacing:.34em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;color:var(--bone);
}
.nav ul{display:flex;gap:22px;list-style:none;margin:0 0 0 auto;padding:0;flex-wrap:wrap}
.nav ul a{
  font:500 var(--t-micro)/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;padding:8px 0;
}
.nav ul a:hover,.nav ul a:focus-visible{color:var(--bone)}
.nav ul a.on{color:var(--bone);border-bottom:1px solid var(--bone)}

/* ── hero — portrait left, statement right; inverted from personal ── */
.a-hero{border-bottom:1px solid var(--line);overflow-x:clip}
.a-hero .wrap{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(28px,5vw,72px);align-items:end;
  padding-top:clamp(48px,7vh,88px);padding-bottom:clamp(36px,5vh,64px);
}
.a-portrait{position:relative}
.a-portrait .plate-img{border:1px solid var(--line)}
.a-hero h1{
  font-family:var(--display);font-weight:770;font-stretch:64%;
  font-size:clamp(38px,6.6vw,88px);line-height:.88;letter-spacing:.004em;
  text-transform:uppercase;margin:14px 0 0;
}
.a-hero .lede{margin-top:26px;max-width:40ch}
@media(max-width:820px){
  .a-hero .wrap{grid-template-columns:1fr}
  .a-portrait{max-width:420px}
}

/* ── prose body ─────────────────────────────────────────────────── */
.a-body{padding:clamp(44px,6vw,80px) 0}
.a-body .wrap{
  display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);
  gap:clamp(24px,4vw,64px);align-items:start;
}
.a-sec{grid-column:1/-1;display:grid;grid-template-columns:subgrid;
       padding:clamp(30px,4vw,52px) 0;border-top:1px solid var(--line)}
.a-sec:first-child{border-top:0;padding-top:0}
@media(max-width:820px){
  .a-body .wrap{grid-template-columns:1fr}
  .a-sec{grid-template-columns:1fr;gap:16px}
}
.a-mark{position:sticky;top:84px}
.a-mark .n{
  display:block;font-family:var(--display);font-weight:740;font-stretch:66%;
  font-size:clamp(30px,3.4vw,46px);line-height:.9;color:var(--bone);
}
.a-mark .lbl{margin-top:10px}
@media(max-width:820px){.a-mark{position:static}}

.a-sec h2{
  font-family:var(--display);font-weight:730;font-stretch:72%;
  font-size:clamp(21px,2.7vw,32px);line-height:1;text-transform:uppercase;
  letter-spacing:.008em;margin:0 0 18px;
}
.a-sec p{font-size:16px;line-height:1.72;color:var(--mid);max-width:64ch;margin:0 0 1.05em}
.a-sec p strong{color:var(--bone);font-weight:600}
.a-sec p em{font-style:italic;color:var(--bone)}

/* pull statement inside prose */
.a-pull{
  font-family:var(--display);font-weight:730;font-stretch:70%;
  font-size:clamp(19px,2.4vw,29px);line-height:1.12;text-transform:uppercase;
  letter-spacing:.008em;color:var(--bone);max-width:22ch;
  margin:30px 0;padding-left:20px;border-left:2px solid var(--bone);
}

/* credo block — verbatim client copy, marked as such */
.a-credo{
  margin:26px 0 0;padding:24px 26px;border:1px solid var(--line);
  background:var(--panel);
}
.a-credo p{font-size:16.5px;line-height:1.75;color:var(--bone);max-width:60ch;margin:0}
.a-credo .lbl{margin-bottom:14px}

/* compact fact rail */
.a-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
         gap:1px;background:var(--line);border:1px solid var(--line);margin-top:24px}
.a-facts > div{background:var(--black);padding:16px 18px}
[data-theme="light"] .a-facts > div{background:var(--black)}
.a-facts b{display:block;font:600 17px/1 var(--mono);letter-spacing:.02em;margin-top:9px;
           color:var(--bone)}

footer{border-top:1px solid var(--line)}