:root { --blogs-navy:#14213a; --blogs-slate:#68768b; --blogs-orange:#c74818; --blogs-canvas:#f2f5f8; --blogs-line:#dde4ec; }
* { box-sizing:border-box; }
body { margin:0; color:var(--blogs-navy); background:var(--blogs-canvas); font-family:Inter,system-ui,sans-serif; }
button,input { font:inherit; }
.blogs-topbar { position:sticky; top:0; z-index:80; min-height:68px; border-bottom:1px solid var(--blogs-line); background:rgba(255,255,255,.97); box-shadow:0 1px 12px rgba(20,33,58,.06); backdrop-filter:blur(16px); }
.blogs-topbar-inner { width:min(1180px,100%); min-height:68px; margin:auto; padding:0 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.blogs-wordmark { color:#f05b24; font-size:24px; font-weight:900; text-decoration:none; }
.blogs-shell { width:min(1030px,100%); margin:auto; padding:28px 18px 70px; }
.blogs-hero { position:relative; overflow:hidden; min-height:300px; padding:46px; display:flex; align-items:flex-end; justify-content:space-between; gap:28px; border-radius:34px; color:#fff; background:linear-gradient(135deg,#14213a,#3b3048 58%,#9d481f); box-shadow:0 22px 55px rgba(20,33,58,.16); }
.blogs-hero::after { content:""; position:absolute; width:360px; height:360px; right:-100px; top:-190px; border:1px solid rgba(255,183,145,.25); border-radius:50%; box-shadow:0 0 0 70px rgba(255,255,255,.025); }
.blogs-hero>div,.blogs-write { position:relative; z-index:1; }
.blogs-eyebrow,.blogs-heading p { margin:0; color:#ffb18c; font-size:11px; font-weight:900; letter-spacing:.16em; }
.blogs-hero h1 { max-width:650px; margin:18px 0 10px; font-family:Lora,Georgia,serif; font-size:clamp(39px,6vw,62px); line-height:1.04; letter-spacing:-.04em; }
.blogs-hero>div>p:last-child { max-width:650px; margin:0; color:#e2e9f1; font-size:16px; line-height:1.65; }
.blogs-write { min-height:54px; padding:0 20px; display:flex; align-items:center; gap:10px; flex:0 0 auto; border-radius:18px; color:var(--blogs-navy); background:#fff; text-decoration:none; font-weight:900; box-shadow:0 12px 25px rgba(0,0,0,.16); }
.blogs-library { margin-top:18px; padding:26px; border:1px solid var(--blogs-line); border-radius:28px; background:#fff; }
.blogs-search { min-height:58px; padding:7px 7px 7px 18px; display:flex; align-items:center; gap:12px; border:1px solid var(--blogs-line); border-radius:19px; background:#f7f9fc; }
.blogs-search>i { color:#79869a; }
.blogs-search input { min-width:0; flex:1; border:0; outline:0; color:var(--blogs-navy); background:transparent; }
.blogs-search button { min-height:44px; padding:0 18px; border:0; border-radius:14px; color:#fff; background:var(--blogs-orange); font-weight:900; cursor:pointer; }
.blogs-heading { margin-top:28px; display:flex; align-items:flex-end; justify-content:space-between; gap:18px; }
.blogs-heading h2 { margin:5px 0 0; font-family:Lora,Georgia,serif; font-size:30px; letter-spacing:-.03em; }
.blogs-heading>span { padding:8px 11px; border-radius:12px; color:var(--blogs-orange); background:#fff0e8; font-size:11px; font-weight:900; }
.blogs-note { margin:9px 0 0; color:var(--blogs-slate); font-size:12px; }
.blogs-status { min-height:150px; display:grid; place-items:center; align-content:center; gap:10px; color:var(--blogs-slate); }
.blogs-status i { color:var(--blogs-orange); font-size:22px; }
.blogs-list { margin-top:20px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.blogs-card { min-width:0; min-height:220px; padding:21px; display:flex; flex-direction:column; border:1px solid var(--blogs-line); border-radius:22px; color:inherit; background:#fffdf9; text-decoration:none; box-shadow:0 7px 20px rgba(20,33,58,.05); transition:transform .16s ease,border-color .16s ease; }
.blogs-card:hover { transform:translateY(-2px); border-color:#e5a98b; }
.blogs-author { display:grid; grid-template-columns:42px minmax(0,1fr); gap:10px; align-items:center; }
.blogs-author img,.blogs-author-fallback { width:42px; height:42px; border-radius:14px; object-fit:cover; background:#fff0e8; }
.blogs-author-fallback { display:grid; place-items:center; color:var(--blogs-orange); }
.blogs-author strong,.blogs-author small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.blogs-author strong { font-size:12px; }
.blogs-author small { margin-top:3px; color:var(--blogs-slate); font-size:10px; }
.blogs-card h3 { margin:23px 0 8px; font-family:Lora,Georgia,serif; font-size:23px; line-height:1.25; letter-spacing:-.025em; }
.blogs-card>span:last-child { margin-top:auto; padding-top:20px; color:var(--blogs-orange); font-size:11px; font-weight:900; }
.blogs-empty { grid-column:1/-1; min-height:180px; display:grid; place-items:center; align-content:center; gap:10px; border:1px dashed #d6dee8; border-radius:22px; color:var(--blogs-slate); text-align:center; }
.blogs-empty i { color:#b78c35; font-size:25px; }
@media(max-width:700px){.blogs-hero{min-height:360px;padding:30px;align-items:flex-start;flex-direction:column}.blogs-write{margin-top:auto}.blogs-list{grid-template-columns:1fr}}
@media(max-width:520px){.blogs-topbar-inner{padding:0 14px}.blogs-wordmark{font-size:19px}.blogs-shell{padding:14px 12px 35px}.blogs-hero{padding:25px 20px;border-radius:28px}.blogs-hero h1{font-size:40px}.blogs-library{padding:17px;border-radius:23px}.blogs-heading h2{font-size:25px}.blogs-search button{padding:0 13px}}

/* Keep reading and recovery ahead of introductory copy. */
html:has(body[data-fs-page="blogs"]) { scroll-padding-block:90px; }
[data-fs-page="blogs"] :is(button,input,a) { scroll-margin-block:90px; }
[data-fs-page="blogs"] [hidden] { display:none !important; }
[data-fs-page="blogs"] .blogs-hero { min-height:0; padding:28px; align-items:center; }
[data-fs-page="blogs"] .blogs-hero h1 { font-size:clamp(30px,4vw,44px); margin-top:12px; }
[data-fs-page="blogs"] .blogs-write { min-height:48px; }
[data-fs-page="blogs"] .blogs-heading { margin-top:18px; align-items:center; }
[data-fs-page="blogs"] .blogs-heading>div { min-width:0; }
[data-fs-page="blogs"] .blogs-heading h2,
[data-fs-page="blogs"] .blogs-card h3 { overflow-wrap:anywhere; }
[data-fs-page="blogs"] .blogs-heading>span { flex-shrink:0; }
[data-fs-page="blogs"] .blogs-status { min-height:88px; padding:16px 0; text-align:center; overflow-wrap:anywhere; }
[data-fs-page="blogs"] .blogs-status small { font-size:13px; }
[data-fs-page="blogs"] .blogs-empty { padding:18px; }
[data-fs-page="blogs"] :is(.blogs-clear,.blogs-empty button,.blogs-status button) { min-height:44px; padding:10px 14px; border:1px solid #dcded7; border-radius:12px; color:#255f52; background:#f0f8f4; font-size:14px; font-weight:700; cursor:pointer; }
[data-fs-page="blogs"] .blogs-clear { margin-top:8px; }
@media(max-width:700px) {
 [data-fs-page="blogs"] .blogs-hero { padding:22px; gap:18px; align-items:flex-start; }
 [data-fs-page="blogs"] .blogs-hero>div>p:last-child { font-size:15px; line-height:1.5; }
 [data-fs-page="blogs"] .blogs-card { min-height:190px; }
}