/* Article pages. Inherits tokens from styles.css; adds only what long-form needs. */
.art{padding:14rem var(--gut) var(--pad-y)}
.art__in{max-width:76rem;margin:0 auto}
.art__back{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--sans);font-size:1.45rem;font-weight:600;
  color:var(--fg-mute);transition:color .2s;
}
.art__back:hover{color:var(--accent)}
.art__k{margin-top:3.2rem}
.art h1{
  margin-top:1.4rem;font-size:clamp(3rem,5vw,5.6rem);line-height:1.04;
  letter-spacing:-.03em;font-weight:800;text-wrap:balance;
}
.art__meta{margin-top:2rem;font-family:var(--sans);font-size:1.4rem;color:var(--fg-mute)}
.art__hero{margin-top:4rem}
.art__hero img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r)}
.art__body{margin-top:5.6rem}
.art__body > *+*{margin-top:2rem}
.art__body h2{
  font-size:clamp(2.4rem,2.8vw,3.4rem);line-height:1.15;letter-spacing:-.025em;
  font-weight:800;margin-top:5.6rem;
}
.art__body h3{
  font-size:clamp(1.9rem,2vw,2.4rem);line-height:1.25;letter-spacing:-.015em;
  font-weight:700;margin-top:3.6rem;
}
.art__body p{font-size:1.75rem;line-height:1.68;color:var(--fg-soft)}
.art__body strong{color:var(--fg);font-weight:700}
.art__body ul{display:flex;flex-direction:column;gap:1.2rem}
.art__body li{position:relative;padding-left:2.6rem;font-size:1.75rem;line-height:1.6;color:var(--fg-soft)}
.art__body li::before{
  content:"";position:absolute;left:.6rem;top:1.05rem;
  width:.7rem;height:.7rem;border-radius:50%;background:var(--accent);
}
.art__body a{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.art__tbl{margin-top:2.4rem;overflow-x:auto;border:1px solid var(--hair);border-radius:var(--r)}
.art__tbl table{width:100%;border-collapse:collapse;min-width:54rem}
.art__tbl th,.art__tbl td{
  padding:1.5rem 1.8rem;text-align:left;font-size:1.55rem;border-bottom:1px solid var(--hair);
}
.art__tbl th{
  background:var(--cream);font-family:var(--sans);font-weight:700;font-size:1.3rem;
  letter-spacing:.04em;text-transform:uppercase;
}
.art__tbl tr:last-child td{border-bottom:0}
.art__tbl td:first-child{font-weight:700;color:var(--fg)}
.art__note{
  margin-top:2.4rem;padding:2.4rem;border-left:3px solid var(--accent);
  background:var(--cream);border-radius:0 var(--r) var(--r) 0;
}
.art__note p{font-size:1.6rem;margin:0}
.faq{margin-top:2.4rem;display:flex;flex-direction:column;gap:1.2rem}
.faq details{border:1px solid var(--hair);border-radius:var(--r);overflow:hidden}
.faq summary{
  padding:2rem 2.4rem;font-size:1.7rem;font-weight:700;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:1.6rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-weight:800;flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{border-bottom:1px solid var(--hair)}
.faq p{padding:2rem 2.4rem;font-size:1.65rem;line-height:1.6;color:var(--fg-soft);margin:0}
.art__cta{margin-top:6.4rem;padding:4rem;background:var(--ink);color:#fff;border-radius:var(--r)}
.art__cta h2{margin-top:0;font-size:clamp(2.4rem,2.8vw,3.4rem);font-weight:800;
  letter-spacing:-.025em;line-height:1.12}
.art__cta p{margin-top:1.6rem;font-size:1.7rem;line-height:1.6;color:rgba(255,255,255,.76)}
.art__cta .btn{margin-top:2.8rem}
.art__next{margin-top:6.4rem;padding-top:3.2rem;border-top:1px solid var(--hair)}
.art__next h2{
  margin:0;font-family:var(--sans);font-size:1.3rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--fg-mute);
}
.art__next ul{margin-top:2rem;display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem}
.art__next li{padding:0}
.art__next li::before{display:none}
.art__next a{
  display:block;padding:2.2rem 2.4rem;border:1px solid var(--hair);border-radius:var(--r);
  font-size:1.7rem;font-weight:700;line-height:1.35;color:var(--fg);text-decoration:none;
  transition:border-color .25s,transform .25s var(--ease);
}
.art__next a:hover{border-color:var(--accent);transform:translateY(-.3rem)}
.art__foot{
  padding:3.2rem var(--gut);border-top:1px solid var(--hair);
  display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  font-family:var(--sans);font-size:1.4rem;color:var(--fg-mute);
}
@media (max-width:860px){
  .art{padding:11rem var(--gut) var(--pad-y)}
  .art__next ul{grid-template-columns:1fr}
  .art__cta{padding:2.8rem}
}