/* The blog (/blog/) and the resource library (/resources/): the index grids and their filter, the article page, the
   resource page, and the blocks posts are written with (src/content/blog/_kit.mjs). On top of site.css and pages.css;
   phone first like them: every block works at 360px without sideways scrolling. */

/* ---------- index pages: filter, featured post, cards ---------- */
.bfilter{margin-bottom:clamp(24px,3vw,36px)}
.bcat{display:inline-flex;align-items:center;gap:8px;font:700 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bone)}
.bcat i{width:8px;height:8px;border-radius:50%;background:var(--d,var(--volt));flex:none}
.bmeta{display:flex;flex-wrap:wrap;gap:6px 14px;font:400 12px/1.4 var(--mono);color:var(--mute);text-transform:uppercase;letter-spacing:.06em}
.bfeat{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center;margin-bottom:clamp(20px,3vw,32px);padding:clamp(12px,1.6vw,18px);border-radius:30px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-3);text-decoration:none;transition:box-shadow .2s}
.bfeat:hover{box-shadow:inset 0 0 0 1px var(--night-4),0 40px 80px -40px rgba(0,0,0,.9)}
.bfeat img{height:auto;width:100%;aspect-ratio:1200/630;object-fit:cover;border-radius:20px;background:var(--night-3)}
.bfeat .bt{display:grid;gap:16px;justify-items:start;padding:8px clamp(4px,1.5vw,16px) 8px 0}
.bfeat h2{font-size:clamp(28px,3.4vw,44px);font-weight:800;letter-spacing:-.035em;line-height:1.05}
.bfeat p{color:var(--mute);font-size:17px;line-height:1.5}
.bfeat .go{display:inline-flex;align-items:center;gap:8px;color:var(--volt);font-weight:700}
.bfeat .go svg{width:16px;height:16px}
@media (max-width:860px){.bfeat{grid-template-columns:minmax(0,1fr)}.bfeat .bt{padding:4px 6px 10px}}
.bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
@media (max-width:980px){.bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.bgrid{grid-template-columns:minmax(0,1fr)}}
.pcard{display:grid;grid-template-rows:auto 1fr;border-radius:24px;overflow:hidden;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-3);text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s}
.pcard:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--night-4),0 30px 60px -30px rgba(0,0,0,.9)}
.pcard img{height:auto;width:100%;aspect-ratio:1200/630;object-fit:cover;background:var(--night-3)}
.pcard .bt{display:grid;gap:10px;align-content:start;padding:18px 20px 22px}
.pcard h3{font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.pcard p{color:var(--mute);font-size:15px;line-height:1.5}
.bempty{color:var(--mute);padding:24px 0}

/* ---------- the article page ---------- */
.ahero{padding-block:clamp(36px,6vw,80px) clamp(20px,3vw,32px)}
.ahero .wrap{display:grid;gap:22px;justify-items:start}
.ahero h1{font-size:clamp(36px,5.2vw,66px);font-weight:800;line-height:1.02;letter-spacing:-.04em;max-width:21ch}
.ahero .lead{max-width:62ch}
.ahero a.bcat{text-decoration:none}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font:400 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.byline b{color:var(--bone);font-weight:700}
.byline svg{width:22px;height:22px;flex:none}
.byline span{display:inline-flex;align-items:center;gap:10px}
.acover{width:100%;margin-top:clamp(4px,1.5vw,16px);border-radius:28px;overflow:hidden;background:var(--night-2);box-shadow:0 0 0 1px var(--night-3),0 50px 100px -50px rgba(0,0,0,.95)}
.acover img{height:auto;width:100%;aspect-ratio:1200/630;object-fit:cover}
.atoc details{display:grid;gap:4px}
.atoc summary{list-style:none;cursor:pointer;font:700 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.atoc summary::-webkit-details-marker{display:none}
.atoc summary svg{width:14px;height:14px;transition:transform .2s var(--ease)}
.atoc details[open] summary svg{transform:rotate(180deg)}
.atoc details a{display:block}
.atoc .tcta{display:grid;gap:10px;margin-top:22px;padding:18px;border-radius:18px;background:radial-gradient(120% 120% at 0% 0%,rgba(255,61,139,.16),transparent 60%),var(--night-2);box-shadow:inset 0 0 0 1px var(--night-3)}
.atoc .tcta b{font:800 17px/1.25 var(--font);letter-spacing:-.01em;color:var(--bone);text-transform:none;margin:0}
.atoc .tcta p{color:var(--mute);font-size:14px;line-height:1.45}
.atoc .tcta .btn{padding:12px 16px;font-size:14px}
@media (max-width:860px){.atoc .tcta{display:none}.atoc summary{margin:0}.atoc details[open] summary{margin-bottom:8px}}

/* the post's body: prose (pages.css) plus the blocks below */
.post{min-width:0}
.prose.pbody{font-size:18px;line-height:1.72;max-width:70ch}
.prose.pbody > :first-child{margin-top:0}
.prose h2 + p,.prose h3 + p{margin-top:0}
.prose blockquote{margin:28px 0;padding:2px 0 2px 20px;box-shadow:inset 3px 0 0 var(--volt);color:var(--bone);font-size:19px;font-weight:600;line-height:1.5}
.prose blockquote p{margin:0}
.prose blockquote cite{display:block;margin-top:8px;font:400 12px/1.4 var(--mono);font-style:normal;color:var(--mute);text-transform:uppercase;letter-spacing:.06em}
.prose hr{border:0;height:1px;background:var(--night-3);margin:40px 0}
.prose figure{margin:30px 0}
.prose figcaption{margin-top:12px;font:400 12.5px/1.55 var(--mono);color:var(--mute)}
.prose .callout{margin:26px 0}
.prose .callout p{margin:0;font-size:16px;line-height:1.6}
.prose code.say{display:block;margin:14px 0 20px;padding:14px 16px;border-radius:12px;font:400 14.5px/1.55 var(--mono);color:var(--bone);background:var(--night);box-shadow:inset 0 0 0 1px var(--volt)}
.prose ol.numlist,.prose ul.checks{padding-left:0}
.prose .numlist li{margin:0}
.prose .numlist p{margin:0}
.reels{display:grid;gap:12px;max-width:600px}
.reels.n2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:420px}
.reels.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.reels.n4{grid-template-columns:repeat(4,minmax(0,1fr));max-width:100%}
@media (max-width:520px){.reels.n4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.preel{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 24px 48px -24px rgba(0,0,0,.9)}
.preel video{width:100%;height:100%;object-fit:cover}
.preel .tag,.pwide .tag{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:6px 8px;border-radius:8px;background:rgba(12,11,16,.74);font:700 9.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bone);pointer-events:none}
.pwide{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 60px -30px rgba(0,0,0,.9)}
.pwide video{width:100%;height:100%;object-fit:cover}
.script{margin:26px 0;border-radius:20px;overflow:hidden;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-3)}
.script .sh{display:flex;justify-content:space-between;gap:12px;padding:12px 18px;background:var(--night-3);font:700 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.script .sh b{color:var(--bone)}
.script .beat{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;padding:14px 18px;border-top:1px solid var(--night-3)}
.script .sh + .beat{border-top:0}
.script .t{font:700 12px/1.9 var(--mono);color:var(--volt);white-space:nowrap}
.script .beat b{display:block;color:var(--bone);font-size:15px;line-height:1.5}
.script .beat p{margin:2px 0 0;color:#d6d4de;font-size:16px;line-height:1.55}
@media (max-width:520px){.script .beat{grid-template-columns:minmax(0,1fr);gap:4px}}
.blank{color:var(--bone);background:color-mix(in srgb,var(--volt) 14%,transparent);box-shadow:inset 0 -1px 0 var(--volt);padding:0 4px;border-radius:4px;white-space:nowrap}
.checks{list-style:none;display:grid;gap:10px;margin:22px 0}
.checks li{position:relative;margin:0;padding:13px 16px 13px 48px;border-radius:14px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-3);font-size:16px;line-height:1.55}
.checks li::before{content:"";position:absolute;left:16px;top:15px;width:18px;height:18px;border-radius:6px;background:color-mix(in srgb,var(--mint) 18%,transparent);box-shadow:inset 0 0 0 1.5px var(--mint)}
.checks li::after{content:"";position:absolute;left:22px;top:18px;width:5px;height:9px;border:solid var(--mint);border-width:0 2px 2px 0;transform:rotate(45deg)}
.tscroll{overflow-x:auto;margin:26px 0;border-radius:16px;box-shadow:inset 0 0 0 1px var(--night-3)}
.ptable{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.5}
.ptable th{text-align:left;padding:12px 14px;background:var(--night-2);font:700 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.ptable td{padding:12px 14px;border-top:1px solid var(--night-3);vertical-align:top;color:#d6d4de;min-width:120px}
.ptable td:first-child{color:var(--bone);font-weight:600}
@media (max-width:560px){
  .tscroll{overflow:visible;border-radius:0;box-shadow:none}
  .ptable thead{display:none}
  .ptable,.ptable tbody,.ptable tr,.ptable td{display:block}
  .ptable tr{margin-bottom:10px;padding:14px 16px;border-radius:14px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-3)}
  .ptable td{min-width:0;padding:2px 0;border:0}
  .ptable td:first-child{font-size:16px;padding-bottom:4px}
  .ptable td[data-th]::before{content:attr(data-th);display:block;margin-top:8px;font:700 10.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
}

/* "Get the free PDF": a card inside a post, and the band after it */
.prose a.rescard,.rescard{display:grid;grid-template-columns:112px minmax(0,1fr);gap:20px;align-items:center;margin:34px 0;padding:18px;border-radius:22px;color:var(--bone);text-decoration:none;background:radial-gradient(120% 140% at 0% 0%,rgba(166,107,255,.18),transparent 60%),var(--night-2);box-shadow:inset 0 0 0 1px var(--night-3);transition:box-shadow .2s}
.rescard:hover{box-shadow:inset 0 0 0 1px var(--violet)}
.rescard img{height:auto;width:112px;aspect-ratio:210/297;object-fit:cover;border-radius:6px;box-shadow:0 0 0 1px rgba(255,255,255,.1),7px 7px 0 -1px var(--night-3),0 20px 30px -12px rgba(0,0,0,.9)}
.rescard .rt{display:grid;gap:6px;justify-items:start}
.rescard b{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.rescard .rl{color:var(--mute);font-size:15px;line-height:1.5}
.rescard .go{display:inline-flex;align-items:center;gap:8px;margin-top:4px;color:var(--volt);font-weight:700;font-size:15px}
.rescard .go svg{width:16px;height:16px}
@media (max-width:520px){.prose a.rescard,.rescard{grid-template-columns:76px minmax(0,1fr);gap:14px;padding:14px}.rescard img{width:76px}.rescard b{font-size:17px}}

/* ---------- the resource library ---------- */
.rgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,22px)}
@media (max-width:1100px){.rgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:780px){.rgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.rgrid{grid-template-columns:minmax(0,1fr)}}
.rcard{display:grid;gap:14px;align-content:start;padding:14px 14px 20px;border-radius:24px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-3);text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s}
.rcard:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--night-4),0 30px 60px -30px rgba(0,0,0,.9)}
.rcard .thumb{aspect-ratio:210/297;border-radius:12px;overflow:hidden;background:var(--night);box-shadow:0 0 0 1px rgba(255,255,255,.07),0 20px 40px -20px rgba(0,0,0,.9)}
.rcard .thumb img{width:100%;height:100%;object-fit:cover}
.rcard .rt{display:grid;gap:8px;padding:0 6px}
.rcard h3{font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.rcard p{color:var(--mute);font-size:14.5px;line-height:1.5}

/* the resource page */
.rhero{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(40px,6vw,88px) clamp(40px,5vw,72px)}
.rhero .glow{position:absolute;inset:-30% -10% auto auto;width:70vw;max-width:900px;aspect-ratio:1;border-radius:50%;z-index:-1;background:radial-gradient(circle,var(--g,rgba(166,107,255,.2)),transparent 62%);pointer-events:none}
.rhero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,72px);align-items:center}
.rhero .copy{display:grid;gap:22px;justify-items:start}
.rhero h1{font-size:clamp(38px,5.4vw,70px);font-weight:800;line-height:1;letter-spacing:-.04em}
.rhero .fine{margin-top:0}
/* the free PDF's form: name and email side by side, the optional box, the button (blog.js sends it) */
.getpdf{width:100%;max-width:580px;gap:14px;scroll-margin-top:96px}
.getpdf .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.getpdf .tick{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--mute);cursor:pointer}
.getpdf .tick input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--volt)}
.getpdf .btn{justify-self:start}
.getpdf .fine{margin:0}
.getpdf .fine a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.getpdf .field input[aria-invalid=true]{box-shadow:inset 0 0 0 2px var(--flare)}
.getpdf .gnote{margin:0;font-size:14.5px;line-height:1.45;color:var(--bone)}
.getpdf .gnote.bad{color:var(--flare)}
.getpdf .sent p{margin-top:4px}
.getpdf .sent a{color:var(--volt);text-decoration:underline;text-underline-offset:2px}
@media (max-width:560px){.getpdf .two{grid-template-columns:minmax(0,1fr)}.getpdf .btn{justify-self:stretch;justify-content:center}}
.rbook{position:relative;justify-self:center;width:min(360px,78vw);aspect-ratio:210/297}
.rbook img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:10px;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 50px 90px -40px rgba(0,0,0,.95)}
.rbook img.back{transform:rotate(5deg) translate(9%,3%);filter:brightness(.8)}
.rbook img.front{transform:rotate(-2deg)}
@media (max-width:900px){.rhero .wrap{grid-template-columns:minmax(0,1fr)}.rbook{width:min(300px,70vw);margin-top:8px}}
.inside{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.inside li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:baseline;padding:14px 16px;border-radius:16px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--night-3)}
.inside li em{font:700 12px/1.6 var(--mono);font-style:normal;color:var(--d,var(--volt))}
.inside li b{display:block;font-size:16px;color:var(--bone)}
.inside li span span{display:block;color:var(--mute);font-size:14.5px}
.peek{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.6vw,18px)}
.peek a{display:block;aspect-ratio:210/297;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 50px -30px rgba(0,0,0,.95);transition:transform .25s var(--ease)}
.peek a:hover{transform:translateY(-4px)}
.peek img{width:100%;height:100%;object-fit:cover}
@media (max-width:700px){.peek{grid-template-columns:repeat(2,minmax(0,1fr))}}
.forwho{display:flex;flex-wrap:wrap;gap:8px}