/* ============================================================
   /about/ — Polly's story, moved off the homepage so the front
   page can stay about the visitor. Builds on article.css.
   ============================================================ */

.ab-head{ padding-top:1.4rem; }
.ab-head h1{
  font-family:var(--ff-display); font-weight:600; line-height:1.02;
  font-size:clamp(2.4rem,1.4rem + 4.4vw,4.6rem); letter-spacing:-.03em;
  margin:.9rem 0 0;
}
.ab-head h1 b{ font-weight:600; }
.ab-head .swash{ color:var(--clay); }
.ab-lede{
  font-family:var(--ff-display); font-weight:300;
  font-size:clamp(1.15rem,1rem + .8vw,1.55rem); line-height:1.4;
  color:var(--ink-2); max-width:44ch; margin:1.3rem 0 0;
}

.ab-grid{
  display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3.4rem); align-items:start;
  margin:clamp(2.4rem,5vw,3.6rem) 0 clamp(1.6rem,3vw,2.4rem);
}
.ab-portrait{ margin:0; position:relative; }
.ab-portrait img{
  width:100%; height:auto; display:block; border-radius:12px;
  border:1px solid var(--line); box-shadow:0 30px 52px -30px rgba(23,19,14,.45);
}
.ab-portrait .tag{
  display:inline-block; margin-top:.9rem;
  font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.04em; color:var(--clay-deep);
}

.ab-h2{
  font-family:var(--ff-display); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem); margin:0 0 1.1rem;
}
.creds{ display:flex; flex-wrap:wrap; gap:.55rem; }
.cred{
  font-family:var(--ff-mono); font-size:.76rem; line-height:1.3;
  padding:.5rem .8rem; border:1px solid var(--line); border-radius:100px;
  color:var(--ink-2); background:var(--paper-2);
}
.cred b{ font-weight:500; color:var(--ink); }

.ab-prose{ margin-top:clamp(1.6rem,3vw,2.4rem); }
.ab-prose h2{ margin-top:clamp(2.4rem,4vw,3.2rem); }
.ab-prose h2:first-child{ margin-top:0; }
.big-line{
  font-family:var(--ff-display); font-weight:300; font-style:italic;
  font-size:clamp(1.25rem,1.05rem + 1vw,1.75rem); line-height:1.3;
  color:var(--clay-deep); margin:1.6rem 0; max-width:34ch;
}

.ab-next{
  margin:clamp(3rem,6vw,4.5rem) 0 clamp(3rem,6vw,4.5rem);
  padding-top:clamp(2rem,4vw,2.8rem); border-top:1px solid var(--line);
}
.ab-next-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.ab-next-card{
  display:flex; flex-direction:column; gap:.4rem;
  padding:1.3rem 1.4rem 1.5rem; border:1px solid var(--line); border-radius:10px;
  background:var(--paper-2); color:inherit;
  transition:border-color .3s var(--e), transform .35s var(--e), box-shadow .35s var(--e);
}
.ab-next-card:hover{
  border-color:var(--clay); transform:translateY(-3px);
  box-shadow:0 18px 30px -18px rgba(23,19,14,.35);
}
.ab-next-k{ font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.05em; color:var(--clay-deep); }
.ab-next-t{ font-family:var(--ff-display); font-weight:600; font-size:1.12rem; letter-spacing:-.01em; }
.ab-next-d{ font-size:.9rem; line-height:1.5; color:var(--ink-2); }
.ab-cta{ margin:1.8rem 0 0; color:var(--ink-2); }
.ab-cta a{ color:var(--clay-deep); border-bottom:1px solid var(--line); }
.ab-cta a:hover{ color:var(--clay); }

@media (prefers-reduced-motion:reduce){
  .ab-next-card{ transition:none; }
  .ab-next-card:hover{ transform:none; }
}
@media (max-width:820px){
  .ab-next-grid{ grid-template-columns:1fr; }
}
@media (max-width:700px){
  .ab-grid{ grid-template-columns:1fr; }
  .ab-portrait{ max-width:320px; }
}