/* ============================================================
   ANSWERS — /answers/ section (one buyer question per page)
   Generated pages: answers/<slug>.html + answers/index.html
   (see scripts/build_answers.py). Inherits hero/body/sources
   from article.css; this file only adds what an answer needs:
   the answer sentence, the verified line, the superseded note,
   and the index list.
   ============================================================ */

/* ---- ANSWER PAGE ------------------------------------------ */
.ans .art-title{max-width:22ch;font-size:clamp(28px,4.4vw,60px);}

/* The first sentence is the answer. It is set as prose, large, and
   directly under the question so the extractable sentence is the
   first thing on the page and in the DOM. */
.ans-lead{margin:clamp(22px,3vw,36px) 0 0;font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.5vw,33px);line-height:1.28;letter-spacing:-0.015em;color:var(--ink);max-width:36ch;}

.ans-byline .ans-verified{color:var(--accent);}
.ans-byline time{font-variant-numeric:tabular-nums;}

.ans-superseded{margin-top:clamp(24px,3vw,36px);max-width:60ch;padding:16px 20px;border-left:2px solid var(--accent);background:var(--bg-soft);}
.ans-superseded .as-label{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:8px;}
.ans-superseded p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2);}

.ans-body{margin-top:clamp(36px,5vw,64px);}

.ans-method{max-width:68ch;margin:clamp(40px,5vw,64px) 0 clamp(24px,3vw,40px);font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);line-height:1.7;}
.ans-method a{color:var(--accent);}

/* ---- INDEX ------------------------------------------------- */
.ans-intro{max-width:64ch;font-size:16px;line-height:1.68;color:var(--ink-2);margin:0 0 clamp(36px,5vw,64px);}
.ans-intro a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}

.ans-group{margin-bottom:clamp(40px,5vw,64px);}
.ans-cat{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:400;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line);}
.ans-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);background:var(--line);display:grid;gap:1px;}
.ans-item{display:block;background:var(--bg);padding:22px 24px;transition:background .22s ease;}
.ans-item:hover{background:var(--bg-soft);}
.ans-item .ai-q{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(18px,1.9vw,24px);line-height:1.22;letter-spacing:-0.012em;color:var(--ink);margin-bottom:8px;}
.ans-item .ai-a{display:block;font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:72ch;}
.ans-item .ai-meta{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-top:10px;}

/* ---- STRIP ON THE BRIEF INDEX ------------------------------ */
.ans-strip{padding:clamp(28px,4vw,48px) 0 0;border-top:1px solid var(--line);}
.ans-strip h2{font-family:var(--serif);font-weight:300;font-size:clamp(26px,3.4vw,46px);line-height:1.04;letter-spacing:-0.02em;margin:0 0 22px;max-width:22ch;}
.ans-strip h2 em{font-style:italic;color:var(--accent);}
.ans-strip-list{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.ans-strip-list li{background:var(--bg);padding:18px 20px;font-size:14px;line-height:1.55;}
.ans-strip-list li a{display:block;font-family:var(--serif);font-size:clamp(16px,1.6vw,20px);line-height:1.22;letter-spacing:-0.01em;color:var(--ink);margin-bottom:6px;}
.ans-strip-list li a:hover{color:var(--accent);}
.ans-strip-a{display:block;color:var(--ink-2);font-size:13.5px;}
.ans-strip .a-read{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}

@media(max-width:720px){
  .ans-strip-list{grid-template-columns:1fr;}
}