.article-wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:clamp(20px,3vw,24px)}
.article-layout{display:block}
@media(min-width:980px){.article-layout{display:grid;grid-template-columns:minmax(0,820px) 288px;gap:40px;align-items:start;justify-content:center}}
.article-main{min-width:0;max-width:820px;margin-inline:auto;width:100%}

.article-breadcrumbs{padding-top:clamp(18px,3vw,30px);font-size:.86rem;color:var(--color-muted)}
.article-breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:0}
.article-breadcrumbs a{color:var(--color-muted);text-decoration:none}
.article-breadcrumbs a:hover{color:var(--color-crimson-600);text-decoration:underline}
.article-breadcrumbs [aria-current]{color:var(--color-ink)}
.article-breadcrumbs .sep{color:#c9b79a}

.article-header{padding-top:18px}
.article-category{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  font-size:.85rem;color:var(--color-crimson-600);margin-bottom:12px}
.article-title{font-size:clamp(2.2rem,1.6rem + 2.8vw,3.4rem);color:var(--color-crimson-700);letter-spacing:-.01em}
.article-deck{margin-top:16px;font-size:clamp(1.15rem,1.05rem + .3vw,1.35rem);line-height:1.5;color:var(--color-read)}
.article-meta{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px 16px;font-size:.9rem;color:var(--color-muted)}
.article-meta span{display:inline-flex;align-items:center;gap:6px}
.article-meta .ic{width:15px;height:15px;color:var(--color-crimson-600)}

.article-featured-image{margin:clamp(24px,3vw,34px) 0 0;border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--color-line)}
.article-featured-image .ph{aspect-ratio:16/9}
.article-featured-image figcaption{font-size:.85rem;color:var(--color-muted);padding:10px 4px 0;background:var(--color-cream-50)}

.article-quick-answer{margin:clamp(26px,3vw,34px) 0 0;background:var(--color-white);border:1px solid var(--color-line);
  border-top:3px solid var(--color-crimson-600);border-radius:var(--radius-sm);padding:20px 22px}
.article-quick-answer .qa-label{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:.82rem;color:var(--color-crimson-600);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.article-quick-answer .qa-label .ic{width:16px;height:16px}
.article-quick-answer p{font-size:1.05rem;line-height:1.6;color:var(--color-read)}

.toc-inline{margin:24px 0 0;background:var(--color-white);border:1px solid var(--color-line);border-radius:var(--radius-sm);overflow:hidden}
@media(min-width:980px){.toc-inline{display:none}}
.toc-inline summary{list-style:none;cursor:pointer;padding:15px 18px;font-family:var(--font-display);font-weight:700;
  font-size:1.05rem;color:var(--color-crimson-700);display:flex;align-items:center;justify-content:space-between}
.toc-inline summary::-webkit-details-marker{display:none}
.toc-inline summary .ic{width:20px;height:20px;transition:transform .2s var(--ease)}
.toc-inline[open] summary .ic{transform:rotate(180deg)}
.toc-inline ul{list-style:none;margin:0;padding:0 18px 16px}
.toc-inline li{margin:8px 0}
.toc-inline a{color:var(--color-ink);text-decoration:none;font-weight:500}
.toc-inline a:hover{color:var(--color-crimson-600)}

.article-content{margin-top:clamp(28px,3vw,38px);font-size:clamp(1.06rem,1rem + .25vw,1.15rem);line-height:1.72;color:var(--color-read)}
.article-content section{scroll-margin-top:calc(var(--header-h) + 20px)}
.article-content p{margin:0 0 20px}
.article-content h2{font-size:clamp(1.7rem,1.4rem + 1.3vw,2.15rem);color:var(--color-crimson-700);margin:8px 0 14px}
.article-content h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem);color:var(--color-ink);margin:0}
.article-content ul{margin:0 0 20px;padding-left:1.25em}
.article-content li{margin-bottom:9px}
.article-content a{color:var(--color-crimson-600);text-underline-offset:2px}
.article-content section + section{margin-top:clamp(30px,4vw,46px)}

.article-ranking{display:flex;flex-direction:column;gap:22px;margin:22px 0 8px}
.article-ranking-card{background:var(--color-white);border:1px solid var(--color-line);border-radius:var(--radius-card);overflow:hidden}
.article-ranking-card--pick{border-color:#e6bfcb;box-shadow:var(--shadow-sm)}
.article-ranking-card__media .ph{aspect-ratio:16/9}
@media(min-width:720px){
  .article-ranking-card{display:grid;grid-template-columns:290px minmax(0,1fr);align-items:stretch}
  .article-ranking-card__media{height:100%}
  .article-ranking-card__media .ph{aspect-ratio:auto;height:100%;min-height:230px}
}
.article-ranking-card__body{padding:20px 22px 22px}
.rank-head{display:flex;align-items:baseline;gap:14px;margin-bottom:8px}
.rank-num{font-family:var(--font-display);font-weight:800;font-size:2.4rem;line-height:.8;color:var(--color-crimson-600);opacity:.85}
.article-ranking-card h3{margin:0}
.rank-pick-tag{display:inline-block;margin-bottom:12px;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:.72rem;color:var(--color-crimson-700);background:var(--color-crimson-100);padding:4px 11px;border-radius:var(--radius-pill)}
.rank-facts{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--color-line);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px}
@media(min-width:600px){.rank-facts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rank-facts li{margin:0;display:flex;flex-direction:column;gap:2px}
.rank-facts .fl{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:.7rem;color:var(--color-muted)}
.rank-facts .fv{font-size:.94rem;color:var(--color-ink);font-weight:600;line-height:1.3}
.readlink{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-family:var(--font-display);font-weight:700;
  font-size:1.05rem;letter-spacing:.02em;color:var(--color-crimson-600);text-decoration:none}
.readlink .ic{width:20px;height:20px;transition:transform .2s var(--ease)}
.readlink:hover .ic{transform:translateX(4px)}

.article-figure{margin:26px 0}
.article-figure .ph{aspect-ratio:16/9;border-radius:var(--radius-card);border:1px solid var(--color-line)}
.article-figure figcaption{font-size:.85rem;color:var(--color-muted);padding-top:9px}

.callout{margin:24px 0;background:var(--color-white);border:1px solid var(--color-line);border-left:4px solid var(--color-crimson-600);
  border-radius:12px;padding:15px 18px}
.callout .callout-label{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:.78rem;color:var(--color-crimson-600);margin-bottom:5px;display:flex;align-items:center;gap:8px}
.callout .callout-label .ic{width:16px;height:16px}
.callout p{margin:0;font-size:1rem;line-height:1.6}
.article-local-tip{border-left-color:var(--color-sun)}
.article-local-tip .callout-label{color:#9a6a12}
.article-note{border-left-color:var(--color-crimson-700)}
.article-note .callout-label{color:var(--color-crimson-700)}

.article-comparison{margin:24px 0;border:1px solid var(--color-line);border-radius:var(--radius-sm);overflow:hidden}
.article-comparison__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.article-comparison table{border-collapse:collapse;width:100%;min-width:520px}
.article-comparison th,.article-comparison td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--color-line);font-size:.97rem}
.article-comparison thead th{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;font-size:.82rem;
  color:var(--color-crimson-700);background:var(--color-cream-100)}
.article-comparison tbody tr:last-child td{border-bottom:none}
.article-comparison td:first-child{font-weight:600;color:var(--color-ink)}

.article-inline-cta{display:flex;gap:20px;align-items:center;margin:34px 0;background:var(--color-cream-100);
  border:1px solid var(--color-line);border-radius:var(--radius-card);padding:20px 22px}
.article-inline-cta__media{flex:0 0 120px}
.article-inline-cta__media .ph{width:120px;height:88px;border-radius:14px}
@media(max-width:539px){.article-inline-cta{flex-direction:column;align-items:flex-start;gap:14px}.article-inline-cta__media{flex:none}.article-inline-cta__media .ph{width:100%;height:150px}}
.article-inline-cta .cta-title{font-family:var(--font-display);font-weight:800;font-size:1.35rem;color:var(--color-crimson-700);margin-bottom:5px}
.article-inline-cta p.cta-copy{font-size:.98rem;color:var(--color-read);margin-bottom:12px}
.article-inline-cta .readlink{margin-top:0}

.article-faq{margin:clamp(36px,4vw,52px) 0 0}
.article-faq>h2{font-size:clamp(1.7rem,1.4rem + 1.3vw,2.15rem);color:var(--color-crimson-700);margin-bottom:8px}
.faq-item{border-bottom:1px solid var(--color-line)}
.faq-item:last-child{border-bottom:none}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;background:none;border:none;
  cursor:pointer;text-align:left;padding:18px 2px;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.15rem,1.05rem + .4vw,1.4rem);color:var(--color-crimson-700)}
.faq-q .tog{flex-shrink:0;width:26px;height:26px;color:var(--color-crimson-600);transition:transform .25s var(--ease)}
.faq-q[aria-expanded="true"] .tog{transform:rotate(180deg)}
.faq-a{overflow:hidden;max-height:0;transition:max-height .3s var(--ease)}
.faq-a__inner{padding:0 2px 20px;color:var(--color-read);line-height:1.7}
@media(prefers-reduced-motion:reduce){.faq-a{transition:none}}

.article-share{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:clamp(32px,4vw,44px) 0 0;
  padding-top:22px;border-top:1px solid var(--color-line)}
.article-share span{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.82rem;color:var(--color-muted)}
.article-share a,.article-share button{width:42px;height:42px;border-radius:50%;border:1px solid var(--color-line);background:var(--color-white);
  color:var(--color-crimson-600);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s}
.article-share a:hover,.article-share button:hover{background:var(--color-crimson-100);border-color:var(--color-crimson-600)}
.article-share .ic{width:18px;height:18px}
.copied-note{font-size:.85rem;color:#1c7a44;font-family:var(--font-body);font-weight:600;letter-spacing:0;text-transform:none}

.article-sidebar{display:none}
@media(min-width:980px){.article-sidebar{display:block;position:sticky;top:calc(var(--header-h) + 20px)}}
.article-sidebar>*+*{margin-top:20px}
.toc-card{background:var(--color-white);border:1px solid var(--color-line);border-radius:var(--radius-sm);padding:18px 20px}
.toc-card .toc-title{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:.78rem;color:var(--color-muted);margin-bottom:12px}
.toc-card ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.toc-card a{display:block;padding:7px 10px;border-radius:10px;color:var(--color-ink);text-decoration:none;font-size:.95rem;
  border-left:2px solid transparent;transition:background .15s,color .15s,border-color .15s}
.toc-card a:hover{background:var(--color-cream-100);color:var(--color-crimson-600)}
.toc-card a.active{color:var(--color-crimson-700);border-left-color:var(--color-crimson-600);background:var(--color-crimson-100);font-weight:600}
.side-card{background:linear-gradient(160deg,var(--color-crimson-700),var(--color-crimson-600));color:#fff;border-radius:var(--radius-sm);padding:20px 22px}
.side-card .side-title{font-family:var(--font-display);font-weight:800;font-size:1.3rem;margin-bottom:6px}
.side-card p{color:#ffe3ea;font-size:.95rem;margin-bottom:14px}
.side-card a{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:700;text-decoration:none;font-family:var(--font-display);letter-spacing:.02em}
.side-card a .ic{width:18px;height:18px;transition:transform .2s var(--ease)}
.side-card a:hover .ic{transform:translateX(4px)}

.article-related{background:var(--color-cream-100);margin-top:clamp(48px,6vw,80px);padding-block:clamp(44px,5vw,72px)}
.article-related__wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.article-related h2{font-size:clamp(1.8rem,1.5rem + 1.4vw,2.4rem);color:var(--color-crimson-700);margin-bottom:clamp(22px,3vw,34px);text-align:center}
.related-grid{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:640px){.related-grid{grid-template-columns:repeat(3,1fr)}}
.guide-card{display:flex;flex-direction:column;background:var(--color-white);border:1px solid var(--color-line);
  border-radius:var(--radius-card);overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.guide-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.guide-card__media{aspect-ratio:16/10;overflow:hidden;position:relative}
.guide-card__media img{transition:transform .4s var(--ease)}
.guide-card:hover .guide-card__media img{transform:scale(1.05)}
.guide-card__cat{position:absolute;top:12px;left:12px;background:rgba(143,24,56,.92);color:#fff;font-family:var(--font-display);
  font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;padding:5px 11px;border-radius:var(--radius-pill)}
.guide-card__body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:9px;flex:1}
.guide-card__body h3{font-size:1.15rem;color:var(--color-crimson-700);line-height:1.15}
.guide-card__body p{color:var(--color-muted);font-size:.93rem;flex:1}
.guide-card__read{display:inline-flex;align-items:center;gap:6px;color:var(--color-crimson-600);font-weight:700;font-size:.9rem;margin-top:2px}
.guide-card__read .ic{width:17px;height:17px;transition:transform .2s var(--ease)}
.guide-card:hover .guide-card__read .ic{transform:translateX(4px)}

.article-final-cta{position:relative;color:#fff;text-align:center;overflow:hidden;isolation:isolate}
.article-final-cta__bg{position:absolute;inset:0;z-index:-2}
.article-final-cta__bg img{width:100%;height:100%;object-fit:cover}
.article-final-cta::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(22,18,20,.4),rgba(22,18,20,.66)),linear-gradient(100deg,rgba(26,22,25,.5),rgba(34,28,30,.4))}
.article-final-cta__inner{max-width:640px;margin-inline:auto;padding:clamp(60px,8vw,104px) 20px}
.article-final-cta h2{color:#fff;font-size:clamp(2.2rem,1.7rem + 2.6vw,3.6rem)}
.article-final-cta p{color:#ffe3ea;font-size:1.2rem;margin:12px 0 24px}
.article-content :is(h2,h3)[id]{scroll-margin-top:calc(var(--header-h) + 20px)}
.article-content ol{margin:0 0 20px;padding-left:1.3em}
.article-content ol li{margin-bottom:9px}
.article-content blockquote{margin:24px 0;padding:14px 20px;border-left:4px solid var(--color-crimson-600);background:var(--color-white);border-radius:0 12px 12px 0;color:var(--color-read)}
.article-content blockquote p:last-child{margin-bottom:0}
.article-content strong{color:var(--color-ink)}
.article-content table{border-collapse:collapse;width:100%;margin:24px 0}
.article-content th,.article-content td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--color-line);vertical-align:top;font-size:.97rem}
.article-content thead th{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;font-size:.82rem;color:var(--color-crimson-700);background:var(--color-cream-100)}
.article-content tbody tr:last-child td{border-bottom:none}
.article-content td:first-child{font-weight:600;color:var(--color-ink)}
.article-content .article-comparison{margin:24px 0}
.article-content .article-comparison table,.article-content .wp-block-table table{margin:0}
.article-content .wp-block-table{margin:24px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--color-line);border-radius:var(--radius-sm)}
.article-content .wp-block-table table{min-width:520px}