/* Listicles home — shared layout. Each preset (magazine, journal, minimal, bold, rugged, playful) overrides the tokens
   below and adds its own touches. --accent, --accent-ink, --logo-h, --font and --font-head come from site.json. */
:root{
  --accent:#7c3aed;--accent-ink:#fff;
  --accent-soft:color-mix(in srgb,var(--accent) 12%,transparent);
  --bg:#f7f7fb;--surface:#fff;--ink:#14141f;--ink-2:#4a4a5c;--muted:#7b7b8f;--line:#e6e6ef;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-head:var(--font);
  --head-weight:700;--head-transform:none;--head-tracking:-.01em;
  --radius:16px;--radius-media:var(--radius);--radius-pill:999px;
  --shadow:0 1px 2px rgba(20,20,40,.06),0 8px 24px rgba(20,20,40,.06);
  --maxw:1200px;--gap:clamp(18px,2.6vw,32px);--media-ratio:16/10;--logo-h:48px;
  --header-bg:var(--surface);--header-ink:var(--ink);--header-line:var(--line);
  --nav-bg:var(--surface);--nav-ink:var(--ink-2);--nav-active:var(--accent);
  --tag-bg:var(--accent-soft);--tag-ink:var(--accent);
  --cta-bg:var(--accent);--cta-ink:var(--accent-ink);
  --band-bg:var(--accent-soft);--band-ink:var(--ink);--band-surface:transparent;
  --footer-bg:#14141f;--footer-ink:#f1f1f7;--footer-muted:#a9a9bd;--footer-line:rgba(255,255,255,.12);
  --footer-logo-plate:#fff;--footer-logo-pad:8px 12px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not(.light){--bg:#0f0f16;--surface:#191924;--ink:#f1f1f7;--ink-2:#c3c3d2;--muted:#8f8fa6;--line:#2a2a3a;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3);--accent-soft:color-mix(in srgb,var(--accent) 22%,transparent);
    --tag-ink:var(--ink);--footer-bg:#09090e;color-scheme:dark}
}
:root.dark{--bg:#0f0f16;--surface:#191924;--ink:#f1f1f7;--ink-2:#c3c3d2;--muted:#8f8fa6;--line:#2a2a3a;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3);--accent-soft:color-mix(in srgb,var(--accent) 22%,transparent);
  --tag-ink:var(--ink);--footer-bg:#09090e;color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden}
main{flex:1 0 auto}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font-head);font-weight:var(--head-weight);line-height:1.18;margin:0;letter-spacing:var(--head-tracking);text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px}
@media (min-width:720px){.wrap{padding:0 28px}}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:12px;top:12px;z-index:50;background:var(--surface);padding:8px 12px;border-radius:8px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--cta-bg);color:var(--cta-ink);text-decoration:none;font-weight:600;
  padding:10px 20px;border-radius:var(--radius-pill);font-size:.95rem;transition:transform .15s,filter .15s}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}

/* ---------- header: brand ---------- */
.brand{text-decoration:none;display:inline-flex;align-items:center;min-width:0;color:var(--header-ink)}
.brand-logo{height:var(--logo-h);width:auto;max-width:min(78vw,520px);object-fit:contain}
.brand-title{font-family:var(--font-head);font-weight:var(--head-weight);font-size:clamp(1.4rem,4.6vw,2rem);letter-spacing:var(--head-tracking);line-height:1.1}
@media (max-width:719px){.brand-logo{height:max(28px,calc(var(--logo-h) * .72))}}

/* left layout: one sticky bar, brand + topic nav */
.bar{position:sticky;top:0;z-index:20;background:var(--header-bg);color:var(--header-ink);border-bottom:1px solid var(--header-line);
  backdrop-filter:saturate(1.4) blur(8px)}
.bar-inner{display:flex;align-items:center;gap:6px 28px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
.bar .topnav{flex:1 1 auto;min-width:0;display:flex;justify-content:flex-end}
.bar .topnav-inner{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
@media (max-width:899px){
  .bar-inner{padding-top:10px;padding-bottom:0}
  .bar .topnav{flex:1 0 100%;justify-content:flex-start;margin:0 -16px;padding:0 16px;border-top:1px solid var(--header-line)}
  .bar .topnav-inner{padding:6px 0}
}

/* centered layout: masthead scrolls away, the topic nav sticks */
.masthead{background:var(--header-bg);color:var(--header-ink)}
.masthead-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding-top:clamp(18px,3.4vw,34px);padding-bottom:clamp(14px,2.6vw,24px)}
.masthead .tagline{color:var(--muted);font-size:.95rem;max-width:90ch}
.topnav{color:var(--nav-ink)}
body > .topnav{position:sticky;top:0;z-index:20;background:var(--nav-bg);border-top:1px solid var(--header-line);border-bottom:1px solid var(--header-line)}
body > .topnav .topnav-inner{display:flex;justify-content:safe center;gap:4px;overflow-x:auto;scrollbar-width:none;padding-top:4px;padding-bottom:4px}
.topnav-inner::-webkit-scrollbar{display:none}
.nav-link{flex:0 0 auto;display:inline-block;padding:9px 12px;text-decoration:none;font-size:.92rem;font-weight:600;white-space:nowrap;
  color:inherit;border-radius:8px;position:relative;transition:color .15s,background .15s}
.nav-link:hover{color:var(--nav-active)}
.nav-link.is-active{color:var(--nav-active)}
.nav-link.is-active::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:var(--nav-active)}

/* ---------- tags, meta ---------- */
.tag{display:inline-block;align-self:flex-start;padding:3px 10px;border-radius:var(--radius-pill);background:var(--tag-bg);color:var(--tag-ink);
  text-decoration:none;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;line-height:1.6}
.tag:hover{filter:brightness(.95)}
.kicker{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--accent)}
.card-meta{color:var(--muted);font-size:.83rem;display:flex;flex-wrap:wrap;gap:2px 6px;align-items:center}
.card-meta .author{color:var(--ink-2);font-weight:600}
.card-more{display:none}

/* ---------- cards ---------- */
.card{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  border:1px solid var(--line);min-width:0;transition:transform .2s,box-shadow .2s}
.card-media{display:block;aspect-ratio:var(--media-ratio);background:var(--accent-soft);overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .card-media img{transform:scale(1.035)}
.card-placeholder{display:grid;place-items:center;width:100%;height:100%;font:800 3rem/1 var(--font-head);color:var(--accent)}
.card-body{display:flex;flex-direction:column;gap:9px;padding:16px 18px 20px;flex:1}
.card-title{font-size:1.2rem}
.card-title a{text-decoration:none;transition:color .15s}
.card-title a:hover{color:var(--accent)}
.card-desc{color:var(--ink-2);font-size:.95rem;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-grid .card-meta{margin-top:auto;padding-top:4px}

/* ---------- featured block ---------- */
.featured{padding:clamp(20px,3.6vw,40px) 0 0}
.featured-inner{display:grid;gap:var(--gap)}
.card-lead .card-title{font-size:clamp(1.55rem,3.6vw,2.4rem);line-height:1.12}
.card-lead .card-desc{font-size:1.04rem;-webkit-line-clamp:4}
.card-lead .card-body{padding:20px 20px 24px;gap:12px}
.featured-side{display:grid;gap:var(--gap)}
.card-side .card-title{font-size:1.12rem}
.card-side .card-desc{-webkit-line-clamp:2;font-size:.92rem}
@media (min-width:640px) and (max-width:999px){.featured-side{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){
  .featured-1 .card-lead{flex-direction:row}
  .featured-1 .card-lead .card-media{flex:0 0 58%;aspect-ratio:auto;min-height:420px}
  .featured-1 .card-lead .card-body{justify-content:center;padding:36px}
  .featured-2 .featured-inner,.featured-3 .featured-inner{grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);align-items:stretch}
  .featured-2 .card-lead .card-media,.featured-3 .card-lead .card-media{aspect-ratio:16/10}
  .featured-side{grid-template-rows:repeat(auto-fit,minmax(0,1fr))}
  .featured-3 .card-side{flex-direction:row}
  .featured-3 .card-side .card-media{flex:0 0 42%;aspect-ratio:auto}
  .featured-3 .card-side .card-body{padding:16px;justify-content:center}
  .featured-3 .card-side .card-desc{display:none}
}

/* ---------- about band ---------- */
.intro-band{margin-top:clamp(32px,5vw,56px);background:var(--band-bg);color:var(--band-ink)}
.intro-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding-top:clamp(28px,5vw,52px);padding-bottom:clamp(28px,5vw,52px)}
.intro-logo{display:none}
.intro-copy{max-width:760px}
.intro-title{font-size:clamp(1.15rem,2.6vw,1.45rem);margin-bottom:10px}
.intro-text{font-size:1.04rem;line-height:1.7;opacity:.92}

/* ---------- sections ---------- */
.latest,.browse{padding-top:clamp(28px,5vw,52px)}
.section-title{display:flex;align-items:center;gap:16px;font-size:clamp(1.25rem,2.8vw,1.6rem);margin-bottom:clamp(16px,2.6vw,26px)}
.section-title::after{content:"";flex:1;height:1px;background:var(--line)}
.grid{display:grid;grid-template-columns:1fr;gap:var(--gap)}
@media (min-width:640px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.topic-tiles{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.topic-tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column;gap:6px;padding:18px 20px}
.topic-tile:has(a){padding:0}
.topic-tile a{display:flex;flex-direction:column;gap:6px;padding:18px 20px;text-decoration:none;height:100%;border-radius:inherit;transition:background .15s}
.topic-tile a:hover{background:var(--accent-soft)}
.topic-tile-title{font-family:var(--font-head);font-weight:var(--head-weight);font-size:1.12rem}
.topic-tile-desc{color:var(--ink-2);font-size:.9rem;line-height:1.5}
.topic-tile-count{margin-top:auto;padding-top:4px;color:var(--accent);font-size:.82rem;font-weight:700}

/* ---------- topic page ---------- */
.topic-head{padding:clamp(22px,4vw,44px) 0 4px}
.crumbs{font-size:.85rem;color:var(--muted);margin-bottom:10px}
.crumbs a{color:var(--muted)}
.topic-title{font-size:clamp(1.9rem,5.4vw,3rem)}
.topic-intro{margin-top:12px;color:var(--ink-2);max-width:66ch;font-size:1.08rem}
.topic-count{margin-top:12px;color:var(--muted);font-size:.86rem;font-weight:600}
.topic-head + .latest{padding-top:clamp(18px,3vw,30px)}

/* ---------- pager ---------- */
.pager{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:clamp(24px,4vw,40px) 0 8px}
.pager-btn{padding:10px 18px;border-radius:var(--radius-pill);border:1px solid var(--line);background:var(--surface);text-decoration:none;font-weight:600;font-size:.92rem}
a.pager-btn:hover{border-color:var(--accent);color:var(--accent)}
.pager-btn.is-disabled{opacity:.4}
.pager-nums{display:flex;gap:6px;align-items:center}
.pager-num{display:grid;place-items:center;min-width:40px;height:40px;padding:0 8px;border-radius:var(--radius-pill);text-decoration:none;font-weight:600;font-size:.92rem;border:1px solid transparent}
a.pager-num:hover{border-color:var(--line)}
.pager-num.is-current{background:var(--accent);color:var(--accent-ink)}
.pager-gap{color:var(--muted)}
@media (max-width:520px){.pager-nums{order:3;flex:1 0 100%;justify-content:center}}

/* ---------- empty states ---------- */
.soon{padding:clamp(28px,5vw,60px) 0 0}
.soon-card{text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:clamp(36px,7vw,80px) clamp(20px,5vw,64px);margin-bottom:clamp(32px,5vw,52px)}
.soon-card .kicker{margin-bottom:12px}
.soon-title{font-size:clamp(1.9rem,5.4vw,3.1rem);max-width:18ch;margin:0 auto}
.soon-text{margin:18px auto 0;color:var(--ink-2);max-width:62ch;font-size:1.06rem}
.soon-art,.empty .soon-art{display:flex;gap:10px;justify-content:center;margin-bottom:26px}
.soon-art span{width:46px;height:60px;border-radius:10px;background:var(--accent-soft);border:2px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.soon-art span:nth-child(2){transform:translateY(-10px);background:var(--accent)}
.empty{text-align:center;padding:clamp(44px,9vw,100px) 16px;max-width:560px;margin:0 auto}
.empty h1{font-size:clamp(1.6rem,4.4vw,2.2rem);margin-bottom:.4em}
.empty p{color:var(--ink-2);margin:0 0 1.4em}

/* ---------- footer ---------- */
.site-footer{margin-top:clamp(44px,7vw,80px);background:var(--footer-bg);color:var(--footer-ink)}
.footer-grid{display:grid;gap:28px 40px;padding-top:clamp(36px,5vw,56px);padding-bottom:clamp(28px,4vw,40px)}
@media (min-width:760px){.footer-grid{grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr))}}
.footer-brand{display:inline-block;text-decoration:none;margin-bottom:14px}
.footer-logo{height:calc(min(var(--logo-h),64px) + 16px);width:auto;max-width:300px;object-fit:contain;background:var(--footer-logo-plate);padding:var(--footer-logo-pad);border-radius:8px}
.footer-title{font-family:var(--font-head);font-weight:var(--head-weight);font-size:1.4rem}
.footer-text{color:var(--footer-muted);font-size:.94rem;max-width:56ch;line-height:1.65}
.footer-h{font-family:var(--font);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;margin-bottom:12px;color:var(--footer-ink)}
.footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.footer-col a{color:var(--footer-muted);text-decoration:none;font-size:.94rem}
.footer-col a:hover{color:var(--footer-ink);text-decoration:underline}
.social{display:flex;gap:8px;margin-top:18px}
.social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--footer-line);color:var(--footer-ink);transition:background .15s,color .15s}
.social a:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.footer-bottom{border-top:1px solid var(--footer-line)}
.footer-bottom-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;padding-top:16px;padding-bottom:18px;font-size:.82rem;color:var(--footer-muted)}
.footer-bottom-inner a{color:var(--footer-muted)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:639px){
  .card-side{flex-direction:row}
  .card-side .card-media{flex:0 0 38%;aspect-ratio:1/1}
  .card-side .card-body{padding:12px 14px;gap:6px;justify-content:center}
  .card-side .card-desc,.card-side .card-meta .rt,.card-side .card-meta .dot:has(+ .rt){display:none}
  .card-side .card-title{font-size:1.02rem}
}