/* /blog index and article cards. Owner: design Lane 1. Type scale and stickers follow wanderin.css (.hero, .kick, .doms, .go-card). */
.bl-hero{display:block;position:relative;min-height:0;margin:12px 0 34px}
.bl-hero .hero-txt{display:flex;position:relative;z-index:3;max-width:min(900px,100%)}
.bl-hero h1{font-size:clamp(34px,min(5.2vw,9vh),78px);max-width:15ch;margin-top:14px}
.bl-hero .sub{font-size:clamp(17px,min(1.7vw,3vh),24px);max-width:40ch;margin-top:18px}
/* the dotted route from the landing page: comes in low from the left, runs behind the copy, ends at the stamp */
.bl-route{position:absolute;z-index:1;left:calc(50% - 50vw);top:0;width:100vw;height:100%;min-height:300px;pointer-events:none;overflow:visible}
.bl-route path{fill:none;stroke:var(--ink);stroke-width:7;stroke-linecap:round;stroke-dasharray:2 22}
.bl-stamp{position:absolute;z-index:2;right:clamp(0px,5vw,90px);top:8px;width:clamp(118px,11vw,160px);aspect-ratio:1;border-radius:50%;background:var(--sun);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);display:grid;place-content:center;text-align:center;rotate:-10deg;line-height:.95}
.bl-stamp b{font-weight:800;font-size:clamp(40px,4.4vw,62px);letter-spacing:-.04em}
.bl-stamp span{font-weight:800;font-size:clamp(17px,1.6vw,22px);letter-spacing:-.02em}
.bl-stamp small{font:500 10px "DM Mono",monospace;letter-spacing:.06em;text-transform:uppercase;margin-top:5px}
/* filters: same sticker chips as .doms on the landing page, tilted, one active */
.bl-filter{order:4;margin-top:24px!important}
.bl-filter li,.bl-cities li:not(.bl-cl){padding:0!important;background:none!important;border:0!important;box-shadow:none!important}
.bl-filter li:nth-child(odd){rotate:-2deg}.bl-filter li:nth-child(even){rotate:1.5deg}
.bl-filter button,.bl-cities button{font:500 16px "DM Mono",monospace;color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:14px;padding:4px 14px;box-shadow:3px 3px 0 var(--ink);cursor:pointer;transition:transform .12s,background .12s;white-space:nowrap}
.bl-filter button:hover,.bl-cities button:hover{transform:translate(-1px,-1px);background:var(--lagoon)}
.bl-filter button[aria-pressed=true]{background:var(--sun)}
.bl-filter button:focus-visible,.bl-cities button:focus-visible,.bl-share button:focus-visible,.bl-play:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.bl-cities{order:5;display:flex;align-items:center;gap:8px;margin:14px 0 0;padding:0;list-style:none;max-width:100%;overflow-x:auto;scrollbar-width:none;padding-bottom:6px;margin-bottom:-6px}
.bl-cities::-webkit-scrollbar{display:none}
.bl-cities button{font-size:13px;padding:2px 11px;border-radius:99px;box-shadow:2px 2px 0 var(--ink)}
.bl-cities button[aria-pressed=true]{background:var(--lagoon)}
.bl-cl{font:500 12px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.08em;padding-right:4px;paint-order:stroke fill;-webkit-text-stroke:5px var(--sky)}
/* grid and cards */
.bl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:30px 26px;position:relative;z-index:2}
.bl-grid.bl-few{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),380px))}
.bl-card{display:flex;flex-direction:column;gap:9px;position:relative;background:var(--paper);color:var(--ink);text-decoration:none;border:3px solid var(--ink);border-radius:var(--r);box-shadow:5px 5px 0 var(--ink);padding:12px 12px 16px;transition:transform .14s,box-shadow .14s;rotate:-.5deg;min-width:0}
.bl-card:nth-child(even){rotate:.4deg}
.bl-card:hover{transform:translate(-2px,-3px);rotate:0deg;box-shadow:8px 8px 0 var(--ink)}
.bl-card:focus-visible{outline:4px solid var(--ink);outline-offset:4px}
#post-grid .bl-card:nth-child(n+19){display:none}
.bl-card-img{display:block;aspect-ratio:8/5;border:2px solid var(--ink);border-radius:14px;overflow:hidden;position:relative}
.bl-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.bl-card strong{font-weight:800;font-size:clamp(20px,1.7vw,23px);line-height:1.1;letter-spacing:-.02em;margin-top:2px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bl-card-sub{font-size:15px;line-height:1.35;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bl-card-m{font:500 12px "DM Mono",monospace;margin-top:auto;padding-top:6px;overflow-wrap:anywhere}
.bl-tag{align-self:flex-start;font:500 12px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.05em;border:2px solid var(--ink);border-radius:99px;padding:1px 10px;box-shadow:2px 2px 0 var(--ink);margin-top:-24px;margin-left:8px;position:relative;rotate:-2deg;z-index:1}
/* no cover: the frame colour, 80px-ish graph paper, the coral pin and the city */
.bl-card-none{display:grid;place-content:center;justify-items:center;gap:10px;text-align:center;padding:10px;background-image:linear-gradient(rgba(13,43,74,.14) 2px,transparent 2px),linear-gradient(90deg,rgba(13,43,74,.14) 2px,transparent 2px);background-size:40px 40px}
.bl-card-none i,.bl-empty i,.bl-ghost i{display:block;width:34px;height:34px;border-radius:50% 50% 50% 0;rotate:-45deg;background:var(--coral);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);position:relative}
.bl-card-none i::after,.bl-empty i::after,.bl-ghost i::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--paper)}
.bl-card-none em{font-style:normal;font-weight:800;font-size:clamp(20px,2vw,26px);letter-spacing:-.02em;line-height:1;overflow-wrap:anywhere;max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;paint-order:stroke fill;-webkit-text-stroke:5px var(--paper)}
/* few or none: intentional, never a blank page */
.bl-ghost,.bl-empty{display:grid;place-content:center;justify-items:center;gap:14px;text-align:center;min-height:200px;border:3px dashed var(--ink);border-radius:var(--r);background:rgba(255,250,240,.55);padding:20px}
.bl-ghost strong,.bl-empty strong{font-weight:800;font-size:22px;letter-spacing:-.02em;line-height:1.1}
.bl-empty{position:relative;z-index:2;max-width:560px;min-height:260px}
.bl-empty span{font:500 13px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.05em}
.bl-none{position:relative;z-index:2;margin:10px 0 0;font-size:19px}
.bl-none[hidden]{display:none}
#scroll-sentinel{height:1px}
.bl main>.bl-go{margin:48px auto 0;max-width:460px;position:relative;z-index:2}
/* one primary CTA per view: the sticky bar steps aside while the card is on screen */
.bl-go-seen .stickybar{display:none}
@media (max-width:899px){
  .bl-hero{margin-bottom:40px}
  .bl-hero h1{font-size:clamp(32px,9.2vw,56px)}
  .bl-hero .sub{font-size:18px}
  .bl-route{top:auto;bottom:-44px;height:60px;min-height:0}
  .bl-stamp{display:none}
  .bl-grid{gap:26px}
}
@media (max-width:480px){.bl-filter button{font-size:15px;padding:3px 12px}.bl-card:nth-child(n){rotate:0deg}}
@media (prefers-reduced-motion:reduce){.bl-card{transition:none}}