/* /blog — the masthead, the folio strip, the lead story and "Also new". */
.blg-hero{padding-top:var(--bdh-hero-t);padding-bottom:clamp(56px,6.4vw,104px)}

.blg-mast{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--bdh-gap);row-gap:26px;align-items:end}
.blg-mast__l{grid-column:1 / span 8;display:flex;flex-direction:column;gap:24px}
.blg-mast__t{max-width:15ch}
.blg-mast__r{grid-column:9 / 13;display:flex;flex-direction:column;gap:22px;padding-bottom:8px}
.blg-mast__r .lead{max-width:44ch}
.blg-mast__links{display:flex;flex-wrap:wrap;gap:4px 26px}

/* folio: the strip under the masthead, like the head of a printed journal */
.blg-folio{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 28px;
  margin-top:clamp(44px,5.4vw,80px);padding-top:14px;border-top:1px solid var(--ink);
}
.blg-folio__l{display:flex;flex-wrap:wrap;gap:6px 22px;font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.blg-folio__l span+span{color:var(--muted)}
.blg-folio__n{display:flex;flex-wrap:wrap;gap:8px clamp(20px,3vw,44px)}
.blg-folio__n div{display:flex;align-items:baseline;gap:10px}
.blg-folio__n dt{font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.blg-folio__n dd{font-family:var(--f);font-size:var(--t-sm);font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}

/* the lead story */
.blg-lead{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--bdh-gap);row-gap:28px;align-items:center;margin-top:clamp(28px,3.2vw,48px)}
.blg-lead__fig{grid-column:1 / span 7;position:relative;display:block;aspect-ratio:4 / 3;overflow:hidden;border-radius:var(--r-lg);background:var(--paper-3)}
.blg-lead__img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--e)}
.blg-lead__fig:hover .blg-lead__img{transform:scale(1.03)}
.blg-lead__chip{
  position:absolute;left:16px;top:16px;display:inline-flex;align-items:center;height:28px;padding:0 11px;border-radius:var(--r-pill);
  background:var(--paper);color:var(--ink);font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.14em;text-transform:uppercase;box-shadow:var(--sh-1);
}
.blg-lead__text{grid-column:9 / 13;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.blg-lead:not(:has(.blg-lead__fig)) .blg-lead__text{grid-column:1 / span 8}
.blg-lead__kicker{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.blg-lead__tag{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:var(--r-xs);background:var(--ink);color:var(--on-ink)}
.blg-lead__t{font-family:var(--f-h);font-size:clamp(1.6rem,2.7vw,2.45rem);font-weight:500;line-height:1.08;letter-spacing:-.028em;color:var(--ink)}
.blg-lead__t a{background-image:none;transition:color var(--d1) var(--e-io)}
.blg-lead__t a:hover{text-decoration:underline;text-decoration-color:var(--blue-line);text-decoration-thickness:2px;text-underline-offset:6px}
.blg-lead__dek{font-size:var(--t-lead);line-height:1.65;color:var(--muted);max-width:46ch}
.blg-lead__by{display:flex;flex-wrap:wrap;gap:6px 18px;font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.blg-lead__by span:first-child{color:var(--ink)}
.blg-lead__go{margin-top:6px}

/* also new */
.blg-also{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--bdh-gap);row-gap:16px;margin-top:clamp(44px,4.6vw,72px)}
.blg-also__lbl{grid-column:1 / span 2;align-self:start;padding-top:19px;color:var(--ink)}
.blg-also__list{grid-column:3 / 13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--bdh-gap)}
.blg-also__a{display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;gap:8px 14px;height:100%;padding-top:16px;border-top:1px solid var(--line-3);transition:border-color var(--d2) var(--e)}
.blg-also__a:hover{border-top-color:var(--ink)}
.blg-also__n{grid-row:1 / span 2;font-family:var(--f);font-size:var(--t-sm);font-weight:500;line-height:1.5;color:var(--blue-d);font-variant-numeric:tabular-nums}
.blg-also__k{font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);line-height:1.6}
.blg-also__t{font-family:var(--f-h);font-size:var(--t-h3);font-weight:500;line-height:1.3;letter-spacing:-.012em;color:var(--ink)}
.blg-also__a:hover .blg-also__t{text-decoration:underline;text-decoration-color:var(--blue-line);text-underline-offset:4px}
.blg-empty-hub{margin-top:40px;font-size:var(--t-lead);color:var(--muted)}

@media (max-width:1100px){
  .blg-mast__l{grid-column:1 / span 7}
  .blg-mast__r{grid-column:8 / 13}
  .blg-lead__fig{grid-column:1 / span 7}
  .blg-lead__text{grid-column:8 / 13}
}
@media (max-width:860px){
  .blg-mast__l,.blg-mast__r{grid-column:1 / -1}
  .blg-mast__r{padding-bottom:0}
  .blg-lead__fig,.blg-lead__text,.blg-lead:not(:has(.blg-lead__fig)) .blg-lead__text{grid-column:1 / -1}
  .blg-lead__fig{aspect-ratio:3 / 2}
  .blg-also__lbl{grid-column:1 / -1;padding-top:0}
  .blg-also__list{grid-column:1 / -1;grid-template-columns:minmax(0,1fr)}
  .blg-also__a{padding-block:14px 4px}
}
@media (max-width:480px){
  .blg-folio{flex-direction:column;align-items:flex-start}
  .blg-folio__n{gap:8px 20px}
}
@media (prefers-reduced-motion:reduce){
  .blg-lead__img{transition:none}
  .blg-lead__fig:hover .blg-lead__img{transform:none}
}

/* touch screens: the lead title link reaches 44px when it sets on one line (phone landscape); inline padding never moves the lines (css-rest integrator) */
@media (pointer:coarse){.blg-lead__t a{padding-block:8px}}