/* ==================================================================
   THE BROADSIDE
   The front page and the first page of every section (inc/broadside.php,
   category.php). Loaded after site.css on every page, because
   two rules at the foot of this file apply site-wide: the slash above a heading
   is drawn in the Free to read badge's colour and centred on the heading's
   words, and the badge's words sit in the exact middle of the badge.

   One gutter, few rules. --bs-gut is the only gap between pieces, across and
   down. Only two kinds of rule: the 2px ink rule that opens a module, and the
   hairline between stacked headlines in a list, which sits in the middle of a
   --bs-gut gap so it is --bs-half from the ink on each side (text blocks are
   trimmed to cap height and baseline). No column rules, no rules inside cards.
   A module is the rule, --s6, the module, --s6, the next rule.
   Four headline steps only: XL (the lead), L, M, S.
   ================================================================== */
:root{--bs-gut:var(--gap-grid);--bs-half:calc(var(--bs-gut) / 2)}


/* ---- module ---- */
.bs-mod{padding-block:var(--s6);border-top:2px solid var(--rule-ink)}
/* The Front opens on the ink rule, and that rule is the only line under the
   standing line: the standing line gives up its own hairline, so header,
   standing line and rule never stack into a double rule */
.standing:has(+ .bs){border-bottom:0}
.bs-mod--first{margin-top:0}
/* Deliberate exception: a module that sits directly under the dark Feature
   slab (Most Read on the front; Latest and Most Read on the section) opens on
   the slab's edge, not a rule. A rule there would be the unnecessary kind. */
.bs .slab + .bs-mod{border-top:0}

/* ---- band head: title, one italic line, a link ---- */
.bs-head{display:flex;flex-wrap:wrap;align-items:baseline;align-content:flex-start;column-gap:var(--s4);row-gap:var(--s3);
  margin-bottom:var(--gap-hdr)}
.bs-head > *{text-box:trim-both cap alphabetic}
.bs-head h2{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.1;font-variation-settings:'opsz' 14}
.bs-head p{font-family:var(--text);font-style:italic;color:var(--ink-soft);font-size:15px;line-height:1.35}
.bs-head p{order:3;flex-basis:100%}
.bs-head .bs-all{margin-left:auto;font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);white-space:nowrap}
.bs-head .bs-all:hover{text-decoration:underline;text-underline-offset:.3em}
/* the slash above a module title: see "The slash" below */
/* today's date, India time, on the title's line */
.bs-head .bs-date{margin-left:auto;font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
/* A jump from the section's sub-menu lands clear of the sticky bar through site.css's
   scroll-padding on html (the bar's height, from --bar, plus --s4). The mock-up's own
   scroll-margin is left out, because the two would add up. */

/* ---- a piece ---- */
.bs-it{position:relative;display:flex;flex-direction:column;min-width:0}
.bs-it .art{position:relative;flex:none}
.bs-it .art>canvas{position:absolute;inset:0;width:100%;height:100%}
.bs-it .art + .bs-txt{margin-top:var(--gap-tight)}
/* the words never stretch: the reading time follows the dek at one fixed step,
   and any spare height in a row is taken by an artwork, never by white space */
.bs-txt{display:flex;flex-direction:column;min-width:0;flex:none}
.bs-txt > :first-child{text-box:trim-start cap alphabetic}
.bs-txt > :last-child{text-box:trim-end cap alphabetic}
.bs-it .rubric{margin-bottom:var(--s2)}
.bs-it h3{transition:color .14s ease}
.bs-it .dek{margin-top:var(--s2);text-wrap:pretty}
.bs-it .stamp{margin-top:0;padding-top:var(--gap-tight)}
.bs .idz-free{display:block;width:fit-content;margin:0 0 var(--s2);white-space:nowrap}
.bs-it:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}

/* the four steps */
.t-xl h3{font-size:clamp(2.2rem,4.4vw,3.7rem);line-height:1.02;letter-spacing:-.02em;font-variation-settings:'opsz' 72}
.t-xl .dek{font-size:clamp(1.02rem,1.3vw,1.16rem);max-width:52ch}
.t-l h3{font-size:clamp(1.4rem,2vw,1.72rem);line-height:1.08;font-variation-settings:'opsz' 36}
.t-l .dek{font-size:15.5px}
.t-m h3{font-size:clamp(1.1rem,1.4vw,1.22rem);line-height:1.15;font-variation-settings:'opsz' 20}
.t-m .dek{font-size:14.5px}
.t-s h3{font-family:var(--text);font-weight:700;font-size:1rem;line-height:1.3;letter-spacing:0;font-variation-settings:normal}
.t-s .dek{font-size:14px}

/* the pull line: the dek set large in the display italic, under a short red
   rule, and the whole block centred in its panel so the tint above the rubric
   and below the reading time is the same depth */
.bs-quote .dek{order:0;margin-top:0;font-family:var(--display);font-style:italic;font-weight:400;color:var(--ink);
  font-size:clamp(1.3rem,1.9vw,1.62rem);line-height:1.22;font-variation-settings:'opsz' 40;text-wrap:balance}
.bs-quote{background:var(--tint);padding:var(--s5)}
.bs-quote .bs-txt{flex:1 0 auto;justify-content:center}
.bs-quote .bs-txt > *{text-box:trim-both cap alphabetic}
.bs-quote .rubric{margin-bottom:var(--s4)}
.bs-quote h3{margin-top:var(--s4)}
.bs-quote .stamp{padding-top:0;margin-top:var(--s3)}

/* ---- lists with a rule between: the rule in the middle of the gutter ---- */
.bs-stack{display:flex;flex-direction:column;min-width:0}
.bs-stack > *{flex:none}
.bs-stack > * + *{border-top:1px solid var(--rule);margin-top:var(--bs-half);padding-top:var(--bs-half)}


/* ---- the top block: lead left, four headlines right ---- */
.bs-top{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--bs-gut)}
.bs-lead .art{aspect-ratio:16/9;flex:1 0 auto}
.bs-lead .bs-txt{flex:none}
.bs-lead .rubric{margin-bottom:var(--s3)}
.bs-lead .dek{margin-top:var(--s3)}
@media(min-width:1000px){
  .bs-top{grid-template-columns:repeat(12,minmax(0,1fr))}
  .bs-top > .bs-lead{grid-column:1 / span 8}
  .bs-top > .bs-stack{grid-column:9 / -1}
  /* the column of headlines sets the height; the lead's picture fills what is
     left, so both columns end on the same line with no white space parked */
  .bs-lead .art{aspect-ratio:auto;flex:1 1 0;min-height:300px}
}
@media(min-width:681px) and (max-width:999px){
  /* stacked on a tablet: the lead and the headlines are parted by the gutter */
  .bs-top > .bs-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--bs-gut)}
  .bs-top > .bs-stack > *{margin-top:0;padding-top:0;border-top:0}
  .bs-top > .bs-stack > :nth-child(n+3){border-top:1px solid var(--rule);margin-top:var(--bs-half);padding-top:var(--bs-half)}
}

/* ---- the mosaic under it: four pieces, three treatments ---- */
.bs-mosaic{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--bs-gut);margin-top:var(--bs-gut)}
.bs-mosaic .m-a .art{aspect-ratio:16/9}
@media(min-width:1000px){
  .bs-mosaic{grid-template-columns:repeat(12,minmax(0,1fr))}
  .bs-mosaic > .m-a{grid-column:1 / span 5}
  .bs-mosaic > .m-q{grid-column:6 / span 3}
  .bs-mosaic > .m-c{grid-column:9 / -1}
  /* same rule: the two side pieces set the row, the picture story fills it */
  .bs-mosaic .m-a .art{aspect-ratio:auto;flex:1 1 0;min-height:200px}
}
@media(min-width:681px) and (max-width:999px){
  .bs-mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bs-mosaic > .m-c{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--bs-gut)}
  .bs-mosaic > .m-c > *{margin-top:0;padding-top:0;border-top:0}
}

/* a piece with its art beside it */
.bs-side{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);column-gap:var(--s4);align-items:start}
.bs-side .art{aspect-ratio:1/1}
.bs-side .art + .bs-txt{margin-top:0}
.bs-side .bs-txt{align-self:stretch}

/* ---- The Lede: five short pieces, type only ---- */
.bs-lede{display:flex;flex-direction:column}
.bs-lede > * + *{border-top:1px solid var(--rule);margin-top:var(--bs-half);padding-top:var(--bs-half)}
.bs-lede .bs-n{font-family:var(--display);font-weight:400;font-style:italic;font-size:1.5rem;line-height:1;
  color:var(--ink-faint);margin-bottom:var(--s3);font-variation-settings:'opsz' 36}
@media(min-width:1000px){
  .bs-lede{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:var(--bs-gut)}
  .bs-lede > * + *{border-top:0;margin-top:0;padding-top:0}
}

@media(min-width:681px) and (max-width:999px){
  /* The Lede and Most Read: three across, then two, a hairline between the rows */
  .bs-lede{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--bs-gut)}
  .bs-lede > * + *{border-top:0;margin-top:0;padding-top:0}
  .bs-lede > :nth-child(n+4){border-top:1px solid var(--rule);margin-top:var(--bs-half);padding-top:var(--bs-half)}
}

/* ---- section packages: bigger left, two smaller right ---- */
.bs-pkgs{display:grid;grid-template-columns:minmax(0,1fr)}
.bs-pkg{display:flex;flex-direction:column;min-width:0}
.bs-pkg + .bs-pkg{border-top:2px solid var(--rule-ink);margin-top:var(--s6);padding-top:var(--s6)}
.bs-pkg-body{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--bs-gut);flex:1 0 auto}
.bs-pkg .big .art{aspect-ratio:3/2;flex:1 0 auto}
.bs-pkg .big .bs-txt{flex:none}
.bs-pkg .small{flex:1 0 auto}
.bs-pkg .small .art{aspect-ratio:5/2;flex:1 0 auto}
.bs-pkg .small .bs-txt{flex:none}
.bs-pkg .bs-stack > * + *{border-top:0;padding-top:0;margin-top:var(--bs-gut)}
@media(min-width:681px){
  .bs-pkg-body{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  /* the two headline items' deks one step smaller, so the column beside the big
     picture grows less and the picture keeps more of its shape */
  .bs-pkg .small .dek{font-size:13px;line-height:1.45}
}
@media(min-width:1000px){
  /* two packages to a band; the heads share a row, whatever their lines do */
  .bs-pkgs{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto 1fr;column-gap:var(--bs-gut);row-gap:var(--gap-hdr)}
  .bs-pkg{display:grid;grid-row:span 2;grid-template-rows:subgrid}
  .bs-pkg + .bs-pkg{border-top:0;margin-top:0;padding-top:0}
  .bs-pkg .bs-head{margin-bottom:0}
}

/* ---- the close: the river and the numbered list ---- */
.bs-close{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--bs-gut)}
@media(min-width:1000px){
  .bs-close{grid-template-columns:repeat(12,minmax(0,1fr))}
  .bs-close > .bs-riv{grid-column:1 / span 8}
  .bs-close > .bs-pop{grid-column:9 / -1}
}
@media(max-width:999px){
  /* stacked, Most Read is a module of its own: it opens on the ink rule, --s6
     clear of Latest above and --s6 above its slash */
  .bs-close{row-gap:var(--s6)}
  .bs-close > .bs-pop{border-top:2px solid var(--rule-ink);padding-top:var(--s6)}
}
@media(max-width:999px){
  /* every ink rule that opens a module runs the same width: the stacked
     package and the stacked Most Read go edge to edge, as .bs-mod does */
  .bs-pkg + .bs-pkg,.bs-close > .bs-pop{margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}
}
.bs-river{list-style:none;margin:0;padding:0}
.bs-river .bs-it{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:var(--bs-gut);align-items:start}
@media(min-width:1000px){.bs-river .bs-it{grid-template-columns:200px minmax(0,1fr)}}
.bs-river .art{aspect-ratio:3/2}
.bs-river .art + .bs-txt{margin-top:0}
.bs-river .bs-txt{align-self:stretch}
.bs-nums{list-style:none;margin:0;padding:0;counter-reset:bs}
.bs-nums > li{counter-increment:bs;display:flex}
.bs-nums > li > .bs-it{flex:1 1 auto;display:grid;align-content:start;grid-template-columns:2.2rem minmax(0,1fr);column-gap:var(--s3);align-items:start}
.bs-nums .bs-it::before{content:counter(bs);font-family:var(--sans);font-weight:300;font-size:2.1rem;line-height:1;
  color:var(--accent);text-box:trim-both cap alphabetic}
.bs-nums .bs-txt{align-self:stretch}
/* in a numbered list the Free badge rides on the reading-time line, so a free
   piece is no taller than any other */
.bs-nums .idz-free{display:inline;margin:0;padding:0;border:0;background:none;color:var(--accent);
  font:inherit;font-weight:600;letter-spacing:inherit;vertical-align:baseline}
.bs-nums .idz-free::after{content:'\00a0\00b7\00a0';color:var(--ink-faint);font-weight:300}
/* across the page (five in a row) the number sits above the headline, so the
   headline gets the full column and never leaves a word on a line alone */
@media(min-width:681px){
  .bs-lede.bs-nums > li > .bs-it{grid-template-columns:minmax(0,1fr);row-gap:var(--s4)}
}
.bs-more{display:flex;justify-content:center;margin-top:var(--s6)}

/* ---- the section page head ---- */
.bs-sechead{text-align:center;padding-block:var(--s6)}
.bs-sechead > *{text-box:trim-both cap alphabetic}
.bs-sechead .rubric{margin-bottom:var(--s4)}
.bs-sechead h1{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:clamp(2.4rem,5.4vw,4.4rem);line-height:1;font-variation-settings:'opsz' 96}
.bs-sechead .sub{font-style:italic;color:var(--ink-soft);font-size:clamp(1rem,1.3vw,1.14rem);line-height:1.45;
  max-width:52ch;margin:var(--s4) auto 0;text-wrap:balance}
.bs-depts{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--s1) var(--s4);margin-top:var(--s5);
  font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
/* The department names are a quiet control: grey at rest, full ink under the
   pointer. They used to darken to the oxblood, which is now kept for focus. */
.bs-depts a:hover{color:var(--ink)}
/* Centred lines of spaced capitals carry their last letter's spacing after the
   ink, which sets the words left of the page's centre by half of it. The same
   room on the left puts each line back on the centre. */
.bs-sechead .rubric{padding-left:.2em}
.bs-sechead h1{padding-left:.06em}
/* The name's longest unbroken run (--bs-run, in letters, from idz_bs_sechead())
   must fit the column. A capital here averages under .8em with its spacing, so the
   size is held to the column's width over .8em a letter, and a short name keeps
   the full size. */
.bs-sechead h1{font-size:min(clamp(2.4rem,5.4vw,4.4rem),calc((100vw - 2 * var(--gutter)) / (var(--bs-run, 8) * .8)));text-wrap:balance}
.bs-depts{padding-left:.18em}
/* The links are trimmed to their capitals and baseline, as every other line in
   the head is, so the space under the sub-menu is the same --s6 as the space
   above the word Section. Trimmed, the rows need a real gap between them. */
.bs-depts{row-gap:var(--s3)}
.bs-depts > a{text-box:trim-both cap alphabetic}

/* the dark panel keeps the site's .slab; the art gets its frame. Scoped to .bs so
   the older dark panels on other pages keep their own spacing. */
.bs .slab .copy{padding-block:var(--s7)}
.bs .slab .art{position:relative}
.bs .slab .art>canvas{position:absolute;inset:0;width:100%;height:100%}
.bs .slab .copy > *{text-box:trim-both cap alphabetic}
.bs .slab .bs-kick{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-dark-soft);margin-bottom:var(--s4)}
.bs .slab .rubric{margin-bottom:var(--s3)}
.bs .slab .stamp{margin-top:var(--s4)}
.bs .slab .dek{margin-top:var(--s4)}
/* no word left alone on a line of the slab headline */
.bs .slab h2{text-wrap:balance}
/* The Broadside's Feature sets its words inside the panel on a phone, as the
   approved mock does. */
@media(max-width:819px){.bs .slab .copy{padding-inline:var(--s6)}}

/* ---- a phone: only a lead keeps a full-width picture. Everything else is a
   row, words left on two thirds and the art right on one ---- */
@media(max-width:680px){
  .t-xl h3{font-size:2.05rem}
  .bs-row,.bs-river .bs-it.bs-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);column-gap:var(--s4);align-items:start}
  .bs-row .art{grid-column:2;grid-row:1;aspect-ratio:1/1!important;flex:none!important}
  .bs-row .bs-txt{grid-column:1;grid-row:1;margin-top:0!important;align-self:stretch}
  .bs-row h3{font-size:1.1rem}
  /* every piece keeps its dek on a phone, one step smaller than on a desktop; the
     lead and the pull line keep their own sizes */
  .bs-it:not(.bs-quote):not(.t-xl) .dek{font-size:13px;line-height:1.45}
  .bs-pkg .small .art{display:none}
  .bs-pkg .small .art + .bs-txt{margin-top:0}
  /* with the pictures gone the two smalls are a list of headlines: hairline between */
  .bs-pkg .bs-stack > * + *{border-top:1px solid var(--rule);margin-top:var(--bs-half);padding-top:var(--bs-half)}
  .bs-pkg-body{row-gap:0}
  .bs-pkg-body > .bs-stack{border-top:1px solid var(--rule);margin-top:var(--bs-half);padding-top:var(--bs-half)}
  /* every section on a phone opens on its own picture, like a magazine page */
  .bs-pkg .big .art{aspect-ratio:2/1;flex:none}
  .bs-pkg .bs-head p{display:none}
  .bs-lede .bs-n{display:none}
  /* the link stays on the title's line: "All", right-aligned, on every head */
  .bs-all-x{display:none}
  .bs-head p{flex-basis:100%;order:3}
  .bs-quote .dek{font-size:1.3rem}
  /* stacked, blocks are parted by the gutter; only lists of headlines keep a hairline */
  .bs-mosaic > .bs-quote{padding:var(--s5)}
  /* stacked rows are one list: a half-gap hairline between each, lead to
     headlines, headlines to mosaic, mosaic rows to each other. The tinted
     quote panel stays unruled; the piece after it takes the hairline. */
  .bs-top{row-gap:0}
  .bs-top > .bs-stack{border-top:1px solid var(--rule);margin-top:var(--bs-half);padding-top:var(--bs-half)}
  .bs-mosaic{row-gap:0;margin-top:var(--bs-half)}
  .bs-mosaic > .m-a{border-top:1px solid var(--rule);padding-top:var(--bs-half)}
  .bs-mosaic > .m-q{margin-top:var(--bs-gut)}
  .bs-mosaic > .m-c{border-top:1px solid var(--rule);margin-top:var(--bs-half);padding-top:var(--bs-half)}
  /* the slab headline one step down, so it balances into two lines, never three */
  .bs .slab h2{font-size:1.55rem}
  .bs-head{margin-bottom:var(--s5)}
}

/* the practice promo is a module like any other: one ink rule opens it, none closes it */
.bs .promo{border-block:0;padding-top:0}
/* drawn on its .wrap, so it runs the same width as every .bs-mod rule at every width */
.bs .promo > .wrap{border-top:2px solid var(--rule-ink);padding-top:var(--flow)}

/* ---- what the approved mock-up left for the build ---------------------------- */

/* An uploaded banner image fills the same frame the canvas would, cut to it. */
.bs-it .art>img,.bs .slab .art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* On a phone the dark panel stacks with its picture on top, in a 16:10 frame. The frame
   holds nothing in the flow, since the picture is laid over it, so its height came from
   aspect-ratio alone while the grid stretched it to its row, and Safari on an iPhone gave
   that frame no height at all: the picture never showed there, though it did on Android.
   The frame now takes its height from its own width through its bottom padding, which
   every browser has measured the same way for years. The same 16:10, the same picture. */
@media(max-width:819px){.bs .slab .art{aspect-ratio:auto;height:0;padding-bottom:62.5%}}
/* No headline ends on a word alone. pretty lets a long last word stand alone
   ("The Arithmetic of / Apology"), so headlines are balanced instead: their lines
   come out near one length, which never leaves one word under a full line. */
.bs-it h3{text-wrap:balance}

/* The Front with fewer than nine pieces. With three or four headlines the column
   of headlines sets the lead's height, as in the mock-up. One or two would leave
   the column half empty, so they carry art (idz_bs_top()), and it is the other way
   round: the lead's picture keeps a fixed shape and the art in the column takes
   what height is left, so both columns still end on one line. With none, the lead
   reads across the page, its picture on eight columns and its words on four. */
@media(min-width:1000px){
  /* three headlines are shorter than four, and the lead's picture must still end
     on their line, so it may be flatter than the 300px floor four allow */
  .bs-top--3 .bs-lead .art{min-height:200px}
  .bs-top--1 .bs-lead .art{aspect-ratio:16/9;flex:none;min-height:0}
  .bs-top--2 .bs-lead .art{aspect-ratio:3/2;flex:none;min-height:0}
  .bs-top > .bs-stack:has(> .bs-fill){align-self:stretch}
  .bs-top .bs-stack > .bs-fill{flex:1 1 0}
  .bs-top .bs-fill .art{aspect-ratio:auto;flex:1 1 0;min-height:0}
  /* pieces with art are parted by the gutter alone, as the package's smalls are */
  .bs-top .bs-stack > .bs-fill + .bs-fill{border-top:0;padding-top:0;margin-top:var(--bs-gut)}
  .bs-top--0 > .bs-lead{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--bs-gut);align-items:end}
  .bs-top--0 > .bs-lead .art{grid-column:1 / span 8;aspect-ratio:16/9;flex:none;min-height:0}
  .bs-top--0 > .bs-lead .bs-txt{grid-column:9 / -1;margin-top:0}
}
@media(min-width:681px) and (max-width:999px){
  .bs-top--1 > .bs-stack{grid-template-columns:minmax(0,1fr)}
  .bs-top .bs-fill .art{aspect-ratio:16/9}
}
/* The row under it, laid out for what it holds (idz_bs_second_row()). The picture
   story fills the row's height only when two pieces with square art set that
   height (the full row); otherwise it keeps its 16:9 and the pull line stretches
   to the row, its words centred in the tint. */
@media(min-width:1000px){
  .bs-mosaic--2q > .m-a,.bs-mosaic--4 > .m-a,.bs-mosaic--3 > .m-a,.bs-mosaic--2 > .m-a{grid-column:1 / span 7}
  .bs-mosaic--2q > .m-q{grid-column:8 / -1}
  .bs-mosaic--4 > .m-c,.bs-mosaic--3 > .m-c,.bs-mosaic--2 > .m-c{grid-column:8 / -1}
  .bs-mosaic:not(.bs-mosaic--4q) .m-a .art{aspect-ratio:16/9;flex:none;min-height:0}
  /* With two pieces the panel takes the story's height, so the story is set lower
     and the pull line larger to fill the panel. It follows the rule above, which it
     matches in weight, so that it wins. */
  .bs-mosaic.bs-mosaic--2q .m-a .art{aspect-ratio:21/9}
  .bs-mosaic--2q .bs-quote .dek{font-size:clamp(1.75rem,2.6vw,2.3rem)}
  /* A column holding one piece with art stands it upright, its art taking the
     row's spare height, so that column too ends on the row's foot. */
  .bs-mosaic--3q > .m-c,.bs-mosaic--2 > .m-c{align-self:stretch}
  .bs-mosaic--3q .m-c > .bs-side,.bs-mosaic--2 .m-c > .bs-side{display:flex;flex-direction:column;align-items:stretch;flex:1 1 0}
  .bs-mosaic--3q .m-c > .bs-side .art,.bs-mosaic--2 .m-c > .bs-side .art{aspect-ratio:auto;flex:1 1 0;min-height:0}
  .bs-mosaic--3q .m-c > .bs-side .art + .bs-txt,.bs-mosaic--2 .m-c > .bs-side .art + .bs-txt{margin-top:var(--gap-tight)}
}
/* One piece: a picture story across the row, its art on seven columns. */
@media(min-width:681px){
  .bs-mosaic--1{grid-template-columns:repeat(12,minmax(0,1fr))}
  .bs-mosaic--1 > .m-a{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;align-items:end}
  .bs-mosaic--1 > .m-a .art{grid-column:1 / span 7;aspect-ratio:16/9!important;flex:none!important;min-height:0}
  .bs-mosaic--1 > .m-a .bs-txt{grid-column:8 / -1;margin-top:0}
}
@media(min-width:681px) and (max-width:999px){
  .bs-mosaic--2 > .m-c{grid-column:auto;display:flex}
  /* Three pieces: the picture story takes the left column, and the pull line with
     the one piece with square art under it takes the right. That piece keeps the
     size the full row gives each of its two (a column wide, art on two fifths),
     and the picture story's art takes whatever height the right column sets, so
     both columns end on one line and no space is left under anything. */
  .bs-mosaic--3q{grid-template-rows:1fr auto}
  .bs-mosaic--3q > .m-a{grid-column:1;grid-row:1 / span 2}
  .bs-mosaic--3q > .m-a .art{flex:1 0 auto}
  .bs-mosaic--3q > .m-q{grid-column:2;grid-row:1}
  .bs-mosaic--3q > .m-c{grid-column:2;grid-row:2;display:flex}
}

/* The Lede and Most Read hold one to five: a row of as many as there are. */
@media(min-width:1000px){
  .bs-lede--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bs-lede--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bs-lede--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bs-lede--1{grid-template-columns:minmax(0,1fr)}
}
@media(min-width:681px) and (max-width:999px){
  .bs-lede--4,.bs-lede--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bs-lede--4 > :nth-child(n+4){border-top:0;margin-top:0;padding-top:0}
  .bs-lede--4 > :nth-child(n+3){border-top:1px solid var(--rule);margin-top:var(--bs-half);padding-top:var(--bs-half)}
  .bs-lede--1{grid-template-columns:minmax(0,1fr)}
}

/* A package with one piece is that piece; a band with one package runs the width. */
.bs-pkg--1 .bs-pkg-body{grid-template-columns:minmax(0,1fr)}
@media(min-width:1000px){
  .bs-pkgs--1{grid-template-columns:minmax(0,1fr)}
  .bs-pkgs--1 .bs-pkg-body{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .bs-pkgs--1 .bs-pkg--1 .bs-pkg-body{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .bs-pkgs--1 .bs-pkg--1 .big{display:contents}
  .bs-pkgs--1 .bs-pkg--1 .big .bs-txt{align-self:end}
}

/* The close of a section page without Most Read (idz_bs_block_latest()): Latest
   runs the width in two columns, a hairline between its rows. */
@media(min-width:1000px){
  .bs-close--latest > .bs-riv{grid-column:1 / -1}
  .bs-close--latest .bs-river{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--bs-gut)}
  .bs-close--latest .bs-river > *{border-top:0;margin-top:0;padding-top:0}
  .bs-close--latest .bs-river > :nth-child(n+3){border-top:1px solid var(--rule);margin-top:var(--bs-half);padding-top:var(--bs-half)}
  /* one piece takes the whole row; three stand in three columns, each picture
     over its words, so no cell is ever left empty */
  .bs-close--latest .bs-river--1{grid-template-columns:minmax(0,1fr)}
  .bs-close--latest .bs-river--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bs-close--latest .bs-river--3 > :nth-child(n+3){border-top:0;margin-top:0;padding-top:0}
  .bs-close--latest .bs-river--3 .bs-it{display:flex;flex-direction:column;align-items:stretch}
  .bs-close--latest .bs-river--3 .art + .bs-txt{margin-top:var(--gap-tight)}
}
/* A module that holds only the button to page two: the rule, --s6, the button. */
.bs-mod--more > .bs-more{margin-top:0}

/* ---- The slash ----------------------------------------------------------------
   The owner's change: the slash is drawn in the Free to read badge's colour (its
   background, --accent) and centred on the heading's own words, not on the page
   and not at the words' start. It sits inside the h2 (idz_bs_mark()), taken out
   of the flow and centred on the h2's box, less half the letter-spacing the last
   letter carries after it, which is room and not ink. The head keeps the room
   above the title that the slash's own row gave it in the mock-up: 19px of slash,
   then --s3, then the .155 of the title size the live heading's leading adds. */
.bs-head--mark{padding-top:calc(19px + var(--s3) + .155 * clamp(1rem,1.45vw,1.28rem))}
.bs-head h2{position:relative}
.bs-mark{position:absolute;left:calc(50% - .07em);bottom:calc(100% + var(--s3) + .155 * clamp(1rem,1.45vw,1.28rem));
  transform:translateX(-50%);display:block;line-height:0;text-box:normal}
.bs-mark svg{display:block;height:19px;width:auto;color:var(--accent)}
/* The same two changes on every other heading that carries the slash (a band head,
   .hdr, on the archive, search, 404 and older front blocks). The heading is
   centred with its trailing letter-spacing, which put its words .1em left of the
   slash; the same room on the left puts them back under it. */
.hdr .mark svg{color:var(--accent)}
.hdr .mark + h2{padding-left:.2em}

/* ---- The Free to read badge ----------------------------------------------------
   The owner's change: the words sit in the exact middle of the badge, measured in
   rendered pixels at every pixel density. Three things make that hold wherever the
   badge falls on a page:
   1. The box is a whole number of pixels, 25 tall (28 at the head of a piece) and at
      least 116 wide (135), so its two edges always land on the pixel grid alike.
      The widths are the words' own width rounded up, so the words are centred in
      the fraction left over and are never cut.
   2. Down, the line fills the box (the height less the border), which sets the
      capitals' top and the baseline the same distance from the edges, to within
      half a pixel on a 2x or 3x screen. It uses no text-box trim, which Firefox
      lacks, so no browser needs a fallback.
   3. The badge is drawn as one layer, placed on a whole device pixel, so the words
      and the box move together; otherwise a badge starting part way into a pixel
      had its box snapped one way and its words another.
   Across, the last letter carries its .2em of letter-spacing after it, which is
   room and not ink, so the right padding gives .18em of it back. */
.idz-free{box-sizing:border-box;height:25px;min-width:116px;line-height:23px;padding:0 calc(9px - .18em) 0 9px;
  text-align:center;text-box:normal;will-change:transform}
.p-head .idz-free{height:28px;min-width:135px;line-height:26px;padding:0 calc(14px - .18em) 0 14px}
/* In a numbered list it is words on the reading-time line, not a badge. */
.bs-nums .idz-free{height:auto;min-width:0;padding:0;text-align:inherit;will-change:auto}

/* A filled advert carries its picture to the edges of the block, and the hairline this
   file draws across the top of a promo's wrap was landing on the photograph. The rule
   belongs here rather than in site.css, because this is the file that draws it and the
   file that loads last. */
.bs .promo.idz-blk-fill > .wrap{border-top:0}

/* ---- a section's front: three pieces beside the lead, each with its picture on the
   right of its words, the words nearest the lead (idz_bs_block_section_front()).
   A phone draws every one as a .bs-row, words left and art right, as it draws the
   rest, so these rules start where that one stops. ---- */
@media(min-width:681px){
  .bs-side--r{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
  .bs-side--r .art{grid-column:2;grid-row:1}
  .bs-side--r .bs-txt{grid-column:1;grid-row:1}
}
@media(min-width:1000px){
  /* three pieces with pictures stand taller than three headlines, so the lead's
     picture keeps the floor four headlines give it, and ends on their line */
  .bs-top--side.bs-top--3 .bs-lead .art{min-height:300px}
}
/* The row under a section's front prints the pull line before the picture story
   (idz_bs_second_row() with quote_first): the tinted panel on the left of the row,
   the story on the right, and the panel first when a phone stacks them. The phone
   keeps the rhythm above: a gutter around the tinted panel, and the story after it
   takes the hairline, half a gutter under the panel and half above its words. */
@media(min-width:1000px){
  .bs-mosaic--2q.bs-mosaic--qfirst > .m-q{grid-column:1 / span 5}
  .bs-mosaic--2q.bs-mosaic--qfirst > .m-a{grid-column:6 / -1}
}
@media(max-width:680px){
  .bs-mosaic--qfirst > .m-q{margin-top:var(--bs-half)}
  .bs-mosaic--qfirst > .m-a{margin-top:var(--bs-half)}
}
/* On a tablet a section's front is one grid of two columns, the wrappers dissolved
   (display:contents), so the pull line drops into the cell beside the third piece and
   the picture story runs the full row, its art on seven columns and its words on five,
   as a lone story does. The gutter parts the rows, so the hairline the two-column
   headline stack drew above its third piece is not drawn here. With no pull line the
   third piece runs the full row itself, its picture kept to a fifth of it. */
@media(min-width:681px) and (max-width:999px){
  .bs-mod--sf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--bs-gut);row-gap:var(--bs-gut)}
  .bs-mod--sf > .bs-top--side,.bs-mod--sf > .bs-top--side > .bs-stack,.bs-mod--sf > .bs-mosaic{display:contents}
  .bs-mod--sf .bs-lead{grid-column:1 / -1}
  .bs-mod--sf .bs-top > .bs-stack > :nth-child(n+3){border-top:0;margin-top:0;padding-top:0}
  .bs-mod--sf .bs-mosaic > .m-a{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--bs-gut);align-items:end}
  .bs-mod--sf .bs-mosaic > .m-a .art{grid-column:1 / span 7;aspect-ratio:16/9!important;flex:none!important;min-height:0}
  .bs-mod--sf .bs-mosaic > .m-a .bs-txt{grid-column:8 / -1;margin-top:0}
  .bs-mod--sf:not(:has(.m-q)) .bs-top > .bs-stack > :nth-child(3){grid-column:1 / -1;grid-template-columns:minmax(0,4fr) minmax(0,1fr)}
  /* two pieces under the lead and neither with a pull line: the second stands under
     the story and runs the full row too, its picture a fifth of it, on the left */
  .bs-mod--sf .bs-mosaic--2 > .m-c{grid-column:1 / -1;display:flex}
  .bs-mod--sf .bs-mosaic--2 > .m-c > .bs-side{flex:1 1 auto;grid-template-columns:minmax(0,1fr) minmax(0,4fr)}
}