/* ==========================================================================
   Editorial Ledger: home.css (A1, Front Page)
   Lead and rail, crop marks and fold crease, the desks, the statement of
   account (ledger sheet, chart window, chart notes), In brief, Continued
   inside, Forthcoming. Shared parts live in base.css.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Variables
   -------------------------------------------------------------------------- */

:root {
  --ledger-step: 2rem;   /* blue ruling pitch; a ledger row is two steps */
  --ledger-ref: 2.25rem; /* entry letter column, left of the red margin rule */
  --ledger-wash: rgb(184 41 26 / .14); /* --accent at 14%: a highlighter, the ruling shows through */
  --amount-size: 2.5rem;
  --photo-size: 7.5rem;
  --chart-stroke: 1.25;
}


/* --------------------------------------------------------------------------
   Sections: the lead (A1)
   -------------------------------------------------------------------------- */

.lead {
  position: relative;
  padding-block: var(--space-l) var(--space-2xl);
}

.lead__grid {
  position: relative;
  align-items: start;
  row-gap: var(--space-s);
}

.lead__grid > * { grid-column: 1 / -1; }

.lead__hed {
  font-size: var(--fs-hed-xl);
  font-weight: 680;
  line-height: .92;
  letter-spacing: -.022em;
}

.lead__deck {
  max-width: 34ch;
  margin-top: var(--space-xs);
}

.lead__byline {
  padding-top: var(--space-2xs);
  color: var(--ink);
}

.lead__body {
  margin-top: var(--space-xs);
  padding-top: var(--space-m);
  border-top: 1px solid var(--hairline);
}

/* Crop marks: printer's marks .75rem outside each corner of the lead (80rem+). */
.cropmark {
  position: absolute;
  display: none;
  width: 1.75rem;
  height: 1.75rem;
}

.cropmark::before,
.cropmark::after {
  content: "";
  position: absolute;
  background: var(--ink-muted);
}

.cropmark::before { width: 1rem; height: 1px; }
.cropmark::after { width: 1px; height: 1rem; }

.cropmark--tl { top: -1.75rem; left: -1.75rem; transform-origin: 100% 100%; }
.cropmark--tl::before { left: 0; bottom: 0; }
.cropmark--tl::after { right: 0; top: 0; }

.cropmark--tr { top: -1.75rem; right: -1.75rem; transform-origin: 0 100%; }
.cropmark--tr::before { right: 0; bottom: 0; }
.cropmark--tr::after { left: 0; top: 0; }

.cropmark--bl { bottom: -1.75rem; left: -1.75rem; transform-origin: 100% 0; }
.cropmark--bl::before { left: 0; top: 0; }
.cropmark--bl::after { right: 0; bottom: 0; }

.cropmark--br { bottom: -1.75rem; right: -1.75rem; transform-origin: 0 0; }
.cropmark--br::before { right: 0; top: 0; }
.cropmark--br::after { left: 0; bottom: 0; }

/* Inside today: the contents rail. */
.rail {
  display: grid;
  gap: var(--space-m);
  margin-top: var(--space-l);
}

.rail__head {
  padding-bottom: .5rem;
  border-bottom: 3px solid var(--ink);
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.rail__item + .rail__item { border-top: 1px solid var(--hairline); }

.rail__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: var(--space-s);
  padding-block: .875rem;
  text-decoration: none;
}

.rail__line {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: .375rem;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.rail__folio {
  font-weight: 700;
  color: var(--accent);
}

.rail__title {
  grid-column: 1;
  margin-top: .375rem;
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.005em;
  color: var(--ink);
  transition: color var(--dur-1);
}

.rail__link:hover .rail__title { color: var(--accent-deep); }

/* Home rail photo: grayscale print, multiplied into the paper, light dot screen. */
.rail__photo {
  position: relative;
  grid-column: 2;
  grid-row: 2;
  width: var(--photo-size);
  height: var(--photo-size);
  margin-top: .625rem;
  overflow: hidden;
}

.rail__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.15);
  mix-blend-mode: multiply;
}

.rail__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--halftone);
  opacity: .35;
}

.rail__credentials .notice__text {
  font-style: normal;
  color: var(--ink);
}

.rail__credentials .notice__text + .notice__text { margin-top: .5rem; }


/* --------------------------------------------------------------------------
   Sections: the desks (A2), sized like a front page
   -------------------------------------------------------------------------- */

.desks__grid { row-gap: var(--space-l); }

.desks__grid > .desk {
  position: relative;
  grid-column: 1 / -1;
}

.desks__grid > .desk + .desk {
  padding-top: var(--space-l);
  border-top: 1px solid var(--hairline);
}

.desk {
  display: flex;
  flex-direction: column;
  gap: .625rem;
}

.desk__kicker {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

.desk__hed {
  font-size: var(--fs-hed-s);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.005em;
}

.desk--lead .desk__hed {
  font-size: var(--fs-hed-m);
  font-weight: 620;
  line-height: 1.02;
  letter-spacing: -.012em;
}

.desk__body {
  display: grid;
  gap: var(--space-s);
  max-width: 62ch;
}

.desk--lead .desk__text {
  font-size: var(--fs-deck);
  line-height: 1.38;
}

.desk__receipt {
  margin-top: var(--space-2xs);
  padding-top: var(--space-s);
  border-top: 1px solid var(--ink);
}

.desk__stack {
  margin-top: auto;
  padding-top: .625rem;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}


/* --------------------------------------------------------------------------
   Sections: the statement of account (A3)
   -------------------------------------------------------------------------- */

.ledger__sheet {
  padding: var(--space-m) var(--space-s) var(--space-l);
  background: var(--paper-bright);
  border: 1px solid var(--hairline);
}

/* Statement: the ruled half. Text baselines sit on the blue ruling. */
.ledger__statement {
  position: relative;
  background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--ledger-step) - 1px), var(--ledger-line) calc(var(--ledger-step) - 1px) var(--ledger-step)) 0 -.75rem;
}

/* Red double margin rule, right of the entry letters, printed above the wash. */
.ledger__statement::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: var(--ledger-ref);
  width: 4px;
  border-inline: 1px solid var(--accent);
  opacity: .7;
  pointer-events: none;
}

.ledger__table {
  width: 100%;
  font-variant-numeric: tabular-nums;
}

.ledger__table th,
.ledger__table td {
  padding: 0 .5rem;
  text-align: left;
  vertical-align: bottom;
}

.ledger__table thead th {
  height: var(--ledger-step);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  line-height: var(--ledger-step);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.ledger__table tbody tr {
  position: relative;
  z-index: 0;
  height: calc(var(--ledger-step) * 2);
}

.ledger__table .ledger__ref {
  width: var(--ledger-ref);
  padding-inline: 0;
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  line-height: var(--ledger-step);
  text-align: center;
  color: var(--ink-muted);
}

.ledger__table .ledger__item {
  padding-left: 1rem;
  font-weight: 400;
}

.ledger__name {
  display: block;
  font-weight: 600;
  line-height: var(--ledger-step);
}

/* The source line carries a dotted leader to the amount column, on its baseline. */
.ledger__source {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-size: var(--fs-small);
  font-style: italic;
  line-height: var(--ledger-step);
  color: var(--ink-muted);
}

.ledger__source::after {
  content: "";
  flex: 1 1 0;
  min-width: 0;
  height: .375rem;
  background: var(--leader-dots);
}

/* Entry A names both platforms from 30rem; below that it has a short source. */
.ledger__long { display: none; }

.ledger__table .ledger__amount { text-align: right; }

.ledger__table td.ledger__amount {
  position: relative;
  top: calc(.265em - .75rem); /* the figure's baseline lands on the ruling */
  font-size: var(--amount-size);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.ledger__amount .i-star {
  display: inline-block;
  width: .6em;
  height: .6em;
  margin-left: .04em;
  vertical-align: .04em;
  fill: var(--accent);
}

.ledger__table .ledger__fn {
  width: 1.75rem;
  padding-inline: 0 .25rem;
  line-height: var(--ledger-step);
}

.ledger__fn .fn-ref { vertical-align: 0; font-size: .75rem; }

/* The mark stays small in the layout; its hit area is a full 2.75rem. */
.ledger__fn .fn-ref a {
  display: inline-grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin: -.75rem;
}

/* The wash: the row whose chart is in the window. */
.ledger__wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ledger-wash);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.ledger__balance {
  margin-top: var(--ledger-step);
  padding-left: calc(var(--ledger-ref) + 1rem);
  font-style: italic;
  line-height: var(--ledger-step);
}

.ledger__balance-label {
  margin-right: .375rem;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-style: normal;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ledger__balance-rule {
  margin: .625rem 0 0 calc(var(--ledger-ref) + .5rem);
}

/* Chart window: small multiples by default, a single fed window in the stepper. */
.ledger__window {
  display: grid;
  gap: var(--space-xl) var(--gutter);
  margin-top: var(--space-xl);
}

.chart {
  display: grid;
  align-content: start;
  gap: .625rem;
  margin: 0;
}

.chart__head {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.chart__ref { font-weight: 700; color: var(--accent); }

/* Every chart is drawn on a 600 x 360 field. On phones the art box gives back
   the empty bands above and below the data of charts B, C, D and F (negative
   margins, in percent of the box width, so the note positions do not change). */
.chart__art {
  position: relative;
  aspect-ratio: 5 / 3;
  margin-block: calc(var(--crop-top, 0%) * -1) calc(var(--crop-bottom, 0%) * -1);
}

.chart[data-chart="b"] { --crop-top: 12%; --crop-bottom: 23%; }
.chart[data-chart="c"] { --crop-top: 14%; --crop-bottom: 12%; }
.chart[data-chart="d"] { --crop-top: 7%; --crop-bottom: 23%; }
.chart[data-chart="f"] { --crop-top: 12%; --crop-bottom: 21%; }

.chart__art svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.chart__data {
  fill: none;
  stroke: var(--ink);
  stroke-width: var(--chart-stroke);
  stroke-linecap: square;
}

.chart__data--fill {
  fill: var(--ink);
  stroke-linejoin: miter;
}

.chart__mark,
.chart-note__leader {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: square;
}

.chart__track {
  fill: none;
  stroke: var(--rule);
  stroke-width: 1;
}

/* The remainder of the ring is the same dot screen as the bar in chart F. */
.chart__hatch {
  fill: none;
  stroke: url(#chart-f-screen);
  stroke-width: 22;
}

.chart__arc {
  fill: none;
  stroke: var(--ink);
  stroke-width: 22;
}

.chart__fill { fill: var(--ink); }
.chart__screen { fill: url(#chart-f-screen); }

#chart-f-screen circle { fill: var(--ink-muted); }

.chart__caption {
  padding-top: .5rem;
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--ink-soft);
}

/* Chart notes (M5) and data labels: HTML labels placed over the art by percent.
   The box is the mask; the text slides up into it. */
.chart-note,
.chart-label {
  position: absolute;
  left: var(--x);
  top: var(--y);
  overflow: clip;
  white-space: nowrap;
  transform: translate(0, -50%);
  pointer-events: none;
}

.chart-note--end,
.chart-label--end { transform: translate(-100%, -50%); }

.chart-label--figure { transform: translate(-50%, -50%); }

.chart-note__text,
.chart-label__text {
  display: block;
  padding-inline: .25rem;
  font-size: var(--fs-small);
  font-style: italic;
  line-height: 1.3;
  color: var(--ink);
  background: var(--paper-bright);
}

.chart-note__fig {
  font-style: normal;
  font-weight: 600;
}

.chart-label--figure .chart-label__text {
  padding-inline: 0;
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.75rem);
  font-style: normal;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
  background: none;
}

.chart__plus { color: var(--accent); }

/* Sources: the footnotes under the statement, set as small print. */
.ledger__notes { margin-top: var(--space-l); }

.ledger__notes-head {
  margin-bottom: var(--space-xs);
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   Sections: the plate (r005) uses base.css; Home sets its measure.
   -------------------------------------------------------------------------- */

.plate__body .plate__quote { max-width: 26ch; }


/* --------------------------------------------------------------------------
   Sections: In brief (A4)
   -------------------------------------------------------------------------- */

.brief__layout {
  align-items: start;
  row-gap: var(--space-xl);
}

.brief__layout > * { grid-column: 1 / -1; }

.brief__letters {
  column-width: 18rem;
  column-gap: calc(var(--gutter) * 2);
  column-rule: 1px solid var(--hairline);
}

.brief__letters .letter {
  break-inside: avoid;
  padding-block: var(--space-m) var(--space-l);
  border-top: 1px solid var(--hairline);
}

.brief__box {
  display: grid;
  gap: var(--space-s);
  padding-bottom: var(--space-m);
  border-bottom: 1px solid var(--ink);
}

.brief__box .kicker { margin-top: var(--space-2xs); }

.brief__figure {
  font-size: var(--fs-deck);
  line-height: 1.3;
}

/* The big figure stands above its caption, newspaper "big number" style. */
.brief__figure .slug {
  display: block;
  width: max-content;
  margin-bottom: .25rem;
  font-size: 2.5em;
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.02em;
}

.brief__regulars .letter {
  padding-block: var(--space-s);
  border-top: 1px solid var(--hairline);
}

.brief__jump { margin-top: var(--space-l); }


/* --------------------------------------------------------------------------
   Sections: Continued inside (A5)
   -------------------------------------------------------------------------- */

.inside__list { row-gap: var(--space-l); }

.inside__list > li {
  position: relative;
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: .625rem;
}

.inside__list > li + li {
  padding-top: var(--space-l);
  border-top: 1px solid var(--hairline);
}

.inside__hed {
  font-size: var(--fs-hed-s);
  font-weight: 600;
  line-height: 1.15;
}

.inside__deck {
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

/* Shrink-wrapped, so the hover rule ends with the arrow. */
.inside__list .jump {
  align-self: flex-start;
  margin-top: auto;
  font-size: var(--fs-body);
}


/* --------------------------------------------------------------------------
   Sections: Forthcoming (A6)
   -------------------------------------------------------------------------- */

.forthcoming__list { row-gap: var(--space-l); }

.forthcoming__list > li {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  align-content: start;
  gap: .75rem;
}

.forthcoming__list > li + li {
  padding-top: var(--space-l);
  border-top: 1px solid var(--hairline);
}

.forthcoming__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.forthcoming__hed {
  font-size: var(--fs-hed-s);
  font-weight: 600;
  line-height: 1.15;
  max-width: 24ch;
}


/* --------------------------------------------------------------------------
   Animations: the stepper (M3) turns the ledger into one fed window.
   -------------------------------------------------------------------------- */

/* The stepper layout is CSS only, so it is in the first paint: scripts load
   after that paint, and a script must never change the page height (a deep
   link or a restored scroll position would land in the wrong place). The
   query is the STEPPER query of home.js. The frame sticks centered below the
   bar (home.js measures --frame-top); six steps of 40vh follow it. If the
   scripts never arrive, the failsafe removes .motion and the static ledger
   returns. home.js sets .is-static if it cannot run the stepper. */
@media (min-width: 64rem) and (min-height: 40rem) {
  .motion .ledger:not(.is-static) .ledger__track::after {
    content: "";
    display: block;
    height: 240vh;
  }

  .motion .ledger:not(.is-static) .ledger__frame {
    position: sticky;
    top: var(--frame-top, var(--bar-h));
  }

  .motion .ledger:not(.is-static) .ledger__sheet {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: start;
    padding: var(--space-l) var(--space-l) var(--space-l) var(--space-m);
  }

  .motion .ledger:not(.is-static) .ledger__statement { grid-column: 1 / span 6; }

  /* The chart head's baseline sits level with the table head (first ruling line). */
  .motion .ledger:not(.is-static) .ledger__window {
    grid-column: 8 / span 5;
    grid-template-columns: minmax(0, 1fr);
    margin-top: .45rem;
    overflow: clip;
  }

  .motion .ledger:not(.is-static) .chart { grid-area: 1 / 1; }

  /* The six charts share one cell. Until home.js feeds the window
     (.is-stepper), only the first chart shows. */
  .motion .ledger:not(.is-static):not(.is-stepper) .chart:not(:first-of-type) { visibility: hidden; }
}


/* --------------------------------------------------------------------------
   Media Queries
   -------------------------------------------------------------------------- */

/* Small screens only (below 32.5rem): the item column is too narrow for its
   labels, so an entry is set on two ruled lines. Line 1: the item, across the
   sheet. Line 2: the entry letter, the source, its leader, the amount and the
   note mark. Each row is a grid and the item cell passes the columns on
   (subgrid); the ARIA roles in the markup keep the table for assistive
   technology. Without subgrid the statement stays a plain table.
   The letter column, the amounts and the sheet padding are fluid, so every
   entry keeps its two lines down to 320 px. */
@media not all and (min-width: 32.5rem) {
  @supports (grid-template-columns: subgrid) {
    :root {
      --amount-size: clamp(1.75rem, .5rem + 6.25vw, 2rem);
      --ledger-ref: clamp(1.75rem, .5rem + 6.25vw, 2.25rem);
    }

    .ledger__sheet { padding-inline: clamp(.75rem, 5vw - .25rem, 1rem); }

    .ledger__table,
    .ledger__table thead,
    .ledger__table tbody { display: block; }

    .ledger__table tr {
      display: grid;
      grid-template-columns: var(--ledger-ref) minmax(0, 1fr) auto 1.75rem;
    }

    /* The column heads keep one ruled line at 320 px; "Amount" ends on the figures' edge. */
    .ledger__table thead th {
      padding-right: 0;
      letter-spacing: .08em;
      white-space: nowrap;
    }

    .ledger__table thead .ledger__amount { padding-inline: 0 .25rem; }

    .ledger__table tbody tr {
      grid-template-rows: repeat(2, minmax(var(--ledger-step), auto));
      height: auto;
    }

    .ledger__table tbody .ledger__ref {
      grid-area: 2 / 1;
      align-self: end;
    }

    .ledger__table tbody .ledger__item {
      grid-area: 1 / 2 / -1 / -1;
      display: grid;
      grid-template: subgrid / subgrid;
      padding-right: 0;
    }

    .ledger__name { grid-area: 1 / 1 / 2 / -1; }
    .ledger__source { grid-area: 2 / 1; }

    .ledger__table tbody .ledger__amount {
      grid-area: 2 / 3;
      align-self: end;
      padding-inline: .375rem .25rem;
    }

    .ledger__table tbody .ledger__fn {
      grid-area: 2 / 4;
      align-self: end;
    }
  }
}

@media (min-width: 30rem) {
  .ledger__long { display: inline; }
  .ledger__short { display: none; }

  .desks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .desks__grid > .desk { grid-column: auto; }
  .desks__grid > .desk--lead { grid-column: 1 / -1; }

  /* Column rules between the two desks of a row. */
  .desk--web::before,
  .desk--advisory::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--gutter) / -2);
    width: 1px;
    background: var(--hairline);
  }
}

@media (min-width: 48rem) {
  :root {
    --amount-size: 2.75rem;
    --chart-stroke: 1.5;
  }

  .lead__hed,
  .lead__kicker { grid-column: 1 / -1; }
  .lead__deck,
  .lead__byline,
  .lead__body { grid-column: 1 / span 4; }

  .lead__rail {
    grid-column: 5 / span 2;
    grid-row: 3 / span 4;
    margin-top: var(--space-xs);
  }

  .rail__photo { --photo-size: 5rem; }

  .desks__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .desks__grid > .desk { grid-column: span 3; }
  .desks__grid > .desk--lead,
  .desks__grid > .desk--team { grid-column: 1 / -1; }

  .desk--lead .desk__body {
    display: block;
    max-width: none;
    columns: 2;
    column-gap: calc(var(--gutter) * 2);
    column-rule: 1px solid var(--hairline);
  }
  .desk--lead .desk__body > * + * { margin-top: var(--space-s); }
  .desk--lead .desk__receipt { break-inside: avoid; }

  .ledger__sheet { padding: var(--space-l); }
  .ledger__window { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Side by side, the charts keep one box size, so their rows align. */
  .chart[data-chart] { --crop-top: 0%; --crop-bottom: 0%; }
  .ledger__notes .footnotes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: calc(var(--gutter) * 2);
  }

  .inside__list > li { grid-column: span 3; }
  .inside__list > li + li { padding-top: 0; border-top: 0; }
  .inside__list > li:nth-child(n + 3) { padding-top: var(--space-l); border-top: 1px solid var(--hairline); }
  .inside__list > li:nth-child(even)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--gutter) / -2);
    width: 1px;
    background: var(--hairline);
  }
}

@media (min-width: 64rem) {
  :root { --amount-size: 3rem; }

  /* Lead: h1 across 12 columns, body in 3 text columns, rail as a 4-up strip. */
  .lead__deck,
  .lead__byline { grid-column: 1 / span 8; }

  .lead__body {
    grid-column: 1 / -1;
    max-width: none;
    columns: 3 16rem;
    column-gap: calc(var(--gutter) * 2);
    column-rule: 1px solid var(--hairline);
  }

  .lead__rail {
    grid-column: 1 / -1;
    grid-row: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--gutter);
    margin-top: var(--space-l);
  }

  .rail__head,
  .rail__credentials { grid-column: 1 / -1; }

  .rail__list {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--gutter);
  }

  .rail__item { position: relative; }
  .rail__item + .rail__item { border-top: 0; }
  .rail__item + .rail__item::before {
    content: "";
    position: absolute;
    top: .875rem;
    bottom: .875rem;
    left: calc(var(--gutter) / -2);
    width: 1px;
    background: var(--hairline);
  }

  .rail__photo { --photo-size: 4.5rem; }

  /* Desks: the lead across three rows, then 6, 3 + 3, 3 + 3. The lead sets
     from the top and its stack line follows the receipt (no dead band). */
  .desks__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .desks__grid > .desk--lead { grid-column: 1 / span 6; grid-row: 1 / span 3; align-self: start; padding-right: var(--space-s); }
  .desk--lead .desk__stack { margin-top: var(--space-s); }
  .desks__grid > .desk.desk--fintech { grid-column: 7 / span 6; grid-row: 1; padding-top: 0; border-top: 0; }
  .desks__grid > .desk--web { grid-column: 7 / span 3; grid-row: 2; }
  .desks__grid > .desk--cloud { grid-column: 10 / span 3; grid-row: 2; }
  .desks__grid > .desk--advisory { grid-column: 7 / span 3; grid-row: 3; }
  .desks__grid > .desk--team { grid-column: 10 / span 3; grid-row: 3; }

  .desks__grid > .desk:not(.desk--lead)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--gutter) / -2);
    width: 1px;
    background: var(--hairline);
  }

  .desks__grid > .desk--lead .desk__body {
    display: grid;
    columns: auto;
    column-rule: none;
  }
  .desk--lead .desk__body > * + * { margin-top: 0; }

  /* Ledger (static: reduced motion and no-JS): the statement spans the sheet
     like a ledger page (leaders run to the amounts), then the charts 3 x 2. */
  .ledger__window { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ledger__notes .footnotes { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* In brief: letters in 8 columns of text, the regulars box in 4. */
  .brief__letters { grid-column: 1 / span 8; }
  .brief__box { grid-column: 9 / span 4; }

  .inside__list > li:nth-child(n) { grid-column: span 3; padding-top: 0; border-top: 0; }
  .inside__list > li + li::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--gutter) / -2);
    width: 1px;
    background: var(--hairline);
  }

  .forthcoming__list > li { grid-column: span 4; }
  .forthcoming__list > li + li { padding-top: 0; border-top: 0; }
  .forthcoming__list > li + li::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--gutter) / -2);
    width: 1px;
    background: var(--hairline);
  }
}

@media (min-width: 80rem) {
  /* Lead: h1 in 9 columns, the rail down the right 3, crop marks and the fold.
     The top space shrinks on short screens (the deck stays above the fold). */
  .lead { padding-block: min(var(--space-2xl), 5vh) var(--space-3xl); }

  .lead__kicker,
  .lead__hed,
  .lead__deck,
  .lead__byline,
  .lead__body { grid-column: 1 / span 9; }

  .lead__deck { max-width: 40ch; }

  .lead__rail {
    grid-column: 10 / span 3;
    grid-row: 1 / span 6;
    grid-template-columns: minmax(0, 1fr);
    align-self: stretch;
    align-content: start;
    margin-top: 0;
    padding-left: var(--space-xs);
    border-left: 1px solid var(--hairline);
  }

  .rail__list { display: block; }
  .rail__item + .rail__item { border-top: 1px solid var(--hairline); }
  .rail__item + .rail__item::before { content: none; }
  .rail__photo { --photo-size: 7.5rem; }

  .cropmark { display: block; }

  .lead::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.5rem;
    background: linear-gradient(to bottom, transparent, rgb(22 19 15 / .05) 60%, rgb(255 255 255 / .55) 61%, transparent);
    pointer-events: none;
  }

  /* Desks: the lead across two rows, then 3 + 3, then 2 + 2 + 2. */
  .desks__grid > .desk--lead { grid-row: 1 / span 2; }
  .desks__grid > .desk.desk--fintech { grid-column: 7 / span 3; }
  .desks__grid > .desk.desk--web { grid-column: 10 / span 3; grid-row: 1; padding-top: 0; border-top: 0; }
  .desks__grid > .desk--cloud { grid-column: 7 / span 2; grid-row: 2; }
  .desks__grid > .desk--advisory { grid-column: 9 / span 2; grid-row: 2; }
  .desks__grid > .desk--team { grid-column: 11 / span 2; grid-row: 2; }
  .desk--small .desk__hed { font-size: 1.1875rem; line-height: 1.2; }
  .desk--small .desk__text { font-size: var(--fs-small); line-height: 1.5; }

  .ledger__notes .footnotes { column-gap: calc(var(--gutter) * 2); }
}