/* ============================================================
   WYVERN FREIGHT — NEWS & INSIGHTS (news.html + news-*.html)
   Built by tools/news/make-news.cjs. A copy of the DeCargo templates (user choice 2026-10-20):
   References/decargo-…/templates/decargo-blog.json + decargo-single-blog.json and their screenshots.
     grey page + one white panel (shadow 0 5 10 .15) · title 80% with "// Category" 20%, bottom-aligned · 2px rule
     content 70% / sidebar 30% · archive posts in 2 columns · sidebar: search, 4 latest posts with square thumbs
     (25%), categories with dividers, cover-image call to action · single: 500px featured image, content,
     4 share buttons, author box (90px image, name, bio, button)
   Wyvern changes: Inter Tight for DeCargo's Fjalla/Saira, ink for navy, red for orange, square corners, no breadcrumb,
   no comments, no newsletter band, marked photo slots where DeCargo shows photos, search icon (no arrows on buttons).
   ============================================================ */

.bl-page{background:var(--hover)}
.bl-wrap{padding-top:40px;padding-bottom:80px}
.bl-panel{background:var(--canvas);padding:48px 32px}

/* ---------- Title row: title (80%) + "// Category" (20%), bottom-aligned, then a 2px rule ---------- */
.bl-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:16px}
.bl-head h1{flex:0 1 80%;margin:0;font:500 clamp(34px,3.6vw,54px)/1.05 var(--sans);letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.bl-cat{flex:0 0 auto;max-width:22%;margin:0;font:500 clamp(18px,1.6vw,24px)/1.2 var(--sans);letter-spacing:-.01em;color:var(--ink);text-align:right}
.bl-cat span{color:var(--red)}
.bl-cat a{color:inherit;text-decoration:none}
.bl-cat a:hover{color:var(--red)}
.bl-rule{height:2px;margin:0 16px;background:var(--ink)}

/* ---------- 70 / 30 ---------- */
.bl-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);margin-top:16px}
.bl-main{min-width:0;padding:32px 32px 16px 16px}
.bl-side{min-width:0;padding:32px 16px 16px 32px}

/* ---------- Marked photo slots (where DeCargo shows a photo) ---------- */
.bl-slot{display:grid;place-items:center;align-content:center;gap:10px;background:repeating-linear-gradient(135deg,var(--hover) 0 12px,var(--surface-3) 12px 24px);color:var(--muted)}
.bl-slot svg{width:36px;height:36px;color:var(--subtle)}
.bl-slot span{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.bl-slot-sm{aspect-ratio:1}
.bl-slot-sm svg{width:22px;height:22px}

/* ---------- Archive: posts in 2 columns ---------- */
.bl-posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 30px;list-style:none;margin:0;padding:0}
.bl-post{display:grid;align-content:start;gap:10px}
.bl-post .bl-slot{aspect-ratio:3/2;margin-bottom:8px}
.bl-post :is(h2,h3){margin:0;font:500 20px/1.3 var(--sans);letter-spacing:-.015em}
.bl-post :is(h2,h3) a{color:var(--ink);text-decoration:none;transition:color .2s var(--ease)}
.bl-post:hover :is(h2,h3) a,.bl-post :is(h2,h3) a:focus-visible{color:var(--red)}
.bl-post :is(h2,h3) a:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.bl-meta{margin:0;font:400 13px/1.5 var(--sans);color:var(--muted)}
.bl-meta .sep{margin:0 8px;color:var(--red)}
.bl-post > p:not(.bl-meta){margin:0;font:400 15px/1.6 var(--sans);color:var(--muted)}
.bl-read{justify-self:start;position:relative;margin-top:4px;font:600 13px/1.5 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--red);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.bl-read::before{content:"";position:absolute;inset:-14px -8px}   /* 44px tap area */
.bl-read:hover,.bl-read:focus-visible{border-bottom-color:currentColor}
.bl-read:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.bl-empty{margin:0;font:400 16px/1.6 var(--sans);color:var(--muted)}

/* ---------- Sidebar ---------- */
.bl-search{display:flex;margin:0 0 16px}
.bl-search input{flex:1;min-width:0;height:52px;padding:0 18px;border:1px solid var(--line-field);border-right:0;border-radius:0;background:var(--canvas);font:400 15px/1 var(--sans);color:var(--ink)}
.bl-search input::placeholder{color:var(--subtle)}
.bl-search input:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.bl-search button{flex:none;width:56px;height:52px;display:grid;place-items:center;border:0;border-radius:0;background:var(--red);color:#fff;cursor:pointer;transition:background-color .2s}
.bl-search button:hover{background:var(--red-press)}
.bl-search button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.bl-side h2{margin:40px 0 20px;font:500 24px/1.1 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.bl-latest{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:22px}
.bl-latest li{display:grid;grid-template-columns:25% minmax(0,1fr);gap:14px;align-items:start}
.bl-latest a{position:relative;display:block;font:600 14.5px/1.35 var(--sans);color:var(--ink-2);text-decoration:none;transition:color .2s}
.bl-latest a::after{content:"";position:absolute;inset:-6px -4px}
.bl-latest a:hover{color:var(--red)}
.bl-latest a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.bl-latest .bl-meta{margin-top:4px;font-size:12.5px}
.bl-cats{list-style:none;margin:0 0 16px;padding:0}
.bl-cats li + li{border-top:1px solid var(--line)}
.bl-cats a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;font:500 15px/1.3 var(--sans);color:var(--ink-2);text-decoration:none;transition:color .2s}
.bl-cats a span{font:500 12px/1 var(--mono);color:var(--muted)}
.bl-cats a:hover,.bl-cats a[aria-current="true"]{color:var(--red)}
.bl-cats a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* Cover call to action (DeCargo "Logistics For The New Era"): livery art under a dark scrim */
.bl-cta{position:relative;isolation:isolate;overflow:hidden;display:grid;align-content:start;justify-items:start;gap:16px;min-height:370px;margin-top:40px;padding:35px 30px;background:var(--night);color:#fff}
.bl-cta img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:30% 50%}
.bl-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,14,18,.9) 0%,rgba(11,14,18,.74) 55%,rgba(11,14,18,.35) 100%)}
.bl-side .bl-cta h2{margin:0;font:500 30px/1.1 var(--sans);letter-spacing:-.025em;color:#fff}
.bl-cta p{margin:0;font:400 15px/1.55 var(--sans);color:rgba(255,255,255,.86)}
.bl-cta .btn-p{margin-top:12px}

/* ---------- Single post ---------- */
.bl-feat{height:500px;margin-bottom:28px}
.bl-prose p,.bl-prose li,.bl-prose td,.bl-prose th,.bl-prose blockquote{font:400 var(--fs-body)/1.7 var(--sans);color:var(--ink-2)}
.bl-prose p{margin:0}
.bl-prose > * + p{margin-top:18px}
.bl-prose h2{margin:44px 0 14px;font:500 clamp(24px,2vw,30px)/1.2 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.bl-prose h3{margin:32px 0 10px;font:600 19px/1.3 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.bl-prose h4{margin:24px 0 8px;font:600 17px/1.3 var(--sans);color:var(--ink)}
.bl-prose ul,.bl-prose ol{margin:14px 0 0;padding-left:22px}
.bl-prose li + li{margin-top:8px}
.bl-prose ul li::marker{color:var(--red)}
.bl-prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px;transition:text-decoration-color .2s}
.bl-prose a:hover{text-decoration-color:var(--red)}
.bl-prose strong{font-weight:600;color:var(--ink)}
.bl-prose em{font-style:italic}
.bl-prose p.bl-key{margin-top:26px;font-size:18px}
.bl-prose p.bl-key + p{margin-top:6px}
.bl-prose blockquote{margin:24px 0 0;padding:4px 0 4px 20px;border-left:3px solid var(--red)}
.bl-prose .bl-table{margin:20px 0 0;overflow-x:auto}
.bl-prose table{width:100%;border-collapse:collapse}
.bl-prose th,.bl-prose td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:15px;line-height:1.5}
.bl-prose th{font-weight:600;color:var(--ink);border-bottom:2px solid var(--ink)}
.bl-share{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:40px}
.bl-share a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 10px;background:var(--ink);color:#fff;font:600 13px/1 var(--sans);letter-spacing:.02em;text-decoration:none;transition:background-color .2s}
.bl-share a:hover{background:var(--red)}
.bl-share a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.bl-author{display:grid;grid-template-columns:90px minmax(0,1fr);gap:24px;align-items:start;margin-top:24px;padding:24px;background:var(--hover)}
.bl-author img{display:block;width:90px;height:90px;padding:12px;object-fit:contain;background:#fff;border:3px solid var(--line)}
.bl-author h2{margin:0 0 8px;font:500 22px/1.15 var(--sans);letter-spacing:-.015em;color:var(--ink)}
.bl-author p{margin:0 0 14px;font:400 14px/1.6 var(--sans);color:var(--muted)}
.bl-end{height:1px;margin-top:40px;background:var(--line)}

/* ---------- Responsive (DeCargo: content and sidebar go full width on tablet) ---------- */
@media (max-width:1024px){
  .bl-grid{grid-template-columns:1fr}
  .bl-main{padding:24px 16px 16px}
  .bl-side{padding:16px}
  .bl-feat{height:400px}
  .bl-cat{max-width:none}
}
@media (max-width:767px){
  .bl-wrap{padding-top:16px;padding-bottom:48px}
  .bl-panel{padding:16px 8px}
  .bl-head{flex-direction:column;align-items:flex-start;gap:8px}
  .bl-cat{text-align:left}
  .bl-posts{grid-template-columns:1fr;gap:40px}
  .bl-feat{height:200px}
  .bl-share{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bl-author{grid-template-columns:1fr;gap:16px}
}
@media (prefers-reduced-motion:reduce){ .bl-post :is(h2,h3) a,.bl-read,.bl-latest a,.bl-cats a,.bl-share a,.bl-search button,.bl-pg-num,.bl-pg-step{transition:none} }
.bl-page [hidden]{display:none !important}
/* Related Insights on service and industry pages (tools/news/related-insights.cjs, 2026-10-26): the same .bl-post card,
   card titles are h3 under the section h2. It sits right under the Related logistics services slider, so it uses that
   slider's columns (.spg-track: 3.4 across, 2.3 on tablet, 24px gap) and every card edge lines up with the row above;
   a short row (two articles) stays on those columns. Photo = 200px band like the service cards (DEMO photo, see generator). */
.bl-posts.is-related{grid-template-columns:repeat(3,calc((100% - 3 * 24px) / 3.4));gap:40px 24px}
.bl-posts.is-related .bl-img{height:200px;overflow:hidden;margin-bottom:8px}
.bl-posts.is-related .bl-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.bl-posts.is-related .bl-post:hover .bl-img img{transform:scale(1.04)}
.bl-posts.is-related .bl-slot{aspect-ratio:auto;height:200px}
@media (max-width:1024px){ .bl-posts.is-related{grid-template-columns:repeat(2,calc((100% - 24px) / 2.3))} }
@media (max-width:767px){ .bl-posts.is-related{grid-template-columns:1fr;gap:40px} }
@media (prefers-reduced-motion:reduce){ .bl-posts.is-related .bl-img img{transition:none} }