.article{max-width:760px;margin:0 auto;padding:0 24px}
.article-hero{margin:48px auto 0;max-width:1080px;padding:0 24px}
.article-hero .ph{aspect-ratio:21/9;border-radius:18px;overflow:hidden;background:var(--pearl);box-shadow:0 24px 60px -30px rgba(43,74,89,.22);max-height:420px}
.article-hero .ph img{width:100%;height:100%;object-fit:cover}
.article-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--ink-soft);margin:24px 0 32px}
.article-meta span{display:inline-flex;align-items:center;gap:6px}
.article .crumbs{font-size:13px;color:var(--ink-soft);margin:0 0 4px}
.article .crumbs a{color:var(--ink-soft);border-bottom:1px solid transparent;transition:.15s}
.article .crumbs a:hover{color:var(--accent);border-color:currentColor}
.article .crumbs .sep{margin:0 7px;opacity:.5}
.article .crumbs .cur{color:var(--ink)}
.article h1{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(32px,5vw,52px);line-height:1.05;margin:32px 0 16px}
.article h2{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:30px;line-height:1.15;margin:48px 0 12px}
.article h3{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:22px;line-height:1.2;margin:32px 0 10px}
.article p{font-size:17px;line-height:1.7;color:var(--ink);margin:14px 0}
.article ul,.article ol{font-size:17px;line-height:1.7;padding-left:24px}
.article li{margin:8px 0}
.article a{color:var(--accent);text-underline-offset:3px}
.article .toc{background:var(--pearl);border-radius:14px;padding:24px 28px;margin:32px 0}
.article .toc h4{font-family:'Manrope',sans-serif;font-size:12px;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-soft);margin:0 0 14px;font-weight:600}
.article .toc ol{margin:0;padding-left:20px;font-size:15px}
.article .toc a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;transition:.15s}
.article .toc a:hover{color:var(--accent);border-color:currentColor}
.article .ptable{border-collapse:collapse;width:100%;margin:24px 0;font-size:15px}
.article .ptable th{background:var(--pearl);text-align:left;padding:12px 14px;font-family:'Manrope',sans-serif;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);font-weight:600;border-bottom:1px solid var(--line)}
.article .ptable td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
.article .ptable td:first-child{font-weight:600}
.article .callout{background:#f1f7fa;border-left:3px solid var(--sky-deep);border-radius:0 12px 12px 0;padding:18px 22px;margin:24px 0;font-size:15px;line-height:1.6}
.article .callout p{font-size:15px;margin:0}
.article .cta-inline{background:var(--ink);color:#fff;border-radius:16px;padding:32px 36px;margin:40px 0;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.article .cta-inline h4{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:24px;margin:0 0 6px;color:#fff}
.article .cta-inline p{margin:0;color:#ccc;font-size:14px}
.article .cta-inline a{background:var(--sky);color:var(--accent);padding:14px 24px;border-radius:999px;font-weight:600;font-size:13px;white-space:nowrap;letter-spacing:.04em;text-decoration:none}
.article .cta-inline a:hover{background:var(--sky-deep);color:#fff}
.article .also{background:var(--pearl);border-radius:14px;padding:24px 28px;margin:40px 0}
.article .also h4{font-family:'Manrope',sans-serif;font-size:12px;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-soft);margin:0 0 12px;font-weight:600}
.article .also a{display:block;padding:8px 0;font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);transition:.15s}
.article .also a:last-child{border-bottom:0}
.article .also a:hover{color:var(--accent);padding-left:6px}
.article-end{margin:60px 0 80px;text-align:center}
.article-end .author{display:inline-flex;flex-direction:column;align-items:center;gap:8px;font-size:14px;color:var(--ink-soft)}
.article-end .author-name{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:22px;color:var(--ink)}
@media(max-width:640px){
  .article .ptable{font-size:13px;display:block;overflow-x:auto}
  .article .ptable th,.article .ptable td{padding:9px 8px}
  .article .cta-inline{grid-template-columns:1fr;text-align:center}
  .article .cta-inline a{justify-self:center}
}