/* The letters: the newsletter's pages on the site (the 2026-10-07 boards Novidades,
   NewsWeb and the latest-letter band of Main).

   Every rule sits under `.rv-cartas`, the wrapper on the root of each of the three
   templates that use it: `newsletter/_latest.html` (the home's band, where the wrapper
   is the band itself), `newsletter/archive.html` and `newsletter/issue.html`. The base
   links this sheet on every page, so a boosted navigation stays styled, and the
   wrapper keeps it off every other page.

   The pages are built from the base sheet's shared parts: the grounds (`.rv-g-*`), the
   band paddings and the 3 px rule, the tag and its dot, the kicker, the lede, the
   buttons, the yellow call (`.rv-cta-*`) and the form's base look (`.rv-form`). The
   base also owns every movement and the resting look of the four pieces that move
   here: the date stub (`.rv-stub`), the badge (`.rv-new`), the dealt card (`.rv-deal`)
   and the opening letter (`.rv-unfold`). What is here is this page's layout, the
   stub's shape and sizes in each place, and the two values the base's rules read per
   item: `--i`, the order the platform's rise staggers by, and `--rv-deal`, the turn a
   card is dealt with. Nothing here moves.

   Colours are the base's tokens. Pairs: the ink on the cream (16.66:1), on the yellow
   (11.19:1) and on the orange (5.73:1); the cream on the green ground (4.54:1); the
   text-safe orange on the cream (4.56:1). */

/* ------------------------------------------------------------ the letter's card */
/* A letter as a card (the home's band and the archive): the 3 px ink rim, its own
   cream ground (`.rv-g-cream` in the markup), one column on a phone; the date as a
   stub, the words, the button. A letter with no date (`.rv-letter-undated`) has no
   stub, and its grid loses that column. */
.rv-cartas .rv-letter {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  border: 3px solid var(--rv-ink);
}
.rv-cartas .rv-letter-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.875rem;
  min-width: 0;
}
.rv-cartas .rv-letter-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.875rem;
}
.rv-cartas .rv-letter-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}
.rv-cartas .rv-letter-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.9;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.rv-cartas .rv-letter-lede {
  max-width: 62ch;
  font-size: 1.0625rem;
  line-height: 1.55;
  text-wrap: pretty;
}

/* ------------------------------------------------------------ the home's band */
/* On the orange under the 3 px rule: the kicker, the card with its hard ink shadow,
   dealt with a turn to the left, then the link to every letter (the Phone board's
   order, the source's); from 51.25rem the link stands on the kicker's baseline, at
   the right, as the Main board draws it. */
.rv-cartas.rv-latest {
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.rv-cartas .rv-latest-inner {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vw, 2rem);
}
.rv-cartas .rv-latest-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
}
.rv-cartas .rv-latest-all {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-underline-offset: 0.25rem;
  text-transform: uppercase;
  white-space: nowrap;
}
.rv-cartas .rv-latest-all:hover {
  text-decoration-thickness: 3px;
}
.rv-cartas .rv-letter-big {
  --rv-deal: -2deg;
  box-shadow: 0.5rem 0.5rem 0 var(--rv-ink);
}
.rv-cartas .rv-letter-big .rv-stub {
  padding: 1.5rem;
  border-bottom: 3px solid var(--rv-ink);
}
.rv-cartas .rv-letter-big .rv-stub-wd {
  font-size: 0.8125rem;
}
.rv-cartas .rv-letter-big .rv-stub-day {
  font-size: 6rem;
}
.rv-cartas .rv-letter-big .rv-stub-mon {
  font-size: 1.5rem;
}
.rv-cartas .rv-letter-big .rv-letter-text {
  gap: 1.125rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.rv-cartas .rv-letter-big .rv-letter-title {
  font-size: clamp(3.25rem, 6vw, 6rem);
}
.rv-cartas .rv-letter-big .rv-letter-lede {
  font-size: clamp(1.0625rem, 1.25vw, 1.125rem);
}
.rv-cartas .rv-letter-acts {
  gap: 0.75rem 1.25rem;
  margin-top: 0.25rem;
}
/* On a phone (the Phone board) the stub is a dateline across the card's top, as the
   ticket's is: the day large on the left, the weekday over the month and year beside
   it. The link to every letter rises after the card. */
@media (max-width: 51.24rem) {
  .rv-cartas .rv-letter-big .rv-stub {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
      "day wd"
      "day mon";
    justify-content: start;
    align-items: center;
    gap: 0.25rem 0.75rem;
    padding: 1rem 1.25rem;
    text-align: left;
  }
  .rv-cartas .rv-letter-big .rv-stub-day {
    grid-area: day;
    font-size: 4.5rem;
  }
  .rv-cartas .rv-letter-big .rv-stub-wd {
    grid-area: wd;
    align-self: end;
  }
  .rv-cartas .rv-letter-big .rv-stub-mon {
    grid-area: mon;
    align-self: start;
    font-size: 1.375rem;
  }
  .rv-cartas .rv-latest-more {
    --i: 2;
  }
}
/* From the board's 820 px the stub stands beside the words, its rule on its right;
   the kicker and the link share the first row, the card spans the second. */
@media (min-width: 51.25rem) {
  .rv-cartas .rv-latest-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1.25rem;
  }
  .rv-cartas .rv-latest-head {
    grid-column: 1;
    grid-row: 1;
    align-self: baseline;
  }
  .rv-cartas .rv-latest-more {
    grid-column: 2;
    grid-row: 1;
    align-self: baseline;
  }
  .rv-cartas .rv-latest-inner > .rv-letter {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .rv-cartas .rv-letter-big {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .rv-cartas .rv-letter-big.rv-letter-undated {
    grid-template-columns: minmax(0, 1fr);
  }
  .rv-cartas .rv-letter-big .rv-stub {
    min-width: 11.25rem;
    border-right: 3px solid var(--rv-ink);
    border-bottom: 0;
  }
}

/* ------------------------------------------------------------ the archive */
/* The first screen on the cream, as the week's page draws its own: the tag over a
   two-column grid, the headline left (a size under the home's), the lede and the two
   buttons right, on the headline's foot line. */
.rv-cartas .rv-cartas-hero-inner {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.rv-cartas .rv-cartas-hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: end;
  gap: clamp(1.75rem, 4vw, 3.5rem);
}
.rv-cartas .rv-cartas-h1 {
  font-size: clamp(4rem, 9vw, 8.5rem);
  line-height: 0.88;
}
.rv-cartas .rv-cartas-hero-col {
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
  min-width: 0;
}
/* The platform's first-paint rise (its class is in the markup) staggers the hero's
   pieces by `--i`: the tag, the lede, the buttons. The headline holds still. */
.rv-cartas .rv-cartas-lede {
  --i: 1;
}
.rv-cartas .rv-cartas-acts {
  --i: 2;
}

/* Every letter on the green: the count under the yellow dot, the headline, the cards
   one above the other, dealt in with alternate turns. */
.rv-cartas .rv-cartas-all-inner {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 4vw, 3rem);
}
.rv-cartas .rv-cartas-all-head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.rv-cartas .rv-cartas-count {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.rv-cartas .rv-cartas-h2 {
  font-size: clamp(3.25rem, 7vw, 6.5rem);
  line-height: 0.9;
}
.rv-cartas .rv-letters {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rv-cartas .rv-letters > li:nth-child(odd) > .rv-deal {
  --rv-deal: -2deg;
}
.rv-cartas .rv-letters > li:nth-child(even) > .rv-deal {
  --rv-deal: 2deg;
}
.rv-cartas .rv-letters .rv-letter {
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: clamp(1.125rem, 2.4vw, 1.75rem);
}
/* On a phone the stub is a dateline across the card's top: weekday, day, month. */
.rv-cartas .rv-letters .rv-stub {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.25rem 0.875rem;
  padding: 0.875rem 1rem;
  border: 3px solid var(--rv-ink);
}
.rv-cartas .rv-letters .rv-stub-wd {
  font-size: 0.75rem;
}
.rv-cartas .rv-letters .rv-stub-day {
  font-size: 4.5rem;
}
.rv-cartas .rv-letters .rv-stub-mon {
  font-size: 1.375rem;
}
.rv-cartas .rv-letters .rv-letter-title {
  font-size: clamp(2.25rem, 4vw, 3.5rem);
}
.rv-cartas .rv-letter-go {
  align-self: center;
  justify-self: start;
}
@media (min-width: 51.25rem) {
  .rv-cartas .rv-letters .rv-letter {
    grid-template-columns: 10rem minmax(0, 1fr) auto;
    align-items: stretch;
  }
  .rv-cartas .rv-letters .rv-letter-undated {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .rv-cartas .rv-letters .rv-stub {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 1.125rem 0.875rem;
  }
}
/* The platform's pages: newer left, the count between, older right, under a rule of
   the cream's 35 % tone. */
.rv-cartas .rv-cartas-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--rv-cream-rule);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rv-cartas .rv-cartas-pages a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}
.rv-cartas .rv-cartas-pages a:hover {
  text-decoration-thickness: 3px;
}
.rv-cartas .rv-cartas-empty {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.rv-cartas .rv-cartas-empty p {
  max-width: 52ch;
  font-size: 1.0625rem;
  line-height: 1.5;
  text-wrap: pretty;
}

/* ------------------------------------------------------------ the sign-up band */
/* The yellow call's layout (`.rv-cta-band` in the markup): the owner's two sentences
   on the left, the platform's newsletter form on the right, drawn square as the
   community page draws its own. The form is the platform's, untouched, and so is its
   order: the submit stays beside the email field, before the consent, as the keyboard
   reaches them. */
.rv-cartas .rv-cartas-list-text {
  flex: 1 1 22.5rem;
  min-width: 0;
}
.rv-cartas .rv-cartas-form {
  flex: 0 1 30rem;
  min-width: 0;
}
.rv-cartas .rv-cartas-all-head .rv-beat {
  --rv-beat-turn: 1deg;
}
.rv-cartas .rv-cartas-form button[type="submit"] {
  align-self: flex-start;
  min-height: 3.5rem;
  margin: 0;
  padding: 1rem 1.75rem;
  font-size: 1.5rem;
}
@media (min-width: 40rem) {
  .rv-cartas .rv-cartas-form button[type="submit"] {
    align-self: flex-end;
  }
}
.rv-cartas .rv-cartas-form .fieldset {
  padding-block: 0;
}
.rv-cartas .rv-cartas-form .fieldset-legend {
  padding-block: 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rv-cartas .rv-cartas-form .input {
  width: 100%;
  height: 3.5rem;
  padding: 0.75rem 1rem;
  border: 3px solid var(--rv-ink);
  background: var(--rv-cream);
  color: var(--rv-ink);
  font-size: 1.0625rem;
}
.rv-cartas .rv-cartas-form .checkbox {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--rv-ink);
  background-color: var(--rv-cream);
}
.rv-cartas .rv-cartas-form label.text-sm {
  font-size: 0.9375rem;
  line-height: 1.45;
}
.rv-cartas .rv-cartas-form .text-error {
  color: var(--rv-ink);
}
.rv-cartas .rv-cartas-form button:focus-visible {
  outline: 3px solid var(--rv-ink);
  outline-offset: 3px;
}

/* ------------------------------------------------------------ a letter's page */
/* One 680 px column for the header, the letter and the share block. */
.rv-cartas .rv-cartas-col {
  width: 100%;
  max-width: 42.5rem;
  margin-inline: auto;
}
/* The header on the cream: shorter than a first screen, no headline of its own (the
   letter's subject is the page's heading). The kicker, the date and the way back rise
   in that order. */
.rv-cartas .rv-cartas-top {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2.25rem, 5vw, 3.5rem);
}
.rv-cartas .rv-cartas-top-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
}
.rv-cartas .rv-cartas-preview {
  padding: 0.75rem 1rem;
  border: 3px solid var(--rv-ink);
  background: var(--rv-yellow);
  color: var(--rv-ink);
  font-weight: 600;
  line-height: 1.45;
}
.rv-cartas .rv-cartas-date {
  --i: 1;
  font-size: 1rem;
  line-height: 1.5;
}
.rv-cartas .rv-cartas-back {
  --i: 2;
}
.rv-cartas .rv-cartas-back a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-underline-offset: 0.25rem;
  text-transform: uppercase;
}
.rv-cartas .rv-cartas-back a:hover {
  text-decoration-thickness: 3px;
}
/* The letter: its frozen body untouched, on the cream under the 3 px ink rim. The
   body is the email's own markup, sized for 600 px and bounded by nothing of its own,
   so the column bounds it; a long address in it wraps rather than widening the page. */
.rv-cartas .rv-cartas-read {
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.rv-cartas .rv-cartas-sheet {
  max-width: 42.5rem;
  margin-inline: auto;
  border: 3px solid var(--rv-ink);
  background: var(--rv-cream);
  overflow-wrap: break-word;
}
/* A letter sent before website editions existed arrives inside the platform's live
   `_body.html` frame, which draws a rounded rim of its own: inside the ink rim it
   would be a second one, so it goes. Its column and the letter itself are untouched. */
.rv-cartas .rv-cartas-sheet > .newsletter-body {
  border: 0;
  border-radius: 0;
}
.rv-cartas .rv-cartas-sheet > .newsletter-body:has(.nl-pad) {
  width: 100%;
  max-width: none;
  padding: 0;
}
/* NewsWeb's body treatment, applied to the retained compact recipe only. The
   platform's inline email styles and phone rules remain in the stored body; these
   scoped declarations win on this website without changing a letter's bytes.
   `.nl-pad` identifies compact rows, including those inside the historical
   `.newsletter-body` wrapper. Original/markerless letters keep their own layout.
   D3 keeps the brand row and the subject as the one h1. Retained pictures keep their
   complete pixels and proportions; new look-specific crops belong to DL-8. */
.rv-cartas .rv-cartas-sheet .nl-pad {
  padding: 1.5rem !important;
  border-bottom: 3px solid var(--rv-ink) !important;
  background: var(--rv-cream) !important;
  color: var(--rv-ink) !important;
  font-family: var(--font-sans) !important;
  line-height: 1.6 !important;
}
.rv-cartas .rv-cartas-sheet .nl-pad:last-child {
  border-bottom: 0 !important;
}
.rv-cartas .rv-cartas-sheet .nl-pad:has(> .nl-title) {
  background: var(--rv-yellow) !important;
}
.rv-cartas .rv-cartas-sheet .nl-title {
  font-family: var(--font-display) !important;
  font-size: 2.5rem !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase !important;
}
.rv-cartas .rv-cartas-sheet .nl-pad:last-child img {
  box-sizing: border-box;
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  border: 3px solid var(--rv-ink) !important;
  border-radius: 0 !important;
}
/* The recipe has no semantic block class in retained editions. Its direct body
   blocks all carry padding-top; the introduction does not. This also frames text
   blocks that the compact email recipe leaves without a dividing rule. */
.rv-cartas .rv-cartas-sheet .nl-pad:last-child > div[style*="padding-top:"] {
  margin-top: 1.5rem !important;
  padding-top: 1.5rem !important;
  border-top: 3px solid var(--rv-ink) !important;
}
.rv-cartas .rv-cartas-sheet .nl-pad h2,
.rv-cartas .rv-cartas-sheet .nl-pad h3,
.rv-cartas .rv-cartas-sheet .nl-pad h4 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase !important;
}
.rv-cartas .rv-cartas-sheet .nl-pad :is(h2, h3, h4, h5, h6) {
  color: var(--rv-ink) !important;
}
.rv-cartas .rv-cartas-sheet .nl-pad h2 {
  font-size: 1.875rem !important;
}
.rv-cartas .rv-cartas-sheet .nl-pad h2:has(+ table[role="presentation"]) {
  font-size: 1.75rem !important;
}
.rv-cartas .rv-cartas-sheet .nl-pad h3 {
  font-size: 1.625rem !important;
}
.rv-cartas .rv-cartas-sheet .nl-pad:last-child > div[style*="padding-top:"] > p:has(+ h2),
.rv-cartas .rv-cartas-sheet .nl-pad table[role="presentation"] td > p:has(+ h3) {
  color: var(--rv-orange-text) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* Markdown headings and semantic tables may retain a former dark email palette.
   Keep their text readable on this website's cream without changing table semantics
   or treating author prose before a heading as a source kicker. */
.rv-cartas .rv-cartas-sheet .nl-pad table:not([role="presentation"]),
.rv-cartas .rv-cartas-sheet .nl-pad table:not([role="presentation"]) :is(th, td) {
  border-color: var(--rv-ink) !important;
  background: var(--rv-cream) !important;
  color: var(--rv-ink) !important;
}
.rv-cartas .rv-cartas-sheet .nl-pad table:not([role="presentation"]) th {
  background: var(--rv-yellow) !important;
}
.rv-cartas .rv-cartas-sheet .nl-pad blockquote {
  border-left-color: var(--rv-orange-text) !important;
}
/* Website columns wrap at their available width, rather than at the email's
   viewport-only breakpoint. This keeps a 520px phone and a narrow preview readable.
   A one-slot row still fills the column. Native table semantics are presentation. */
.rv-cartas .rv-cartas-sheet .nl-pad table[role="presentation"] {
  display: block;
  width: 100%;
}
.rv-cartas .rv-cartas-sheet .nl-pad table[role="presentation"] > tbody {
  display: block;
}
.rv-cartas .rv-cartas-sheet .nl-pad table[role="presentation"] tr {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1.5rem;
}
.rv-cartas .rv-cartas-sheet .nl-pad table[role="presentation"] td {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  padding: 0 !important;
}
.rv-cartas .rv-cartas-sheet .nl-pad a {
  color: var(--rv-ink) !important;
  font-weight: 700;
  text-decoration: underline 2px var(--rv-orange);
  text-underline-offset: 0.2em;
}
.rv-cartas .rv-cartas-sheet .nl-pad table[role="presentation"] td > a:last-child {
  display: inline-flex !important;
  align-items: center;
  gap: 0.35em;
  min-height: 2.75rem;
  padding: 0.75rem 1.125rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--rv-ink) !important;
  color: var(--rv-cream) !important;
  font-family: var(--font-display) !important;
  font-size: 1.25rem !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}
.rv-cartas .rv-cartas-sheet .nl-pad a:focus-visible {
  outline: 3px solid var(--rv-ink);
  outline-offset: 3px;
}
@media (max-width: 40rem) {
  .rv-cartas .rv-cartas-sheet .nl-pad {
    padding: 1.25rem !important;
  }
  .rv-cartas .rv-cartas-sheet .nl-title {
    font-size: 2rem !important;
  }
}
/* The share block: the link in a read-only field drawn square, under a 3 px rule. */
.rv-cartas .rv-cartas-share {
  padding-block: 0 clamp(2.5rem, 6vw, 4rem);
}
.rv-cartas .rv-cartas-share-inner {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding-top: 1.5rem;
  border-top: 3px solid var(--rv-ink);
}
.rv-cartas .rv-cartas-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.rv-cartas .rv-cartas-field-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rv-cartas .rv-cartas-url {
  width: 100%;
  min-height: 3.5rem;
  padding: 0.75rem 1rem;
  border: 3px solid var(--rv-ink);
  border-radius: 0;
  background: var(--rv-cream);
  color: var(--rv-ink);
  font-size: 1rem;
}
.rv-cartas .rv-cartas-url:focus-visible {
  outline: 3px solid var(--rv-ink);
  outline-offset: 3px;
}