/* ==========================================================================
   Newsroom newsletter page (layout 'newsletter', 2026-10-13)
   Letter layer on top of newsroom-paper.css (tokens, buttons, eyebrows, end card, motion):
   homepage hero plate, a reading column with numbered sections 01–06 and watercolour
   vignettes, and a side rail with the table of contents and the e-mail export.
   Generated by news/src/newsletter-render.mjs; e-mail export: news/newsletter-export.js.
   Scope: .nwl-page (inside body.news-page--paper). Media: assets/home/home-v27/.
   ========================================================================== */

.nwl-page { --nwl-hero-h: clamp(620px, 80svh, 880px); }

/* ---------- Hero (homepage plate on paper) ---------- */

.nwl-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: var(--nwl-hero-h);
  overflow: hidden;
}

.nwl-hero__plate {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  width: min(92vw, calc(var(--nwl-hero-h) * 1.7768));
  aspect-ratio: 1672 / 942;
}

.nwl-hero__plate picture,
.nwl-hero__img {
  display: block;
  width: 100%;
  height: 100%;
}

.nwl-hero__img {
  object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%), linear-gradient(180deg, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 16%), linear-gradient(180deg, #000 80%, transparent 100%);
  mask-composite: intersect;
}

.nwl-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding-block: 28px 56px;
}

.nwl-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  color: var(--nh-muted);
  font-size: 14px;
  font-weight: 500;
}

.nh .nwl-crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--nh-ink-soft);
  text-decoration: none;
}

.nh .nwl-crumbs a:hover { color: var(--nh-link); text-decoration: underline; text-underline-offset: 4px; }

.nwl-hero__copy { max-width: min(620px, 40vw); margin-block: auto; padding-block: 40px 12px; }

.nh .nwl-hero__title {
  margin: 0;
  color: var(--nh-ink);
  font-family: var(--cb-display-font);
  font-size: calc(var(--cb-title-hero) * 1.1);
  font-weight: var(--cb-display-weight);
  letter-spacing: var(--cb-display-tracking);
  line-height: var(--cb-display-leading);
  text-wrap: balance;
}

.nwl-hero__title span,
.nwl-hero__title em { display: block; }

.nwl-hero__title em,
.nwl-title em,
.nwl-signoff__line em {
  font-style: normal;
  background: var(--nh-accent-on-paper);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.nwl-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 24px 0 0;
  color: var(--nh-muted);
  font-size: 14.5px;
  font-weight: 500;
}

/* Signature on its own line, then date · reading time: no orphan separator when it wraps. */
.nwl-hero__meta > :first-child { flex-basis: 100%; color: var(--nh-ink-soft); }

.nwl-hero__meta > * + * + *::before {
  content: "·";
  margin-right: 18px;
  color: rgba(62, 67, 120, .5);
}

.nwl-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: 34px;
}

.nwl-page .nh-btn svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Reading layout ---------- */

.nwl-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  align-items: start;
  gap: clamp(48px, 6vw, 112px);
  padding-block: clamp(40px, 5vw, 72px) clamp(80px, 9vw, 136px);
}

.nwl-letter {
  max-width: 760px;
  color: var(--nh-ink-soft);
  font-size: clamp(18px, 1.3vw, 20px);
  line-height: 1.75;
}

.nwl-letter p { margin: 0 0 1.05em; }
.nwl-letter strong { color: var(--nh-ink); font-weight: 600; }

.nwl-opening {
  padding: clamp(28px, 3.4vw, 48px);
  border-radius: 24px;
  background: var(--nh-card);
  box-shadow: var(--nh-shadow-soft);
}

.nwl-opening > :last-child { margin-bottom: 0; }

.nwl-salutation { color: var(--nh-ink); font-weight: 600; }

/* The news itself: a navy card, display grammar on a dark surface. */
.nwl-announce {
  margin: 34px 0;
  padding: clamp(28px, 3.2vw, 44px);
  border-radius: 20px;
  background:
    radial-gradient(ellipse 60% 80% at 100% 0%, rgba(86, 126, 255, .28), transparent 70%),
    radial-gradient(ellipse 50% 70% at 0% 100%, rgba(103, 224, 185, .16), transparent 70%),
    var(--cb-ink);
  color: var(--cb-display-ink-dark);
  font-family: var(--cb-display-font);
  font-size: calc(var(--cb-title-section-side) * .9);
  font-weight: var(--cb-display-weight);
  letter-spacing: var(--cb-display-tracking);
  line-height: var(--cb-display-leading);
  text-wrap: balance;
}

.nwl-announce span,
.nwl-announce em { display: block; }

.nwl-announce em {
  font-style: normal;
  background: var(--cb-accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---------- Sections 01–06 ---------- */

.nwl-section { padding-top: clamp(68px, 7vw, 108px); scroll-margin-top: calc(var(--cb-chrome-height, 100px) + 24px); }

.nwl-section .nh-eyebrow { margin-bottom: 18px; }

.nwl-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fffdf9;
  box-shadow: 0 6px 16px rgba(61, 44, 14, .1), inset 0 0 0 1px var(--nh-line);
  font-size: 17px;
  letter-spacing: 0;
  line-height: 1;
}

.nh .nwl-title { font-size: calc(var(--cb-title-section-side) * .82); }
.nwl-title em { display: block; }

.nwl-prose { margin-top: 28px; }

.nwl-letter .nwl-statement { color: var(--nh-ink); font-weight: 600; }

.nwl-letter .nwl-note {
  margin: 8px 0 26px;
  padding: 18px 22px;
  border-left: 3px solid #567eff;
  border-radius: 0 16px 16px 0;
  background: rgba(86, 126, 255, .09);
  color: var(--nh-ink);
  font-weight: 600;
}

.nwl-list {
  display: grid;
  gap: 12px;
  margin: 4px 0 26px;
  padding: 0;
  list-style: none;
}

.nwl-list li {
  position: relative;
  padding-left: 40px;
}

.nwl-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .3em;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--nh-ok);
}

.nwl-list li::after {
  content: "";
  position: absolute;
  left: 8px;
  top: calc(.3em + 6px);
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.nwl-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 8px 0 30px;
  padding: 0;
  list-style: none;
}

.nwl-trio li {
  padding: 20px 20px 22px;
  border-top: 3px solid #567eff;
  border-radius: 6px 6px 16px 16px;
  background: var(--nh-card);
  box-shadow: var(--nh-shadow-soft);
  font-size: 16px;
  line-height: 1.5;
}

.nwl-trio li:nth-child(2) { border-top-color: #42bbdf; }
.nwl-trio li:nth-child(3) { border-top-color: #67e0b9; }
.nwl-trio strong { display: block; margin-bottom: 6px; font-size: 19px; letter-spacing: -.01em; }

.nwl-vignette { margin: 30px 0 34px; }
.nwl-vignette img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.nwl-vignette--datacentre img { max-width: 640px; }

.nwl-page .nwl-action {
  max-width: 100%;
  margin-top: 6px;
  padding-block: 14px;
  line-height: 1.3;
  text-align: left;
}

/* ---------- Sign-off ---------- */

.nwl-signoff {
  margin-top: clamp(72px, 8vw, 112px);
  padding-top: 48px;
  border-top: 1px solid var(--nh-line);
}

.nwl-letter .nwl-signoff__line {
  margin: 8px 0 30px;
  color: var(--nh-ink);
  font-family: var(--cb-display-font);
  font-size: calc(var(--cb-title-section-side) * .82);
  font-weight: var(--cb-display-weight);
  letter-spacing: var(--cb-display-tracking);
  line-height: var(--cb-display-leading);
}

.nwl-letter .nwl-signoff__sig { margin-bottom: 8px; color: var(--nh-ink); font-weight: 600; }

.nwl-signoff__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  font-size: 16px;
}

.nwl-signoff__links span { color: rgba(62, 67, 120, .4); }

.nh .nwl-signoff__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--nh-link);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(47, 67, 184, .35);
  text-underline-offset: 4px;
}

.nh .nwl-signoff__links a:hover { color: var(--nh-ink); }

/* ---------- Rail: contents + e-mail export ---------- */

/* Sticky but never taller than the viewport: the export buttons stay reachable on short screens. */
.nwl-rail {
  position: sticky;
  top: calc(var(--cb-chrome-height, 100px) + 28px);
  display: grid;
  gap: 22px;
  max-height: calc(100svh - var(--cb-chrome-height, 100px) - 48px);
  margin: -8px;
  padding: 8px 8px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.nwl-toc {
  padding: 20px 20px 16px;
  border-radius: 20px;
  background: rgba(255, 253, 249, .72);
  box-shadow: inset 0 0 0 1px var(--nh-line);
}

.nwl-toc__title {
  margin: 0 0 10px;
  color: #3e4378;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.nwl-toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }

.nh .nwl-toc a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 6px 10px;
  border-radius: 10px;
  color: var(--nh-ink-soft);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
}

.nwl-toc a span { color: #3e4378; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nh .nwl-toc a:hover { color: var(--nh-link); background: rgba(86, 126, 255, .08); }

.nwl-page svg { flex: none; }
.nwl-export svg,
.nwl-hero__actions svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Internal e-mail export: a quiet, collapsed line under the table of contents. */
.nwl-export {
  margin-top: 6px;
  color: var(--nh-muted);
  font-size: 13.5px;
  line-height: 1.5;
  scroll-margin-top: calc(var(--cb-chrome-height, 100px) + 24px);
}

.nwl-export__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 10px;
  color: var(--nh-muted);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.nwl-export__toggle::-webkit-details-marker { display: none; }
.nwl-export .nwl-export__toggle svg { width: 16px; height: 16px; }
.nwl-export__toggle:hover,
.nwl-export[open] .nwl-export__toggle { color: var(--nh-ink); }
.nwl-export__toggle:focus-visible { outline: 3px solid var(--nh-focus); outline-offset: 2px; }

.nwl-export__body {
  display: grid;
  gap: 8px;
  margin-top: 4px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 253, 249, .6);
  box-shadow: inset 0 0 0 1px var(--nh-line);
}

.nwl-export__meta { display: grid; gap: 8px; margin: 0 0 6px; }
.nwl-export__meta dt { color: var(--nh-muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.nwl-export__meta dd { margin: 2px 0 0; color: var(--nh-ink-soft); font-size: 13.5px; line-height: 1.45; }

.nwl-export label { color: var(--nh-ink); font-size: 13.5px; font-weight: 600; }

.nwl-export input {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(7, 8, 63, .28);
  border-radius: 12px;
  background: #fff;
  color: var(--nh-ink);
  font: 14px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.nwl-export input:focus-visible { outline: 3px solid var(--nh-focus); outline-offset: 2px; }
.nwl-export__help { margin: 0 0 6px; }

.nwl-export__main {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(7, 8, 63, .22);
  color: var(--nh-ink);
  font: 600 14px/1.2 var(--cb-display-font);
  cursor: pointer;
  transition: background-color .2s ease;
}

.nwl-export__main:hover { background: #fff; }
.nwl-export__main:focus-visible { outline: 3px solid var(--nh-focus); outline-offset: 2px; }
.nwl-export [aria-busy="true"] { cursor: progress; opacity: .7; }

.nwl-export__status:empty { display: none; }

.nwl-export__status {
  margin: 4px 0 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(29, 143, 85, .1);
  color: #13643c;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

.nwl-export__status[data-tone="error"] { background: rgba(190, 40, 40, .08); color: #8f1d1d; }

/* ---------- Motion (states hidden only under html.nh-motion, set by news.js) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .nwl-page .nh-rise { animation: nh-rise .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--d, 0) * 110ms + 120ms); }

  html.nh-motion .nwl-section[data-nh-reveal] > .nwl-title {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
  }

  /* Same weight as the rule above: the shared [data-nh-reveal].is-in > * is lighter (0-3-1). */
  html.nh-motion .nwl-section.is-in[data-nh-reveal] > .nwl-title { opacity: 1; transform: none; }

  html.nh-motion .nwl-section[data-nh-reveal] .nwl-vignette img {
    -webkit-mask-image: url("/assets/home/home-v27/bloom-mask-20261011.png");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 50% 45%;
    -webkit-mask-size: 0% 0%;
    mask-image: url("/assets/home/home-v27/bloom-mask-20261011.png");
    mask-repeat: no-repeat;
    mask-position: 50% 45%;
    mask-size: 0% 0%;
  }

  html.nh-motion .nwl-section.is-in .nwl-vignette img { animation: nh-paint 1.8s cubic-bezier(.3, .6, .3, 1) .15s forwards; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1120px) {
  .nwl-hero { min-height: 0; padding-top: 8px; }
  .nwl-hero__inner { display: contents; }
  .nwl-crumbs,
  .nwl-hero__copy { order: 1; width: min(var(--cb-shell), 680px); max-width: none; margin-inline: auto; }
  .nwl-crumbs { padding-top: 20px; }
  .nwl-hero__copy { margin-block: 0; padding-block: 28px 0; }

  .nwl-hero__plate {
    position: relative;
    inset: auto;
    order: 2;
    width: min(100%, 860px);
    height: auto;
    aspect-ratio: 4 / 3;
    margin: 30px auto 0;
  }

  .nwl-hero__img {
    -webkit-mask-image: url("/assets/home/home-v27/bloom-mask-20261011.png");
    -webkit-mask-size: 118% 118%;
    -webkit-mask-position: 50% 50%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-composite: source-over;
    mask-image: url("/assets/home/home-v27/bloom-mask-20261011.png");
    mask-size: 118% 118%;
    mask-position: 50% 50%;
    mask-repeat: no-repeat;
    mask-composite: add;
  }

  .nwl-layout { grid-template-columns: minmax(0, 1fr); width: min(var(--cb-shell), 680px); }
  .nwl-letter { max-width: none; }
  .nwl-rail { position: static; max-height: none; margin: 0; padding: 0; overflow: visible; }
  .nwl-toc { display: none; }
}

@media (max-width: 760px) {
  .nwl-crumbs,
  .nwl-hero__copy,
  .nwl-layout { width: calc(100% - 40px); }
  .nh .nwl-hero__title { font-size: calc(var(--cb-title-hero) * .9); }
  .nwl-hero__actions .nh-btn { width: 100%; }
  .nwl-hero__plate { width: calc(100% + 24px); margin-inline: -12px; }
  .nwl-opening { padding: 24px 20px; border-radius: 20px; }
  .nwl-announce { margin-inline: -4px; padding: 26px 22px; font-size: calc(var(--cb-title-section-side) * .78); }
  .nwl-trio { grid-template-columns: minmax(0, 1fr); }
  .nwl-page .nwl-action { width: 100%; justify-content: space-between; }
}

@media (forced-colors: active) {
  .nwl-hero__title em,
  .nwl-title em,
  .nwl-signoff__line em,
  .nwl-announce em {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: currentColor;
  }

  .nwl-announce { border: 1px solid CanvasText; }
  .nwl-list li::before { border: 1px solid CanvasText; }
}