/* ==========================================================================
   THE PULSE BLOG · DESIGN A · "Magazine Feature" (production)
   Print-like editorial. Slab display heads (Bitter, the masthead's face),
   Source Serif body, Libre Franklin small-caps labels, colour-coded section
   chips, hairline rules, a drop cap and ruled pull quotes.
   Tokens are the live site's (index.html :root) plus five section colours.
   The design needs no JavaScript (the only scripts on blog pages are the
   pinned consent/GA4/click-tracking/newsletter ones). All motion is CSS and
   sits behind prefers-reduced-motion: no-preference.
   Built by blog/build-blog.mjs; served as /blog/blog.css?v=<sha8>.
   ========================================================================== */

:root{
  --paper:#F6EFE1;
  --paper-deep:#EFE5D0;
  --paper-card:#FBF6EA;
  --cream:#FFF8EC;
  --ink:#22242B;
  --ink-soft:#4A4C55;            /* 7.4:1 on paper; bylines + credits use this */
  --red:#C13A52;
  --red-deep:#97293E;
  --coral:#E0526B;               /* decorative only, never small text */
  --navy:#1E3A5F;
  --navy-deep:#152C4A;
  --gold:#C29A3B;
  --gold-bright:#D9B254;
  --gold-ink:#7E5F17;            /* gold that passes AA as text on paper */
  --rule:rgba(34,36,43,.28);
  --rule-soft:rgba(34,36,43,.14);
  --slab:'Bitter',Georgia,serif;
  --franklin:'Libre Franklin',Helvetica,Arial,sans-serif;
  --serif:'Source Serif 4',Georgia,serif;
  --maxw:1180px;
  --gutter:clamp(1rem,3.2vw,1.5rem);
  --ease-out:cubic-bezier(.2,.7,.3,1);
}

/* ---- section colours: chip fill, chip text, colour-as-text on paper ---- */
.s-events {--sec:#C13A52;--sec-on:#FFF8EC;--sec-ink:#C13A52}
.s-trips  {--sec:#A4481B;--sec-on:#FFF8EC;--sec-ink:#A4481B}
.s-culture{--sec:#1E3A5F;--sec-on:#FFF8EC;--sec-ink:#1E3A5F}
.s-market {--sec:#C29A3B;--sec-on:#22242B;--sec-ink:#7E5F17}
.s-life   {--sec:#0F6E6A;--sec-on:#FFF8EC;--sec-ink:#0F6E6A}

/* ============================== BASE ============================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  background-color:var(--paper);
  /* paper grain as a tiled background (cheap), not a fixed blend overlay */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
  color:var(--ink);
  font-family:var(--serif);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--gold-bright);color:var(--ink)}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
/* navy vanishes on the ink grounds (1.35:1): switch to gold there */
.site-foot :focus-visible{outline-color:var(--gold-bright)}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--cream);
  font-family:var(--franklin);font-weight:800;font-size:.85rem;padding:.7rem 1rem;text-decoration:none}
.skip:focus{left:1rem;top:1rem}
.star{color:var(--gold)}

/* ============================== TOP BAR ============================== */
.topbar{background:var(--navy);color:#EDE6D4;font-family:var(--franklin);font-size:.72rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:.25rem 1rem;flex-wrap:wrap;
  padding-block:.5rem}
.topbar .star{color:var(--gold-bright);margin:0 .45em}
@media (max-width:640px){.topbar .wrap{justify-content:center;text-align:center}}

/* ============================== MASTHEAD ============================== */
.mast{border-bottom:3px double var(--rule);
  background:linear-gradient(180deg,rgba(224,82,107,.05),rgba(224,82,107,0) 60%)}
.mast .wrap{padding-block:clamp(1rem,2.6vw,1.5rem) .85rem;text-align:center}
.mast-name{display:block;width:fit-content;margin:0 auto;text-decoration:none;line-height:0}
.mast-name svg{display:block;width:min(440px,78vw);height:auto}
.mast--post .mast-name svg{width:min(360px,70vw)}
/* the Pulse Line: the homepage's waveform rule, drawn once on load */
.pulse-rule{display:block;width:min(640px,100%);height:auto;margin:.55rem auto 0}
.pulse-rule path{fill:none;stroke:var(--coral);stroke-width:1.4;stroke-linecap:round}
.folio{display:flex;justify-content:space-between;align-items:baseline;gap:.2rem 1rem;flex-wrap:wrap;
  max-width:920px;margin:.65rem auto 0;padding-top:.5rem;border-top:1px solid var(--rule-soft);
  font-family:var(--franklin);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft)}
.folio b{color:var(--red)}
@media (max-width:760px){.folio{justify-content:center;text-align:center}.folio .folio-mid{display:none}}

/* ============================== NAV (no JS) ============================== */
.nav{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--rule);
  box-shadow:0 1px 0 rgba(255,255,255,.5)}
.nav-row{display:flex;align-items:stretch;justify-content:center}
.nav-links{display:flex;list-style:none}
.navlink{display:block;position:relative;font-family:var(--franklin);font-weight:700;font-size:.8rem;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--ink);
  padding:.85rem 1rem;border-left:1px solid var(--rule-soft);transition:color .18s}
.nav-links li:last-child .navlink{border-right:1px solid var(--rule-soft)}
.navlink::after{content:"";position:absolute;left:14%;right:14%;bottom:0;height:3px;background:var(--coral);
  transform:scaleX(0);transition:transform .22s var(--ease-out)}
.navlink:hover,.navlink[aria-current]{color:var(--red)}
.navlink:hover::after,.navlink[aria-current]::after{transform:scaleX(1)}
.navlink svg{width:.95em;height:.95em;vertical-align:-.1em;margin-right:.45em}
.advertise{margin-left:1rem;align-self:center;font-family:var(--franklin);font-weight:800;font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;background:var(--red);color:var(--cream);
  padding:.55rem 1.1rem;border:1px solid var(--red-deep);box-shadow:3px 3px 0 var(--navy);
  transition:transform .15s,box-shadow .15s,background .15s;white-space:nowrap}
.advertise:hover{background:var(--red-deep);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--navy)}
.nav-more{display:none}
@media (max-width:920px){
  .nav-row{justify-content:space-between;align-items:center;padding-block:.45rem}
  .nav-links{display:none}
  .nav-more{display:block}
  .nav-more summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;
    font-family:var(--franklin);font-weight:800;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
    color:var(--ink);border:1px solid var(--rule);padding:.55rem .9rem;user-select:none}
  .nav-more summary::-webkit-details-marker{display:none}
  .nav-more[open] summary{background:var(--ink);color:var(--cream);border-color:var(--ink)}
  .nav-more ul{position:absolute;left:0;right:0;top:100%;list-style:none;background:var(--paper);
    border-bottom:1px solid var(--rule);box-shadow:0 14px 24px -18px rgba(34,36,43,.5)}
  .nav-more .navlink{border-left:none;border-top:1px solid var(--rule-soft);text-align:center;padding:.9rem 1rem}
  .nav-more .navlink::after{display:none}
  .advertise{margin-left:0}
}
/* reading progress hairline (post page): scroll-driven CSS, hidden where unsupported */
.read-progress{display:none;position:absolute;left:0;right:0;bottom:-1px;height:3px;
  background:var(--sec,var(--coral));transform-origin:0 50%;transform:scaleX(0)}

/* ============================== SHARED TYPE ============================== */
.chip{display:inline-block;font-family:var(--franklin);font-weight:800;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;line-height:1;padding:.45em .72em .42em;background:var(--sec,var(--ink));
  color:var(--sec-on,var(--cream));white-space:nowrap}
.chip--spon{background:var(--ink);color:var(--gold-bright)}
.desk{font-family:var(--franklin);font-weight:800;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sec-ink,var(--ink-soft))}
.card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .75rem}
.byline{font-family:var(--serif);font-size:.98rem;color:var(--ink-soft);line-height:1.4}
.sc{font-variant-caps:all-small-caps;font-weight:600;letter-spacing:.07em;font-size:1.1em;color:var(--ink)}
.meta{font-family:var(--franklin);font-size:.78rem;font-weight:600;letter-spacing:.04em;color:var(--ink-soft)}
.meta .dot{margin:0 .4em}
.credit{font-family:var(--franklin);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft)}
.frame{overflow:hidden;background:var(--paper-deep);line-height:0}
/* a solid section-colour rule under every story photo: the colour key, never on the picture */
.lead-card .frame,.card .frame,.rel-card .frame{border-bottom:4px solid var(--sec,var(--ink))}
.frame img{width:100%;height:auto;object-fit:cover}

/* whole-card click target: the headline link stretches over its card */
.stretch{text-decoration:none;color:inherit;
  background-image:linear-gradient(var(--sec,var(--red)),var(--sec,var(--red)));
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 2px}
.stretch::after{content:"";position:absolute;inset:0;z-index:1}
.lead-card,.card,.brief,.rel-card{position:relative}
@supports selector(:has(*)){
  .stretch:focus-visible{outline:none}
  .lead-card:has(.stretch:focus-visible),.card:has(.stretch:focus-visible),
  .brief:has(.stretch:focus-visible),.rel-card:has(.stretch:focus-visible){outline:3px solid var(--navy);outline-offset:6px}
}
@media (hover:hover){
  .lead-card:hover .stretch,.card:hover .stretch,.brief:hover .stretch,.rel-card:hover .stretch{background-size:100% 2px}
  .lead-card:hover .frame img,.card:hover .frame img,.rel-card:hover .frame img{transform:scale(1.035)}
  .lead-card:hover .read-cta .arr{transform:translateX(4px)}
}

/* broadsheet section head: rules both sides, slab label centred */
.secthead{display:flex;align-items:center;gap:1rem;margin-bottom:clamp(1.5rem,3.2vw,2.25rem)}
.secthead::before,.secthead::after{content:"";flex:1;height:1px;background:var(--rule)}
.secthead h2{font-family:var(--slab);font-weight:900;font-size:clamp(1.4rem,2.6vw,1.85rem);line-height:1.1;
  text-align:center;letter-spacing:.005em}
.secthead h2 .star{font-size:.7em;vertical-align:.12em;margin:0 .35em}

/* ============================== BLOG HOME: DEPARTMENT OPENER ============================== */
.dept{text-align:center;padding-block:clamp(1.5rem,3vw,2.5rem)}
.dept-group{display:inline-grid;justify-items:center;max-width:100%}
.dept-kicker{display:flex;align-items:center;gap:.85rem;width:100%;font-family:var(--franklin);font-weight:800;
  font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;color:var(--navy);white-space:nowrap}
.dept-kicker::before,.dept-kicker::after{content:"";flex:1;min-width:1.5rem;height:2px;background:var(--ink)}
.dept-title{font-family:var(--slab);font-weight:900;font-size:clamp(3.1rem,8vw,5rem);line-height:.9;
  letter-spacing:-.025em;margin:.16em 0 .2em;text-wrap:balance}
.dept-title .red{color:var(--red)}
.dept-deck{font-style:italic;font-size:clamp(1.08rem,1.9vw,1.3rem);line-height:1.5;color:var(--ink-soft);
  max-width:34em;text-wrap:pretty}
/* a printed color key (a legend, not buttons): swatch + label. The label sits outside the list. */
.sec-key{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem 1.1rem;
  margin-top:1.25rem;font-family:var(--franklin);font-weight:700;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft)}
.sec-key ul{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem 1.1rem;list-style:none}
.sec-key .key-label{font-weight:800;letter-spacing:.2em;color:var(--ink)}
.sec-key li::before{content:"";display:inline-block;width:.8em;height:.8em;margin-right:.45em;
  vertical-align:-.05em;background:var(--sec)}

/* ============================== LEAD STORY ============================== */
.lead{padding-bottom:clamp(2.75rem,6vw,4.5rem)}
.slot{display:flex;align-items:center;gap:.8rem;margin-bottom:.85rem;font-family:var(--franklin);font-weight:800;
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.slot::after{content:"";flex:1;height:1px;background:var(--rule)}
.lead-photo .frame img{aspect-ratio:4/3;object-position:50% 35%}
.photo-credit{text-align:right;padding-top:.45rem}
.lead-body{display:grid;grid-template-columns:minmax(0,1fr);gap:1.1rem;margin-top:.9rem;padding-top:1.15rem;border-top:2px solid var(--ink)}
.lead-title{font-family:var(--slab);font-weight:900;font-size:clamp(2.05rem,4.9vw,3.8rem);line-height:1.02;
  letter-spacing:-.018em;margin-top:.7rem;text-wrap:balance;overflow-wrap:break-word}
.lead-deck{font-size:clamp(1.08rem,1.6vw,1.22rem);line-height:1.55;color:var(--ink-soft);text-wrap:pretty}
.lead-side .byline{margin-top:1rem}
.lead-side .meta{margin-top:.25rem}
.read-cta{display:inline-flex;align-items:center;gap:.45em;margin-top:1.1rem;font-family:var(--franklin);
  font-weight:800;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.read-cta .arr{display:inline-block;transition:transform .25s var(--ease-out)}
@media (min-width:760px){.lead-photo .frame img{aspect-ratio:16/9}}
/* desktop: photo left, the whole story block right, so the headline lands in the first screen */
@media (min-width:900px){
  .lead-card{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:2.5rem;align-items:start}
  .lead-photo .frame img{aspect-ratio:3/2}
  .lead-body{margin-top:0}
  .lead-title{font-size:clamp(2.1rem,3.3vw,2.9rem);margin-top:.8rem}
}
/* phones: drop the furniture between the masthead and the lead */
@media (max-width:640px){
  .topbar,.folio,.sec-key,.slot,.dept-deck{display:none}
  .dept{padding-block:1.25rem 1rem}
  .lead-photo .frame img{aspect-ratio:3/2}
}

/* ============================== CARD GRID (2-up) ============================== */
.more{padding-bottom:clamp(1.5rem,4vw,2.5rem)}
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2.25rem}
.card{display:flex;flex-direction:column}
.card .frame img{aspect-ratio:3/2}
.card .photo-credit{padding-top:.4rem}
.card .card-meta{margin-top:.75rem}
.card-title{font-family:var(--slab);font-weight:800;font-size:clamp(1.42rem,2.5vw,1.8rem);line-height:1.12;
  letter-spacing:-.008em;margin:.6rem 0 .5rem;text-wrap:balance;overflow-wrap:break-word}
.card-deck{font-size:1rem;line-height:1.55;color:var(--ink-soft);text-wrap:pretty}
.card-foot{margin-top:.8rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .9rem}
.grid > .card + .card{border-top:1px solid var(--rule-soft);padding-top:2.25rem}
@media (min-width:760px){
  .grid{grid-template-columns:1fr 1fr;column-gap:clamp(2rem,4.5vw,3.75rem);row-gap:3.25rem;
    background:linear-gradient(var(--rule-soft),var(--rule-soft)) 50% 0/1px 100% no-repeat}
  .grid > .card + .card{border-top:none;padding-top:0}
}
/* the sponsored treatment: black label, gold frame, "Paid for by" line */
/* (.grid > .card.is-sponsored outranks the ".card + .card" hairline/padding resets above) */
.card.is-sponsored,.grid > .card.is-sponsored{background:var(--paper-card);border:1px solid var(--gold);
  padding:.85rem .85rem 1.1rem;box-shadow:0 0 0 4px var(--paper-card),0 0 0 5px rgba(194,154,59,.45)}
.grid > .card.is-sponsored + .card{border-top-color:transparent}
/* in the 2-up grid the gold frame bleeds outward, so photo, label and headline share edges with the next card */
@media (min-width:760px){.grid > .card.is-sponsored{margin:calc(-.85rem - 1px)}}
.disclose{margin-top:.75rem;padding-top:.55rem;border-top:1px dotted var(--rule);font-family:var(--franklin);
  font-size:.78rem;font-weight:600;color:var(--ink-soft)}
.disclose b{color:var(--ink)}

/* ============================== QUICK READS (briefs) ============================== */
.briefs{padding-block:clamp(2.5rem,6vw,4rem) clamp(1rem,3vw,2rem)}
.brief-list{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);border-top:2px solid var(--ink)}
/* posted dates ride the normal meta line; calendar styling is kept for event dates only */
.brief{padding:1.2rem 0;border-bottom:1px solid var(--rule-soft)}
.brief h3{font-family:var(--slab);font-weight:800;font-size:1.16rem;line-height:1.22;margin:.55rem 0 .4rem;
  text-wrap:balance}
.brief .byline{font-size:.92rem}
.brief .meta{margin-top:.2rem}
@media (min-width:900px){
  .brief-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .brief{padding:1.35rem 1.5rem;border-bottom:none;border-left:1px solid var(--rule-soft)}
  .brief:first-child{border-left:none;padding-left:0}
  .brief:last-child{padding-right:0}
}

/* ============================== NEWSLETTER ============================== */
.newsletter{padding-block:clamp(2.75rem,6vw,4.5rem)}
.nl-box{position:relative;max-width:860px;margin-inline:auto;border:2px solid var(--ink);background:var(--paper-card);
  box-shadow:6px 6px 0 var(--navy);padding:clamp(1.4rem,4vw,2.4rem);display:grid;gap:1.25rem}
.nl-box::before{content:"FREE";position:absolute;top:-13px;right:16px;font-family:var(--franklin);font-weight:800;
  font-size:.66rem;letter-spacing:.2em;background:var(--gold);color:var(--ink);padding:.28rem .6rem;
  border:1px solid var(--ink)}
.nl-kicker{font-family:var(--franklin);font-weight:800;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red)}
.nl-title{font-family:var(--slab);font-weight:900;font-size:clamp(1.55rem,3.2vw,2.1rem);line-height:1.08;
  margin:.35rem 0 .5rem;text-wrap:balance}
.nl-copy{color:var(--ink-soft);font-size:1rem;line-height:1.55}
.nl-form{display:flex;flex-direction:column;gap:.6rem}
.nl-form label{font-family:var(--franklin);font-weight:700;font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft)}
.nl-row{display:flex;gap:.6rem}
.nl-form input[type=email]{flex:1;min-width:0;font-family:var(--franklin);font-size:1rem;padding:.75rem .9rem;
  border:1px solid var(--ink);background:#fff;color:var(--ink);border-radius:0}
.nl-form input[type=email]::placeholder{color:#6A6B73}
.nl-form button{font-family:var(--franklin);font-weight:800;font-size:.8rem;letter-spacing:.12em;
  text-transform:uppercase;background:var(--navy);color:var(--cream);border:1px solid var(--navy-deep);
  padding:.75rem 1.25rem;cursor:pointer;transition:background .15s,transform .12s;border-radius:0}
.nl-form button:hover{background:var(--navy-deep);transform:translateY(-1px)}
.nl-fine{font-family:var(--franklin);font-size:.78rem;color:var(--ink-soft)}
.hp{position:absolute;left:-9999px}
@media (min-width:760px){.nl-box{grid-template-columns:1.05fr 1fr;align-items:end;column-gap:2.25rem}}
@media (max-width:420px){.nl-row{flex-direction:column}}

/* ============================== POST ============================== */
.crumbs{padding-top:1.35rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem .45rem;font-family:var(--franklin);font-size:.72rem;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.crumbs li+li::before{content:"\203A";margin-right:.45rem;color:var(--sec-ink);font-weight:800}
.crumbs a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--rule)}
.crumbs a:hover{color:var(--red);border-color:currentColor}
.story-hero{margin-top:.9rem}
.story-hero .frame img{aspect-ratio:4/3;object-position:50% 35%}
.fig-cap{display:flex;flex-direction:column;gap:.3rem;padding-top:.55rem;border-bottom:1px solid var(--rule-soft);
  padding-bottom:.6rem}
.fig-cap .cap{font-style:italic;font-size:.95rem;line-height:1.45;color:var(--ink-soft)}
@media (min-width:760px){
  .story-hero .frame img{aspect-ratio:16/9}
  .fig-cap{flex-direction:row;justify-content:space-between;align-items:baseline;gap:1.5rem}
  .fig-cap .credit{white-space:nowrap}
}
@media (min-width:1000px){.story-hero .frame img{aspect-ratio:2/1}}

.story-head{padding-top:clamp(1.6rem,4vw,2.6rem)}
.story-head-in{max-width:62rem}
.story-title{font-family:var(--slab);font-weight:900;font-size:clamp(2.1rem,6.4vw,4.5rem);line-height:1;
  letter-spacing:-.022em;margin:.8rem 0 .5em;text-wrap:balance;overflow-wrap:break-word}
.story-deck{font-style:italic;font-size:clamp(1.15rem,2.2vw,1.48rem);line-height:1.45;color:var(--ink-soft);
  max-width:36em;text-wrap:pretty}
.story-byline{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.3rem 1.5rem;
  margin-top:1.4rem;padding:.75rem 0 .7rem;border-top:2px solid var(--ink);border-bottom:1px solid var(--rule-soft)}
.story-byline .byline{font-size:1.02rem}

.story-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;padding-top:clamp(1.6rem,3.5vw,2.4rem)}
.story-body{max-width:41rem;min-width:0}
@media (min-width:1000px){
  .story-grid{grid-template-columns:minmax(0,1fr) 300px;column-gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
  .story-body{grid-column:1;grid-row:1}
  .story-rail{grid-column:2;grid-row:1;position:sticky;top:4.25rem}
}
.story-body p{font-size:clamp(1.0625rem,.55vw + .95rem,1.17rem);line-height:1.72;margin-bottom:1.1em;
  text-wrap:pretty;hanging-punctuation:first}
.story-body a{color:var(--red);text-decoration-thickness:1px;text-underline-offset:3px}
.story-body a:hover{color:var(--red-deep);text-decoration-thickness:2px}
/* drop cap + small-caps opening line */
.lede::first-line{font-variant-caps:all-small-caps;letter-spacing:.045em;font-weight:600}
.lede::first-letter{float:left;font-family:var(--slab);font-weight:900;color:var(--sec);font-size:4.55em;
  line-height:.78;padding:.07em .09em 0 0;font-variant-caps:normal}
@supports (initial-letter:3) or (-webkit-initial-letter:3){
  .lede::first-letter{float:none;font-size:1em;line-height:1;padding:0;margin-right:.1em;
    -webkit-initial-letter:3;initial-letter:3}
}
.story-body h2{font-family:var(--slab);font-weight:800;font-size:clamp(1.42rem,2.6vw,1.78rem);line-height:1.15;
  margin:2.3rem 0 .8rem;text-wrap:balance}
.story-body h2::before{content:"";display:block;width:2.75rem;height:4px;background:var(--sec);margin-bottom:.8rem}
.story-body h3{font-family:var(--franklin);font-weight:800;font-size:.84rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sec-ink);margin:2rem 0 .75rem}
.story-body ul{list-style:none;margin:0 0 1.5rem}
.story-body li{position:relative;padding-left:1.6rem;margin-bottom:.6rem;font-size:clamp(1.0625rem,.55vw + .95rem,1.17rem);
  line-height:1.6}
.story-body li::before{content:"\2605";position:absolute;left:0;top:.12em;color:var(--sec);font-size:.8em}
.story-body > p.last::after{content:"\00a0\2605";color:var(--sec)}

.pull{margin:2.4rem 0 2.3rem;padding:1.15rem 0 1.35rem;border-top:4px solid var(--ink);border-bottom:1px solid var(--ink)}
.pull p{font-family:var(--slab);font-weight:800;font-size:clamp(1.5rem,3.3vw,2.1rem);line-height:1.16;
  letter-spacing:-.008em;color:var(--ink);margin:0;text-wrap:balance}
.pull p::before{content:"\201C";display:block;font-family:var(--slab);font-weight:900;font-size:3.6rem;line-height:.62;
  color:var(--sec);margin-bottom:.1rem}
.inline-fig{margin:2.3rem 0}
.inline-fig .frame img{aspect-ratio:3/2}
@media (min-width:760px){.inline-fig .frame img{aspect-ratio:21/9}}

.author-note{display:flex;gap:.9rem;align-items:flex-start;margin-top:2.6rem;padding-top:1.1rem;
  border-top:2px solid var(--ink);font-size:.98rem;line-height:1.55;color:var(--ink-soft)}
.author-note .mono{flex:none;display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;
  background:var(--sec);color:var(--sec-on);font-family:var(--slab);font-weight:900;font-size:1rem;letter-spacing:.02em}
.author-note b{color:var(--ink)}
.closing{margin-top:1.4rem;display:grid;gap:.1rem;border-top:1px solid var(--rule-soft)}
.closing a{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.8rem 0;
  border-bottom:1px solid var(--rule-soft);text-decoration:none;font-family:var(--franklin);font-weight:700;
  font-size:.95rem;color:var(--ink)}
.closing a span:last-child{font-weight:800;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);white-space:nowrap}
.closing a:hover span:first-child{color:var(--red)}

/* Before You Go: an admission ticket, perforated between stub and body */
.byg{border:1.5px solid var(--ink);background:var(--paper-card);box-shadow:5px 5px 0 rgba(34,36,43,.14)}
.byg-head{background:var(--navy);color:var(--cream);padding:.95rem 1.15rem .9rem}
.byg-head h2{font-family:var(--slab);font-weight:900;font-size:1.3rem;line-height:1.1}
/* the freshness date as a rubber "Checked" stamp */
.byg-check{display:inline-block;font-family:var(--franklin);font-weight:800;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-bright);margin-top:.55rem;padding:.25rem .55rem .22rem;
  border:1.5px solid var(--gold-bright);border-radius:3px;transform:rotate(-3deg);transform-origin:0 50%}
.byg-perf{position:relative;height:16px;
  background:linear-gradient(90deg,var(--ink) 50%,transparent 50%) 0 50%/10px 1.5px repeat-x}
.byg-perf::before,.byg-perf::after{content:"";position:absolute;top:50%;width:16px;height:16px;margin-top:-8px;
  border-radius:50%;background:var(--paper);border:1.5px solid var(--ink)}
.byg-perf::before{left:-9.5px;clip-path:inset(0 0 0 50%)}
.byg-perf::after{right:-9.5px;clip-path:inset(0 50% 0 0)}
.byg-list{padding:.1rem 1.15rem .4rem}
.byg-list div{display:grid;grid-template-columns:4.6rem minmax(0,1fr);gap:.75rem;padding:.6rem 0;
  border-bottom:1px solid var(--rule-soft)}
.byg-list div:last-child{border-bottom:none}
.byg-list dt{font-family:var(--franklin);font-weight:800;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);padding-top:.25em}
.byg-list dd{font-size:.98rem;line-height:1.42}
.byg-link{display:flex;justify-content:center;align-items:center;gap:.5em;margin:.3rem 1.15rem 1.15rem;
  font-family:var(--franklin);font-weight:800;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;background:var(--red);color:var(--cream);border:1px solid var(--red-deep);padding:.8rem 1rem;
  box-shadow:3px 3px 0 var(--navy);transition:transform .15s,box-shadow .15s,background .15s}
.byg-link:hover{background:var(--red-deep);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--navy)}

.mic-line{display:flex;align-items:center;gap:.85rem;margin-top:1.4rem;padding:.75rem 1rem .75rem .75rem;
  border:1px solid var(--gold-bright);border-radius:14px;background:var(--paper-card);text-decoration:none;
  transition:background .15s,transform .15s}
.mic-line img{flex:none;width:46px;height:46px;border-radius:50%}
.mic-line .mic-k{display:block;font-family:var(--franklin);font-weight:800;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--navy)}
.mic-line .mic-q{display:block;font-style:italic;font-size:.98rem;line-height:1.35;color:var(--ink)}
.mic-line:hover{background:#fff}
/* in the body it sits between Saturday and Sunday, not between the ticket and the lede */
.story-body .mic-line{width:fit-content;max-width:100%;margin:2rem 0 .5rem;padding-right:1.4rem;color:var(--ink)}

/* related: a swipe rail on phones (the next card peeks in), three cards on desktop */
.related{padding-top:clamp(2.75rem,6vw,4.5rem)}
.rel-grid{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:min(78%,19rem);gap:1.1rem;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;
  margin-inline:calc(var(--gutter) * -1);padding:0 var(--gutter) 1rem;scroll-padding-inline:var(--gutter)}
.rel-card{scroll-snap-align:start}
.rel-card .frame img{aspect-ratio:3/2}
.rel-card .credit{display:block;text-align:right;font-size:.66rem;padding-top:.4rem;letter-spacing:.06em}
.rel-card .card-meta{margin-top:.6rem}
.rel-card h3{font-family:var(--slab);font-weight:800;font-size:1.18rem;line-height:1.2;margin:.5rem 0 .35rem;
  text-wrap:balance}
.rel-card .byline{font-size:.9rem}
@media (max-width:759px){.rel-card.reveal{animation:none}}   /* a sideways rail has no vertical entry to reveal on */
@media (min-width:760px){
  .rel-grid{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(1.5rem,3vw,2.5rem);
    overflow:visible;margin-inline:0;padding:0}
  .rel-card .card-meta{margin-top:.7rem}
  .rel-card h3{font-size:1.3rem}
}

/* ============================== PRODUCTION ADDITIONS ============================== */
/* <picture> wraps every story photo (WebP first, JPEG fallback) */
picture{display:block}
/* numbered lists: section-colour numerals instead of the star */
.story-body ol{list-style:none;counter-reset:n;margin:0 0 1.5rem}
.story-body ol > li{counter-increment:n}
.story-body ol > li::before{content:counter(n) ".";font-family:var(--franklin);font-weight:800;font-size:.85em;top:.1em}
/* a real quote (not a pull quote): ruled left, attribution below */
.story-body blockquote{margin:2rem 0;padding:.2rem 0 .2rem 1.2rem;border-left:4px solid var(--sec)}
.story-body blockquote p{font-style:italic;margin-bottom:.6em}
.story-body blockquote footer{font-family:var(--franklin);font-size:.8rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft)}
.story-body strong{font-weight:600;color:var(--ink)}
/* sponsored disclosure on the post itself, and the unpaid advertiser close */
.story-head .disclose{max-width:36em;margin-top:.9rem;border-top:none;padding-top:0}
.adv-line{margin-top:1.6rem;padding-top:.7rem;border-top:1px dotted var(--rule);font-family:var(--franklin);
  font-size:.86rem;font-weight:600;color:var(--ink-soft)}
.story-body > p.adv-line{font-size:.86rem;line-height:1.5}
/* events fine print: after the end mark, small and quiet (wording lives in blog.config.json events_fine_print) */
.fine-print{margin-top:2rem;padding-top:.7rem;border-top:1px dotted var(--rule);font-family:var(--franklin);
  color:var(--ink-soft);overflow-wrap:break-word}
.story-body > p.fine-print{font-size:.8rem;line-height:1.55;margin-bottom:0;hanging-punctuation:none}
.fine-print b{font-weight:800;color:var(--ink)}
.fine-print a{color:var(--red-deep)}
.fine-print + .adv-line{margin-top:.9rem;padding-top:0;border-top:none}
/* updated stamp beside the published date */
.meta .upd{white-space:nowrap}
/* newsletter: status line + sent state (the form works without JavaScript too) */
.nl-msg{font-family:var(--franklin);font-size:.84rem;font-weight:700;color:var(--red);min-height:1.2em}
.nl-form.sent .nl-msg{color:var(--navy)}
.nl-form button[disabled]{opacity:.7;cursor:default;transform:none}
/* in-page jumps (Before You Go, skip link) land below the sticky nav, not under it */
html{scroll-padding-top:4.5rem}
/* quick reads wrap to a second row once there are more than three */
@media (min-width:900px){
  .brief:nth-child(3n+1){border-left:none;padding-left:0}
  .brief:nth-child(3n){padding-right:0}
}
/* "All stories" under the blog home, shown only when the home page is trimmed */
.all-stories{text-align:center;padding-block:.5rem clamp(1.5rem,4vw,2.5rem);font-family:var(--franklin);font-weight:800;
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
.all-stories a{color:var(--red);text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:.15rem}
.all-stories a:hover{color:var(--red-deep)}
/* the archive: one plain column at every width */
.archive .brief-list{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){
  .archive .brief,.archive .brief:nth-child(3n+1),.archive .brief:nth-child(3n){padding:1.2rem 0;border-left:none;
    border-bottom:1px solid var(--rule-soft)}
}

/* ============================== FOOTER ============================== */
.site-foot{background:var(--ink);color:#CFC9B8;border-top:6px solid var(--red);margin-top:clamp(2.5rem,6vw,4rem)}
.foot-top{display:grid;gap:2.25rem;padding-block:clamp(2.25rem,5vw,3.25rem) 2rem}
.f-mast{font-family:var(--slab);font-weight:900;font-size:1.5rem;color:#F2EBD9;line-height:1.15}
.f-mast .red{color:var(--coral)}
.f-tag{font-family:var(--franklin);font-weight:600;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-bright);margin-top:.5rem}
.f-blurb{font-size:.95rem;line-height:1.6;margin-top:1rem;max-width:28em}
.site-foot h2{font-family:var(--franklin);font-weight:800;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-bright);margin-bottom:.9rem}
.foot-list{list-style:none}
.foot-list li{margin-bottom:.55rem}
.foot-list a{color:#CFC9B8;text-decoration:none;font-family:var(--franklin);font-size:.92rem;font-weight:500}
.foot-list a:hover{color:#fff;text-decoration:underline}
.foot-list .star{margin-right:.45rem;font-size:.7rem}
.foot-contact p{font-family:var(--franklin);font-size:.92rem;line-height:1.9}
.foot-contact a{color:#F2EBD9;text-decoration:none;border-bottom:1px solid rgba(207,201,184,.4)}
.foot-contact a:hover{border-color:var(--gold-bright);color:#fff}
.foot-bottom{border-top:1px solid rgba(207,201,184,.2);padding-block:1rem 1.4rem;display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:.5rem 1.5rem;font-family:var(--franklin);font-size:.76rem;letter-spacing:.06em;
  color:#A9A391}
.foot-bottom a{color:inherit}
.foot-bottom .flag{color:var(--gold-bright);letter-spacing:.16em;font-weight:700}
@media (min-width:880px){.foot-top{grid-template-columns:1.4fr 1fr 1fr;gap:3rem}}
@media (max-width:879px){.foot-bottom{flex-direction:column;align-items:center;text-align:center}}

/* ============================== MOTION (meaningful, optional) ============================== */
@media (prefers-reduced-motion:no-preference){
  /* the masthead waveform draws once, as it does on the homepage */
  .pulse-rule path{stroke-dasharray:1000;stroke-dashoffset:0;animation:pl-draw 1.2s cubic-bezier(.45,0,.2,1) .15s backwards}
  .frame img{transition:transform .7s var(--ease-out)}
  .stretch{transition:background-size .35s var(--ease-out)}
  /* stories settle into place as they reach you, in reading order */
  @supports (animation-timeline:view()){
    /* finishes in the first 30% of entry, so a card is fully opaque before its credit line is readable */
    .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
  }
  /* post: a hairline under the nav fills as you read */
  @supports (animation-timeline:scroll()){
    .read-progress{display:block;animation:progress linear both;animation-timeline:scroll(root)}
  }
}
@keyframes pl-draw{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .lead-card:hover .frame img,.card:hover .frame img,.rel-card:hover .frame img{transform:none}
}