/* DKC blog: listing page and post pages. Loads after ../home.css (tokens, nav, buttons, footer). */

/* page head */
.bhead{position:relative;overflow:hidden;background:var(--night);color:var(--snow);padding-block:64px 88px}
.bhead h1{position:relative;z-index:2;margin:18px 0 0;font:800 clamp(48px,7vw,104px)/.96 var(--display);letter-spacing:-.04em;max-width:13ch;text-wrap:balance}
.bhead h1 em{font-style:normal;color:var(--lagoon-n)}
.bhead p{position:relative;z-index:2;margin:24px 0 0;max-width:46ch;font:500 20px/30px var(--sans);color:var(--snow-muted)}
.bhead .drift--ring{right:-160px;top:-180px}

/* filters + cards */
.blist{padding-block:56px 112px;background:var(--paper)}
.bfilter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:36px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}
.bcard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.bcard:hover{transform:translateY(-6px);box-shadow:0 18px 40px -18px rgba(27,36,51,.35)}
.bcard:focus-visible{outline:3px solid var(--lagoon);outline-offset:3px}
.bcard img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;background:var(--night)}
.bcard__body{display:flex;flex-direction:column;gap:10px;padding:22px 24px 26px;flex:1}
.bcard h2{margin:0;font:800 26px/1.08 var(--display);letter-spacing:-.02em;text-wrap:balance}
.bcard p{margin:0;font:400 16px/25px var(--sans);color:var(--muted)}
.bmeta{margin-top:auto;padding-top:6px;font:500 12px/16px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.btag{align-self:flex-start;font:700 12px/16px var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:6px}
.btag--video{background:var(--lagoon-soft);color:var(--lagoon-ink)}
.btag--learning{background:var(--tangerine-soft);color:var(--tangerine-ink)}
.btag--animation{background:var(--berry-soft);color:var(--berry-ink)}
.btag--reach{background:var(--sunflower-soft);color:var(--sunflower-ink)}

/* post */
.phead{background:var(--night);color:var(--snow);padding-block:48px 0}
.crumbs{font:500 13px/18px var(--mono);letter-spacing:.06em;color:var(--snow-muted)}
.crumbs a{color:var(--snow-muted);text-decoration:none}
.crumbs a:hover{color:var(--sunflower-n)}
.phead h1{margin:18px 0 0;font:800 clamp(38px,5.4vw,72px)/1.02 var(--display);letter-spacing:-.03em;max-width:20ch;text-wrap:balance}
.phead .lede{margin:20px 0 0;max-width:52ch;font:500 20px/30px var(--sans);color:var(--snow-muted)}
.phead .bmeta{color:var(--snow-muted);margin-top:22px}
.cover{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;border-radius:20px;margin-top:40px;transform:translateY(64px);box-shadow:0 30px 60px -30px rgba(17,22,30,.5)}
.post{padding-block:120px 72px}
.prose{max-width:68ch;margin:0 auto;font:400 18px/31px var(--sans);color:var(--ink)}
.prose > * + *{margin-top:20px}
.prose h2{margin-top:48px;font:800 32px/1.1 var(--display);letter-spacing:-.02em}
.prose h3{margin-top:32px;font:700 22px/1.2 var(--display)}
.prose p,.prose ul,.prose ol{margin-bottom:0}
.prose ul,.prose ol{padding-left:24px}
.prose li + li{margin-top:8px}
.prose a{color:var(--lagoon-ink);text-decoration-thickness:2px;text-underline-offset:3px}
.prose strong{font-weight:700}
.prose blockquote{margin:36px 0;padding:6px 0 6px 24px;border-left:6px solid var(--tangerine);font:700 24px/1.3 var(--display);letter-spacing:-.01em}
.prose .tip{background:var(--paper-alt);border-radius:16px;padding:20px 24px}
.prose .tip p{margin:0}
.pcta{max-width:68ch;margin:56px auto 0;background:var(--sunflower);border-radius:24px;padding:36px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.pcta h2{margin:0;font:800 30px/1.05 var(--display);letter-spacing:-.02em;max-width:18ch}
.related{background:var(--paper-alt);padding-block:80px}
.related .wrap > h2{margin:0 0 28px;font:800 clamp(30px,3.6vw,44px)/1.05 var(--display);letter-spacing:-.02em}

@media (max-width:720px){
  .bhead{padding-block:44px 64px}
  .cards{grid-template-columns:minmax(0,1fr)}
  .cover{border-radius:14px;transform:translateY(40px)}
  .post{padding-block:80px 56px}
  .prose{font-size:17px;line-height:29px}
  .prose h2{font-size:27px}
  .pcta{padding:28px 22px}
}