/* ═══════════════════ Analysis & opinion: the front and the column ═══════════════════
   Opinion is context, so it runs green: the desk, the braces, the drop cap. */

/* voices are set in italic: roman reports, italic opinion */
.opf .is-story, .art--opinion .is-story { font-style: italic; }

/* ── The front ── */
.opf .secp__title { color: var(--context); }
.opf .desk { margin-top: var(--sp-8); }
.opf .desk__in { padding-block: var(--sp-9) var(--sp-10); }
.opf__latest { display: grid; gap: var(--sp-8) var(--gutter); }

/* Letters to the editor: short, italic, signed */
.letters { display: flex; flex-direction: column; gap: var(--sp-4); }
.letters__title { font-size: 1.875rem; }
.letters__list { display: grid; margin: 0; padding: 0; list-style: none; }
.letter { padding-block: var(--sp-4); border-top: 1px solid var(--rule); }
.letter__on { margin: 0 0 var(--sp-2); font: 600 var(--t-meta)/1.3 var(--sans); color: var(--meta); }
.letter__on a { color: var(--text); text-decoration: none; }
.letter__on a:hover { text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--context); }
.letter blockquote { margin: 0; }
.letter blockquote p { margin: 0; font: italic 500 1.0625rem/1.5 var(--serif); }
.letter__by { margin: var(--sp-2) 0 0; font: 700 var(--t-meta)/1.3 var(--sans); }
.letters__cta { align-self: start; margin-top: auto; }
@container (min-width: 1100px) {
  .opf__latest { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: stretch; }
  .opf__latest > .list2 { grid-column: 1 / 9; }
  .opf__latest > .letters { grid-column: 9 / 13; padding-left: var(--sp-2); }
}

/* ── The column ── */
.byline--opinion .byline__who .portrait { width: 56px; font-size: 1rem; }
.art--opinion .op-first::first-letter {
  float: left; margin: .04em .1em 0 0;
  font: italic 700 4.4em/.8 var(--serif); color: var(--context);
}
.pullquote--voice { border-top-color: var(--context); }
.pullquote--voice footer { color: var(--context); }
@container art (min-width: 1100px) {
  .art--opinion .art__lead { grid-column: 4 / 13; }
  .art--opinion .art__lead .caption { padding-left: 0; }
}