/* faq.css — page-specific layout for faq.html: the narrow hero and the Q&A list
   (divider-separated blocks, not an accordion — the questions are always open).
   Chrome + the gold eyebrow come from site.css; this file holds only what is
   unique to the FAQ. Cascade: tokens -> base -> site -> animations -> faq.css. */

/* Narrow reading measure; 28px inset kept literal (off the spacing scale). */
.container{max-width:820px;padding:0 28px}

/* ---------- hero ---------- */
header{padding:150px 0 50px;text-align:center}
h1{font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,5.5vw,3.4rem);line-height:1.04;letter-spacing:-.015em;margin-bottom:18px}
h1 .em{font-style:italic;color:var(--gold-soft)}
header p{color:var(--ink-soft);max-width:54ch;margin:0 auto;font-size:1rem}

/* ---------- Q&A list ---------- */
section{padding:0 0 80px}
.block{margin-bottom:34px;padding-bottom:34px;border-bottom:1px solid var(--line-soft)}
.block:last-child{border-bottom:none}
.block h2{font-family:var(--serif);font-weight:300;font-size:1.22rem;margin-bottom:10px;line-height:1.3;color:var(--ink)}
.block h2 .num{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:.95rem;margin-right:10px}
.block p{color:var(--ink-soft);font-size:.96rem;margin-bottom:0;max-width:66ch}
.block a{color:var(--gold-soft);text-decoration:none}
.block a:hover{color:var(--gold)}