.news { padding-inline: var(--gut); }
.news__panel {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 96px); align-items: center;
  max-width: 1480px; margin-inline: auto; padding: clamp(40px, 7vw, 112px) clamp(24px, 6vw, 104px);
  border-radius: clamp(28px, 4vw, 56px); background: var(--ink); color: #D9D5F2;
}
.news__panel--solo { grid-template-columns: minmax(0, 1fr); }
.news__panel--solo .news__copy { max-width: 760px; }
.news__art { position: absolute; z-index: -1; left: -70px; top: -96px; width: clamp(220px, 22vw, 320px); opacity: .13; rotate: -10deg; pointer-events: none; }
.news .h2 { color: #fff; font-size: clamp(2rem, 3.8vw, 3.5rem); }
.news .h2 em { color: var(--blush-2); }
.news__lead { max-width: 46ch; margin: 24px 0 0; font-size: 1.15rem; }
.news__lead strong { color: #fff; }
.news__note { margin: 20px 0 0; font-size: .95rem; }
.subscribe--embed { color: #fff; }
.letter {
  position: relative; padding: clamp(28px, 3.2vw, 48px); border-radius: var(--r-tile); background: #FFFDFB; color: var(--text);
  rotate: 2deg; box-shadow: 0 40px 80px -40px rgb(0 0 0 / .7);
}
.letter__small { margin: 0 0 14px; color: var(--muted); font-size: .92rem; }
.letter__intro { margin: 0 0 24px; color: var(--ink); font: italic 500 clamp(1.4rem, 2vw, 1.75rem) / 1.3 var(--font-d); }
.letter__q { margin: 0 0 12px; color: var(--ink); font-weight: 700; }
.letter__list { display: grid; gap: 10px; }
.letter__list li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.5; }
.letter__list .ph { flex: none; margin-top: 4px; color: var(--rose-deep); }
.letter__end { margin: 22px 0 0; color: var(--ink); font: italic 500 1.25rem / 1.35 var(--font-d); }
.letter__sign { width: 132px; margin: 6px 0 -10px -8px; }

@media (prefers-reduced-motion: no-preference) {
  .js .letter[data-reveal] { transform: translateY(32px); }
  .js .letter[data-reveal].is-in { transform: none; }
}

@media (max-width: 1023px) {
  .news__panel { grid-template-columns: 1fr; }
  .news__art { right: -10%; bottom: auto; top: -6%; }
  .letter { rotate: 1deg; }
}
@media (max-width: 767px) {
  .letter { rotate: 0deg; }
}