/* Seabound blog hub (blog.html). Loads after sj-hub.css; everything is scoped to body.sh-blog. */
.sh-blog{--bl-ink:#0C1B2E;--bl-mute:#4D6175;--bl-paper:#F7F5EF;--bl-line:#E4E0D4;--bl-sun:#F4B942;background:var(--bl-paper)}
.sh-blog .sh-hero-blog .sh-stats{grid-column:2}
.sh-blog .sh-hero-blog .sh-h1 em{font-style:italic;color:#F4D58D}
@media (max-width:900px){.sh-blog .sh-hero-blog .sh-stats{grid-column:1}}
.sh-blog .bl{width:min(1180px,92%);margin:0 auto;padding:8px 0 70px}
.sh-blog .bl-anchor{scroll-margin-top:calc(var(--sjh-h,96px) + 16px)}
.sh-blog .bl .sjdx-sect{padding:28px 0 8px}
.sh-blog .bl .sjdx-sect>.wrap{width:auto;max-width:none;padding:0}
.sh-blog .bl-k{margin:0 0 6px;font:700 11px/1.2 "Space Mono",ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:#9A6A12}

/* start here */
.sh-blog .bl-start{padding:44px 0 6px}
.sh-blog .bl-start-head h2{margin:0 0 18px;font:700 clamp(26px,3.2vw,36px)/1.1 var(--sh-display,Georgia,serif);color:var(--bl-ink)}
.sh-blog .bl-start-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1000px){.sh-blog .bl-start-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.sh-blog .bl-start-grid{grid-template-columns:1fr}}

/* promo / feature cards (whole card is the link) */
.sh-blog .bl-promo{position:relative;overflow:hidden;border-radius:18px;color:#fff;background:linear-gradient(135deg,var(--c1) 0%,var(--c2) 100%);box-shadow:0 20px 44px -28px rgba(10,30,51,.75);transition:transform .25s,box-shadow .25s;margin:0 0 18px}
.sh-blog .bl-promo:hover{transform:translateY(-3px);box-shadow:0 26px 54px -26px rgba(10,30,51,.85)}
.sh-blog .bl-promo:focus-within{box-shadow:0 0 0 3px var(--c3),0 20px 44px -28px rgba(10,30,51,.75)}
.sh-blog .bl-promo-art{position:absolute;right:-50px;top:-60px;width:300px;height:260px;pointer-events:none}
.sh-blog .bl-promo-art i{position:absolute;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle at 38% 32%,var(--c3),transparent 70%);opacity:.5;mix-blend-mode:screen;animation:blFloat 10s ease-in-out infinite}
.sh-blog .bl-promo-art i:nth-child(1){left:10px;top:60px}
.sh-blog .bl-promo-art i:nth-child(2){left:110px;top:10px;opacity:.35;animation-delay:-3.3s}
.sh-blog .bl-promo-art i:nth-child(3){left:96px;top:110px;opacity:.28;animation-delay:-6.6s;background:radial-gradient(circle at 40% 35%,#fff,transparent 70%)}
@keyframes blFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(-12px,9px)}}
.sh-blog .bl-promo-in{position:relative;padding:26px 28px 24px;max-width:760px}
.sh-blog .bl-promo-k{display:inline-block;font:700 10.5px/1.2 "Space Mono",ui-monospace,monospace;letter-spacing:.15em;text-transform:uppercase;color:var(--c3);background:rgba(255,255,255,.1);padding:6px 10px;border-radius:100px}
.sh-blog .bl-promo-h{margin:12px 0 8px;font:700 clamp(22px,2.6vw,30px)/1.12 var(--sh-display,Georgia,serif);color:#fff}
.sh-blog .bl-promo-h a{color:#fff;text-decoration:none}
.sh-blog .bl-promo-h a::after{content:"";position:absolute;inset:0;z-index:1}
.sh-blog .bl-promo p{margin:0;color:rgba(255,255,255,.86);font-size:15.5px;line-height:1.55;max-width:60ch}
.sh-blog .bl-promo-go{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:10px 16px;border-radius:100px;background:var(--c3);color:var(--c1);font:700 11.5px/1 "Space Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}
.sh-blog .bl-promo-go svg,.sh-blog .bl-go svg{width:15px;height:15px;transition:transform .2s}
.sh-blog .bl-promo:hover .bl-promo-go svg,.sh-blog .bl-card:hover .bl-go svg{transform:translateX(4px)}
.sh-blog .bl-promo-s{margin:0;display:flex}
.sh-blog .bl-promo-s .bl-promo-in{display:flex;flex-direction:column;padding:22px 22px 20px}
.sh-blog .bl-promo-s .bl-promo-h{font-size:clamp(20px,1.9vw,24px)}
.sh-blog .bl-promo-s p{font-size:14.5px;flex:1}
.sh-blog .bl-promo-s .bl-promo-go{align-self:flex-start}

/* shelf bar */
.sh-blog .bl-bar{margin:40px 0 4px;scroll-margin-top:calc(var(--sjh-h,96px) + 16px)}
.sh-blog .bl-bar-in{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:16px 18px;border-radius:18px;background:#fff;border:1px solid var(--bl-line);box-shadow:0 14px 34px -26px rgba(10,30,51,.5)}
.sh-blog .bl-bar-k{margin:0;font:700 11px/1 "Space Mono",ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--bl-mute)}
.sh-blog .bl-chips{display:flex;flex-wrap:wrap;gap:8px;flex:1}
.sh-blog .bl-chip{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:100px;border:1px solid var(--bl-line);background:var(--bl-paper);color:var(--bl-ink);text-decoration:none;font:600 14px/1 var(--sh-ui,system-ui,sans-serif);transition:background .2s,color .2s,border-color .2s}
.sh-blog .bl-chip b{font:700 11px/1 "Space Mono",ui-monospace,monospace;color:var(--bl-mute)}
.sh-blog .bl-chip:hover{border-color:var(--bl-ink)}
.sh-blog .bl-chip[aria-pressed="true"]{background:var(--bl-ink);color:#fff;border-color:var(--bl-ink)}
.sh-blog .bl-chip[aria-pressed="true"] b{color:var(--bl-sun)}
.sh-blog .bl-surprise{border:0;cursor:pointer;padding:10px 16px;border-radius:100px;background:linear-gradient(135deg,#F07A5C,#F4B942);color:#2A0E10;font:700 12px/1 "Space Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}
.sh-blog .bl-surprise:hover{filter:brightness(1.06)}
.sh-blog .bl-filter-n{margin:10px 4px 0;min-height:1em;color:var(--bl-mute);font-size:14px}

/* shelves */
.sh-blog .bl-shelf{padding:46px 0 6px;scroll-margin-top:calc(var(--sjh-h,96px) + 16px)}
.sh-blog .bl-shelf.bl-hide{display:none}
.sh-blog .bl-sh{display:grid;grid-template-columns:auto 1fr auto;gap:6px 20px;align-items:end;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--bl-line)}
.sh-blog .bl-num{font:800 clamp(38px,4.4vw,56px)/.9 var(--sh-display,Georgia,serif);color:transparent;-webkit-text-stroke:1.5px #C9B98F;align-self:start}
.sh-blog .bl-sh h2{margin:0;font:700 clamp(24px,2.8vw,34px)/1.1 var(--sh-display,Georgia,serif);color:var(--bl-ink)}
.sh-blog .bl-sd{margin:8px 0 0;color:var(--bl-mute);font-size:15.5px;line-height:1.55;max-width:68ch}
.sh-blog .bl-sh-r{display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right}
.sh-blog .bl-n{font:700 11px/1 "Space Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--bl-mute)}
.sh-blog .bl-all{font:600 14px/1.2 var(--sh-ui,system-ui,sans-serif);color:#1A5F91;text-decoration:none;border-bottom:2px solid #F4B942;padding-bottom:2px;white-space:nowrap}
.sh-blog .bl-all:hover{color:var(--bl-ink)}
@media (max-width:700px){.sh-blog .bl-sh{grid-template-columns:auto 1fr}.sh-blog .bl-sh-r{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;text-align:left}}

/* article cards */
.sh-blog .bl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.sh-blog .bl-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:16px;background:#fff;border:1px solid var(--bl-line);box-shadow:0 12px 30px -26px rgba(10,30,51,.6);transition:transform .25s,box-shadow .25s,border-color .25s}
.sh-blog .bl-card:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 22px 44px -24px rgba(10,30,51,.55)}
.sh-blog .bl-card:focus-within{box-shadow:0 0 0 3px var(--c2),0 22px 44px -24px rgba(10,30,51,.55)}
.sh-blog .bl-tile{position:relative;display:block;height:96px;overflow:hidden;background:linear-gradient(135deg,var(--c1) 0%,var(--c2) 100%)}
.sh-blog .bl-tile i{position:absolute;left:var(--x);top:var(--y);width:var(--r);height:var(--r);margin:calc(var(--r) / -2) 0 0 calc(var(--r) / -2);border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--c3),transparent 72%);opacity:.75;transition:transform .5s}
.sh-blog .bl-tile b{position:absolute;right:-30px;bottom:-60px;width:150px;height:150px;border-radius:50%;border:1.5px solid rgba(255,255,255,.22);box-shadow:0 0 0 18px rgba(255,255,255,.04),0 0 0 36px rgba(255,255,255,.03)}
.sh-blog .bl-card:hover .bl-tile i{transform:scale(1.25) translate(6px,-4px)}
.sh-blog .bl-body{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px}
.sh-blog .bl-tag{font:700 10.5px/1.35 "Space Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:#8A6416}
.sh-blog .bl-card h3{margin:8px 0 8px;font:700 18.5px/1.25 var(--sh-display,Georgia,serif);color:var(--bl-ink)}
.sh-blog .bl-a{color:inherit;text-decoration:none}
.sh-blog .bl-a::after{content:"";position:absolute;inset:0;z-index:1}
.sh-blog .bl-a:focus-visible{outline:none}
.sh-blog .bl-card p{margin:0 0 14px;color:var(--bl-mute);font-size:14.5px;line-height:1.55;flex:1}
.sh-blog .bl-go{display:inline-flex;align-items:center;gap:6px;color:var(--c2);font:700 12px/1 "Space Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;filter:saturate(1.2) brightness(.85)}

/* long shelves fold to two rows until "show all" (JS only) */
.sh-blog .bl-grid.bl-folded .bl-card.bl-extra{display:none}
.sh-blog .bl-more{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin:16px 0 0;padding:13px 18px;border-radius:14px;border:1.5px dashed #C9B98F;background:transparent;color:var(--bl-ink);font:600 15px/1 var(--sh-ui,system-ui,sans-serif);cursor:pointer;transition:background .2s,border-color .2s}
.sh-blog .bl-more:hover{background:#fff;border-color:var(--bl-ink)}
.sh-blog .bl-more i{position:relative;width:12px;height:12px}
.sh-blog .bl-more i::before,.sh-blog .bl-more i::after{content:"";position:absolute;left:0;top:5px;width:12px;height:2px;background:currentColor;border-radius:2px}
.sh-blog .bl-more i::after{transform:rotate(90deg)}

/* reveal (JS adds .bl-anim to <html>) */
.bl-anim .sh-blog .bl-card,.bl-anim .sh-blog .bl-promo{opacity:0;transform:translateY(14px)}
.bl-anim .sh-blog .bl-in{opacity:1;transform:none;transition:opacity .5s ease calc(var(--i,0) * 60ms),transform .5s ease calc(var(--i,0) * 60ms),box-shadow .25s,border-color .25s}
.bl-anim .sh-blog .bl-card.bl-in:hover,.bl-anim .sh-blog .bl-promo.bl-in:hover{transform:translateY(-4px);transition-delay:0s}

@media (prefers-reduced-motion:reduce){
  .sh-blog .bl-promo-art i{animation:none}
  .sh-blog .bl-card,.sh-blog .bl-promo,.sh-blog .bl-tile i{transition:none}
  .sh-blog .bl-card:hover,.sh-blog .bl-promo:hover{transform:none}
}
@media print{.sh-blog .bl-bar,.sh-blog .bl-more{display:none}.sh-blog .bl-grid.bl-folded .bl-card.bl-extra{display:flex}}

@media (max-width:700px){
  .sh-blog .bl-bar-in{display:grid;grid-template-columns:minmax(0,1fr);padding:14px 0 14px 14px;gap:10px}
  .sh-blog .bl-chips{min-width:0;max-width:100%}
  .sh-blog .bl-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px 14px 4px 0;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .sh-blog .bl-chips::-webkit-scrollbar{display:none}
  .sh-blog .bl-chip{flex:none}
  .sh-blog .bl-surprise{align-self:flex-start}
  .sh-blog .bl-tile{height:64px}
  .sh-blog .bl-card h3{font-size:17.5px}
  .sh-blog .bl-shelf{padding-top:34px}
}