/* Column list, article and the main-page "latest columns" strip. Uses the tokens from app.css. */
:root{--f-accent:"Instrument Serif","Times New Roman",serif;--ease-out:cubic-bezier(.2,.7,.2,1)}
body{background:var(--white)}
.it{font-family:var(--f-accent);font-style:italic;font-weight:400}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--rose);letter-spacing:.02em}
.kicker .it{font-size:18px;color:var(--ink-3)}
.top-actions{display:flex;gap:8px;align-items:center;flex:none}
.top-actions .btn{white-space:nowrap}
.sec{padding-block:56px 72px}
.sec.alt{background:var(--grey-50)}
.back{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--ink-2);text-decoration:none;margin-bottom:18px}
.back:hover{color:var(--rose)}
.c-head{display:grid;gap:12px;margin-bottom:32px;max-width:680px}
.c-head h1{font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1.25;text-wrap:balance}
.c-head p{color:var(--ink-2);font-size:16px}

/* article */
.art{max-width:720px;margin:0 auto}
.art-head{display:grid;gap:14px;margin-bottom:28px}
.art-head h1{font-size:clamp(28px,4.4vw,42px);font-weight:800;letter-spacing:-.035em;line-height:1.3;text-wrap:balance}
.art-head .lede{font-size:17px;color:var(--ink-2)}
.art-cover{margin:0 0 36px;border-radius:20px;overflow:hidden;background:var(--grey-50)}
.art-cover img{display:block;width:100%;height:auto}
.prose{font-size:17px;line-height:1.85;color:var(--ink);overflow-wrap:anywhere}
.prose>*+*{margin-top:1.15em}
.prose h2{font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1.4;margin-top:2em}
.prose h3{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.45;margin-top:1.7em}
.prose a{color:var(--rose);text-underline-offset:3px}
.prose strong{font-weight:800}
.prose blockquote{margin-left:0;margin-right:0;padding:4px 0 4px 18px;border-left:3px solid var(--rose);color:var(--ink-2);font-size:18px}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.35em}
.prose hr{border:0;border-top:1px solid var(--line);margin-block:2.2em}
.prose figure{margin-inline:0}
.prose figure img{display:block;max-width:100%;height:auto;border-radius:16px;margin:0 auto}
.prose figcaption{margin-top:8px;font-size:13.5px;color:var(--ink-3);text-align:center}
.art-cta{display:grid;gap:12px;justify-items:start;margin-top:56px;padding:28px;border-radius:22px;background:var(--pink-50)}
.art-cta h2{font-size:20px;font-weight:800;letter-spacing:-.02em}
.art-cta p{color:var(--ink-2)}
.art-share{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.more-h{font-size:20px;font-weight:800;letter-spacing:-.02em;margin-bottom:18px}

@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.c-head>*,.art-head>*{animation:rise .7s var(--ease-out) both}
.c-head>*:nth-child(2),.art-head>*:nth-child(2){animation-delay:.08s}
.c-head>*:nth-child(3),.art-head>*:nth-child(3){animation-delay:.16s}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:520px){.logo small{display:none}.top-actions .btn{padding:7px 11px;font-size:12.5px}.prose{font-size:16.5px}.art-cta{padding:22px}}
@media (max-width:360px){.logo{font-size:15px}.top-actions{gap:4px}.top-actions .btn{padding:6px 8px;font-size:11.5px}}
footer{padding-block:40px 56px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-3)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
footer a{color:var(--ink-2);text-decoration:none}
footer .links{display:flex;flex-wrap:wrap;gap:18px}

/* categories */
.c-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 0 28px;padding-bottom:2px}
.c-tabs::-webkit-scrollbar{display:none}
.c-tab{flex:none;display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;background:var(--grey-50);color:var(--ink-2);font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap}
.c-tab span{font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.c-tab:hover{color:var(--ink)}
.c-tab[aria-current="page"]{background:var(--ink);color:var(--white)}
.c-tab[aria-current="page"] span{color:rgba(255,255,255,.7)}
.crumb{display:flex;align-items:center;gap:8px;margin-bottom:18px;font-size:14px;font-weight:700;color:var(--ink-3)}
.crumb a{color:var(--ink-2);text-decoration:none}
.crumb a:hover{color:var(--ink)}
.art-cta-btns{display:flex;flex-wrap:wrap;gap:8px}