/* The journal has its own illustrated doorway in the homepage collage. */
.blog-project{position:absolute;left:3%;top:490px;width:27%;max-width:320px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:15px;transform:rotate(-5deg);transition:transform .45s cubic-bezier(.17,.89,.32,1.4)}
.brain-burst{display:block;width:100%;height:220px}
.brain-original{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 7px #0007)}
.brain-burst.blog-intro-brain{height:auto;aspect-ratio:1;max-width:330px}
.blog-project-label{font:18px/1.5 'Home Video',monospace;color:#eeeae1;text-align:center;max-width:270px}
.blog-project:is(:hover,:focus-visible){transform:translateY(-6px) rotate(0deg)}
.blog-project:is(:hover,:focus-visible) .blog-project-label{color:#ff4b2b}
@media(min-width:1051px){.minimal-view .hero{height:1250px}}
.blog-page .blog-back{font:14px/1.4 'Home Video',monospace;color:#c6c1b7;margin-left:20px;text-align:right}
.blog-main{max-width:1280px;margin:0 auto;padding:85px 0 70px}
.blog-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,.38fr);gap:55px;align-items:center}
.blog-kicker{font:13px/1.6 'Home Video',monospace;letter-spacing:2px;color:#a8a399;margin:0 0 30px}
.blog-page h1{font:clamp(48px,6.7vw,108px)/1.08 'DX Burst Smooth',sans-serif;letter-spacing:0;margin:0;display:block;max-width:900px}
.blog-page h1 span{display:block}
.blog-intro-brain{display:block;width:100%;height:auto;max-height:330px;object-fit:contain;transform:rotate(5deg);filter:drop-shadow(0 5px 9px #0007)}
.blog-posts{margin-top:80px;padding:32px 0 36px;border-top:1px solid #45433e;border-bottom:1px solid #45433e;display:flex;gap:45px;align-items:baseline}
.blog-post-count{font:12px/1.6 'Home Video',monospace;color:#ff4b2b;letter-spacing:1px}
.blog-empty{margin:0;font:28px/1.4 Caslon,Georgia,serif;color:#b9b4aa}
@media(min-width:1600px){.minimal-view .hero{height:1390px}.blog-project{top:585px}.brain-burst{height:245px}}
@media(min-width:701px) and (max-width:1050px){.blog-project{left:3%;top:500px;width:28%}.brain-burst{height:205px}.blog-project-label{font-size:15px}.blog-main{padding-top:65px}.blog-intro{gap:30px;grid-template-columns:minmax(0,1fr) minmax(160px,.4fr)}}
@media(max-width:700px){.blog-project{position:relative;left:auto;top:auto;width:min(270px,82%);margin:55px auto 15px;transform:rotate(-4deg)}.brain-burst{height:230px}.blog-project-label{font-size:17px}.blog-page .header{height:100px}.blog-page .brand-copy{font-size:11px}.blog-page .blog-back{font-size:11px;max-width:70px;margin-left:5px}.blog-main{padding:45px 0}.blog-intro{grid-template-columns:1fr;gap:35px}.blog-kicker{font-size:11px;margin-bottom:22px}.blog-page h1{font-size:clamp(38px,10vw,65px);line-height:1.2}.blog-intro-brain{width:65%;max-height:260px;margin:0 auto}.blog-posts{margin-top:40px;gap:22px;padding:25px 0 28px}.blog-empty{font-size:25px}}
@media(prefers-reduced-motion:reduce){.blog-project,.blog-brain{transition:none}.blog-project:is(:hover,:focus-visible),.blog-project:is(:hover,:focus-visible) .blog-brain{transform:none}}
.motion-off .blog-project:is(:hover,:focus-visible),.motion-off .blog-project:is(:hover,:focus-visible) .blog-brain{transform:none}

/* The explosion paints in a fixed layer, so fragments cannot widen the page. */
.brain-burst.is-exploding .brain-original{animation:brain-pop .2s ease-in forwards}
.brain-explosion-layer{position:fixed;inset:0;z-index:25;pointer-events:none;overflow:hidden;contain:strict}
.brain-fragment{position:absolute;max-width:none;object-fit:contain;pointer-events:none;filter:drop-shadow(0 3px 4px #0008);opacity:0;transform-origin:var(--piece-origin);animation:brain-fragment-flight .95s cubic-bezier(.12,.72,.24,1) .14s both}
.brain-flash,.brain-shockwave{position:absolute;pointer-events:none;opacity:0}
.brain-flash{width:var(--blast-size);height:var(--blast-size);background:#ffe6cf;clip-path:polygon(50% 0,58% 30%,83% 8%,75% 37%,100% 45%,73% 56%,94% 82%,65% 70%,50% 100%,40% 72%,13% 93%,26% 63%,0 50%,28% 40%,8% 12%,40% 29%);animation:brain-flash .35s ease-out .12s both}
.brain-shockwave{width:80px;height:80px;border:4px solid #ffb0b4;border-radius:50%;animation:brain-shockwave .7s ease-out .14s both}
@keyframes brain-pop{0%{transform:scale(1);opacity:1}55%{transform:scale(.84,.9);opacity:1}85%{transform:scale(1.08);opacity:1}100%{transform:scale(1.16);opacity:0}}
@keyframes brain-fragment-flight{0%{opacity:0;transform:translate(0,0) rotate(0) scale(1)}2%{opacity:1}55%{opacity:1}100%{opacity:0;transform:translate(var(--piece-x),var(--piece-y)) rotate(var(--piece-spin)) scale(.58)}}
@keyframes brain-flash{0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(-15deg)}18%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5) rotate(15deg)}}
@keyframes brain-shockwave{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}12%{opacity:.85}100%{opacity:0;transform:translate(-50%,-50%) scale(4.2)}}
@media(prefers-reduced-motion:reduce){.brain-burst.is-exploding .brain-original{animation:none;opacity:1}.brain-explosion-layer{display:none}}

/* Published journal entries. */
@font-face{font-family:'Article Inter';src:url('https://hypersalesman-font-assets.jameshanzimanolis.workers.dev/assets/blog/linkedin-reach-october-2026/inter.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
.blog-post-list{align-items:flex-start}
.blog-post{flex:1;min-width:0}
.blog-post-link{display:grid;grid-template-columns:minmax(230px,.8fr) minmax(0,1.2fr);align-items:center;gap:38px}
.blog-post-image{display:block;width:100%;height:auto;border:1px solid #30302e;transition:border-color .2s}
.blog-post-meta{font:12px/1.6 'Home Video',monospace;color:#a9a79e;margin:0 0 18px}
.blog-post h2{font:clamp(28px,3.1vw,46px)/1.2 'DX Burst Smooth',sans-serif;margin:0 0 20px;letter-spacing:0}
.blog-post h2 span{display:block}
.blog-post-excerpt{font:17px/1.7 'Article Inter',Arial,sans-serif;color:#c1bdb3;margin:0 0 25px}
.blog-read{font:13px/1.5 'Home Video',monospace;color:#ffd236;display:inline-flex;align-items:center;gap:20px}
.blog-read span{font:24px Arial}
.blog-post-link:hover .blog-post-image{border-color:#aaa79e}
.blog-post-link:hover h2{color:#ffd236}
@media(max-width:900px){.blog-post-link{gap:25px;grid-template-columns:minmax(170px,.7fr) minmax(0,1.3fr)}.blog-posts{gap:25px}}
@media(max-width:700px){.blog-post-link{grid-template-columns:1fr;gap:25px}.blog-post h2{font-size:36px}.blog-post-excerpt{font-size:16px}.blog-posts{gap:16px}.blog-post-count{font-size:10px}}