/* self-hosted: no third-party request, and the type always renders */
@font-face { font-family:"Newsreader"; font-style:normal; font-weight:300;
  font-display:swap; src:url("/fonts/newsreader-300.woff2") format("woff2"); }
@font-face { font-family:"Newsreader"; font-style:normal; font-weight:400;
  font-display:swap; src:url("/fonts/newsreader-400.woff2") format("woff2"); }
@font-face { font-family:"Newsreader"; font-style:italic; font-weight:400;
  font-display:swap; src:url("/fonts/newsreader-400-italic.woff2") format("woff2"); }
@font-face { font-family:"Newsreader"; font-style:normal; font-weight:500;
  font-display:swap; src:url("/fonts/newsreader-500.woff2") format("woff2"); }
@font-face { font-family:"Space Grotesk"; font-style:normal; font-weight:400;
  font-display:swap; src:url("/fonts/space-grotesk-400.woff2") format("woff2"); }
@font-face { font-family:"Space Grotesk"; font-style:normal; font-weight:500;
  font-display:swap; src:url("/fonts/space-grotesk-500.woff2") format("woff2"); }

/* ============================================================
   kesho.me — the night edition
   A broadsheet for one day: warm paper-dark ground, warm ink,
   and a single spot colour for the one thing worth doing next.
   ============================================================ */

:root {
  --paper:    #100e0c;
  --ink:      #f4f0e7;
  --ink-2:    #b9b2a4;
  --ink-3:    #8c8578;

  --rule:     rgba(244,240,231,.26);
  --rule-mid: rgba(244,240,231,.15);
  --rule-hair:rgba(244,240,231,.09);

  --spot:     #e8543a;

  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --ui: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wm-size: clamp(4.2rem, 15vw, 12rem);

  --wrap: 1240px;
  --gut: 32px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

p { margin: 0 0 1em; }
a { color: inherit; }
.link { text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 1px; }
.link:hover { border-bottom-color: var(--ink); }

:focus-visible { outline: 2px solid var(--spot); outline-offset: 3px; }

.sr, .skip {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip:focus {
  position: fixed; left: 0; top: 0; z-index: 100;
  width: auto; height: auto; clip: auto;
  background: var(--spot); color: var(--paper);
  padding: 12px 18px; font-family: var(--ui); font-weight: 500;
}

/* the press furniture */
.rule-thick { height: 4px; background: var(--ink); }
.scotch b { display: block; height: 4px; background: var(--ink); }
.scotch i { display: block; height: 1px; background: var(--ink); }
.scotch b + i, .scotch i + b { margin-top: 3px; }
.rule-thin  { height: 1px; background: var(--rule); }
.masthead-base { margin-top: 10px; }

.kicker {
  font-family: var(--ui);
  font-size: .68rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--ink-3);
  margin: 0 0 14px;
}

/* ---------- masthead ---------- */
.masthead { padding-top: 20px; }
.masthead-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start; gap: 24px;
  padding-top: 18px;
}
.ear {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--ui);
  border: 1px solid var(--rule-mid);
  padding: 9px 13px 20px;
  border-bottom: 0;                          /* the ears stand on the masthead rule */
  margin-top: calc(var(--wm-size) * .1275);  /* the wordmark's cap top */
  margin-bottom: -10px;                      /* side strokes reach down to it */
  min-height: calc(var(--wm-size) * .6875 + 10px);
  justify-content: space-between;
  justify-self: start; width: 240px;
}
.ear-foot {
  font-family: var(--ui);
  font-size: .66rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-3); line-height: 1.3;
}
.ear-foot .mark { color: var(--spot); }
.ear-foot .narrow, .pg-print, .print-narrow { display: none; }
.ear-right { text-align: right; justify-self: end; }
.ear-num {
  font-size: 1rem; font-weight: 500; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink);
  line-height: 1.1;
}
.ear-figure {
  font-family: var(--display); font-weight: 300;
  font-size: 2.6rem; line-height: 1;
  letter-spacing: -.02em; color: var(--ink);
  font-variant-numeric: lining-nums;
}
.ear-figure span { color: var(--ink-3); font-size: .58em; }
@media (max-width: 860px) {
  /* the wordmark takes the full measure; the ears sit side by side beneath it */
  /* at phone width 15vw leaves the wordmark short of the measure */
  :root { --wm-size: clamp(4.6rem, 23vw, 8.4rem); }
  .masthead-row {
    grid-template-columns: 1fr 1fr;
    align-items: stretch; gap: 14px;
    padding-top: 0; margin-bottom: 0;
  }
  .wordmark { grid-column: 1 / -1; grid-row: 1; }
  .ear {
    grid-row: 2; margin-top: 0; min-height: 0; max-width: none;
    justify-self: stretch; justify-content: flex-start; gap: 6px;
    padding: 10px 12px 20px; margin-bottom: -10px;
  }
  .ear { width: auto; }
  .ear-num { font-size: .82rem; letter-spacing: .09em; }
  .ear-figure { font-size: 2rem; }
  .ear-foot { font-size: .6rem; letter-spacing: .1em; }
  .ear-right { text-align: right; justify-self: stretch; }
}
.wordmark {
  font-weight: 400;
  font-size: var(--wm-size);
  line-height: .92;
  letter-spacing: -0.02em;
  text-align: center;
  /* the box ends on the baseline, so the rule below lands on it */
  margin: .12em 0 -.225em;
}
.strap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* centres the middle on the page axis */
  align-items: baseline; gap: 20px;
  font-family: var(--ui);
  font-size: .74rem; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 11px 0;
}
.strap > :last-child { text-align: right; }
.strap-mid { text-align: center; }
.strap em { font-family: var(--display); font-style: italic; text-transform: none;
  font-size: .95rem; letter-spacing: 0; color: var(--ink-2); }
@media (max-width: 720px) {
  .strap { grid-template-columns: 1fr; gap: 4px; }
  .strap > :last-child, .strap-mid { text-align: left; }
  .strap-mid { order: 3; }
}

/* ---------- the lead: three columns, ruled ---------- */
/* one measure, used by the lead and the brief alike */
.cols, .lead, .bulletins {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1.3fr) minmax(0, 1.04fr);
  gap: 0;
}
.lead { padding-top: 40px; padding-bottom: 52px; }
.col { padding: 0 34px; display: flex; flex-direction: column; }
.col:first-child { padding-left: 0; }
.col:last-child { padding-right: 0; }
.col + .col { border-left: 1px solid var(--rule-hair); }

/* the figure */
.figure {
  font-weight: 300;
  font-size: clamp(6rem, 13vw, 11rem);
  line-height: .82;
  letter-spacing: -0.03em;
  margin: 0;
  font-variant-numeric: lining-nums;
}
.figure-sub {
  font-family: var(--ui);
  font-size: .74rem; text-transform: uppercase; letter-spacing: .16em;
  color: var(--ink-3);
  margin: 14px 0 0;
}
.figure-note {
  margin: 26px 0 0;
  font-size: .97rem; line-height: 1.55; color: var(--ink-2);
}

.conditions {
  margin-top: 28px;
  border-top: 1px solid var(--rule-mid);
  border-bottom: 1px solid var(--rule-mid);
  padding: 12px 0 13px;
}
.cond-head {
  font-family: var(--ui); font-size: .64rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--ink-3); margin: 0 0 8px;
}
.conditions dl { margin: 0; }
.conditions dl > div {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 3px 0; font-size: .95rem;
}
.conditions dt { color: var(--ink-3); }
.conditions dd { margin: 0; }
.cond-flag { color: var(--spot); }

/* the leader, set like a leader column */
.leader {
  font-size: 1.16rem; line-height: 1.5; margin: 0 0 .85em;
}
.leader::first-letter {
  float: left;
  font-size: 5.364em;    /* cap height = two lines + the body's cap height */
  line-height: 1.003;    /* puts the baseline on line 3's baseline */
  margin: 0 0 -.31em;    /* trims the float box back to three lines */
  padding: 0 .07em 0 0;
  font-weight: 400;
}
.leader-cont { font-size: 1.02rem; line-height: 1.58; color: var(--ink-2); }
.leader-cont em { font-style: italic; color: var(--ink); }
.byline {
  font-family: var(--ui);
  font-size: .8rem; letter-spacing: .02em;
  color: var(--ink-3);
  margin: 22px 0 0;
}
.byline .link { color: var(--ink); border-bottom-color: var(--rule-mid); }

.xref {
  margin-top: 26px;
  border-top: 1px solid var(--rule-mid);
  padding-top: 12px;
}
.xref.boxed { border-bottom: 1px solid var(--rule-mid); padding-bottom: 13px; }
.col-leader .xref, .col-figure .conditions { margin-top: auto; }
.col-leader .leader-cont { margin-bottom: 0; }
.xref.boxed .xref-body { margin-bottom: 0; }
.xref-head {
  font-family: var(--ui); font-size: .64rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--ink-3); margin: 0 0 7px;
}
.xref-body {
  margin: 0; font-size: .97rem; line-height: 1.5; color: var(--ink-2);
}

/* today's readings, set like a results table */
.readings { width: 100%; border-collapse: collapse; }
.readings th, .readings td {
  padding: 10px 0;
  font-weight: 400;
  vertical-align: baseline;
  border-bottom: 1px solid var(--rule-hair);
}
.readings thead th,
.readings thead th.fig,
.readings thead th.delta {
  font-family: var(--ui);
  font-size: .62rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule-mid);
  padding-bottom: 8px;
}
.readings thead th { text-align: left; }
.readings thead th.fig, .readings thead th.delta { text-align: right; }
.readings tbody th, .readings tfoot th {
  text-align: left; font-size: 1rem; white-space: nowrap; padding-right: 12px;
  position: relative;
}
.readings .fig {
  text-align: right; white-space: nowrap; padding-left: 12px;
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 1rem;
}
.readings .fig span { color: var(--ink-3); }
.readings .delta {
  text-align: right; white-space: nowrap; padding-left: 16px;
  font-family: var(--ui); font-size: .76rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  width: 4.6rem;
}
.readings .delta.up { color: var(--ink-2); }
.readings .delta.down { color: var(--ink-3); }
/* the em dash carries a right sidebearing the figures do not */
.readings .nil { display: inline-block; margin-right: -.09em; }

/* the printer's mark: the flagged row is marked, not merely coloured */
.readings .flagged th { color: var(--spot); }
.readings .flagged .fig b { color: var(--spot); }
.readings .flagged th::before {
  content: "\25B8";
  position: absolute; left: -14px;
  color: var(--spot);
}
.total-label {
  font-family: var(--ui);
  font-size: .62rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-2);
}
.readings tfoot th, .readings tfoot .fig, .readings tfoot .delta {
  border-bottom: 0;
  border-top: 3px double var(--rule);   /* the accounting rule */
  padding-top: 11px;
}
.readings tfoot th, .readings tfoot .fig { font-weight: 500; }
.readings tfoot .fig { font-size: 1.16rem; }
.readings tbody tr:last-child th,
.readings tbody tr:last-child td { border-bottom: 0; }
.readings-note { margin: 16px 0 0; }
.readings-note > span { display: block; }
.sources {
  font-family: var(--ui);
  font-size: .62rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-3);
  padding-bottom: 9px; margin-bottom: 9px;
  border-bottom: 1px solid var(--rule-hair);
}
.flag-note {
  font-family: var(--ui);
  font-size: .78rem; line-height: 1.5; color: var(--ink-3);
}
.flag-key { color: var(--spot); }

@media (max-width: 940px) {
  .lead { grid-template-columns: minmax(0, 1fr); padding-bottom: 40px; }
  .col { padding: 0; }
  .col + .col {
    border-left: 0; border-top: 0;
    margin-top: 24px; padding-top: 24px; position: relative;
  }
}

/* ---------- the brief ---------- */
.brief { padding-bottom: 56px; }
.section-kicker { margin: 16px 0 30px; }

.bulletin { padding: 0 34px; display: flex; flex-direction: column; }
.bulletin:first-child { padding-left: 0; }
.bulletin:last-child { padding-right: 0; }
.bulletin + .bulletin { border-left: 1px solid var(--rule-hair); }
.bull-label {
  font-family: var(--ui);
  font-size: .64rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--ink-3);
  margin: 0 0 10px;
}
.bull-figure {
  font-weight: 300;
  font-size: 3.1rem; line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
  margin: 0 0 .3em;
}
.pull {
  margin: 0 0 .55em;
  font-size: 1.14rem; line-height: 1.42;
  text-indent: -.42em;   /* hang the opening quote into the margin */
}
.byline-rule {
  font-family: var(--ui);
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
  border-top: 1px solid var(--rule-hair);
  padding-top: 9px; margin: 0 0 .9em;
}
.byline-rule::before { content: "\2014\00a0"; }
.stand { font-size: 1.08rem; line-height: 1.48; margin: 0 0 .6em; }
.detail { font-size: .95rem; line-height: 1.55; color: var(--ink-2); margin: 0; }
.bull-foot {
  font-family: var(--ui);
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
  border-top: 1px solid var(--rule-hair);
  padding-top: 9px; margin: auto 0 0;
}
.bull-foot::before { content: "\2014\00a0"; }
.bulletin.flagged .bull-figure, .bulletin.flagged .stand { color: var(--spot); }
.bulletin.flagged .bull-label { color: var(--spot); position: relative; }
.bulletin.flagged .bull-label::before {
  content: "\25B8";
  position: absolute; left: -14px;
  color: var(--spot);
}
@media (max-width: 940px) {
  .bulletins { grid-template-columns: minmax(0, 1fr); }
  .bulletin { padding: 0; }
  .bulletin + .bulletin {
    border-left: 0; border-top: 0;
    margin-top: 24px; padding-top: 24px; position: relative;
  }
}

/* ---------- tomorrow ---------- */
.tomorrow { padding-bottom: 52px; }
.tomorrow-inner { padding-top: 34px; }
.tomorrow-body {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1.3fr) minmax(0, 1.04fr);
  align-items: start;
  margin-top: 30px;
}
.tomorrow-body > :first-child { padding-right: 34px; }
/* the box's border and bottom padding, so the two foot lines share a baseline */
.deck { display: flex; flex-direction: column; height: 100%; padding-bottom: 19px; }
.deck-foot {
  font-family: var(--ui);
  font-size: .7rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-3);
  border-top: 1px solid var(--rule-hair);
  padding-top: 12px;
  margin: auto 0 0;      /* meets the box's foot line */
}
.subscribe { grid-column: 2 / -1; }
.next-print {
  font-family: var(--ui);
  font-size: .7rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-3);
  border-top: 1px solid var(--rule-hair);
  padding-top: 12px;
  margin: 16px 0 0;
}
.tomorrow-head {
  font-weight: 400;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 .35em;
}
.tomorrow-sub { font-size: 1.05rem; color: var(--ink-2); margin: 0; }

.subscribe {
  border: 1px solid var(--rule-mid);
  padding: 20px 34px 18px;   /* inner text lands on the leader column's measure */
}
.panel-head {
  font-family: var(--ui);
  font-size: .64rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule-hair);
  padding-bottom: 10px; margin: 0 0 16px;
}

.field {
  display: flex; align-items: center; gap: 16px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 12px;
}
.field:focus-within { border-bottom-color: var(--ink); }
.field input {
  flex: 1; min-width: 0;
  background: none; border: 0; color: var(--ink);
  font-family: var(--display); font-size: 1.16rem;
  padding: 0;
}
.field input::placeholder { color: var(--ink-3); }
.field input:focus { outline: none; }
.field button {
  flex: none;
  background: none; border: 0; cursor: pointer;
  color: var(--spot);
  font-family: var(--ui); font-weight: 500; font-size: .84rem;
  text-transform: uppercase; letter-spacing: .14em;
  padding: 4px 0;
}
.field button:hover { color: var(--ink); }
.smallprint {
  font-family: var(--ui);
  font-size: .75rem; line-height: 1.5; color: var(--ink-3);
  margin: 14px 0 0;
}
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
@media (max-width: 860px) {
  .tomorrow-body { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .tomorrow-body > :first-child { padding-right: 0; }
  .subscribe { grid-column: auto; padding: 20px 22px 18px; }
  .deck { height: auto; padding-bottom: 0; }
  .deck-foot { margin-top: 20px; }
}

/* When the measure collapses, the column rules would become horizontal
   dividers colliding with the panels' own closing rules. A paper separates
   items in a single column with a dinkus instead. */
@media (max-width: 940px) {
  .col + .col::before, .bulletin + .bulletin::before {
    content: ""; position: absolute; top: 0; left: 50%;
    width: 46px; height: 1px; margin-left: -23px;
    background: var(--rule);
  }
}

@media (max-width: 860px) {
  .ear-foot .wide { display: none; }
  .ear-foot .narrow { display: inline; }
  .kicker-clause { display: block; }
  /* the headline is the section's display moment; at 4.6vw it stops two
     thirds across the narrow measure */
  .tomorrow-head { font-size: clamp(2.4rem, 11.3vw, 2.9rem); }
}

@media (max-width: 380px) {
  /* below this the two ears side by side are too narrow for their captions,
     so they stack full-measure under the wordmark instead */
  .masthead-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .wordmark { grid-row: 1; }
  .ear-left { grid-row: 2; }
  .ear-right { grid-row: 3; text-align: left; }
  .ear-left { margin-bottom: 0; border-bottom: 1px solid var(--rule-mid); }
}

/* ---------- the stop press (thanks) ---------- */
.stop-press {
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(0, 1.04fr);
  padding: 46px 0 64px;
}
.stop-press .tomorrow-sub { max-width: 46ch; }
.stop-press .byline { margin-top: 26px; }
.stop-press .conditions { margin-top: 26px; }
.wordmark-link { text-decoration: none; }
@media (max-width: 940px) {
  .stop-press { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- colophon ---------- */
.colophon { padding-bottom: 40px; }
.folio {
  font-family: var(--ui);
  font-size: .66rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--ink-3);
  text-align: right;
  margin: 0 0 10px;
}
@media (max-width: 640px) {
  /* the folio is one line or it is not a folio */
  .folio { font-size: .58rem; letter-spacing: .1em; text-align: left; }
}
/* The readings column is at its narrowest just above the collapse point and
   on small phones. In both bands the table thins rather than bursting the
   measure. */
@media (max-width: 400px), (min-width: 941px) and (max-width: 1239px) {
  .readings tbody th, .readings tfoot th { white-space: normal; }
  .readings .delta { width: auto; padding-left: 10px; font-size: .68rem; }
  .readings .fig, .readings tfoot .fig { font-size: .94rem; padding-left: 8px; }
}
@media (max-width: 400px) {
  .folio { font-size: .54rem; letter-spacing: .08em; }
}
.colophon-inner {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 24px; flex-wrap: wrap;
  padding-top: 16px;
}
.set-in {
  font-family: var(--display); font-style: italic;
  font-size: .92rem; line-height: 1.5;
  color: var(--ink-3); margin: 0; max-width: 68ch;
}
.set-in .link { border-bottom-color: var(--rule-mid); }

/* ---------- the day edition ----------
   The page is a newspaper, so it prints like one: the same measure, the
   same furniture and the same spot colour, in ink on paper rather than
   paper on ink. */
.print-only { display: none; }

@media print {
  :root {
    --paper:    #ffffff;
    --ink:      #16130e;
    --ink-2:    #433c31;
    --ink-3:    #6d6559;
    --rule:     rgba(22,19,14,.42);
    --rule-mid: rgba(22,19,14,.26);
    --rule-hair:rgba(22,19,14,.16);
    --spot:     #b8351a;
    --wm-size:  76pt;
    --wrap: 100%;
    --gut: 0;
  }
  @page { margin: 14mm 12mm; }

  html, body { background: #fff; }
  /* every size on this page is in rem, so the print scale has to be set on
     the root — setting it on body would change nothing at all */
  html { font-size: 8pt; }
  body { font-size: 1.08rem; line-height: 1.45;
         -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* the rules are backgrounds on screen; browsers drop those when printing,
     so they become borders here */
  .rule-thick, .rule-thin, .scotch b, .scotch i {
    background: none; height: 0;
  }
  .rule-thick { border-top: 2.4pt solid var(--ink); }
  .scotch b   { border-top: 2.4pt solid var(--ink); }
  .scotch i   { border-top: .5pt solid var(--ink); }
  .rule-thin  { border-top: .5pt solid var(--rule); }

  /* the width queries still match on a printed page, so the measure is
     restored here: a broadsheet prints as a broadsheet */
  .masthead-row {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: start; gap: 18pt; margin-bottom: 0;
  }
  .wordmark { grid-column: auto; grid-row: auto; text-align: center; }
  .ear { grid-row: auto; justify-self: start; justify-content: space-between;
         padding: 6pt 9pt 13pt; gap: 0;
         margin-top: calc(var(--wm-size) * .1275);   /* on the K's cap line */
         width: 132pt; }
  .ear-foot .wide { display: none; }
  .ear-foot .narrow { display: inline; }
  .ear-right { justify-self: end; text-align: right; }
  .ear-num { font-size: 8pt; letter-spacing: .11em; }
  .ear-foot { font-size: 6.4pt; }
  .strap { grid-template-columns: 1fr auto 1fr; gap: 14pt; padding: 6pt 0; }
  /* the narrow-measure rules reorder the dateline; print keeps the desktop's
     order so all three editions agree */
  .strap > * { order: 0; }
  .strap > :last-child { text-align: right; }
  .strap-mid { text-align: center; }
  .kicker-clause { display: inline; }

  .lead, .bulletins, .tomorrow-body {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 1.3fr) minmax(0, 1.04fr);
    gap: 0;
  }
  .col, .bulletin { padding: 0 12pt; }
  .col:first-child, .bulletin:first-child { padding-left: 0; }
  .col:last-child, .bulletin:last-child { padding-right: 0; }
  .col + .col, .bulletin + .bulletin {
    border-left: .5pt solid var(--rule-hair);
    border-top: 0; margin-top: 0; padding-top: 0;
  }
  .subscribe { grid-column: 2 / -1; padding: 10pt 12pt 9pt; }
  .tomorrow-body > :first-child { padding-right: 12pt; }
  .deck { height: 100%; padding-bottom: 10pt; }
  .readings th, .readings td { padding: 7pt 0; }
  .readings .delta { width: auto; padding-left: 8pt; font-size: 6.6pt; }
  .readings .fig { font-size: 9pt; padding-left: 6pt; }
  .readings tfoot .fig { font-size: 10.4pt; }
  .readings tbody th { white-space: nowrap; }
  /* the tracked total label will not fit the narrower print column on one
     line, and nowrap there pushed the table off the sheet */
  .readings tfoot th { white-space: nowrap; }
  .print-wide { display: none; }
  .print-narrow { display: inline; }
  .folio { text-align: right; font-size: 6.4pt; letter-spacing: .14em; }

  .skip, .field, .smallprint, .pg-screen { display: none; }
  .print-only { display: block; }
  .pg-print { display: inline; }
  .print-invite {
    font-family: var(--display); font-size: 1.05rem;
    margin: 6pt 0 10pt;
  }

  /* ragged column feet are normal in newsprint; a hole mid-column is not */
  .col-figure .conditions, .col-leader .xref, .bull-foot { margin-top: 0; }
  .bull-foot { margin-top: 10pt; }
  .col + .col::before, .bulletin + .bulletin::before { content: none; }

  /* Each sheet is a box the height of the printable area, so its folio and
     colophon sit at the foot of the paper rather than under the content.
     Sheet one shares its page with the masthead, measured at 138px. */
  .sheet { display: flex; flex-direction: column; }
  .sheet-one { min-height: calc(269mm - 138px); }
  .sheet-two { min-height: 269mm; break-before: page; }
  .brief + .folio, .colophon { margin-top: auto; }
  .sheet-two .folio { margin-top: 0; }
  /* the section's thick rule closes the running head, as the masthead rule
     closes the ears — a second hairline above it reads as a doubled rule */
  .running-head {
    font-family: var(--ui); font-size: 6.4pt; font-weight: 500;
    text-transform: uppercase; letter-spacing: .16em;
    color: var(--ink-3);
    margin: 0 0 6pt;
  }

  .week { padding-top: 20pt; padding-bottom: 16pt; }
  .week .section-kicker { margin: 12pt 0 12pt; }
  .ledger td { font-size: 1rem; }
  .ledger .fig { text-align: right; padding-left: 14pt; white-space: nowrap; }
  .ledger .act { text-align: right; padding-left: 18pt; }
  .ledger thead th.act { text-align: right; }
  .ledger tfoot .act { font-style: italic; color: var(--ink-3); }
  .ledger .flagged th, .ledger .flagged .fig b, .ledger .flagged .act { color: var(--spot); }
  .week .readings-note { margin-top: 10pt; }
  .ledger tfoot td { border-bottom: 0; border-top: 3px double var(--rule); padding-top: 11px; }
  /* the ledger's first column carries the printer's mark, so it needs the
     gutter the readings column gets from sitting between two others */
  .ledger th { padding-left: 14px; }
  .ledger .flagged th::before { left: 0; }
  /* the average is a sum, and sums are set a step up in both tables */
  .ledger tfoot .fig { font-size: 10.4pt; }   /* the readings total's size */

  .masthead { padding-top: 0; }
  .ear { width: 132pt; min-height: calc(var(--wm-size) * .6875 + 7pt); margin-bottom: -7pt; }
  .masthead-base { margin-top: 7pt; }
  .ear-figure { font-size: 20pt; }
  .figure { font-size: 58pt; }
  .tomorrow-head { font-size: 24pt; }
  .bull-figure { font-size: 20pt; }

  .lead { padding-top: 16pt; padding-bottom: 20pt; }
  .brief, .tomorrow { padding-bottom: 20pt; }
  .col, .bulletin, .subscribe, .readings, .conditions, .xref { break-inside: avoid; }
  .lead, .brief, .tomorrow, .colophon { break-inside: avoid; }
  a { text-decoration: none; }
  .link { border-bottom: .5pt dotted var(--rule); }
}