/* ===========================================================================
   Journal / blog (t_blogdesign01)
   Magazine layer on top of the site's forest + brass identity. Loaded only by
   /blog/ pages and the homepage Stories strip, and scoped under .bl-page /
   .blstrip so no villa page inherits it.

   Rules the design holds to:
   - all measure/tap targets >= 44px on coarse pointers; body measure <= 68ch;
   - contrast: body ink on cream 13.5:1, muted meta 4.6:1, brass only for
     overlines/rules and >= 20px bold display text;
   - one accent per view: brass is the editorial voice, forest the structure;
   - motion is 150-300ms and dies under prefers-reduced-motion;
   - nothing needs JS to be readable.
   =========================================================================== */

.bl-page{
  --blbrass:#A8834F;
  --blbrass-d:#8A693B;
  --blforest:#122F2A;
  --blcream:#FAF8F4;
  --blcream-2:#F3EFE6;
  --blserif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --blmax:1200px;
  background:var(--blcream);
}
.bl-page main{padding:0}

/* ---------- shared type ---------- */
.bl-kick{
  margin:0 0 .75rem;color:var(--blbrass-d);
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.bl-page h1,.bl-page h2,.bl-page h3{color:var(--blforest)}
.bl-secthead{
  margin:3.4rem 0 1.4rem;font-size:1.05rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blforest);
  display:flex;align-items:center;gap:1rem;
}
.bl-secthead::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- masthead ---------- */
.bl-mast{
  max-width:var(--blmax);margin:0 auto;
  padding:clamp(2.4rem,6vw,4.6rem) var(--gutter) 0;
}
.bl-mast-inner{max-width:760px}
.bl-mast h1{
  margin:0;font-size:clamp(2.15rem,5.6vw,4rem);line-height:1.02;
  letter-spacing:-.035em;font-weight:800;max-width:20ch;
}
.bl-mast .bl-sub{
  margin:1.1rem 0 0;max-width:48ch;color:var(--ink-2);
  font-family:var(--blserif);font-size:clamp(1.02rem,1.5vw,1.18rem);line-height:1.55;
}
.bl-mast-rule{
  margin-top:2.2rem;height:1px;background:var(--line);position:relative;
}
.bl-mast-rule::before{
  content:"";position:absolute;left:0;top:-1px;width:72px;height:3px;
  background:var(--blbrass);
}

/* ---------- index shell ---------- */
.bl-index{max-width:var(--blmax);margin:0 auto;padding:0 var(--gutter) 5rem}

/* ---------- tag chips ---------- */
.bl-chips{
  position:sticky;top:0;z-index:20;
  display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;
  padding:1.1rem 0 .9rem;margin-bottom:1.6rem;
  background:linear-gradient(var(--blcream) 82%,rgba(250,248,244,0));
  -webkit-overflow-scrolling:touch;
  /* right-edge fade so a clipped chip reads as "scrollable", not broken */
  mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
}
.bl-chips::-webkit-scrollbar{display:none}
.bl-chips:hover{mask-image:none;-webkit-mask-image:none}
.bl-chip{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:.45rem;
  min-height:38px;padding:.5rem 1.05rem;border:1px solid var(--line);
  border-radius:var(--r-pill);background:var(--card);
  font-size:.83rem;font-weight:600;color:var(--ink-2);
  transition:border-color var(--t-micro) ease,background var(--t-micro) ease,color var(--t-micro) ease;
}
.bl-chip em{
  font-style:normal;font-size:.7rem;font-weight:700;color:var(--blbrass-d);
  font-variant-numeric:tabular-nums;
}
.bl-chip:hover{border-color:var(--blbrass);color:var(--blforest)}
.bl-chip.on{background:var(--blforest);border-color:var(--blforest);color:#fff}
.bl-chip.on em{color:rgba(255,255,255,.72)}
@media (pointer:coarse){.bl-chip{min-height:44px;padding:.6rem 1rem}}

.bl-active-tag{margin:0 0 1.2rem;font-size:.85rem;color:var(--ink-3)}
.bl-active-tag strong{color:var(--blforest)}

/* ---------- featured story ---------- */
.bl-feat{
  border-radius:var(--r-lg);overflow:hidden;background:var(--blforest);
  box-shadow:var(--shadow-md);
}
.bl-feat-link{
  position:relative;display:grid;grid-template-columns:1.05fr .95fr;
  min-height:420px;color:#fff;
}
.bl-feat-media{position:relative;overflow:hidden}
.bl-feat-media img{width:100%;height:100%;object-fit:cover;transition:transform 600ms cubic-bezier(.2,.7,.3,1)}
.bl-feat-link:hover .bl-feat-media img{transform:scale(1.04)}
.bl-feat-shade{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(18,47,42,.55),rgba(18,47,42,0) 55%);
}
.bl-feat-body{
  align-self:end;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(1.6rem,3vw,2.6rem);position:relative;
}
.bl-feat-body::before{
  content:"";position:absolute;left:clamp(1.6rem,3vw,2.6rem);top:clamp(1.6rem,3vw,2.6rem);
  width:44px;height:3px;background:var(--blbrass);
}
.bl-feat-body .bl-kick{color:var(--blbrass);margin:0 0 .35rem}
.bl-feat .bl-feat-title{
  margin:0;color:#fff;font-size:clamp(1.7rem,2.6vw,2.25rem);
  line-height:1.06;letter-spacing:-.03em;font-weight:800;
}
.bl-feat-ex{
  margin:.7rem 0 0;color:rgba(255,255,255,.82);font-size:.95rem;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.bl-feat-arrow{
  margin-left:auto;font-size:1.05rem;color:#fff;transition:transform var(--t-hover) ease;
}
.bl-feat-link:hover .bl-feat-arrow{transform:translateX(4px);color:var(--blbrass)}
.bl-feat .bl-card-meta{margin:.9rem 0 0;color:rgba(255,255,255,.62)}
.bl-feat .bl-card-meta span{color:inherit}

/* ---------- grid + cards ---------- */
.bl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.9rem 1.6rem}
.bl-card{min-width:0}
.bl-card-link{display:flex;flex-direction:column;height:100%}
/* second tier: the newest story after the cover runs wide, so the page has a
   rhythm instead of a wall of equal cards */
@media (min-width:1101px){
  .bl-card-wide{grid-column:span 2}
  .bl-card-wide .bl-card-link{flex-direction:row;align-items:stretch;gap:1.4rem;height:100%}
  .bl-card-wide .bl-card-media{flex:0 0 54%;aspect-ratio:auto;min-height:220px}
  .bl-card-wide .bl-card-media img{height:100%}
  .bl-card-wide .bl-card-body{padding:.2rem 0;justify-content:flex-end}
  .bl-card-wide .bl-card-title{font-size:1.6rem;line-height:1.14}
  .bl-card-wide .bl-card-ex{-webkit-line-clamp:3;font-size:.95rem}
}
.bl-card-media{
  position:relative;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;
  background:var(--blcream-2);
}
.bl-card-media img{width:100%;height:100%;object-fit:cover;transition:transform 500ms cubic-bezier(.2,.7,.3,1)}
.bl-card-link:hover .bl-card-media img{transform:scale(1.05)}
.bl-card-tag{
  position:absolute;left:.7rem;top:.7rem;padding:.28rem .6rem;border-radius:var(--r-pill);
  background:rgba(250,248,244,.94);color:var(--blforest);
  font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
}
.bl-card-body{padding:.9rem .15rem 0;display:flex;flex-direction:column;flex:1}
.bl-card-title{
  margin:0;font-size:1.16rem;line-height:1.24;letter-spacing:-.015em;font-weight:700;
  /* three lines, clamped and reserved: a one-line title and a three-line title
     must leave the meta row on the same baseline across a row */
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(3 * 1.24em);
}
.bl-card-link:hover .bl-card-title{color:var(--blbrass-d)}
.bl-card-ex{
  margin:.5rem 0 0;color:var(--ink-3);font-size:.9rem;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.bl-card-meta{
  margin:auto 0 0;padding-top:.7rem;display:flex;flex-wrap:wrap;gap:.4rem;
  font-size:.75rem;color:var(--ink-3);letter-spacing:.02em;
}
.bl-card-meta time{font-variant-numeric:tabular-nums}
.bl-empty{
  margin:2.5rem 0;padding:2.5rem 1.5rem;text-align:center;border:1px dashed var(--line);
  border-radius:var(--r-lg);color:var(--ink-3);
}
.bl-more{margin:2.6rem 0 0;text-align:center}
.bl-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:.7rem 1.4rem;border-radius:var(--r-pill);
  background:var(--blforest);color:#fff;font-size:.92rem;font-weight:600;
}
.bl-btn:hover{background:#0C211D}
.bl-btn.ghost{background:transparent;color:var(--blforest);border:1px solid var(--line)}
.bl-btn.ghost:hover{background:var(--card);border-color:var(--blbrass)}

/* ===========================================================================
   POST PAGE
   =========================================================================== */
.bl-post-page main{padding:0}

.bl-progress{
  position:fixed;left:0;right:0;top:0;height:3px;z-index:60;
  background:rgba(18,47,42,.10);pointer-events:none;
}
.bl-progress span{
  display:block;height:100%;width:0;background:var(--blbrass);
  transform:translateZ(0);transition:width 110ms linear;
}

.bl-crumbs{
  max-width:var(--blmax);margin:0 auto;padding:1.15rem var(--gutter) 0;
}
.bl-crumbs a{
  display:inline-flex;align-items:center;gap:.45rem;
  min-height:36px;font-size:.82rem;font-weight:600;color:var(--ink-3);
}
.bl-crumbs a:hover{color:var(--blforest)}
.bl-crumbs svg{width:15px;height:15px}

.bl-posthead{position:relative;margin-top:.55rem}
.bl-posthero{position:relative;display:block;overflow:hidden;background:var(--blforest)}
.bl-posthero img{
  width:100%;height:clamp(320px,56vw,620px);object-fit:cover;
}
.bl-postshade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,47,42,.22) 0%,rgba(18,47,42,.55) 32%,rgba(18,47,42,.9) 72%,rgba(18,47,42,.96));
}
.bl-posthead-in{
  position:absolute;left:0;right:0;bottom:0;color:#fff;
  max-width:var(--blmax);margin:0 auto;padding:1rem var(--gutter) clamp(1.6rem,3.4vw,2.8rem);
}
.bl-posthead-in .bl-chip{
  background:rgba(18,47,42,.42);border-color:rgba(255,255,255,.42);
  color:#fff;backdrop-filter:blur(6px);min-height:30px;padding:.3rem .7rem;font-size:.72rem;
}
.bl-posthead-in .bl-chip:hover{background:rgba(250,248,244,.24);color:#fff;border-color:#fff}
.bl-posthead h1{
  margin:.85rem 0 0;color:#fff;font-size:clamp(1.85rem,4.4vw,3.35rem);
  line-height:1.04;letter-spacing:-.035em;font-weight:800;max-width:24ch;
  text-wrap:balance;text-shadow:0 1px 2px rgba(9,24,21,.45);
}
.bl-standfirst{
  margin:.95rem 0 0;max-width:56ch;color:rgba(255,255,255,.9);
  font-family:var(--blserif);font-size:clamp(1.02rem,1.6vw,1.22rem);line-height:1.5;
}
.bl-byline{
  margin:1.15rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.9);
}
.bl-byline time{font-variant-numeric:tabular-nums}

.bl-postwrap{
  max-width:1160px;margin:0 auto;padding:clamp(1.8rem,4vw,3.4rem) var(--gutter) 0;
  display:grid;grid-template-columns:56px minmax(0,1fr);gap:2.4rem;
  align-items:start;
}
.bl-rail{
  position:sticky;top:104px;display:flex;flex-direction:column;align-items:center;gap:.55rem;
}
.bl-rail .bl-shares{flex-direction:column;align-items:center;gap:.55rem}
.bl-rail .bl-share-k{display:none}
.bl-rail .bl-copied{position:absolute;left:60px}
.bl-rail-line{width:1px;height:44px;background:var(--line);margin:.35rem 0}
.bl-rail-top{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);color:var(--ink-3);font-size:.95rem;background:var(--card);
}
.bl-rail-top:hover{border-color:var(--blbrass);color:var(--blforest)}

/* ---------- share buttons (rail, end, mobile bar) ---------- */
.bl-shares{display:flex;align-items:center;gap:.45rem;position:relative;flex-wrap:wrap}
.bl-share-k{
  font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin-right:.2rem;
}
.bl-sh{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  min-width:40px;height:40px;padding:0 .55rem;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--card);color:var(--ink-2);
  font-size:.8rem;font-weight:600;cursor:pointer;
  transition:border-color var(--t-micro) ease,color var(--t-micro) ease,background var(--t-micro) ease;
}
.bl-sh svg{width:16px;height:16px;flex:0 0 auto}
.bl-sh:hover{border-color:var(--blbrass);color:var(--blforest);background:var(--blcream-2)}
.bl-rail .bl-sh span{display:none}
.bl-shares-compact .bl-sh span{display:none}
.bl-shares-compact .bl-sh{flex:1 1 0;height:46px;padding:0}
.bl-shares-compact .bl-share-k{display:none}
.bl-copied{
  position:absolute;top:-30px;left:0;padding:.2rem .5rem;border-radius:6px;
  background:var(--blforest);color:#fff;font-size:.7rem;font-weight:600;
  opacity:0;transform:translateY(4px);transition:opacity .18s ease,transform .18s ease;
  pointer-events:none;white-space:nowrap;
}
.bl-copied.on{opacity:1;transform:none}
.bl-copyfallback{
  width:100%;margin-top:.4rem;padding:.4rem .55rem;border:1px solid var(--line);
  border-radius:8px;background:var(--blcream-2);color:var(--ink-2);font:inherit;font-size:.75rem;
}

/* ---------- article ---------- */
.bl-articlecol{min-width:0;max-width:720px;margin:0 auto;width:100%}
.bl-body{
  font-family:var(--blserif);
  font-size:clamp(1.06rem,1.45vw,1.19rem);
  line-height:1.74;color:#1E2E2A;
}
.bl-body > p{margin:0 0 1.15em}
.bl-body > p:first-of-type::first-letter{
  float:left;font-size:4.05em;line-height:.82;font-weight:700;color:var(--blforest);
  padding:.06em .14em 0 .02em;
}
.bl-body h2{
  font-family:var(--sans);font-size:clamp(1.32rem,2.2vw,1.62rem);
  line-height:1.22;letter-spacing:-.02em;margin:2.1em 0 .6em;font-weight:750;
}
.bl-body h3{font-family:var(--sans);font-size:1.12rem;margin:1.7em 0 .5em}
.bl-body a{
  color:var(--blforest);text-decoration:underline;
  text-decoration-color:var(--blbrass);text-decoration-thickness:1.5px;
  text-underline-offset:3px;
}
.bl-body a:hover{color:var(--blbrass-d);text-decoration-color:var(--blbrass-d)}
.bl-body strong{font-weight:700;color:var(--blforest)}
.bl-body ul{margin:0 0 1.2em;padding-left:1.2em}
.bl-body li{margin:.35em 0}
.bl-body li::marker{color:var(--blbrass)}

.bl-pull{
  position:relative;margin:2.6em 0 2.6em;padding:.25em 0 .25em 1.15em;
  border-left:4px solid var(--blbrass);
  font-family:var(--blserif);font-style:italic;font-weight:500;
  font-size:clamp(1.28rem,2.2vw,1.6rem);line-height:1.34;color:var(--blforest);
  max-width:56ch;
}
.bl-pull p{margin:0}
.bl-pull::before{
  content:"“";position:absolute;left:.55em;top:-.42em;font-size:3.4em;line-height:1;
  color:var(--blbrass);opacity:.22;font-family:var(--blserif);
}
.bl-pull cite{
  display:block;margin-top:.6em;font-style:normal;font-family:var(--sans);
  font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
}

.bl-fig{
  margin:2.3em 0;width:calc(100% + 4rem);margin-left:-2rem;
}
.bl-fig img{width:100%;border-radius:var(--r-lg);aspect-ratio:16/10;object-fit:cover;background:var(--blcream-2)}
.bl-fig figcaption{
  margin-top:.6rem;font-family:var(--sans);font-size:.78rem;line-height:1.5;
  color:var(--ink-3);border-left:2px solid var(--line);padding-left:.7rem;
}

/* ---------- reactions ---------- */
.bl-react{
  margin:3rem 0 0;padding:1.5rem 1.3rem 1.35rem;border-radius:var(--r-lg);
  background:var(--blcream-2);border:1px solid var(--line);text-align:center;
}
.bl-react h2{font-size:1.05rem;margin:0 0 .9rem;letter-spacing:-.01em}
.bl-react-row{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap}
.bl-react-btn{
  display:inline-flex;align-items:center;gap:.45rem;min-height:46px;padding:.55rem 1rem;
  border-radius:var(--r-pill);border:1px solid var(--line);background:var(--card);
  color:var(--ink-2);font-size:.86rem;font-weight:600;cursor:pointer;
  transition:transform .12s ease,border-color var(--t-micro) ease,color var(--t-micro) ease;
}
.bl-react-btn svg{width:17px;height:17px}
.bl-react-btn:hover{border-color:var(--blbrass);color:var(--blforest)}
.bl-react-btn:active{transform:scale(.94)}
.bl-react-btn[aria-pressed="true"]{
  background:var(--blforest);border-color:var(--blforest);color:#fff;
}
.bl-react-btn[aria-pressed="true"] .bl-react-n{color:var(--blbrass)}
.bl-react-n{font-variant-numeric:tabular-nums;font-size:.8rem;color:var(--blbrass-d);font-weight:700}
.bl-react-btn.pop{animation:bl-pop .42s cubic-bezier(.2,1.6,.4,1)}
@keyframes bl-pop{
  0%{transform:scale(1)} 38%{transform:scale(1.14)} 62%{transform:scale(.97)} 100%{transform:scale(1)}
}
.bl-react-note{margin:.75rem 0 0;min-height:1.1em;font-size:.78rem;color:var(--ink-3)}
.bl-endactions{
  margin:2.4rem 0 0;padding-top:1.4rem;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
}
.bl-endactions .bl-share-k{display:none}

/* ---------- related ---------- */
.bl-rel{max-width:var(--blmax);margin:4rem auto 0;padding:0 var(--gutter) 5rem}

/* ---------- mobile share bar ---------- */
.bl-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;
  padding:.55rem var(--gutter) calc(.55rem + env(safe-area-inset-bottom));
  background:rgba(250,248,244,.96);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  transform:translateY(105%);transition:transform .25s ease;
}
.bl-bar.on{transform:none}
.bl-bar .bl-shares{max-width:520px;margin:0 auto}

/* ===========================================================================
   HOMEPAGE STORIES STRIP
   =========================================================================== */
.blstrip{
  --blforest:#122F2A;--blbrass:#A8834F;--blcream:#FAF8F4;--blmax:1200px;
  background:#122F2A;color:#fff;margin-top:4.5rem;
}
.blstrip-in{max-width:var(--blmax);margin:0 auto;padding:clamp(2.6rem,5vw,4rem) var(--gutter) clamp(2.8rem,5vw,3.6rem)}
.blstrip-head{max-width:640px}
.blstrip-kick{
  margin:0 0 .6rem;color:var(--blbrass);font-size:.7rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;
}
.blstrip h2{
  margin:0;color:#fff;font-size:clamp(1.7rem,3.4vw,2.5rem);letter-spacing:-.03em;line-height:1.06;
}
.blstrip-sub{margin:.7rem 0 0;color:rgba(255,255,255,.68);font-size:.95rem;max-width:52ch}
.blstrip-body{
  display:grid;grid-template-columns:1.45fr .55fr;gap:1.5rem;
  margin-top:2rem;align-items:stretch;
}
.blstrip-lead{
  position:relative;display:block;overflow:hidden;border-radius:var(--r-lg);
  min-height:330px;background:rgba(255,255,255,.05);
}
.blstrip-media{position:absolute;inset:0;display:block;overflow:hidden}
.blstrip-media img{width:100%;height:100%;object-fit:cover;transition:transform 600ms cubic-bezier(.2,.7,.3,1)}
.blstrip-lead:hover .blstrip-media img{transform:scale(1.04)}
.blstrip-shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,47,42,0) 18%,rgba(18,47,42,.55) 58%,rgba(18,47,42,.94));
}
.blstrip-leadbody{
  position:absolute;left:0;right:0;bottom:0;padding:1.8rem 1.4rem 1.5rem;
  display:flex;flex-direction:column;gap:.5rem;
}
.blstrip-leadtitle{
  font-size:clamp(1.3rem,2.1vw,1.75rem);line-height:1.12;letter-spacing:-.022em;
  font-weight:750;color:#fff;max-width:24ch;text-wrap:balance;
}
.blstrip-lead:hover .blstrip-leadtitle{color:var(--blbrass)}
.blstrip-list{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  border-top:1px solid rgba(255,255,255,.16);
}
.blstrip-list li{border-bottom:1px solid rgba(255,255,255,.16);flex:1}
.blstrip-list a{display:flex;gap:1.1rem;padding:1.05rem .15rem;height:100%;min-height:56px}
.blstrip-num{
  font-size:.72rem;font-weight:700;color:var(--blbrass);letter-spacing:.09em;
  padding-top:.3rem;font-variant-numeric:tabular-nums;min-width:2.2ch;
}
.blstrip-item{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.blstrip-list a:hover .blstrip-title{color:var(--blbrass)}
.blstrip-tag{
  font-size:.64rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--blbrass);
}
.blstrip-title{font-size:1rem;line-height:1.3;font-weight:600;letter-spacing:-.01em;color:#fff}
.blstrip-meta{
  margin-top:auto;padding-top:.35rem;font-size:.72rem;color:rgba(255,255,255,.6);
  display:flex;gap:.4rem;align-items:center;
}
.blstrip-lead:hover .blstrip-meta span,
.blstrip-list a:hover .blstrip-meta span{color:var(--blbrass)}
.blstrip-cta:hover{color:var(--blbrass);border-color:var(--blbrass)}

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width:1100px){
  .bl-grid{grid-template-columns:repeat(2,1fr)}
  .blstrip-body{grid-template-columns:1fr}
  /* tablet: cover turns into a horizontal split — stacked full-width it eats
     most of the viewport before any other story */
  .bl-feat-link{grid-template-columns:.92fr 1.08fr;min-height:0}
  .bl-feat-media{aspect-ratio:auto;min-height:300px}
  .bl-feat-shade{background:linear-gradient(90deg,rgba(18,47,42,.4),rgba(18,47,42,0) 60%)}
  .bl-feat .bl-feat-title{font-size:1.75rem}
  .bl-feat-body{background:var(--blforest);padding-top:2.6rem}
  .bl-postwrap{grid-template-columns:minmax(0,1fr)}
  .bl-rail{display:none}
}

@media (max-width:900px){
  /* title block leaves the photo and sits on cream — readable on small screens */
  .bl-posthead-in{position:static;color:var(--blforest);padding:1.3rem var(--gutter) 0;max-width:none}
  .bl-posthead h1,.bl-posthead-in .bl-standfirst{color:var(--blforest)}
  .bl-posthead-in .bl-chip{background:var(--blcream-2);border-color:var(--line);color:var(--ink-2)}
  .bl-posthead-in .bl-chip:hover{background:var(--card);color:var(--blforest)}
  .bl-posthero{aspect-ratio:4/3}
  .bl-posthero img{height:100%}
  .bl-postshade{display:none}
  .bl-byline{color:var(--ink-3)}
  .bl-bar{display:block}
  .bl-endactions{padding-bottom:.5rem}
  .bl-post-page main{padding-bottom:4.2rem}
  .bl-fig{width:calc(100% + 2 * var(--gutter));margin-left:calc(-1 * var(--gutter))}
  .bl-fig img{border-radius:0}
  .bl-fig figcaption{padding:0 var(--gutter)}
}

@media (max-width:700px){
  .bl-grid{grid-template-columns:1fr;gap:1.6rem}
  /* the cover goes edge-to-edge on phones so it outranks the list instead of
     matching it */
  .bl-feat{margin-inline:calc(-1 * var(--gutter));border-radius:0}
  .bl-feat .bl-feat-title{font-size:1.72rem}
  .bl-feat-link{grid-template-columns:1fr}
  .bl-feat-media{aspect-ratio:16/10;min-height:0}
  .bl-feat-shade{background:linear-gradient(180deg,rgba(18,47,42,0),rgba(18,47,42,.55))}
  .blstrip-lead{min-height:290px}
  .blstrip-leadbody{padding:2rem 1.2rem 1.4rem}
  .bl-mast{padding-top:1.8rem}
  .bl-mast-rule{margin-top:1.5rem}
  .bl-chips{top:0;margin-bottom:1.2rem}
  .bl-body{font-size:1.04rem;line-height:1.7}
  .bl-body > p:first-of-type::first-letter{font-size:3.5em}
  .bl-chip{min-height:44px;padding:.6rem 1rem}
  .bl-posthead-in .bl-chip{min-height:38px;padding:.4rem .8rem;font-size:.75rem}
  .bl-react-btn{min-height:44px;padding:.5rem .85rem}
  .bl-shares-compact .bl-sh{height:44px}
  .bl-articlecol{max-width:none}
}

/* desktop only: rail labels appear on hover, tooltip fashion */
@media (hover:hover) and (min-width:1101px){
  .bl-rail .bl-sh:hover span,
  .bl-rail .bl-sh:focus-visible span{
    display:block;position:absolute;left:52px;padding:.25rem .55rem;border-radius:6px;
    background:var(--blforest);color:#fff;font-size:.72rem;white-space:nowrap;
    pointer-events:none;
  }
}

/* ---------- print ---------- */
@media print{
  .bl-progress,.bl-rail,.bl-bar,.bl-react,.bl-rel,.bl-crumbs,.blstrip,.hdr,.ftr,.bl-endactions{display:none!important}
  .bl-body{font-size:11pt;color:#000}
  .bl-posthead h1,.bl-posthead-in .bl-standfirst{color:#000}
  .bl-posthero{position:static}
  .bl-posthero img{height:auto;max-height:70mm}
  .bl-fig{width:100%;margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  .bl-feat-media img,.bl-card-media img,.blstrip-media img{transition:none}
  .bl-react-btn.pop{animation:none}
  .bl-progress span,.bl-bar,.bl-copied{transition:none}
}