/* an article reads like the case: light header, one reading column */

.ahead{padding-top:clamp(56px,8vw,104px)}
.kick{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:15px;color:var(--muted)}
.kick a{color:var(--muted);text-decoration:none}.kick a:hover{color:var(--ink)}
.kick b{font:700 11px/1 var(--stamp);letter-spacing:.16em;text-transform:uppercase;color:var(--petrol);padding:6px 10px;border-radius:999px;background:var(--tint)}
.ahead h1{margin-top:28px;font-size:clamp(36px,1.2rem + 3.4vw,64px);line-height:1.06;letter-spacing:-.02em;font-weight:400;text-wrap:balance}
.ahead .lede{margin-top:22px;font-size:var(--fs-lg);font-weight:300;line-height:1.5;color:var(--muted);max-width:52ch;text-wrap:pretty}
.meta{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:32px;padding:18px 0;border-block:1px solid var(--line);font-size:15px;color:var(--muted)}
.meta strong{color:var(--ink);font-weight:500}
.meta a{color:var(--petrol)}
.lead{margin-top:clamp(40px,5vw,64px)}
.lead img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:20px}
.lead figcaption{margin-top:10px;font-size:14px;color:var(--muted)}

/* body beside a short contents list */
.abody{display:grid;grid-template-columns:200px minmax(0,680px);justify-content:center;gap:clamp(32px,5vw,72px);padding-top:clamp(48px,6vw,80px)}
@media (max-width:1000px){.abody{grid-template-columns:minmax(0,680px)}.toc{display:none}}

.prose{font-size:clamp(18px,1rem + .3vw,20px);line-height:1.7;font-weight:300}
.prose p{margin-top:20px;text-wrap:pretty}
.prose p:first-child{margin-top:0}
.prose strong{font-weight:500}
.prose h2{margin-top:56px;font-size:clamp(23px,1rem + .9vw,30px);line-height:1.25;font-weight:400;scroll-margin-top:96px}
.prose h2 small{display:block;font:700 11px/1.3 var(--stamp);letter-spacing:.14em;text-transform:uppercase;color:var(--petrol);margin-bottom:10px}
.prose ol{margin-top:16px;padding-left:22px;display:grid;gap:12px}
.prose li::marker{color:var(--petrol);font-weight:500}
.prose blockquote{margin:44px 0;padding-left:24px;border-left:3px solid var(--coral);font-size:clamp(22px,1rem + 1vw,30px);line-height:1.35;font-weight:300;text-wrap:balance}
.prose .end{margin-top:44px;padding-top:28px;border-top:1px solid var(--line);font-weight:400}

/* related offers: small cards */
.rel{margin-top:clamp(64px,8vw,104px)}
.rel h2,.more-sec h2{font-size:clamp(24px,1rem + 1vw,32px)}
.offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}
.offers a{display:flex;flex-direction:column;gap:6px;padding:20px 22px;border-radius:18px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;transition:transform .2s ease}
.offers a:hover{transform:translateY(-3px)}
.offers small{font:700 11px/1.3 var(--stamp);letter-spacing:.14em;text-transform:uppercase;color:var(--petrol)}
.offers strong{font-weight:500;font-size:18px;line-height:1.3}
.offers span{color:var(--muted);font-size:15px;line-height:1.45}
@media (max-width:800px){.offers{grid-template-columns:1fr}}

/* more on this need */
.more-sec{margin-top:clamp(72px,9vw,120px);padding-block:clamp(48px,6vw,80px) 24px;border-top:1px solid var(--line)}