/* ==========================================================================
   Editorial Ledger: reviews.css (C1, Reviews: letters to the editor)
   Page head tally and editor's note, the lead letters (C2), short takes (C3),
   regular correspondents (C4), the mailbag with its topic filters (C5, pages
   C6 to C20) and the jump line.
   Page CSS only: tokens, the letter component and reveal states live in
   base.css (see COMPONENTS.md). Budget: 5 KB gzip.
   Order: Sections, Animations, Media Queries.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Sections: page head (C1)
   -------------------------------------------------------------------------- */

/* The count of printed letters: inline on phones, a side column from 64rem. */
.tally {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin-top: var(--space-m);
  padding-block: var(--space-xs);
  border-block: 1px solid var(--hairline);
}

.tally__figure {
  font-size: 3.5rem;
  font-weight: 600;
  line-height: .85;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.tally__label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.page-head__note {
  max-width: 36rem;
  margin-top: var(--space-m);
}


/* --------------------------------------------------------------------------
   Sections: the lead letters (C2), on a bright sheet between ink rules
   -------------------------------------------------------------------------- */

.weekly {
  background: var(--paper-bright);
  border-block: 1px solid var(--ink);
}

.weekly__grid > .letter {
  position: relative;
  grid-column: 1 / -1;
  gap: var(--space-s);
}

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

/* The red opening mark stands above the letter, so it never hangs off a phone
   screen or into a column rule. */
.weekly .letter--lead .letter__text::before {
  position: static;
  display: block;
  height: .5em;
  margin-bottom: .08em;
  transform: none;
}


/* --------------------------------------------------------------------------
   Sections: short takes (C3), a ruled grid
   -------------------------------------------------------------------------- */

.takes__grid {
  display: grid;
  column-gap: calc(var(--gutter) * 2);
}

.takes__grid .letter {
  position: relative;
  padding-block: var(--space-m) var(--space-l);
  padding-left: .5rem; /* room for the hanging opening mark */
  border-top: 1px solid var(--hairline);
}


/* --------------------------------------------------------------------------
   Sections: regular correspondents (C4), a double-ruled box
   -------------------------------------------------------------------------- */

.regulars__box {
  row-gap: var(--space-l);
  padding-block: var(--space-m) var(--space-l);
  border-bottom: 1px solid var(--ink);
}

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

.regulars__head {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
}

.regulars__figure {
  margin-top: var(--space-xs);
  font-size: var(--fs-deck);
  font-style: italic;
  line-height: 1.3;
  color: var(--ink-soft);
  max-width: 16ch;
}

/* The big figure stands above its caption. */
.regulars__figure .slug {
  display: block;
  width: max-content;
  margin-bottom: .375rem;
  font-size: clamp(3.5rem, 2.4rem + 4.6vw, 6rem);
  font-style: normal;
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--ink);
}

.regulars__letters {
  display: grid;
  column-gap: calc(var(--gutter) * 2);
}

.regulars__letters .letter {
  position: relative;
  padding-block: var(--space-s) var(--space-m);
  border-top: 1px solid var(--rule);
}


/* --------------------------------------------------------------------------
   Sections: the mailbag (C5, pages C6 to C20)
   -------------------------------------------------------------------------- */

/* display values below would beat the hidden attribute without this. */
.mailbag [hidden] { display: none; }

/* With JavaScript the filter strip keeps its place while reviews.js is on its
   way (scripts load after the first paint), so no letter moves when it shows. */
.js .mailbag .filters[hidden] {
  display: flex;
  visibility: hidden;
}

.mailbag .section-head { margin-bottom: var(--space-m); }

/* Topic filters: a sticky strip under the section bar. It scrolls sideways
   inside itself when the seven tabs do not fit; the page never does. */
.filters {
  position: sticky;
  top: var(--bar-h);
  z-index: 20;
  display: flex;
  margin-inline: calc(var(--margin) * -1);
  padding-inline: var(--margin);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  background: var(--grain) 0 0 / 180px 180px, var(--paper);
  border-bottom: 1px solid var(--ink);
}

.filters__track {
  position: relative;
  display: flex;
  flex: none;
}

/* A scroller drops its end padding, so the last tab gets its margin here. */
.filters::after {
  content: "";
  flex: none;
  width: var(--margin);
}

/* End cap: a paper block with an arrow at the strip's right edge while more
   topics wait past it (reviews.js sets .is-end). It takes no room in the strip. */
.filters__cap {
  position: sticky;
  right: calc(var(--margin) * -1); /* sticky offsets count from the strip's padding edge */
  order: 1; /* after the end margin, so it rests at the very edge */
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  margin-left: -2rem;
  background: var(--grain) 0 0 / 180px 180px, var(--paper);
  border-left: 1px solid var(--hairline);
  pointer-events: none;
  transition: opacity var(--dur-1);
}

.filters.is-end .filters__cap { opacity: 0; }

.filters__btn {
  display: inline-flex;
  align-items: baseline;
  gap: .4375rem;
  min-height: 2.75rem;
  padding: .875rem .75rem .75rem;
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  transition: background-color var(--dur-1), color var(--dur-1);
}

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

.filters__btn:focus-visible { outline-offset: -3px; }

.filters__btn[aria-pressed="true"] {
  background: var(--accent-wash);
  color: var(--ink);
}

/* Counts are figures, so they are set in Newsreader (Franklin has no tabular digits). */
.filters__count {
  font-family: var(--font-serif);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}

/* The red underline: reviews.js gives it the active tab's offset and width. */
.filters__line {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 3px;
  background: var(--accent);
  transform: translateX(var(--line-x, 0)) scaleX(var(--line-w, 0));
  transform-origin: 0 50%;
  transition: transform var(--dur-3) var(--ease-turn);
}

.mailbag__status {
  padding-block: var(--space-s) var(--space-l);
  font-size: var(--fs-small);
  font-style: italic;
  line-height: 1.4;
  color: var(--ink-soft);
}

.mailbag__status .slug {
  font-style: normal;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

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

.mailbag__page + .mailbag__page { margin-top: var(--space-xl); }

/* "Print the next 12 letters" (reviews.js adds it, below 48rem only). */
.mailbag__more {
  display: grid;
  margin-top: var(--space-l);
}

.mailbag__folio {
  column-span: all;
  margin-bottom: var(--space-2xs);
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* A hairline under every letter, so every column starts and ends the same way.
   A deep link lands below the section bar and the sticky filters. */
.mailbag__page .letter {
  break-inside: avoid;
  padding-block: var(--space-s) var(--space-m);
  border-bottom: 1px solid var(--hairline);
  scroll-margin-top: calc(var(--bar-h) + 5rem);
}

/* The letter a "Read in full" link points to. */
.mailbag__page .letter:target {
  background: var(--accent-wash);
  outline: .5rem solid var(--accent-wash);
}

.mailbag__page .letter:target .letter__sig { color: var(--ink-soft); }


/* --------------------------------------------------------------------------
   Animations
   -------------------------------------------------------------------------- */

/* Lead letters: each opening mark settles on y after its letter fades up. */
.motion .weekly .letter--lead .letter__text::before {
  transition: opacity var(--dur-4) var(--ease-press), transform var(--dur-4) var(--ease-press);
  transition-delay: calc(240ms + var(--i, 0) * 120ms);
}

.motion .weekly .letter--lead:not(.is-in) .letter__text::before {
  opacity: 0;
  transform: translateY(.25em);
}

/* Mailbag pages fade in once on enter. reviews.js adds .mailbag--live before
   it hides anything, so a page can never stay hidden without it. */
.motion .mailbag--live .mailbag__page { transition: opacity var(--dur-4) var(--ease-press); }
.motion .mailbag--live .mailbag__page:not(.is-shown) { opacity: 0; }


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

@media (min-width: 48rem) {
  .takes__grid,
  .regulars__letters { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Column rule, centered in the gap, before the second letter of each row. */
  .takes__grid .letter:nth-child(even)::after,
  .regulars__letters .letter:nth-child(even)::after {
    content: "";
    position: absolute;
    top: var(--space-s);
    bottom: var(--space-s);
    left: calc(var(--gutter) * -1);
    width: 1px;
    background: var(--hairline);
  }

  .regulars__letters .letter:nth-child(even)::after { background: var(--rule); }

  .mailbag__page { columns: 2; }
}

@media (min-width: 64rem) {
  /* Page head: the tally stands in the last three columns beside the headline. */
  .tally {
    grid-column: 10 / span 3;
    grid-row: 3 / 6;
    align-self: end;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
    margin-top: 0;
    padding: 0 0 .25rem var(--gutter);
    border-block: 0;
    border-left: 1px solid var(--hairline);
  }

  .tally__figure { font-size: var(--fs-figure); }

  .page-head__inner > .page-head__note { grid-column: 1 / span 6; }

  .weekly__grid > .letter { grid-column: span 4; }

  .weekly__grid > .letter + .letter {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .weekly__grid > .letter + .letter::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--gutter) / -2);
    width: 1px;
    background: var(--hairline);
  }

  /* Regulars: the figure in three columns, the six letters beside it. */
  .regulars__head { grid-column: 1 / span 3; }
  .regulars__letters { grid-column: 4 / span 9; }

  .filters {
    margin-inline: 0;
    padding-inline: 0;
  }

  .filters::after { content: none; }
  .filters__cap { display: none; }

  .filters__btn { padding-inline: 1rem; }

  .mailbag__page { columns: 3; }
}

@media (min-width: 80rem) {
  /* Short takes: 5 x 2. */
  .takes__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: var(--gutter);
  }

  .takes__grid .letter { padding-left: .625rem; }

  .takes__grid .letter:nth-child(n)::after {
    content: "";
    position: absolute;
    top: var(--space-s);
    bottom: var(--space-s);
    left: calc(var(--gutter) / -2);
    width: 1px;
    background: var(--hairline);
  }

  .takes__grid .letter:nth-child(5n + 1)::after { content: none; }

  /* Regulars: six letters 3 x 2. */
  .regulars__letters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--gutter);
  }

  .regulars__letters .letter:nth-child(n)::after {
    content: "";
    position: absolute;
    top: var(--space-s);
    bottom: var(--space-s);
    left: calc(var(--gutter) / -2);
    width: 1px;
    background: var(--rule);
  }

  .regulars__letters .letter:nth-child(3n + 1)::after { content: none; }

  .mailbag__page { columns: 4; }
}

@media (forced-colors: active) {
  .filters__btn[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .filters__line { background: Highlight; }
  .mailbag__page .letter:target { outline-color: Highlight; }
}