/* ============================================================================
   The blog — /blog and every /blog-<slug> post.
   A reading page first: one column at a readable measure, real headings, real
   links, sources at the foot. The ocean stays in the hero and the close; the
   article itself sits still on white.
   ========================================================================== */

/* ---------------------------------------------------------------- hero ---- */
.bl-hero .hero-in{ padding-top:clamp(48px,7vw,96px); padding-bottom:clamp(90px,10vw,140px); }
.bl-hero-in{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:48px; align-items:center; }
.bl-title{ font-size:clamp(2.1rem,4.2vw,3.6rem); max-width:20ch; line-height:1.06; margin-top:22px; }
.bl-hero--index .bl-title{ font-size:clamp(2.6rem,6vw,4.8rem); }
.bl-hero .lead{ margin-top:22px; max-width:58ch; }
.bl-byline{ margin:22px 0 0; font-size:14px; color:#a8c4d5; }
.bl-byline strong{ color:#eaf4fa; font-weight:600; }
.bl-hero-fig{ margin:0; border-radius:16px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(0,0,0,.7); }
.bl-hero-fig img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }

.bl-crumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 0; font-size:13px; color:#a8c4d5; }
.bl-crumbs li{ display:flex; align-items:center; }
.bl-crumbs li + li::before{ content:"/"; margin:0 10px; color:rgba(var(--accent-rgb),.45); }
.bl-crumbs a{ color:var(--accent); text-decoration:none; }
.bl-crumbs a:hover{ text-decoration:underline; text-underline-offset:3px; }
.bl-crumbs [aria-current]{ color:#c4dbe7; }

/* ---------------------------------------------------------------- prose --- */
.bl-body{ padding-top:clamp(40px,4vw,60px); }
.bl-prose{ max-width:70ch; margin:0 auto; color:var(--text); }
.bl-prose > p, .bl-prose li{ font-size:var(--t-copy); line-height:1.72; }
.bl-prose > p{ margin:0 0 20px; }
.bl-prose h2{ font-size:clamp(1.55rem,2.6vw,2.05rem); line-height:1.15; margin:46px 0 16px; letter-spacing:-.015em; }
.bl-prose h3{ font-size:clamp(1.18rem,1.8vw,1.35rem); line-height:1.25; margin:30px 0 10px; letter-spacing:-.01em; }
.bl-prose a{ color:var(--primary); text-underline-offset:3px; }
.bl-prose a:hover{ color:var(--primary-dark); }
.bl-prose ul, .bl-prose ol{ margin:0 0 22px; padding-left:24px; }
.bl-prose li{ margin:0 0 8px; }
.bl-prose strong{ color:#071b29; }
.bl-prose sup a{ text-decoration:none; font-weight:700; font-size:.78em; }
.bl-prose .bl-intro{ font-size:var(--t-lead); line-height:1.6; color:var(--text-muted); margin-bottom:28px; }

.bl-prose figure{ margin:34px 0; }
.bl-prose figure img{ width:100%; height:auto; border-radius:12px; border:1px solid var(--border); box-shadow:0 22px 44px -30px rgba(var(--dark-rgb),.5); }
.bl-prose figcaption{ margin-top:10px; font-size:14px; line-height:1.5; color:var(--text-muted); }

.bl-prose blockquote{ margin:28px 0; padding:20px 22px; border-left:3px solid var(--primary); background:rgba(var(--primary-rgb),.05); border-radius:0 12px 12px 0; }
.bl-prose blockquote p{ margin:0; font-size:17px; line-height:1.6; font-style:italic; }
.bl-prose blockquote footer{ margin-top:8px; font-size:13.5px; color:var(--text-muted); font-style:normal; }

.bl-note{ margin:28px 0; padding:20px 22px; border-radius:14px; background:var(--bg-tint); border:1px solid var(--border); }
.bl-note p{ margin:0; font-size:16px; line-height:1.6; }
.bl-note p + p{ margin-top:10px; }

.bl-table-wrap{ margin:26px 0 30px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.bl-prose table{ width:100%; border-collapse:collapse; font-size:15px; line-height:1.45; min-width:480px; }
.bl-prose th, .bl-prose td{ text-align:left; padding:11px 12px; border-bottom:1px solid var(--border); vertical-align:top; }
.bl-prose thead th{ font-family:var(--font-display); font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); border-bottom:2px solid var(--border); }
.bl-prose td:first-child{ font-weight:600; }

.bl-sources{ margin-top:52px; padding-top:26px; border-top:1px solid var(--border); }
.bl-sources h2{ margin-top:0; font-size:1.3rem; }
.bl-sources ol{ padding-left:22px; }
.bl-sources li{ font-size:14.5px; line-height:1.55; color:var(--text-muted); }
.bl-sources a{ overflow-wrap:anywhere; }

.bl-author{ margin-top:40px; padding:22px 24px; border-radius:14px; background:var(--bg-alt); border:1px solid var(--border); }
.bl-author p{ margin:0; font-size:15.5px; line-height:1.6; color:var(--text-muted); }
.bl-author strong{ color:var(--text); }

/* ---------------------------------------------------------------- cards --- */
.bl-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; color:var(--text); }
.bl-card-img{ display:block; overflow:hidden; }
.bl-card-img img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; transition:transform .5s var(--ease-out); }
.bl-card:hover .bl-card-img img{ transform:scale(1.03); }
.bl-card-body{ padding:20px 22px 24px; }
.bl-card-meta{ margin:0 0 8px; font-size:13px; color:var(--text-muted); }
.bl-card-t{ font-size:1.2rem; line-height:1.25; letter-spacing:-.01em; }
.bl-card-t a{ color:var(--text); text-decoration:none; }
.bl-card-t a:hover{ color:var(--primary); text-decoration:underline; text-underline-offset:3px; }
.bl-card-d{ margin:10px 0 0; font-size:15px; line-height:1.55; color:var(--text-muted); }

.bl-card--lead{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:stretch; margin-bottom:28px; }
.bl-card--lead .bl-card-img img{ height:100%; aspect-ratio:auto; min-height:300px; }
.bl-card--lead .bl-card-body{ padding:clamp(24px,3.4vw,44px); align-self:center; }
.bl-card--lead .bl-card-t{ font-size:clamp(1.6rem,2.8vw,2.3rem); line-height:1.12; }
.bl-card--lead .bl-card-d{ font-size:16.5px; }

.bl-grid{ display:grid; gap:24px; }
.bl-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.bl-more-h{ margin:18px 0 30px; font-size:clamp(1.8rem,3.4vw,2.6rem); }
.bl-all{ margin:28px 0 0; }
.bl-all a{ color:var(--primary); font-weight:600; text-underline-offset:3px; }

/* ------------------------------------------------------------ responsive -- */
@media (max-width:900px){
  .bl-hero-in{ grid-template-columns:1fr; gap:34px; }
  .bl-hero-fig img{ aspect-ratio:16/10; }
  .bl-grid--3{ grid-template-columns:1fr 1fr; }
  .bl-card--lead{ grid-template-columns:1fr; }
  .bl-card--lead .bl-card-img img{ min-height:0; aspect-ratio:16/10; }
}
@media (max-width:620px){
  .bl-grid--3{ grid-template-columns:1fr; }
  .bl-prose h2{ margin-top:38px; }
}
@media (prefers-reduced-motion: reduce){
  .bl-card-img img{ transition:none; }
  .bl-card:hover .bl-card-img img{ transform:none; }
}