/* The web copy of a sent "What breaks next" issue. The page shows the email as the reader would get it:
   the issue is a letter on a lighter panel, opened by the subject line it went out with, and the form for
   the next one stays beside it. At 1440 the title and that form hold the left column while the letter is
   read; on phones they come first, and a second form follows the letter. Commands wrap inside their block
   (the copy is the command; a soft wrap adds nothing), so the page never scrolls sideways and no block
   needs its own scroll. The body is the sent HTML, unchanged, so it is styled by element. */
.wbn-wrap { display: grid; gap: var(--wp-8) var(--wp-12); grid-template-columns: minmax(18rem, 1fr) minmax(0, 46rem); padding-top: clamp(32px, 5vw, 72px); }
.wbn-head { align-content: start; display: grid; gap: var(--wp-4); }
.wbn-kicker { color: var(--wp-muted); font: 500 .875rem/1.3 var(--wp-font-mono); letter-spacing: .06em; text-transform: uppercase; }
.wbn h1 { font: 500 clamp(2.25rem, 4.2vw, 3.5rem)/1 var(--wp-font-display); letter-spacing: -.04em; text-wrap: balance; }
.wbn-top { font-size: var(--wp-text-lede); font-weight: 500; line-height: 1.4; }
.wbn-note { color: var(--wp-muted); font-size: .9375rem; line-height: 1.5; max-width: 34rem; }
/* the form beside the title; its rule parts it from the note */
main.page.wbn .wbn-head .mq-signup { margin-top: var(--wp-2); }

/* the letter */
.wbn-letter { background: var(--wp-panel); border: 1px solid var(--wp-hair); border-top: 3px solid var(--wp-ink); grid-column: 2; grid-row: 1 / span 2; padding: 0 clamp(20px, 3.4vw, 48px) clamp(24px, 3.4vw, 48px); }
.wbn-subject { border-bottom: 1px solid var(--wp-hair); display: grid; gap: var(--wp-1) var(--wp-4); grid-template-columns: auto minmax(0, 1fr); padding: var(--wp-4) 0; }
.wbn-subject-key { color: var(--wp-muted); font: 500 .875rem/1.6 var(--wp-font-mono); letter-spacing: .06em; text-transform: uppercase; }
.wbn-subject-line { font-weight: 600; line-height: 1.45; }
.wbn-body { font-size: 1.0625rem; line-height: 1.65; }
.wbn-body > * { max-width: 62ch; }
.wbn-body h2 { font: 500 clamp(1.5rem, 2.2vw, 1.875rem)/1.1 var(--wp-font-display); letter-spacing: -.025em; margin: var(--wp-12) 0 0; text-wrap: balance; }
.wbn-body h2:first-child { margin-top: var(--wp-8); }
.wbn-body p { margin: var(--wp-4) 0 0; }
.wbn-body h2 + p { margin-top: var(--wp-4); }
.wbn-body b { font-weight: 600; }
.wbn-body a { overflow-wrap: anywhere; text-decoration-color: var(--oa-blue-deep); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.wbn-body code { background: var(--wp-paper); font: .875em/1 var(--wp-font-mono); overflow-wrap: anywhere; padding: .1em .25em; }
.wbn-body pre { background: var(--wp-paper); border-left: 2px solid var(--wp-ink); font: .875rem/1.55 var(--wp-font-mono); margin: var(--wp-3) 0 0; max-width: none; overflow-wrap: anywhere; padding: var(--wp-3) var(--wp-4); white-space: pre-wrap; }
.wbn-body hr { border: 0; border-top: 1px solid var(--wp-hair); margin: var(--wp-12) 0 0; }
/* After the rule: where every date lives, who wrote it, corrections and the address. */
.wbn-body hr ~ p { color: var(--wp-muted); font-size: .9375rem; line-height: 1.55; }

/* the form after the letter, in the letter's column */
.wbn-signup { grid-column: 2; }
main.page.wbn .mq-signup { margin-top: var(--wp-4); }

/* At 1440 the head runs the letter's full height and only the form stays in view while the letter is read: the
   whole head is taller than a laptop screen, the form alone is not. */
@media (min-width: 1001px) {
  .wbn-head { grid-row: 1 / span 2; }
}
@media (min-width: 1001px) and (min-height: 600px) {
  main.page.wbn .wbn-head .mq-signup { position: sticky; top: var(--wp-8); }
}
@media (max-width: 1000px) {
  .wbn-wrap { grid-template-columns: minmax(0, 1fr); }
  .wbn-letter, .wbn-signup { grid-column: 1; grid-row: auto; }
  .wbn-head { max-width: 40rem; }
}
@media (max-width: 30rem) {
  .wbn-letter { margin-inline: calc(-1 * var(--wp-2)); }
  .wbn-subject { grid-template-columns: minmax(0, 1fr); }
  .wbn-body { font-size: 1rem; }
}