/* =====================================================================
   Bushwick Daily · the article page at 600 px and up (stage 3, hl/stage3.php)
   Linked with media="(min-width:600px)", only while `bd_hl3` is on. It lays out the phone design's own nodes for a
   wide screen: no new colours, the same two typefaces, the same tokens (hl.css section 2, hl-dark.css).
   600 to 899 px: one column, the phone's parts at larger type. 900 px and up: the story beside a rail.
   The paywall is hl-sheet.css's sheet at every width and is not laid out here.
   ===================================================================== */

/* ---------- 1. The page and the masthead ---------- */
.hl3{--gutter:24px;--wide:1152px;--pad:32px}
.hl3 .hl-masthead{height:64px;grid-template-columns:var(--tap) 1fr auto var(--tap);padding:0 max(16px,calc((100vw - var(--wide)) / 2 - 8px))}
.hl3 .hl-masthead__home{padding-left:120px}                 /* the wordmark stays in the middle of the band beside the button */
.hl3 .hl-masthead__wordmark{height:28px;width:auto}
.hl3 .hl-masthead > a.hl-icon-btn{grid-column:4;grid-row:1}
.hl-masthead__cta{grid-column:3;grid-row:1;display:inline-flex;align-items:center;height:36px;margin-right:8px;padding:0 14px;border-radius:2px;background:var(--hi);color:#141414;font:700 13px/1 var(--sans);white-space:nowrap}
.hl3 .hl-strip{top:calc(env(safe-area-inset-top,0px) + 64px)}
.hl3.hl2-down .hl-masthead,.hl3.hl2-down .hl-strip{transform:translateY(-230px)}

/* ---------- 2. One column, 600 to 899 px ---------- */
.hl3 .main{display:block}
.hl3 .article-layout{max-width:728px;margin:0 auto}
.hl3 .hl-article-head{padding-top:28px}
.hl3 .hl-h1{font-size:38px;line-height:42px;letter-spacing:-.015em}
.hl3 .hl-article-head .hl-dek{font-size:20px;line-height:28px;margin-top:14px}
.hl3 .hl-story p{font-size:20px;line-height:32px;margin-bottom:20px}
.hl3 .hl-story li{font-size:20px;line-height:32px}
.hl3 .hl-readnext{max-width:728px;margin:0 auto}
.hl3 .hl-footer{padding-inline:max(24px,calc((100vw - var(--wide)) / 2))}
.hl3 .hl-menu{max-width:480px;box-shadow:0 0 0 100vmax rgba(0,0,0,.5)}

/* The sold positions keep their places (hl.css hides every ad on a phone; these three are the wide layout's). */
.hl.hl3 :is(.bd-bb--wide,.bd-dso){display:block!important}
.hl3 .bd-bb--wide{max-width:var(--wide);margin:16px auto 0;text-align:center}
.hl3 .bd-bb--wide:empty{display:none!important}
.hl3 .bd-bb--wide img,.hl3 .bd-dso img{max-width:100%;height:auto}

/* ---------- 3. The story beside a rail, 900 px and up ---------- */
@media (min-width:900px){
  .hl3{--gutter:0px}
  .hl3 .article-layout{max-width:calc(var(--wide) + 2 * var(--pad));padding:0 var(--pad);display:grid;grid-template-columns:minmax(0,760px) 300px;justify-content:space-between;column-gap:48px;align-items:start}
  .hl3 .article{min-width:0}
  .hl3 .hl-article-head{padding-top:36px}
  .hl3 .hl-h1{font-size:46px;line-height:50px}
  .hl3 .hl-article-head .hl-dek{font-size:22px;line-height:31px}
  .hl3 .hl-article-head + figure,.hl3 #hl-main > figure{margin-top:24px}
  .hl3 .hl-byline{padding-inline:0}
  .hl3 .hl-story{max-width:680px}
  .hl3 .hl-after,.hl3 .article__image-note{max-width:680px}

  /* the strip: four stories across, on the page's grid */
  .hl3 .hl-strip{height:142px;padding:12px max(var(--pad),calc((100vw - var(--wide)) / 2)) 0}
  .hl3 .hl-strip__cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 24px;overflow:hidden;padding-right:0}
  .hl3 .hl-strip__card{grid-template-columns:120px 1fr;gap:14px;min-height:80px;padding-right:20px}
  .hl3 .hl-strip__card:nth-child(n+5){display:none}
  .hl3 .hl-strip__card:nth-child(4){border-right:0}
  .hl3 .hl-strip__card .hl-photo{width:120px;height:80px}
  .hl3 .hl-strip__card__t{font-size:17px;line-height:21px}

  /* the rail: the sold position, then the stream */
  .hl.hl3 .sidebar{display:block!important;padding-top:36px}
  .hl3 .sidebar > .trending{display:none}
  .hl3 .sidebar .bd-dso{margin:0 0 28px}
  .hl-stream__head{margin:0 0 4px;padding-top:8px;border-top:2px solid var(--ink);font:800 11px/16px var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
  .hl-stream__card{display:block;padding:14px 0 18px;border-bottom:1px solid var(--rule)}
  .hl-stream__card:last-child{border-bottom:0}
  .hl-stream__card .hl-photo{aspect-ratio:3/2;width:100%}
  .hl-stream__card__t{display:block;margin-top:10px;font:600 17px/22px var(--serif);color:var(--ink)}
  .hl-stream__card__s{display:block;margin-top:4px;font:500 13px/18px var(--sans);color:var(--ink-3)}
  .hl3 .hl-explore{display:none!important}                 /* the rail does this job beside the text */

  /* Next article: a card in the corner */
  .hl3 .hl-next{left:auto;right:24px;bottom:24px;width:440px;padding:14px 16px 14px 18px;box-shadow:0 8px 28px rgba(0,0,0,.32);transform:translateY(170%)}
  .hl3.hl2-next-on .hl-footer{padding-bottom:0}

  /* Read next: the feature beside its rows */
  .hl3 .hl-readnext{max-width:calc(var(--wide) + 2 * var(--pad));margin:56px auto 0;padding:0 var(--pad);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;align-items:start}
  .hl3 .hl-readnext > .hl-section-head{grid-column:1 / -1;margin-inline:0}
  .hl3 .hl-readnext > .hl-feature{grid-column:1;grid-row:2 / span 6}
  .hl3 .hl-readnext > .hl-row{grid-column:2;margin-inline:0}
  .hl3 .hl-readnext > .hl-feature + .hl-row{border-top:0;padding-top:0}
  .hl3 .hl-readnext .hl-feature .hl-h2{font-size:28px;line-height:33px}
  .hl3 .hl-readnext .hl-h3{font-size:19px;line-height:24px}
}
@media (min-width:1200px){
  .hl3 .hl-h1{font-size:48px;line-height:52px}
}

/* ---------- 4. Where the paywall rises: no rail (hl2.css section 5 has the strip and Next article) ---------- */
.hl3.hl--gated:not(.bd-is-member) .hl-stream{display:none!important}
@media (min-width:900px){
  .hl3.hl--gated:not(.bd-is-member) .article-layout{grid-template-columns:minmax(0,760px);justify-content:center}
  .hl.hl3.hl--gated:not(.bd-is-member) .sidebar{display:none!important}
}

/* ---------- 5. The home page (stage 4's nodes): one river, wide. Owner, 2026-11-11: single column, photo-first ---------- */
.hl3 .hl-dateline{padding-inline:max(24px,calc((100vw - var(--wide)) / 2))}
.hl3 .hl4{max-width:728px;margin:0 auto}
.hl.hl3 .hl4-ad :is(.bd-bb,.bd-ad,.bd-dso,.bd-rot){display:block!important}
html.hl.hl3 .hl4 .hl4-ad [class*="house-membership"],html.hl.hl3 .hl4 .hl4-ad:has([class*="house-membership"]:only-child){display:none!important}
.hl3 .hl4-ad{margin:20px auto;text-align:center}
.hl3 .hl4-ad img{max-width:100%;height:auto}
.hl3 .hl-car__card{flex-basis:38%}
@media (min-width:900px){
  /* "One lead, one river" (docs/design-review-2026-11-04/critique-homepage/proposal, direction A, its row table), in the
     phone design's type and colour. Three sizes of photograph: the lead, a medium row (360 x 225), a compact row
     (200 x 125). The time sits under the headline on every row. The rail carries only the sold positions. */
  .hl3.hl--home .hl-masthead{height:112px}
  .hl3.hl--home .hl-masthead__wordmark{height:72px}
  /* ONE column, nothing beside it (owner, 2026-11-11). The sold positions are rows of the river. */
  .hl3 .hl4{display:flex;flex-direction:column;max-width:1004px;margin:0 auto;padding:32px 32px 0}
  .hl3 .hl4 > *{min-width:0}
  .hl3 .hl4 .hl-photo img{width:100%;height:100%;object-fit:cover}
  /* the lead band: the photograph and, beside it, the whole of the headline, dek and time on the first screen */
  .hl3 .hl4 > .hl4-top{display:contents}
  .hl3 .hl4 .hl-lead{order:-2;display:block;padding-bottom:36px;border-bottom:1px solid var(--rule)}
  .hl3 .hl4 .hl-lead .hl-photo{aspect-ratio:auto;height:min(520px,52vh)}
  .hl3 .hl4 .hl-lead__body{padding:18px 0 0;max-width:820px}
  .hl3 .hl4 .hl-lead .hl-h1{font-size:44px;line-height:48px;margin-top:10px}
  .hl3 .hl4 .hl-lead .hl-dek{font-size:19px;line-height:28px;-webkit-line-clamp:unset;display:block;margin-top:12px}
  /* a sold position: a row of the river, its creative centred, a rule above (the spec's in-feed row) */
  .hl3 .hl4 > .hl4-ad{margin:0;padding:26px 0 30px;border-top:1px solid var(--rule);text-align:center}
  /* medium rows: the two picks, and each section's first story */
  .hl3 .hl4 .hl-pair{order:-1;display:block;margin:0;padding:0;border:0}
  .hl3 .hl4 .hl-pair__card,.hl3 .hl4 .hl-feature{display:grid;grid-template-columns:minmax(0,1fr) 360px;column-gap:32px;align-content:start;padding:28px 0;border-bottom:1px solid var(--rule)}
  .hl3 .hl4 .hl-pair__card > .hl-photo,.hl3 .hl4 .hl-feature > .hl-photo{grid-column:2;grid-row:1 / span 4;width:360px;height:225px;aspect-ratio:auto}
  .hl3 .hl4 .hl-pair__card > :not(.hl-photo),.hl3 .hl4 .hl-feature > :not(.hl-photo){grid-column:1}
  .hl3 .hl4 .hl-pair__card .hl-kicker{margin-top:0}
  .hl3 .hl4 .hl-pair__card .hl-kicker__meta{display:inline}
  .hl3 .hl4 .hl-pair__card .hl-h3,.hl3 .hl4 .hl-feature .hl-h2{font-size:28px;line-height:33px;margin-top:8px;-webkit-line-clamp:unset}
  .hl3 .hl4 .hl-feature__body{padding:0}
  .hl3 .hl4 .hl-feature .hl-dek{font-size:17px;line-height:25px;margin-top:10px}
  /* compact rows: Latest, the rest of each section, More stories. Headline, then the time under it; 200 x 125 right */
  .hl3 .hl4 .hl-section-head{margin:40px 0 0;padding-bottom:0}
  .hl3 .hl4 .hl-row{margin-inline:0}
  .hl3 .hl4 .hl-row--thumb{grid-template-columns:minmax(0,1fr) 200px;column-gap:32px;align-items:start;padding:22px 0}
  .hl3 .hl4 .hl-row--thumb > div:first-child{display:flex;flex-direction:column;max-width:700px}
  .hl3 .hl4 .hl-row--thumb .hl-h3{order:-1;font-size:22px;line-height:28px}
  .hl3 .hl4 .hl-row--thumb .hl-timeline__time,.hl3 .hl4 .hl-row--thumb .hl-meta{margin:10px 0 0;font-size:12px;line-height:16px}
  .hl3 .hl4 .hl-row--thumb .hl-photo--thumb{width:200px;height:125px}
  .hl3 .hl4 .hl-car{display:block;padding:0;overflow:visible}
  .hl3 .hl4 .hl-car__card{display:grid;grid-template-columns:minmax(0,1fr) 200px;column-gap:32px;align-content:start;max-width:none;padding:22px 0;border-bottom:1px solid var(--rule)}
  .hl3 .hl4 .hl-car__card > .hl-photo{grid-column:2;grid-row:1 / span 3;width:200px;height:125px;aspect-ratio:auto}
  .hl3 .hl4 .hl-car__card > :not(.hl-photo){grid-column:1}
  .hl3 .hl4 .hl-car__card .hl-kicker{margin-top:0}
  .hl3 .hl4 .hl-car__card .hl-h3{font-size:22px;line-height:28px;margin-top:6px}
  .hl3 .hl4-more .hl-more{max-width:none;width:100%;margin:36px 0 0}
  /* no doubled rule where a block ends and the next block's heading rule begins */
  .hl3 .hl4 .hl-pair__card:last-child,.hl3 .hl4 .hl-car__card:last-child,.hl3 .hl4 > section > .hl-row:last-child{border-bottom:0}
  /* the tall masthead scrolls away with the page (the spec: not sticky) */
  .hl3.hl--home .hl-masthead{position:relative;top:auto}
}
@media (min-width:900px) and (max-width:1199px){
  .hl3 .hl4{padding-inline:24px}
  .hl3 .hl4 .hl-lead .hl-h1{font-size:38px;line-height:42px}
  .hl3 .hl4 .hl-pair__card,.hl3 .hl4 .hl-feature{grid-template-columns:minmax(0,1fr) 260px;column-gap:24px}
  .hl3 .hl4 .hl-pair__card > .hl-photo,.hl3 .hl4 .hl-feature > .hl-photo{width:260px;height:163px}
  .hl3 .hl4 .hl-pair__card .hl-h3,.hl3 .hl4 .hl-feature .hl-h2{font-size:24px;line-height:29px}
  .hl3 .hl4 .hl-row--thumb,.hl3 .hl4 .hl-car__card{grid-template-columns:minmax(0,1fr) 160px;column-gap:20px}
  .hl3 .hl4 .hl-row--thumb .hl-photo--thumb,.hl3 .hl4 .hl-car__card > .hl-photo{width:160px;height:100px}
}

/* ---------- 6. Finishing, 900 px and up (owner, 2026-11-11: the article's general design is fine, it needs finishing) ---------- */
@media (min-width:900px){
  /* the wordmark at a desktop size, in a taller band */
  .hl3 .hl-masthead{height:80px}
  .hl3 .hl-masthead__wordmark{height:44px}
  .hl3 .hl-strip{top:calc(env(safe-area-inset-top,0px) + 80px)}
  .hl3.hl2-down .hl-masthead,.hl3.hl2-down .hl-strip{transform:translateY(-250px)}
  /* the strip: three stories with room for their headlines, not four cut to two words a line */
  .hl3 .hl-strip__cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hl3 .hl-strip__card:nth-child(n+4){display:none}
  .hl3 .hl-strip__card:nth-child(3){border-right:0}
  .hl3 .hl-strip__card__t{font-size:18px;line-height:22px}
  /* the rail does not repeat the strip's heading directly under it: its rule stays */
  .hl3 .hl-stream__head span{display:none}
  .hl3 .hl-stream__head{height:0;padding-top:0;margin-bottom:12px}
  /* Read next: the feature's photograph wide, the rows with larger photographs, so the two columns end together */
  .hl3 .hl-readnext > .hl-feature .hl-photo{aspect-ratio:16 / 9;height:auto}
  .hl3 .hl-readnext .hl-row--thumb{grid-template-columns:minmax(0,1fr) 132px;column-gap:20px;padding-block:18px}
  .hl3 .hl-readnext .hl-row--thumb .hl-photo--thumb{width:132px;height:88px}
  .hl3 .hl-readnext .hl-h3{font-size:21px;line-height:26px}
  /* the footer: the wordmark at size, the links in a block of their own width, not spread across the screen */
  .hl3 .hl-footer{padding-top:44px;padding-bottom:44px}
  .hl3 .hl-footer__wordmark{height:36px}
  .hl3 .hl-footer__links{max-width:440px;margin-top:20px}
  .hl3 .hl-footer__links a{padding:6px 0}
}

/* ---------- 7. Desktop article, finishing 2 (2026-11-11) ---------- */
@media (min-width:900px){
  /* Read next: the three rows share the feature's height, so the two columns end together */
  .hl3 .hl-readnext{grid-template-rows:auto repeat(3,minmax(0,1fr));align-items:stretch}
  .hl3 .hl-readnext > .hl-feature{grid-row:2 / span 3;padding-bottom:0}
  .hl3 .hl-readnext > .hl-row{align-content:center;align-items:center}
  .hl3 .hl-readnext > .hl-row:last-child{border-bottom:0}
  /* the rail's stories stay beside the text while it is read */
  .hl3 aside.sidebar .hl-stream{position:sticky;top:24px}
}

/* ---------- 8. Desktop article: a page built for reading (owner, 2026-11-11: "no design that is built to focus the
   reader on the article"; the strip "a temporary ... brown bar") ---------- */
@media (min-width:900px){
  /* one centred column: nothing beside the story */
  .hl3 .article-layout{grid-template-columns:minmax(0,1fr);max-width:none;padding-inline:32px}
  .hl3 .article-layout > aside.sidebar{display:none}
  .hl3 .article-layout > article.article{max-width:none}
  .hl3 .article-layout > article.article > *{max-width:680px;margin-inline:auto}
  /* the opening: headline and dek on a 760 px measure, the photograph wider than the text, then the text inset under it */
  .hl3 .article-layout > article.article > .hl-only:has(> .hl-article-head){max-width:1040px;padding-top:28px}
  .hl3 .hl-article-head,.hl3 .hl-article-head ~ .hl-byline{max-width:760px;margin-inline:auto}
  .hl3 .hl-article-head .hl-h1{font-size:52px;line-height:56px;letter-spacing:-.012em}
  .hl3 .hl-article-head .hl-dek{font-size:23px;line-height:33px;margin-top:16px}
  .hl3 .hl-article-head ~ figure{margin-top:36px;margin-bottom:8px}
  .hl3 .hl-article-head ~ .hl-byline{margin-top:20px}
  .hl3 .article__body.hl-story{padding-top:12px}
  .hl3 .article__body.hl-story > p{margin-bottom:26px}
  /* the strip: part of the page, not a band laid over it. The page's own ground, a hairline, smaller cards */
  html.hl2.hl3:root{--strip-bg:var(--paper);--strip-fg:var(--ink);--strip-rule:var(--rule)}
  .hl3 .hl-strip{height:112px;padding-top:10px;border-top:0;border-bottom:1px solid var(--rule);box-shadow:0 8px 24px -18px rgba(0,0,0,.35)}
  .hl3 .hl-strip__label{margin-bottom:8px}
  .hl3 .hl-strip__card{grid-template-columns:96px 1fr;gap:12px;min-height:64px}
  .hl3 .hl-strip__card .hl-photo{width:96px;height:64px}
  .hl3 .hl-strip__card__t{font-size:16px;line-height:20px;-webkit-line-clamp:3}
  .hl3.hl2-down .hl-masthead,.hl3.hl2-down .hl-strip{transform:translateY(-220px)}
  .hl3 .hl-readnext{margin-top:72px}
}
@media (min-width:900px){
  html.hl.hl3 .article-layout > aside.sidebar{display:none!important}              /* nothing beside or after the story but Read next */
}
@media (min-width:1200px){
  /* the Next article card sits in the margin, clear of the text */
  .hl3 .hl-next{width:min(340px,calc((100vw - 680px) / 2 - 40px));grid-template-columns:1fr 56px;gap:12px;padding:14px 16px}
  .hl3 .hl-next__arrow{display:none}
  .hl3 .hl-next__photo{width:56px;height:56px}
  .hl3 .hl-next__t{font-size:16px;line-height:20px;-webkit-line-clamp:3}
}
@media (min-width:900px){
  /* one measure for the whole story: headline, photograph, byline and text share the same left and right edges
     (owner, 2026-11-11: the photograph and the text "are not working together", the text "too thin") */
  .hl3 .article-layout > article.article > *,
  .hl3 .article-layout > article.article > .hl-only:has(> .hl-article-head),
  .hl3 .hl-article-head,.hl3 .hl-article-head ~ .hl-byline{max-width:800px;margin-inline:auto}
  .hl3 .article__body.hl-story{font-size:21px;line-height:34px}
  .hl3 .article__body.hl-story > p{font-size:21px;line-height:34px;margin-bottom:28px}
}
@media (min-width:1200px){
  .hl3 .hl-next{width:min(300px,calc((100vw - 800px) / 2 - 32px))}
}
@media (min-width:900px){
  /* the story's text at the headline's full ink, not the softer body grey (owner, 2026-11-11: in the dark design it
     "blends into the background") */
  .hl3 .article__body.hl-story,.hl3 .article__body.hl-story > p,.hl3 .article__body.hl-story li{color:var(--ink)}
  .hl3 .hl-article-head .hl-dek{color:var(--ink)}        /* readable first: the dek is set apart by its size, not by dimming it */
}
@media (min-width:900px){
  /* the story's text in the sans: sturdier strokes than the serif at reading size, in the dark design above all
     (owner, 2026-11-11, with 404 Media's article as the reference). One 760 px measure for the whole story. */
  .hl3 .article-layout > article.article > *,
  .hl3 .article-layout > article.article > .hl-only:has(> .hl-article-head),
  .hl3 .hl-article-head,.hl3 .hl-article-head ~ .hl-byline{max-width:760px}
  .hl3 .article__body.hl-story,.hl3 .article__body.hl-story > p,.hl3 .article__body.hl-story li{font-family:var(--sans);font-size:19px;line-height:32px;font-weight:400;letter-spacing:0}
  .hl3 .article__body.hl-story > p{margin-bottom:30px}
  .hl3 .article__body.hl-story :is(h2,h3){font-family:var(--serif)}
}
@media (min-width:1200px){
  .hl3 .hl-next{width:min(300px,calc((100vw - 760px) / 2 - 32px))}
}
@media (min-width:900px){
  /* no grey text on the desktop article (owner, 2026-11-11): every text colour is the full ink, in both designs;
     small labels are set apart by size and weight, not by dimming */
  html.hl.hl3:root{--ink-2:var(--ink);--ink-3:var(--ink)}
  html.hl.hl3[data-theme="dark"]:root{--ink:#ffffff}
}
@media (min-width:900px) and (prefers-color-scheme:dark){
  html.hl.hl3:not([data-theme="light"]):root{--ink:#ffffff}
}

/* ---------- 9. Large screens: the whole page scales up, as the browser's own zoom would (owner, 2026-11-11: on a
   1,860 px window it "looks perfect" at 140%). The layout he approved is the one a 1,326 px window gets; wider
   windows scale it in steps so it fills the same share of the screen. ---------- */
@media (min-width:1480px){html.hl.hl3{zoom:1.12}}
@media (min-width:1590px){html.hl.hl3{zoom:1.2}}
@media (min-width:1700px){html.hl.hl3{zoom:1.28}}
@media (min-width:1800px){html.hl.hl3{zoom:1.4}}
@media (min-width:2050px){html.hl.hl3{zoom:1.55}}
@media (min-width:2300px){html.hl.hl3{zoom:1.72}}
@media (min-width:2600px){html.hl.hl3{zoom:1.9}}
/* the Next article card keeps to the margin at each scale (100vw is the unscaled window) */
@media (min-width:1480px){html.hl.hl3 .hl-next{width:min(300px,calc((100vw / 1.12 - 760px) / 2 - 32px))}}
@media (min-width:1590px){html.hl.hl3 .hl-next{width:min(300px,calc((100vw / 1.2 - 760px) / 2 - 32px))}}
@media (min-width:1700px){html.hl.hl3 .hl-next{width:min(300px,calc((100vw / 1.28 - 760px) / 2 - 32px))}}
@media (min-width:1800px){html.hl.hl3 .hl-next{width:min(300px,calc((100vw / 1.4 - 760px) / 2 - 32px))}}
@media (min-width:2050px){html.hl.hl3 .hl-next{width:min(300px,calc((100vw / 1.55 - 760px) / 2 - 32px))}}
@media (min-width:2300px){html.hl.hl3 .hl-next{width:min(300px,calc((100vw / 1.72 - 760px) / 2 - 32px))}}
@media (min-width:2600px){html.hl.hl3 .hl-next{width:min(300px,calc((100vw / 1.9 - 760px) / 2 - 32px))}}
@media (min-width:900px){
  /* the same text face where the paywall wraps the opening paragraphs (they are not direct children of the story) */
  .hl3 .article__body.hl-story p{font-family:var(--sans);font-size:19px;line-height:32px;font-weight:400;letter-spacing:0;color:var(--ink)}
}
@media (min-width:900px){
  /* the desktop text size in the dark design too (the phone's dark rule is 17/28 and is the more specific) */
  html.hl.hl3[data-theme="dark"] .article__body.hl-story p,html.hl.hl3[data-theme="dark"] .article__body.hl-story li,
  html.hl.hl3:not([data-theme="light"]) .article__body.hl-story p,html.hl.hl3:not([data-theme="light"]) .article__body.hl-story li{font-size:19px;line-height:32px}
}