/* ============================================================
   method.css — METHOD ROUTE ONLY — answer boxes, verb grid, method cards, chips
   Loads after site.css. Route layout only; shared furniture lives in site.css.
   ============================================================ */
@layer route {
.answer{border:1px solid var(--ink);background:var(--paper);padding:clamp(1.5rem,4vw,2.75rem);max-width:64rem}

.answer h2{max-width:22ch}

.answer .close{font-family:var(--display);font-weight:600;font-size:1.12rem;
  border-top:1px solid var(--rule);margin-top:1.6rem;padding-top:1.4rem}





.method{display:grid;gap:0;border:1px solid var(--rule);background:var(--paper);color:var(--ink)}

.method article{padding:clamp(1.4rem,3.5vw,2.2rem);border-bottom:1px solid var(--rule)}

.method article:last-child{border-bottom:0}

.method h3{display:flex;align-items:baseline;gap:.9rem}

.method h3 i{font-style:normal;font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.16em;color:var(--ledger)}

.method p{margin-top:.9rem;max-width:60ch}

.method p:last-child{margin-bottom:0}

.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.1rem;padding:0;list-style:none}

.chips li{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;
  border:1px solid var(--rule);padding:.3rem .6rem;color:var(--ink-soft)}

/* the gap:1px separator grid is correct at every column count, so the
   single-row border assumptions this breakpoint used to patch are gone */
@media (max-width:640px){
  .symptoms{columns:1}
}
}