/* ==========================================================================
   Courant van Lazia — front page, overhauled
   --------------------------------------------------------------------------
   Loaded AFTER cvl.css and scoped to .front-page, so nothing here can reach an
   article page. Delete the link and the old front returns untouched.

   THE PROBLEM. Twelve identical grid-3 rows: every story the same size,
   nothing leading, and a sidebar running the full height as a separate column
   that never belongs to anything beside it.

   SEMAFOR CROSSED WITH THE GUARDIAN, plus one idea from The Verge.

   1. FROM THE GUARDIAN — the structure. A dominant lead with words left and a
      tall picture right; related links ranged beneath; section bands of
      sharply unequal sizes; a features band of full-bleed pictures with the
      words laid over them.

   2. FROM SEMAFOR — the dividing. Columns are ruled with DASHES, not solid
      lines, and one band is a "river" of four short text-forward items with no
      pictures at all. Dashes read as one sheet folded; solid rules read as
      separate boxes butted together. That single choice is most of why the
      page reads as a whole rather than as tiles.

   3. FROM THE VERGE — only the rail. One narrow column running the entire page
      height, part of the page grid rather than parked beside it.

   Horizontals stay hairline-solid (Guardian); verticals and band closes are
   dashed (Semafor). Keeping those two jobs distinct is what stops the page
   looking like a spreadsheet.
   ========================================================================== */

.front-page{
  --rail-w: 352px;          /* semafor-rail.html uses exactly this */
  --hair: var(--border, #d8c9b6);
  --frule: var(--ink, #1c1a17);
  --accent: var(--primary, #b02d2a);
  --dek: var(--muted, #6f665c);

  /* The shell IS the grid: main column, then the feed rail. Semafor sets
     minmax(0,1fr) 352px and lets the rail run the whole page. min-width:0 on
     both children is load-bearing -- without it a long headline in either
     column blows the track out and the grid stops honouring the widths. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail-w);
  align-items: start;
  max-width: var(--maxw, 1440px);
  margin: 0 auto;
  padding: 32px 16px 80px;
}
.front-page .col-main{
  min-width: 0;
  padding-right: clamp(20px, 2.6vw, 38px);
}

/* --------------------------------------------------------- the feed rail */
/* Semafor's rail: a second grid column, dashed left rule, made of stacked
   .feed-module blocks with dashed bottoms. Not a floating box -- a column of
   the page that happens to carry shorter things. */
.front-page .feed{
  min-width: 0;
  padding-left: clamp(20px, 2.6vw, 38px);
  border-left: 1px dashed var(--hair);
  /* Stretch even though the grid aligns to start: Semafor's feed is endless so
     its rule always reaches the foot of the page. Ours runs out of content, and
     a dashed rule stopping two-thirds down reads as an unfinished column rather
     than a deliberate one. The modules still sit at the top. */
  align-self: stretch;
}
.front-page .feed-module{
  padding: 22px 0;
  border-bottom: 1px dashed var(--hair);
}
.front-page .feed-module:first-child{ padding-top: 0; }
.front-page .feed-module:last-child{ border-bottom: 0; }

/* the glance, which in this layout belongs to the rail */
.front-page .glance-mod{ padding-bottom: 20px; }
/* head is a row: title left, the mark ranged right, as Semafor sets it */
.front-page .glance-head{
  /* title left, map ranged right, baselines aligned at the top -- Semafor's
     arrangement, with the map given more width than theirs because it carries
     markers rather than decoration */
  /* Not a flex row any more. Side by side, the heading at full size and the
     map at 170px need more than the rail's 314px, so the map is taken out of
     the flow and the heading is allowed to run beneath its left edge -- which
     is empty ocean on a sinusoidal projection and was carrying nothing. The
     min-height stands in for the map's, since an absolute element contributes
     none and the list below would otherwise ride up over it. */
  position: relative;
  min-height: 92px;
  padding-top: 14px; border-top: 2px solid var(--frule);
  margin-bottom: 18px;
}
.front-page .globe-art{
  /* 170px. Semafor's is 86, but theirs is ornament and this carries seven
     markers in three clusters, which need the width to stay countable. The
     rail's inner measure is 314px, so the heading takes what is left. */
  width: 170px; height: auto; display: block;
  position: absolute; right: 0; top: 12px;
  opacity: .95;
}
.front-page .glance-head h2{
  font-family: var(--f-head, 'Instrument Serif', Georgia, serif);
  /* Back to full size, and sitting above the map rather than beside it. */
  font-size: 22px; line-height: 1.1; margin: 0;
  position: relative; z-index: 1;
}
.front-page .glance{ list-style: none; margin: 0; padding: 0; counter-reset: g; }
.front-page .glance li{
  counter-increment: g; position: relative; padding-left: 26px;
  font-family: var(--f-body, Calluna, Georgia, serif);
  /* Prose now, not headlines: a shade smaller and opened up, because these run
     to three lines each and a 1.46 headline leading is too tight to read as a
     sentence. */
  font-size: 14.5px; line-height: 1.52; margin-bottom: 18px;
}
.front-page .glance li::before{
  content: counter(g); position: absolute; left: 0; top: 1px;
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 11px; font-weight: 700; color: var(--accent);
  width: 17px; height: 17px; line-height: 17px; text-align: center;
  border: 1px solid var(--hair); border-radius: 50%;
}
/* The link is a phrase inside the sentence, not the whole line, so it cannot
   be recoloured -- a red clause in the middle of a sentence stops the sentence
   reading as one. It is weighted and underlined instead, and takes the accent
   only on hover. */
.front-page .glance a{
  color: inherit; font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-underline-offset: 2px;
}
.front-page .glance a:hover{
  color: var(--accent); text-decoration-color: currentColor;
}

/* two small rail links, on the Guardian's crossword-link pattern: a mark, a
   line of type, and an arrow sitting with the type rather than pushed to the
   far edge -- the arrow belongs to the sentence, not to the row */
.front-page .qlinks{ padding-top: 4px; }
.front-page .qlink{
  display: flex; align-items: center; gap: 11px;
  padding: 9px 0; color: inherit;
  border-bottom: 1px dashed var(--hair);
}
.front-page .qlink:last-child{ border-bottom: 0; }
.front-page .qlink-mark{ flex: 0 0 auto; width: 26px; height: 26px; }
.front-page .qlink-mark svg{ width: 100%; height: 100%; display: block; border-radius: 3px; }
.front-page .qlink-text{
  font-family: var(--f-head, 'Instrument Serif', Georgia, serif);
  font-size: 16px; line-height: 1.2;
}
.front-page .qlink-arrow{ color: var(--accent); }
.front-page .qlink:hover .qlink-text{ text-decoration: underline; text-underline-offset: 3px; }

/* the tab bar, sticky so it stays put as the feed scrolls past */
.front-page .feed-tabs{
  position: sticky; top: 0; z-index: 9;
  background: var(--bg, #fdf6ef);
  display: flex; padding: 16px 0 0;
  border-bottom: 1px dashed var(--hair); margin-bottom: 4px;
}
.front-page .feed-tabs button{
  flex: 1; border: 0; cursor: pointer; background: none;
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 12px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  /* the 12px that used to be the bar's bottom padding lives here instead, so
     the button's bottom edge lands on the bar's rule and the active tab's red
     bar sits on the dashed line rather than floating 12px above it */
  padding: 9px 10px 12px; color: var(--dek);
}
.front-page .feed-tabs button.on{
  color: var(--frule); box-shadow: inset 0 -3px 0 var(--accent);
}
.front-page .feed-tabs button:focus-visible{
  outline: 2px solid var(--accent); outline-offset: -2px;
}

/* the wire */
/* The Latest panel as a stream, on The Verge's sidebar model: three post
   weights down one column. The shared parts sit here; each weight then only
   states what makes it different. */
.front-page .wire{ list-style: none; margin: 0; padding: 0; }
.front-page .wpost{ border-bottom: 1px dashed var(--hair); }
.front-page .wpost:last-child{ border-bottom: 0; }
.front-page .wpost > a{ display: block; padding: 14px 0; }
.front-page .wsrc{
  display: block;
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 10px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 5px;
}
.front-page .wt{
  display: block;
  font-family: var(--f-head, 'Instrument Serif', Georgia, serif);
  font-size: 16.5px; line-height: 1.18;
}
.front-page .wm{
  display: block; margin-top: 6px;
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--dek);
}

/* the light weight: the live sidebar's row, body left and a square thumb right */
.front-page .wpost > a{
  display: grid; grid-template-columns: minmax(0, 1fr) 64px;
  gap: 12px; align-items: start;
}
.front-page .wbody{ display: block; min-width: 0; }
.front-page .wthumb{
  display: block; width: 64px; height: 64px;
  object-fit: cover; border-radius: 4px; background: var(--hair);
}

/* the heavy weight: one column, picture across the rail */
.front-page .wbig > a{ grid-template-columns: minmax(0, 1fr); }
.front-page .wpic{ display: block; margin-bottom: 10px; }
.front-page .wpic img{
  display: block; width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover; border-radius: 4px; background: var(--hair);
}
.front-page .wbig .wt{ font-size: 19px; line-height: 1.14; }

/* The quick post. No border and no rule: it sits flush in the stream with the
   same hairline above and below as every other row, and is told apart by its
   shape -- an avatar and a byline where a headline would be. Boxing it was the
   mistake; a box says the thing came from somewhere else. */
.front-page .wquick{ padding: 16px 0; }
.front-page .qhead{ display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.front-page .qav{
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: var(--frule); color: #fdf6ef;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
.front-page .qwho{ display: block; min-width: 0; }
.front-page .qname{
  display: block;
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent); line-height: 1.2;
}
.front-page .qdate{
  display: block; margin-top: 3px;
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--dek); line-height: 1.2;
}
/* the post runs the full measure, a shade larger than the rows' deks, because
   here the prose IS the item rather than a caption under a headline */
.front-page .qbody{
  margin: 0;
  font-family: var(--f-body, Calluna, Georgia, serif);
  font-size: 15.5px; line-height: 1.46;
}
.front-page .qbody b{ font-weight: 700; }
.front-page .qbody a{
  color: inherit; font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-underline-offset: 2px;
}
.front-page .qbody a:hover{ color: var(--accent); text-decoration-color: currentColor; }

/* the text post: no picture, so the standfirst carries it. One column, and the
   headline steps up because it is the top of the item rather than a caption
   under a picture. */
.front-page .wnote > a{ grid-template-columns: minmax(0, 1fr); }
.front-page .wnote .wt{ font-size: 18px; line-height: 1.16; }
.front-page .wdek{
  display: block; margin-top: 6px;
  font-family: var(--f-body, Calluna, Georgia, serif);
  font-size: 14px; line-height: 1.4; color: var(--dek);
}

/* The art the live site already puts behind this card, here as a band across
   the top instead of a cover background. Behind the whole card the painting
   has to be knocked back under a heavy scrim to keep the type legible, and
   almost nothing of it survives; given its own band it can be seen. */
.front-page .promo{
  display: block; padding: 0;
  background: var(--frule); color: #fdf6ef; border-radius: 3px;
  overflow: hidden;   /* clips the art into the rounded corners */
}
.front-page .promo-art{ display: block; }
.front-page .promo-art img{
  display: block; width: 100%; height: 122px;
  object-fit: cover;
  /* the cross sits above the middle of the painting; a straight centre crop
     takes the sky and loses the top arm */
  object-position: center 44%;
}
.front-page .promo-body{ display: block; padding: 13px 17px 17px; }
.front-page .promo-lede{
  font-family: var(--f-head, 'Instrument Serif', Georgia, serif);
  font-size: 19px; line-height: 1.14; margin: 0 0 9px;
}
/* stacked, faintly underlined, brightening on hover -- the same treatment the
   live site gives the two links in this slot */
.front-page .promo-links{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.front-page .promo-links a{
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 12px; font-weight: 600; color: #fdf6ef;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(253, 246, 239, .5);
}
.front-page .promo-links a:hover{ text-decoration-color: currentColor; }

/* Load more, under the second batch. Full width and quiet -- it is a way to
   keep reading, not a call to action. */
.front-page .moremod .wire{ margin-bottom: 4px; }
.front-page .wire-more li[hidden]{ display: none; }
.front-page .morebtn{
  display: block; width: 100%; margin-top: 14px;
  border: 1px solid var(--frule); border-radius: 3px;
  background: none; cursor: pointer; padding: 11px 14px;
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 12px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--frule);
  transition: background .12s, color .12s;
}
.front-page .morebtn:hover{ background: var(--frule); color: var(--bg, #fdf6ef); }
.front-page .morebtn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------ shared module head */
.front-page .rmod-head{
  font-family: var(--f-head, 'Instrument Serif', Georgia, serif);
  font-size: 22px; margin: 0 0 6px;
  padding-top: 14px; border-top: 2px solid var(--frule);
}
/* the heading IS the control, so the hit target is the whole width rather than
   a small chevron a reader has to aim at */
.front-page .acc{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.front-page .acc:hover .accmark{ border-color: var(--accent); }
.front-page .acc:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
.front-page .accmark{
  flex: 0 0 auto; width: 9px; height: 9px; margin: -4px 3px 0 0;
  border-right: 1.5px solid var(--dek); border-bottom: 1.5px solid var(--dek);
  transform: rotate(45deg); transition: transform .16s, border-color .12s;
}
.front-page .acc[aria-expanded="false"] .accmark{ transform: rotate(-135deg); margin-top: 3px; }
.front-page .rmod-body[hidden]{ display: none; }
.front-page .rmod-dek{
  font-family: var(--f-body, Calluna, Georgia, serif);
  font-size: 13.5px; line-height: 1.4; color: var(--dek); margin: 0 0 6px;
}

/* --------------------------------------------------------------- alerts */
/* The mail row is semafor-rail.html's: one hairline box split by a rule, the
   button inverting on hover. Stacked here rather than side by side, because at
   313px an email field and a button on one line leave the field too short to
   show an address. */
.front-page .mailrow{
  display: flex; border: 1px solid var(--frule); border-radius: 3px;
  margin-top: 16px; overflow: hidden;
}
.front-page .mailrow input{
  flex: 1; min-width: 0; border: 0; background: none; padding: 11px 12px;
  font-family: var(--f-body, Calluna, Georgia, serif);
  font-size: 14px; color: var(--frule);
}
.front-page .mailrow input:focus{ outline: none; background: rgba(28, 26, 23, .04); }
.front-page .mailrow button{
  border: 0; border-left: 1px solid var(--frule); background: none; cursor: pointer;
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  padding: 11px 15px; color: var(--frule); white-space: nowrap;
  transition: background .12s, color .12s;
}
.front-page .mailrow button:hover{ background: var(--frule); color: var(--bg, #fdf6ef); }
.front-page .notifybtn{
  display: block; width: 100%; margin-top: 9px;
  border: 1px dashed var(--hair); border-radius: 3px;
  background: none; cursor: pointer; padding: 10px 14px;
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--dek);
  transition: border-color .12s, color .12s;
}
.front-page .notifybtn:hover{ border-color: var(--frule); color: var(--frule); }
.front-page .rmod-note{
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 11px; line-height: 1.4; color: var(--dek); margin: 9px 0 0;
}

/* ------------------------------------------------------ clocks and weather */
/* Nothing here draws the chip. .header-clock-chip, .clock, .clock-ticks, .hand,
   .clock-meta, .clock-city, .clock-line and .weather are all the base sheet's,
   untouched, so these are the masthead's clock exactly. This only stacks them
   and undoes the base sheet's rule that hides the chip below 767px, which is
   right for a masthead crowded on a phone and wrong for a list that is the
   whole point of its own module. */
.front-page .wxlist{ display: flex; flex-direction: column; }
.front-page .wxlist .header-clock-chip{
  display: flex; justify-content: flex-start;
  padding: 11px 0; border-bottom: 1px dashed var(--hair);
}
/* The base sheet ranges the chip's text right, which is correct for a single
   clock pinned to the right edge of the masthead and wrong for a stacked list:
   eight cities of different name lengths give eight different left edges and
   nothing to read down. */
.front-page .wxlist .clock-meta{ text-align: left; }
.front-page .wxlist .clock-line{ justify-content: flex-start; }
.front-page .wxlist .header-clock-chip:last-child{ border-bottom: 0; }

/* The Custom picker, on the briefing-checkbox pattern from the email block in
   semafor-rail.html, brought down to a 313px rail: theirs sets the name at 21px
   and the blurb at 15.5px, which at this width would run the blurb to four
   lines a row. */
.front-page .picked{
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--dek); text-align: center; margin: 2px 0 4px;
}
.front-page .optrow{
  display: grid; grid-template-columns: 17px minmax(0, 1fr); gap: 11px;
  align-items: start; padding: 13px 0;
  border-top: 1px dashed var(--hair); cursor: pointer;
}
.front-page .optrow input{
  width: 16px; height: 16px; margin: 4px 0 0; accent-color: var(--accent);
}
.front-page .bwrap{ display: block; min-width: 0; }
.front-page .optrow b{
  display: block; font-weight: 400;
  font-family: var(--f-head, 'Instrument Serif', Georgia, serif);
  font-size: 18px; line-height: 1.15;
}
.front-page .optrow .bd{
  display: block; font-size: 13.5px; line-height: 1.36;
  color: var(--dek); margin-top: 3px;
}
.front-page .optrow small{
  display: block; margin-top: 5px;
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent);
}
/* the picker's second group: what the clock module shows, and whether it shows */
.front-page .pgroup{ margin-top: 22px; }
.front-page .pgroup-head{
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--dek);
  margin: 0 0 2px; padding-top: 14px; border-top: 1px solid var(--frule);
}
.front-page .cityopts{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}
.front-page .cityopts label{
  display: flex; align-items: center; gap: 8px; cursor: pointer; min-width: 0;
  font-family: var(--f-body, Calluna, Georgia, serif); font-size: 13.5px;
}
.front-page .cityopts input{
  width: 14px; height: 14px; flex: 0 0 auto; accent-color: var(--accent);
}
.front-page .cityopts span{ min-width: 0; overflow-wrap: anywhere; }

/* the group heading in the picker -- the paper's kicker, which is the mark it
   already uses everywhere for "what follows belongs to this" */
.front-page .cityopt-group + .cityopt-group{ margin-top: 12px; }
.front-page .cityopt-group[hidden]{ display: none; }
.front-page .cityopt-head{
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 9.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent);
  margin: 0 0 7px;
}
.front-page .cityopts-all{ margin-top: 12px; }
/* switched off at the master, every group stays legible but stops inviting clicks */
.front-page .cityopts-all.off{ opacity: .4; }
.front-page .cityopts-all.off label{ cursor: default; }

/* the cross beside an added place */
.front-page .cityopts li.added{ position: relative; padding-right: 20px; }
.front-page .dropcity{
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  border: 0; background: none; cursor: pointer; padding: 0;
  width: 18px; height: 18px; line-height: 1;
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 15px; color: var(--dek);
}
.front-page .dropcity:hover{ color: var(--accent); }
.front-page .dropcity:focus-visible{
  outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 2px;
}

/* the add-a-place row, on the alerts mail row's box so the two read as one
   pattern rather than two kinds of input */
.front-page .addcity{ margin-top: 14px; }
.front-page .addcity .mailrow{ margin-top: 0; }
.front-page .addcity button:disabled{ opacity: .4; cursor: default; }
.front-page .addcity button:disabled:hover{ background: none; color: var(--frule); }

/* a chip hidden by the picker: .header-clock-chip sets display:flex, which the
   hidden attribute alone cannot beat */
.front-page .wxlist .header-clock-chip[hidden]{ display: none; }
.front-page .wxmod[hidden]{ display: none; }

/* Apply. Semafor's sign-up button in the same block is a bordered box that
   inverts on hover; this is that, in the paper's ink and full width, since it
   closes the panel's one column rather than sitting beside a field. */
.front-page .applybtn{
  display: block; width: 100%; margin-top: 16px;
  border: 1px solid var(--frule); border-radius: 3px;
  background: none; cursor: pointer; padding: 11px 14px;
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 12px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--frule);
  transition: background .12s, color .12s;
}
.front-page .applybtn:hover:not(:disabled){
  background: var(--frule); color: var(--bg, #fdf6ef);
}
.front-page .applybtn:disabled{ opacity: .34; cursor: default; }
.front-page .applybtn:focus-visible{
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* not yet available: the row still says what it will be, but it cannot be
   ticked and does not pretend otherwise */
.front-page .optrow.is-soon{ cursor: default; }
.front-page .optrow.is-soon b,
.front-page .optrow.is-soon .bd{ opacity: .45; }
.front-page .optrow.is-soon input{ cursor: default; }
.front-page .optrow .soon{
  display: inline-block; margin-top: 6px;
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 9.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--dek);
  border: 1px dashed var(--hair); border-radius: 3px; padding: 2px 6px;
}

/* a ticked row is the one that is doing something; an unticked one steps back */
.front-page .optrow:not(:has(:checked)) b,
.front-page .optrow:not(:has(:checked)) small{ color: var(--dek); }

/* ------------------------------------------------------------- shared */
.front-page .k{
  display: block;
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 7px;
}
.front-page .dek{
  font-family: var(--f-body, Calluna, Georgia, serif);
  color: var(--dek); font-size: 15.5px; line-height: 1.45; margin: 7px 0 0;
}
.front-page h3{
  font-family: var(--f-head, 'Instrument Serif', Georgia, serif);
  font-weight: 400; margin: 0; letter-spacing: -.005em;
}
.front-page a{ color: inherit; text-decoration: none; }
.front-page h3 a:hover{ text-decoration: underline; text-underline-offset: 3px; }
.front-page .pic{ display: block; overflow: hidden; }
.front-page .pic img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* .sr-only stays: the alerts mail row labels its field with it. */
.front-page .sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------- the block under the lead */
/* One story carrying a picture, three stacked beside it, both halves ending on
   the same line. They are grid children, so the shorter half is stretched to
   the taller one either way -- the work is in making sure that stretch lands
   somewhere it cannot be seen. */
.front-page .subrow{
  /* set off from the lead above by a rule and room on either side of it */
  margin-top: clamp(30px, 3.4vw, 46px);
  padding-top: clamp(24px, 2.8vw, 36px);
  border-top: 1px dotted var(--hair);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 336px);
  gap: clamp(22px, 2.6vw, 40px);
  align-items: stretch;
}

/* the picture half: words over a picture that takes whatever height is left */
.front-page .sub-lead{
  min-width: 0; display: flex; flex-direction: column;
}
.front-page .sub-words{ text-align: center; }
.front-page .sub-lead h3{
  font-family: var(--f-head, 'Instrument Serif', Georgia, serif);
  font-weight: 700; font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.1; margin: 0;
}
.front-page .sub-lead .dek{
  font-size: 15px; margin: 10px auto 0; max-width: 34em;
}
.front-page .sub-pic{
  display: block; margin-bottom: clamp(13px, 1.5vw, 18px);
  /* Basis zero, so the picture takes what is left rather than asking for a
     height of its own. On auto it was claiming the placeholder's own intrinsic
     height, which made this column the taller of the two and left the three
     beside it spreading 138px of slack between them. */
  flex: 1 1 0; min-height: 150px;
}
.front-page .sub-pic img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* the stack: three of them, spread so the last one finishes with the picture */
.front-page .sub-side{
  min-width: 0; display: flex; flex-direction: column;
  justify-content: space-between;
}
.front-page .side-item{ display: block; color: inherit; padding: 14px 0; }
.front-page .side-item + .side-item{ border-top: 1px dashed var(--hair); }
.front-page .sub-side .side-item:first-child{ padding-top: 0; }
.front-page .sub-side .side-item:last-child{ padding-bottom: 0; }
.front-page .side-item h3{
  font-family: var(--f-head, 'Instrument Serif', Georgia, serif);
  font-weight: 700; font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.14; margin: 0;
}
.front-page .side-item .dek{ font-size: 14.5px; margin-top: 8px; }
.front-page .side-item:hover h3{ text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- In focus */
/* ProPublica's big-story block: the piece on the left, a picture, and the trail
   of what came before and after it on the right. Theirs runs on a black ground
   because their whole site does; on this paper's cream it keeps the shape and
   drops the ground, which is the part that was theirs rather than the form's. */
.front-page .focus-list{ display: grid; }
.front-page .focus{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 290px) minmax(0, 250px);
  gap: clamp(20px, 2.4vw, 34px);
  padding: clamp(24px, 2.8vw, 34px) 0;
  border-top: 1px solid var(--hair);
}
.front-page .focus-list .focus:first-child{ border-top: 0; padding-top: 4px; }
/* the lead runs two columns and keeps its trail under the words, where there is
   room to set it against a rule */
.front-page .focus-lead{ grid-template-columns: minmax(0, 1fr) minmax(0, 46%); }
.front-page .focus-words{ min-width: 0; }
.front-page .focus h3{
  font-family: var(--f-head, 'Instrument Serif', Georgia, serif);
  font-weight: 700; font-size: clamp(21px, 2vw, 27px);
  line-height: 1.1; margin: 0;
}
.front-page .focus-lead h3{ font-size: clamp(24px, 2.4vw, 33px); }
.front-page .focus .dek{ font-size: 15px; margin-top: 12px; max-width: 42em; }

.front-page .focus-pic{ margin: 0; min-width: 0; }
.front-page .focus-pic img{
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  background: var(--hair);
}
.front-page .focus-lead .focus-pic img{ aspect-ratio: 5 / 4; }
.front-page .focus-pic figcaption{
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--dek); margin-top: 7px;
}

/* The trail, on the Guardian's form: how old the piece is, a hairline, then a
   tag in the accent running straight into the sentence. A coloured word before
   a headline is something this paper does on every other band; icons and bold
   "Impact:" labels were a second vocabulary it does not otherwise have. */
.front-page .focus-trail{ min-width: 0; }
.front-page .focus-rel{
  list-style: none; margin: 0; padding: 0; min-width: 0;
}
.front-page .focus-words .focus-rel{ margin-top: clamp(16px, 1.8vw, 24px); }
.front-page .focus-rel li{
  border-top: 1px solid var(--hair); padding: 10px 0;
}
.front-page .focus-rel li:last-child{ padding-bottom: 0; }
.front-page .focus-rel a{
  display: block; color: inherit;
  font-family: var(--f-body, Calluna, Georgia, serif);
  font-size: 15px; line-height: 1.34;
}
.front-page .focus-rel a:hover{ text-decoration: underline; text-underline-offset: 3px; }
/* the mark and the kicker share a line, the headline goes under them */
.front-page .fr-head{
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
}
.front-page .fr-icon{
  width: 13px; height: 13px; flex: 0 0 auto; color: var(--accent);
}
/* .k already carries the paper's kicker; it only has to stop being a block and
   drop its own bottom margin now that the row above owns the spacing */
.front-page .fr-tag{ display: inline; margin-bottom: 0; }

/* ------------------------------------------- the headerless Semafor run */
/* Between the lead and Verify the column runs without section heads, so each
   block has to be told apart by its shape. A rule on top of each does the work
   the headings used to. */
.front-page .band-duo,
.front-page .band-river,
.front-page .band-ops{ padding-top: 26px; }
.front-page .band-duo .band-body,
.front-page .band-river .band-body,
.front-page .band-ops .band-body{
  border-top: 1px dashed var(--hair); padding-top: 26px;
}
.front-page .band-duo .band-body{ border-top: 2px solid var(--frule); }

/* duo: words and picture side by side, centred against each other */
.front-page .duo{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3.4vw, 48px); align-items: center;
}
.front-page .duo-words{ text-align: center; }
.front-page .duo h3{
  font-family: var(--f-head, 'Instrument Serif', Georgia, serif);
  font-size: clamp(24px, 2.3vw, 31px); line-height: 1.08; margin: 6px 0 0;
}
/* held to about 24em: past that the text half stops being a caption and starts
   being a column of prose next to a picture */
.front-page .duo .dek{ max-width: 24em; margin: 14px auto 0; font-size: 16px; }
.front-page .duo .k{ display: block; }
.front-page .duo .d-pic{ display: block; }
.front-page .duo .d-pic img{
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  background: var(--hair);
}

/* river: four across, words first and the picture under them */
.front-page .rvc h3{
  font-family: var(--f-head, 'Instrument Serif', Georgia, serif);
  font-size: 18px; line-height: 1.16; margin: 5px 0 0;
}
.front-page .rvc .dek{ font-size: 14px; margin-top: 7px; }
.front-page .rvc .rv-pic{ display: block; margin-top: 14px; }
.front-page .rvc .rv-pic img{
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block;
  background: var(--hair);
}

/* opinions: two views side by side, each with a face and a name under it */
.front-page .opinions{ display: grid; grid-template-columns: 1fr 1fr; }
.front-page .op{ padding-inline: clamp(20px, 2.6vw, 38px); }
.front-page .op:first-child{ padding-left: 0; }
.front-page .op:last-child{ padding-right: 0; border-left: 1px dashed var(--hair); }
.front-page .op h3{
  font-family: var(--f-head, 'Instrument Serif', Georgia, serif);
  font-size: clamp(19px, 1.7vw, 23px); line-height: 1.14; margin: 0;
}
.front-page .viewtag{ color: var(--accent); font-style: italic; }
.front-page .op .who{ display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.front-page .face{
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: var(--frule); color: #fdf6ef;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 11px; font-weight: 700;
}
.front-page .who-name{
  font-family: var(--f-head, 'Instrument Serif', Georgia, serif);
  font-size: 15px; line-height: 1.15;
}

/* ------------------------------------------------------ the statement */
/* ProPublica's mission strip: one paragraph of plain prose on a dark ground,
   set large, with the links carried inside the sentence rather than listed
   after it. It reads as the paper speaking rather than as a promotion, which
   is the whole point of the form. */
.front-page .band-mission{ padding: 34px 0 8px; }
.front-page .band-mission .band-body{
  background: var(--frule); color: #fdf6ef;
  padding: clamp(26px, 3.4vw, 44px);
  border-radius: 3px;
}
.front-page .mission{
  font-family: var(--f-head, 'Instrument Serif', Georgia, serif);
  font-size: clamp(21px, 2.1vw, 29px); line-height: 1.24;
  /* about 30em: the statement has to read as a paragraph, not as a banner */
  max-width: 30em; margin: 0;
}
.front-page .mission a{
  color: inherit; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: rgba(253, 246, 239, .55);
}
.front-page .mission a:hover{ text-decoration-color: currentColor; }
/* the pill sits inline, at the end of the last sentence, the way theirs does */
.front-page .mission-more{
  display: inline-block; margin-left: 12px; vertical-align: 2px;
  padding: 5px 13px; border-radius: 999px;
  background: rgba(253, 246, 239, .13);
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-decoration: none; white-space: nowrap;
}
.front-page .mission-more:hover{
  background: #fdf6ef; color: var(--frule); text-decoration: none;
}

/* --------------------------------------------------- puzzles and games */
/* On the ink, not the accent: three accent strips in a row would read as one
   long interruption rather than three blocks. The run goes dark, accent,
   accent, dark, and each keeps an edge of its own. */
.front-page .band-ways{ padding: 10px 0 8px; }
/* a channel that is not open yet: still named, plainly not a door */
.front-page .ic-item.is-soon{
  background: none; box-shadow: inset 0 0 0 1px rgba(253, 246, 239, .16);
}
.front-page .ic-item.is-soon .ic-name{ color: rgba(253, 246, 239, .55); }
.front-page .infocard{
  display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 44px);
  background: var(--frule); color: #fdf6ef;
  border-radius: 6px; padding: clamp(22px, 2.6vw, 32px);
}
.front-page .ic-intro h2{
  font-family: var(--f-head, 'Instrument Serif', Georgia, serif);
  font-size: clamp(22px, 2vw, 28px); line-height: 1.1; margin: 0;
}
.front-page .ic-intro p{
  font-family: var(--f-body, Calluna, Georgia, serif);
  font-size: 14.5px; line-height: 1.42; margin: 10px 0 0;
  color: rgba(253, 246, 239, .78);
}
/* padded to a 24px target: this is a link on its own, not one inside a
   sentence, so the pointer exception does not cover it */
.front-page .ic-all{
  display: inline-block; margin-top: 11px; padding: 4px 0; color: #fdf6ef;
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 12px; font-weight: 700; letter-spacing: .05em;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(253, 246, 239, .5);
}
.front-page .ic-all:hover{ text-decoration-color: currentColor; }
.front-page .ic-cols{ display: grid; gap: 18px; }
.front-page .ic-head{
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 10px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: #e8a68f; margin: 0 0 8px;
}
/* Four fixed columns, not auto-fit. Auto-fit sizes each group to its own item
   count, so a two-item group got two wide cells and a four-item group broke
   3 + 1 -- three groups, three different grids. Pinned, the two four-item
   groups are exactly one row each and every cell lines up down the card. */
.front-page .ic-grid{
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px;
  /* cells size to their own text. Stretched, a single row of four grew to the
     height of the intro column beside it and each cell carried a hand's depth
     of empty ground under two lines of type. */
  align-items: start; align-content: start;
}
/* the ways read as labels rather than as puzzles with rules, so three across
   gives them room without stretching six of them over two ragged rows */
.front-page .band-ways .ic-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.front-page .ic-item{
  display: block; padding: 9px 12px; border-radius: 4px;
  background: rgba(253, 246, 239, .07); color: inherit;
}
.front-page .ic-item:hover{ background: rgba(253, 246, 239, .15); }
.front-page .ic-name{
  display: block;
  font-family: var(--f-head, 'Instrument Serif', Georgia, serif);
  font-size: 16px; line-height: 1.15;
}

/* ------------------------------------------------------ category sections */
/* Semafor's section block: the name over a heavy rule, then a three-part row --
   a stack, the story carrying the picture, a stack. The centre is wider than
   the sides because it has an image to hold; the sides are the same measure as
   the three under the lead, so the page keeps one width for a stacked story. */
.front-page .band-cat{ padding: clamp(26px, 3vw, 40px) 0 6px; }
.front-page .cat-head{
  font-family: var(--f-head, 'Instrument Serif', Georgia, serif);
  font-size: clamp(24px, 2.3vw, 30px); line-height: 1; margin: 0 0 clamp(18px, 2vw, 26px);
  padding-top: 13px; border-top: 2px solid var(--frule);
}
.front-page .cat-trip{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 34px);
  align-items: start;
}
.front-page .cat-stack{ min-width: 0; display: flex; flex-direction: column; }
.front-page .cat-stack .side-item{ padding: 15px 0; }
.front-page .cat-stack .side-item:first-child{ padding-top: 0; }
.front-page .cat-stack .side-item + .side-item{ border-top: 1px dashed var(--hair); }
.front-page .cat-lead{ min-width: 0; }
.front-page .cat-pic{ display: block; margin-bottom: 13px; }
.front-page .cat-pic img{
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
  background: var(--hair);
}
.front-page .cat-lead h3{
  font-family: var(--f-head, 'Instrument Serif', Georgia, serif);
  font-weight: 700; font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.12; margin: 0;
}
.front-page .cat-lead .dek{ font-size: 15px; margin-top: 9px; }

/* second shape: the picture takes the left half, four stack down the right */
.front-page .cat-split{
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(22px, 2.6vw, 38px); align-items: start;
}
.front-page .cat-split .cat-pic img{ aspect-ratio: 3 / 2; }
.front-page .cat-split .cat-lead h3{ font-size: clamp(21px, 2vw, 27px); }

/* third shape: five across, words only. A section thin on pictures should not
   have to borrow one to look finished. */
.front-page .cat-river{
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 clamp(16px, 1.8vw, 26px);
}
.front-page .cat-river .side-item{
  padding: 0 clamp(16px, 1.8vw, 26px) 0 0;
  border-right: 1px dashed var(--hair);
}
.front-page .cat-river .side-item:last-child{ border-right: 0; padding-right: 0; }
/* These five are siblings in a row, not a stack, so the rule that draws a
   dashed line BETWEEN stacked items would draw one across the top of four of
   them. Here the divider is the vertical dash. */
.front-page .cat-river .side-item + .side-item{ border-top: 0; }
.front-page .cat-river h3{ font-size: clamp(15px, 1.35vw, 17px); }
.front-page .cat-river .dek{ font-size: 13.5px; }

/* ------------------------------------------------------- the age badge */
/* The base sheet's .age-badge at a size that sits beside a kicker rather than
   above a headline: same yellow, same dark ink, same rounded corner, roughly
   half the type and a third of the padding. It stays inline-flex so the clock
   and the words never part company at the end of a line. */
.front-page .age-badge-sm{
  display: inline-flex; align-items: center; gap: 4px;
  vertical-align: middle; margin-left: 8px;
  /* the base .age-badge carries margin-bottom:16px for its full-size use over
     a headline. align-items centres the margin box, so leaving it on pushed
     the badge exactly half of that above the kicker it sits beside. */
  margin-bottom: 0;
  padding: 2px 6px; border-radius: 2px;
  background: #ffe500; color: #121212;
  font-family: var(--f-sans, Inter, system-ui, sans-serif);
  font-size: 9px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; line-height: 1.3; white-space: nowrap;
}
.front-page .age-badge-sm svg{ width: 10px; height: 10px; flex: 0 0 auto; }
.front-page .age-badge-sm strong{ font-weight: 700; }
/* the kicker and the badge on one line, free to wrap in a narrow column */
.front-page .k-row{
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  margin-bottom: 7px;
}
.front-page .k-row .k{ margin-bottom: 0; }
/* the row centres its contents; on its own the badge should sit at the start */
.front-page .k-row:not(:has(.k)){ justify-content: flex-start; }
/* the sub-lead's words are centred, so a badge alone in there would be too */
.front-page .sub-words .k-row{ justify-content: center; }
.front-page .k-row .age-badge-sm{ margin-left: 0; }

/* ------------------------------------------------------- section heads */
/* Accent rule, bold title, slash, lighter sentence. */
.front-page .band{ padding: 30px 0 6px; }
.front-page .band-top{ padding-top: 0; }
.front-page .sechead{
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px;
  border-top: 2px solid var(--accent);
  padding-top: 13px; margin-bottom: 20px;
}
/* h1 where the page leads with the heading -- a desk, or a page of the
   archive -- and h2 where the front page is only naming a band. */
.front-page .sechead h1,
.front-page .sechead h2{
  font-family: var(--f-head, 'Instrument Serif', Georgia, serif);
  font-size: clamp(28px, 2.5vw, 36px); line-height: 1.04; margin: 0;
  letter-spacing: -.015em;
}
.front-page .sechead .slash{ color: var(--accent); font-size: 24px; line-height: 1; }
.front-page .sechead p{
  font-family: var(--f-body, Calluna, Georgia, serif);
  font-size: 18px; line-height: 1.3; color: var(--dek); margin: 0;
}

/* ---------------------------------------------- Semafor's column engine */
/* One class, N columns, dashed gutters. Every band that needs columns uses it,
   which is why the verticals line up down the whole page. */
.front-page .cols{ display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.front-page .cols.c3{ --n: 3; }
.front-page .cols.c4{ --n: 4; }
.front-page .cols{ row-gap: 26px; }
.front-page .cols > *{
  padding-inline: 20px;
  border-left: 1px dashed var(--hair);
}
/* The rule between columns must clear at the start of EVERY row, not only the
   first: c4 wraps once the band carries more than four cards, and :first-child
   alone leaves a dangling rule down the left of every row after it. */
.front-page .cols > *:first-child,
.front-page .cols.c3 > *:nth-child(3n + 1),
.front-page .cols.c4 > *:nth-child(4n + 1){ padding-left: 0; border-left: 0; }
.front-page .cols > *:last-child{ padding-right: 0; }

/* The river: text only, no pictures. It keeps the space at its foot but
   draws no rule there -- the band below opens with one of its own, and
   two dashed lines 36px apart is a seam rather than a separator. */
.front-page .river{ padding-bottom: 26px; }

/* ------------------------------------------------------- the lead */
.front-page .lead{ display: block; }
.front-page .lead-pic{
  /* wide and capped: across the full measure a 3:1 plate is imposing, but
     unbounded it would be half a screen tall on a large display */
  display: block; width: 100%; aspect-ratio: 3 / 1;
  max-height: 520px; margin-bottom: 18px;
}
.front-page .lead-words{ max-width: 74ch; }
.front-page .lead-hl{
  font-family: var(--f-head, 'Instrument Serif', Georgia, serif);
  font-size: clamp(34px, 3.4vw, 62px); line-height: 1.0;
  letter-spacing: -.02em; margin: 0; text-wrap: balance;
}
.front-page .lead-dek{
  font-family: var(--f-body, Calluna, Georgia, serif);
  font-size: 19px; line-height: 1.44; color: var(--dek);
  margin: 14px 0 0; max-width: 62ch;
}
.front-page .big-pic{ aspect-ratio: 4 / 3; margin-bottom: 14px; }
.front-page .big h3{ font-size: 25px; line-height: 1.08; }

/* ------------------------------------------------------------- verify */
/* Three across, which is what the paper's own /verify page does with these.
   The base sheet calls verify-mini "a compact panel on story cards" and sizes
   it for a column: run full width it stretches one line of claim and a meter
   across a thousand pixels, and stops looking like a card at all. */
.front-page .vlist{
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 34px);
}
.front-page .vrow{ min-width: 0; display: flex; flex-direction: column; }
/* Every headline held to two lines and every claim to three, so all three
   panels start on the same line and end near it. Left to themselves the
   headlines ran one line here and two there, which set each panel off at a
   different height -- three cards that never lined up with each other. */
.front-page .vrow h3{
  font-size: 17px; line-height: 1.2; margin: 4px 0 11px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.4em;
}
.front-page .vrow .verify-mini__quote{
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Panels start together and are allowed to end apart, not the other way round.
   Bottom-aligned they began at three different heights, which is the ragged
   edge the eye actually reads when three cards sit in a row. The one that ends
   short is the off-scale ruling, which has no meter to draw. */
.front-page .vrow .verify-mini{ align-self: start; width: 100%; }
/* ------------------------------------------------------------- four up */
.front-page .quad .big-pic{ aspect-ratio: 3 / 2; }
.front-page .quad .big h3{ font-size: 17.5px; line-height: 1.18; }
.front-page .quad .dek{ display: none; }

/* ------------------------------------------------------------- narrow */
@media (max-width: 1120px){
  .front-page{ --rail-w: 280px; gap: 0 26px; }
  .front-page .feed{ padding-left: 26px; }
  .front-page .cols.c4{ --n: 2; }
  .front-page .cols.c4 > *:nth-child(3){ border-left: 0; padding-left: 0; }
}
@media (max-width: 767px){
  /* the base sheet hides every .header-clock-chip here, for the masthead's sake */
  .front-page .wxlist .header-clock-chip{ display: flex; }
}
@media (max-width: 900px){
  /* all three cards drop to one column, and the button stops hugging the right */
  .front-page .infocard{ grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .front-page .ic-grid,
  .front-page .band-ways .ic-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .front-page .focus,
  .front-page .focus-lead{ grid-template-columns: minmax(0, 1fr); }
  /* the three parts become one column, the picture story first */
  .front-page .cat-trip,
  .front-page .cat-split{ grid-template-columns: minmax(0, 1fr); }
  .front-page .cat-river{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .front-page .cat-river .side-item{ border-right: 0; padding-right: 0; padding-bottom: 16px; }
  /* Two columns, so the vertical dash is gone and the rows need their own
     rule -- between rows rather than above every item, which from the third
     item on is what starts a new row. */
  .front-page .cat-river .side-item:nth-child(n+3){
    border-top: 1px dashed var(--hair); padding-top: 16px;
  }
  .front-page .cat-lead{ order: -1; }
  .front-page .subrow{ grid-template-columns: minmax(0, 1fr); }
  .front-page .sub-side .side-item:first-child{
    border-top: 1px dashed var(--hair); padding-top: 14px;
  }
  .front-page .vlist{ grid-template-columns: minmax(0, 1fr); }
  .front-page .duo,
  .front-page .opinions{ grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .front-page .op{ padding-inline: 0; }
  .front-page .op:last-child{
    border-left: 0; border-top: 1px dashed var(--hair); padding-top: 22px;
  }
  /* the rail stops being a column and becomes the last band */
  .front-page{ grid-template-columns: minmax(0, 1fr); }
  .front-page .col-main{ padding-right: 0; }
  .front-page .feed{
    border-left: 0; padding-left: 0; padding-top: 8px;
    border-top: 1px dashed var(--hair); margin-top: 34px;
  }
  .front-page .feed-tabs{ position: static; }
  .front-page .lead-pic{ aspect-ratio: 16 / 9; max-height: none; }
  .front-page .sechead{ gap: 0 8px; }
  .front-page .sechead h1,
  .front-page .sechead h2{ font-size: 24px; }
  .front-page .sechead p{ font-size: 16px; }
  /* the rail is a full-width band here, so 122px across an 800px card is a
     6:1 letterbox that crops the cross away top and bottom */
  .front-page .promo-art img{ height: 190px; }
}
@media (max-width: 560px){
  .front-page .ic-grid{ grid-template-columns: minmax(0, 1fr); }
  .front-page .cols{ --n: 1 !important; }
  .front-page .cols > *{
    border-left: 0; padding-inline: 0; padding-top: 16px;
    border-top: 1px dashed var(--hair);
  }
  .front-page .cols > *:first-child{ padding-top: 0; border-top: 0; }
  .front-page .lead-pic{ aspect-ratio: 16 / 10; }
}

/* The feed can repeat the stories the front page has already led with,
   or start where the page stops. Hidden by class, not by the hidden
   attribute: that one belongs to Load more. */
.front-page .feed.hide-onfront .wpost[data-onfront]{ display: none; }


/* ============================================================== the size pass
   Three screens the page had not been tuned for. Each block that overlaps an
   existing media query is bounded at both ends: this sits below them in the
   file, so an open-ended max-width here would overrule the narrower rules
   above rather than adding to them. */

/* ---------------------------------------------------------------- big screens */
/* The step to 1560 above 1800 is set on :root in cvl.css, not here. Setting
   it on .front-page grew the page and left the masthead and the footer at
   1440, because they are outside this element and cannot see the variable. */
/* Running text keeps its measure whatever the screen does. At the full 1440
   the lead's standfirst was reaching 91 characters a line. */
.front-page .lead .dek{ max-width: 62ch; }

/* ------------------------------------------------------ tablet, small laptop */
@media (min-width: 901px) and (max-width: 1200px){
  /* Five across in a 670px column is a 114px column -- about ten characters a
     line. Three across is the same shape at a width that can hold a headline. */
  .front-page .cat-river{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .front-page .cat-river .side-item{ padding-bottom: 18px; }
  .front-page .cat-river .side-item:nth-child(3n){ border-right: 0; padding-right: 0; }
  .front-page .cat-river .side-item:nth-child(n+4){
    border-top: 1px dashed var(--hair); padding-top: 18px;
  }
}
@media (min-width: 901px) and (max-width: 1120px){
  /* The three fact-check panels were down to 198px, narrower than the rating
     meter inside them. */
  .front-page .vlist{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The ways card was still holding a 250px intro column beside its groups. */
  .front-page .infocard{ grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .front-page .ic-grid,
  .front-page .band-ways .ic-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- phones */
@media (max-width: 560px){
  /* The tail is a list of what else the paper has. As one column of twelve
     full-width plates it was most of the page's height; two up, it is
     something a reader scans again. Halving the width halves the pictures. */
  .front-page .cols.quad{ --n: 2 !important; column-gap: 16px; row-gap: 20px; }
  .front-page .quad > *{
    padding-inline: 0; border-left: 0; border-top: 0; padding-top: 0;
  }
  .front-page .quad .big h3{ font-size: 15px; line-height: 1.16; }

  /* The smallest labels, a shade up. Nine pixels is a caption on a desk, not
     on a telephone held at arm's length. */
  .front-page .age-badge{ font-size: 10px; }
  .front-page .optrow small,
  .front-page .optrow .soon{ font-size: 10.5px; }
  .front-page .ic-head,
  .front-page .wsrc{ font-size: 11px; }
  .front-page .k{ font-size: 11.5px; }
}

/* Four across between the three-column band and the full five. The rail keeps
   352px from 1121 up, so the main column does not reach the 1000px that five
   columns need until about 1400. */
@media (min-width: 1201px) and (max-width: 1400px){
  .front-page .cat-river{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .front-page .cat-river .side-item{ padding-bottom: 18px; }
  .front-page .cat-river .side-item:nth-child(4n){ border-right: 0; padding-right: 0; }
  .front-page .cat-river .side-item:nth-child(n+5){
    border-top: 1px dashed var(--hair); padding-top: 18px;
  }
}
/* The ways card holds a 250px intro column beside its groups, which leaves too
   little for three cells until the main column is wide. */
@media (min-width: 1121px) and (max-width: 1300px){
  .front-page .infocard{ grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

/* The archive pages behind the front: the same shell, minus the rail
   column, so the card, the grid and the pager are the front page's own. */
.front-page.front-list{ grid-template-columns: minmax(0, 1fr); }
.front-page.front-list .sechead p{ margin-left: auto; }

/* A section heading that is also the way into that section. It keeps the
   type and the rule above it and takes the colour of what it sits in;
   the underline is what tells a reader it goes somewhere, and it waits
   for hover or focus rather than shouting at rest. */
.front-page .cat-head a,
.front-page .sechead h2 a{
  color: inherit; text-decoration: none;
}
.front-page .cat-head a:hover,
.front-page .sechead h2 a:hover{
  text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 4px; text-decoration-color: var(--accent);
}
.front-page .cat-head a:focus-visible,
.front-page .sechead h2 a:focus-visible{
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px;
}

/* The Verify index has no rail, so its column is the whole shell. Four
   panels across from 1300 up, where each still gets about 290px; the
   front page's own Verify band keeps three, because the rail leaves it
   less to work with. */
@media (min-width: 1300px){
  .front-page.front-list .vlist{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}