/* Guide/article reading styles — loaded only by /guides/* pages.
   Kept in a separate file so it can be rolled back by deleting this one file. */

/* Narrower measure + more air for long-form reading */
.guide .page{max-width:760px;padding-bottom:96px}
.guide .page-hero{margin-bottom:40px}

/* Article meta line: date · reading time */
.article-meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:18px 0 0;color:var(--muted);font:9px var(--mono);letter-spacing:.1em;text-transform:uppercase
}
.article-meta i{width:3px;height:3px;border-radius:50%;background:#c8d1ca;flex:none}

/* Hero gets a hairline rule so the answer block reads as separate */
.guide .page-hero{padding-bottom:26px;border-bottom:1px solid var(--line)}

/* Body: bigger type, longer line-height than the policy cards */
.guide .page-body{gap:0}
.guide .policy-card{
  padding:0;border:0;border-radius:0;background:transparent;
  padding-top:34px;padding-bottom:10px;
}
.guide .policy-card + .policy-card{border-top:1px solid var(--line)}
.guide .policy-card h2{
  margin:0 0 14px;font:650 clamp(19px,2.3vw,23px)/1.25 var(--sans);
  letter-spacing:-.03em;text-transform:none;color:var(--ink)
}
.guide .policy-card h3{
  margin:22px 0 6px;font-size:15px;font-weight:650;letter-spacing:-.015em;color:var(--ink)
}
.guide .policy-card p,
.guide .policy-card ul,
.guide .policy-card ol{
  margin:0 0 15px;font-size:16px;line-height:1.72;color:#28322f
}
.guide .policy-card ul,.guide .policy-card ol{padding-left:24px}
.guide .policy-card li{margin:8px 0}
.guide .policy-card strong{color:#16201e;font-weight:650}
.guide .policy-card a{color:var(--green-dark);text-decoration:underline;text-underline-offset:2px}
.guide .policy-card code{font-size:13px}

/* First card = the answer block: set it apart visually.
   NB: use :first-of-type, not :first-child — a <figure> may precede it. */
.guide .policy-card:first-of-type{
  padding-top:0;padding-bottom:6px
}
.guide .policy-card:first-of-type h2{color:var(--green-dark)}

/* Related links at the end of a guide */
.guide-next{
  margin-top:44px;padding:20px 22px;border:1px solid var(--line);
  border-radius:10px;background:#fafbf9
}
.guide-next h2{
  margin:0 0 10px;font:700 11px var(--mono);letter-spacing:.09em;
  text-transform:uppercase;color:var(--green-dark)
}
.guide-next ul{margin:0;padding-left:20px}
.guide-next li{margin:6px 0;font-size:14px;line-height:1.6}

/* In-article figures */
.guide-figure{margin:28px 0 30px}
.guide-figure img{
  display:block;width:100%;height:auto;border:1px solid var(--line);
  border-radius:10px;background:#fff
}
.guide-figure figcaption{
  margin-top:10px;color:var(--muted);font:9px var(--mono);
  letter-spacing:.08em;text-transform:uppercase;line-height:1.6
}

/* Embedded video (only /watch carries one) */
.guide-video{
  display:block;width:100%;height:auto;aspect-ratio:16/9;
  border:1px solid var(--line);border-radius:10px;background:#0d1211
}

@media(max-width:640px){
  .guide .page{padding-left:18px;padding-right:18px}
  .guide .policy-card p,.guide .policy-card ul,.guide .policy-card ol{font-size:16px;line-height:1.68}
  .guide .policy-card{padding-top:28px}
  .guide .page-hero h1{font-size:clamp(27px,7.4vw,34px)}
}