/* ============================================================
   Stakerschoice — public blog
   Layout uses .stc-blog-shell as the centered responsive container.
   Article typography: Sofia Sans (self-hosted, /css/fonts/sofia-sans.css)
   ============================================================ */
:root{--blog-ink:#07142f;--blog-red:#e91e45;--blog-gold:#f5c518;--blog-paper:#f5f7fb;--blog-line:#e3e8f0;--blog-muted:#667085;--blog-font:"Sofia Sans","DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
.stc-blog-body{margin:0;background:var(--blog-paper);color:#172033;font-family:"DM Sans","Open Sans",sans-serif}
.stc-blog-shell{width:min(calc(100% - 40px),1160px);margin:0 auto}

/* ---- index hero ---- */
.stc-blog-hero{position:relative;overflow:hidden;background:radial-gradient(circle at 80% 10%,rgba(245,197,24,.2),transparent 32%),linear-gradient(130deg,#07142f,#0d275d);color:#fff;padding:82px 0 70px}
.stc-blog-hero:after{content:"";position:absolute;right:-80px;bottom:-170px;width:420px;height:420px;border:55px solid rgba(255,255,255,.035);border-radius:50%}
.stc-blog-hero .stc-blog-shell{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:70px;align-items:end}
.stc-blog-eyebrow,.stc-section-heading>span{display:block;color:var(--blog-red);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.stc-blog-hero h1{max-width:720px;margin:0;font:800 clamp(42px,6vw,76px)/1.02 "Manrope",sans-serif;letter-spacing:-.045em}
.stc-blog-hero h1 em{color:var(--blog-gold);font-style:normal}
.stc-blog-hero p{max-width:590px;color:#c8d4ec;font-size:18px;line-height:1.65;margin:22px 0 0}
.stc-blog-search label{display:block;font-weight:700;font-size:13px;margin-bottom:9px}
.stc-blog-search div{display:flex;background:#fff;border-radius:10px;padding:5px;box-shadow:0 16px 45px rgba(0,0,0,.22)}
.stc-blog-search input{border:0;outline:0;min-width:0;flex:1;padding:12px;color:#172033}
.stc-blog-search button{border:0;border-radius:7px;background:var(--blog-red);color:#fff;width:46px;cursor:pointer}

/* ---- category bar ---- */
.stc-category-bar{background:#fff;border-bottom:1px solid var(--blog-line);box-shadow:0 7px 24px rgba(7,20,47,.04)}
.stc-category-bar .stc-blog-shell{display:flex;gap:8px;overflow-x:auto;padding-top:14px;padding-bottom:14px}
.stc-category-bar a{white-space:nowrap;text-decoration:none;color:#40506c;font-weight:700;font-size:13px;padding:9px 13px;border-radius:999px}
.stc-category-bar a small{margin-left:5px;color:#8792a6}
.stc-category-bar a:hover,.stc-category-bar a.is-active{background:#07142f;color:#fff}

/* ---- index list + cards ---- */
.stc-blog-list,.stc-related{padding:66px 0 84px}
.stc-section-heading{margin-bottom:28px}
.stc-section-heading h2{margin:0;color:var(--blog-ink);font:800 clamp(28px,4vw,40px)/1.15 "Manrope",sans-serif;letter-spacing:-.025em}
.stc-blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.stc-post-card{background:#fff;border:1px solid var(--blog-line);border-radius:16px;overflow:hidden;box-shadow:0 12px 35px rgba(7,20,47,.055);transition:transform .2s,box-shadow .2s;min-width:0}
.stc-post-card:hover{transform:translateY(-4px);box-shadow:0 20px 45px rgba(7,20,47,.11)}
.stc-post-card__image{position:relative;display:block;aspect-ratio:16/9;background:#dbe2ee;overflow:hidden}
.stc-post-card__image img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.stc-post-card:hover img{transform:scale(1.035)}
.stc-post-card__placeholder{display:grid;width:100%;height:100%;place-items:center;background:linear-gradient(135deg,#07142f,#173c78);color:rgba(255,255,255,.45);font-size:46px}
.stc-featured-label{position:absolute;top:14px;left:14px;background:var(--blog-gold);color:#07142f;padding:6px 9px;border-radius:5px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.stc-post-card__body{padding:22px}
.stc-post-card__meta,.stc-post-card__foot{display:flex;justify-content:space-between;gap:10px;color:#7a879c;font-size:12px;font-weight:700}
.stc-post-card__meta span:first-child{color:var(--blog-red);text-transform:uppercase;letter-spacing:.06em}
.stc-post-card h3{margin:13px 0 10px;font:800 21px/1.28 "Manrope",sans-serif;overflow-wrap:anywhere}
.stc-post-card h3 a{color:var(--blog-ink);text-decoration:none}
.stc-post-card p{color:var(--blog-muted);font-size:14px;line-height:1.65;margin:0 0 21px;overflow-wrap:anywhere}
.stc-post-card__foot{padding-top:15px;border-top:1px solid #eef1f5}

/* ---- pagination / empty ---- */
.stc-pagination{display:flex;justify-content:center;gap:7px;margin-top:44px}
.stc-pagination a{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--blog-line);border-radius:8px;background:#fff;color:var(--blog-ink);text-decoration:none;font-weight:800}
.stc-pagination a.is-current,.stc-pagination a:hover{background:var(--blog-red);border-color:var(--blog-red);color:#fff}
.stc-no-posts,.stc-blog-empty{display:grid;place-items:center;text-align:center;min-height:390px}
.stc-no-posts{background:#fff;border:1px dashed #cbd3df;border-radius:16px;padding:70px 20px}
.stc-no-posts i{font-size:45px;color:#a1acbd}
.stc-no-posts h3{color:var(--blog-ink);margin:14px 0 4px}
.stc-no-posts a,.stc-blog-button{display:inline-block;background:var(--blog-red);color:#fff;text-decoration:none;font-weight:800;padding:11px 17px;border-radius:7px}

/* ============================================================
   Article detail
   ============================================================ */
.stc-article{font-family:var(--blog-font);min-width:0}
.stc-article__head{padding:68px 0 42px;text-align:center}
.stc-blog-crumb{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;color:#7c8799;font-size:13px;margin-bottom:30px}
.stc-blog-crumb a{color:#46536a;text-decoration:none}
.stc-blog-kicker{display:inline-block;color:var(--blog-red);text-decoration:none;text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:900;margin-bottom:16px}
.stc-article h1{max-width:940px;margin:0 auto;color:var(--blog-ink);font:700 clamp(34px,5.4vw,60px)/1.1 var(--blog-font);letter-spacing:-.02em;overflow-wrap:anywhere}
.stc-article__dek{max-width:760px;margin:22px auto;color:#56647a;font-size:20px;line-height:1.55;font-weight:400;overflow-wrap:anywhere}
.stc-article__meta{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 25px;margin-top:24px;color:#7a879c;font-size:13px;font-weight:600}
.stc-article__meta span+span:before{content:"";display:inline-block;width:4px;height:4px;background:var(--blog-red);border-radius:50%;margin:0 16px 3px 0}
.stc-article__figure{margin-top:10px;margin-bottom:0}
.stc-article__figure img{display:block;width:100%;max-width:100%;height:auto;border-radius:20px;box-shadow:0 24px 65px rgba(7,20,47,.14)}
.stc-article__figure figcaption{text-align:center;color:#7a879c;font-size:12px;margin-top:11px;overflow-wrap:anywhere}

/* layout: share rail + readable article column. Both tracks can shrink. */
.stc-article__layout{display:grid;grid-template-columns:auto minmax(0,740px);gap:40px;align-items:start;justify-content:center;padding:55px 0 60px}
.stc-article__content{min-width:0;width:100%;max-width:740px;color:#252e3e;font-family:var(--blog-font);font-weight:400;font-size:18px;line-height:1.84;overflow-wrap:anywhere}

/* share rail */
.stc-share{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0;font-family:var(--blog-font)}
.stc-share>span{font-size:10px;text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:#7a879c;margin-bottom:4px}
.stc-share a,.stc-share button{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--blog-line);border-radius:50%;background:#fff;color:var(--blog-ink);cursor:pointer;text-decoration:none}
.stc-share a:hover,.stc-share button:hover,.stc-share button.is-copied{background:var(--blog-red);border-color:var(--blog-red);color:#fff}

/* article body — wraps everything, never forces the page wider than the viewport */
.stc-article__content p{margin:0 0 1.35em;overflow-wrap:anywhere;word-break:break-word}
.stc-article__content h2,.stc-article__content h3,.stc-article__content h4{font-family:var(--blog-font);font-weight:700;color:var(--blog-ink);line-height:1.22;margin:1.7em 0 .65em;overflow-wrap:anywhere;word-break:break-word}
.stc-article__content h2{font-size:31px}
.stc-article__content h3{font-size:25px}
.stc-article__content h4{font-size:20px}
.stc-article__content ul,.stc-article__content ol{margin:0 0 1.35em;padding-left:1.4em}
.stc-article__content li{margin:0 0 .5em;overflow-wrap:anywhere;word-break:break-word}
.stc-article__content a{color:var(--blog-red);text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere;word-break:break-word}
.stc-article__content strong,.stc-article__content b{font-weight:700}
.stc-article__content blockquote{margin:2em 0;padding:20px 26px;border-left:4px solid var(--blog-gold);background:#fff8d9;color:#2c374b;font-size:20px;font-style:italic;max-width:100%;overflow-wrap:anywhere}
.stc-article__content img,.stc-article__content iframe,.stc-article__content video,.stc-article__content embed,.stc-article__content object,.stc-article__content svg{display:block;max-width:100%;height:auto}
.stc-article__content table{display:block;width:100%;max-width:100%;overflow-x:auto;border-collapse:collapse}
.stc-article__content pre{max-width:100%;overflow-x:auto;padding:18px;background:#07142f;color:#e8edf6;border-radius:10px;font-size:14px}
.stc-article__content code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere}

/* tags */
.stc-tags{display:flex;align-items:center;flex-wrap:wrap;gap:9px;padding-bottom:70px;font-family:var(--blog-font)}
.stc-tags strong{margin-right:6px;color:var(--blog-ink)}
.stc-tags a{padding:7px 11px;border-radius:999px;background:#e8edf5;color:#40506c;text-decoration:none;font-size:12px;font-weight:700}

/* related posts use the detail page typography */
.stc-related{font-family:var(--blog-font)}
.stc-related .stc-section-heading h2,.stc-related .stc-post-card h3,.stc-related .stc-post-card p{font-family:var(--blog-font)}
.stc-related .stc-post-card h3{font-weight:700}

.stc-blog-empty span{font:900 92px/1 var(--blog-font);color:#d8deea}
.stc-blog-empty h1{color:var(--blog-ink)}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:900px){
  .stc-blog-hero .stc-blog-shell{grid-template-columns:1fr;gap:36px}
  .stc-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stc-article__head{padding-left:0;padding-right:0}
  /* single column: minmax(0,1fr) so long content can never widen the track */
  .stc-article__layout{grid-template-columns:minmax(0,1fr);gap:28px}
  .stc-article__content{max-width:none}
  .stc-share{flex-direction:row;justify-content:center;flex-wrap:wrap}
  .stc-share>span{margin:0 5px 0 0}
}
@media(max-width:620px){
  .stc-blog-shell{width:min(calc(100% - 28px),1160px)}
  .stc-blog-hero{padding:58px 0 50px}
  .stc-blog-hero p{font-size:16px}
  .stc-blog-grid{grid-template-columns:minmax(0,1fr)}
  .stc-blog-list,.stc-related{padding:46px 0 60px}
  .stc-article__head{padding-top:46px}
  .stc-article__dek{font-size:17px}
  .stc-article__meta span+span:before{display:none}
  .stc-article__figure img{border-radius:12px}
  .stc-article__layout{padding-top:38px}
  .stc-article__content{font-size:17px}
  .stc-blog-crumb{overflow-wrap:anywhere}
  .stc-tags{padding-bottom:48px}
}