/* ==========================================================================
   Newsroom on paper: shared layer (landing /news/ and article pages, 2026-10-11)
   Same world as the homepage (home-v27.css): the watercolour-and-ink universe of
   the Cloudbizz film "Your IT. Orchestrated." on warm paper. Scope:
   body.news-page--paper. Holds the tokens, typography, buttons, chips, cards,
   bubbles, the shared "01 featured" scene, article/film cards, the end card
   (subscription), the paper header and the motion layer. Page layers:
   newsroom-home.css (landing) and newsroom-article.css (articles).
   Generated by news/src/render.mjs; media: node scripts/export-newsroom-v27-media.mjs.
   Design: docs/design-newsroom-v27.md.
   Motion: every initially hidden state lives under html.nh-motion (set by
   news.js only when prefers-reduced-motion is not "reduce"); the markup is the
   final state.
   ========================================================================== */

.news-page--paper {
  --nh-paper: #fbf4e6;
  --nh-ink: var(--cb-ink);
  --nh-ink-soft: #32365a;
  --nh-muted: #565a78;
  --nh-line: rgba(7, 8, 63, .12);
  --nh-card: #fffdf9;
  --nh-shadow: 0 22px 54px rgba(61, 44, 14, .13), 0 2px 8px rgba(61, 44, 14, .07);
  --nh-shadow-soft: 0 12px 30px rgba(61, 44, 14, .11), 0 1px 3px rgba(61, 44, 14, .06);
  --nh-ok: #1d8f55;
  --nh-focus: #3d5ff0;
  --nh-link: #2f43b8;
  /* Canonical accent gradient under an ink veil: accent words keep a 3:1 contrast on paper. */
  --nh-accent-on-paper: linear-gradient(rgba(7, 8, 63, .3), rgba(7, 8, 63, .3)), var(--cb-accent-gradient);
  --nh-accent-button: linear-gradient(rgba(7, 8, 63, .42), rgba(7, 8, 63, .42)), var(--cb-accent-gradient);
  color: var(--nh-ink-soft);
  background: var(--nh-paper);
}

html:has(.news-page--paper) { background: var(--nh-paper); }

.news-page--paper :focus-visible { outline-color: var(--nh-focus); }

/* Opaque paper inside the isolated group: the vignettes use mix-blend-mode: multiply. */
.nh {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--nh-paper);
  font-family: var(--cb-display-font);
}

/* Paper: fine grain + a few soft watercolour blooms (same recipe as the homepage). */
.nh::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .33 0 0 0 0 .18 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 46% 22% at 86% 34%, rgba(86, 126, 255, .07), transparent 70%),
    radial-gradient(ellipse 40% 20% at 10% 55%, rgba(103, 224, 185, .07), transparent 70%),
    radial-gradient(ellipse 50% 20% at 80% 78%, rgba(222, 186, 120, .12), transparent 70%);
  background-size: 260px 260px, 100% 100%, 100% 100%, 100% 100%;
}

/* Torn paper edge over the shared navy footer. */
.nh::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 36px;
  pointer-events: none;
  background: linear-gradient(90deg, #030915 0%, #04091d 52%, #080627 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V20L14 25L36 13L69 18L92 22L126 18L158 20L193 13L217 21L249 10L281 17L319 23L336 18L374 21L405 19L443 24L467 15L503 15L521 14L546 14L584 18L617 24L633 14L662 18L687 12L725 10L749 15L780 25L807 12L832 14L855 16L878 18L908 13L946 17L982 20L1012 18L1039 21L1077 16L1109 13L1138 15L1161 16L1196 24L1200 23V40Z' fill='%23fff'/%3E%3C/svg%3E") 0 100% / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V20L14 25L36 13L69 18L92 22L126 18L158 20L193 13L217 21L249 10L281 17L319 23L336 18L374 21L405 19L443 24L467 15L503 15L521 14L546 14L584 18L617 24L633 14L662 18L687 12L725 10L749 15L780 25L807 12L832 14L855 16L878 18L908 13L946 17L982 20L1012 18L1039 21L1077 16L1109 13L1138 15L1161 16L1196 24L1200 23V40Z' fill='%23fff'/%3E%3C/svg%3E") 0 100% / 100% 100% no-repeat;
}

.nh-shell {
  width: var(--cb-shell);
  margin-inline: auto;
}

.nh-section {
  position: relative;
  padding-block: clamp(72px, 7.5vw, 128px);
}

/* ---------- Typography (display = homepage hero grammar, ink for paper) ---------- */

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

.nh .nh-title { font-size: var(--cb-title-section-side); }
.nh .nh-title--wide { font-size: var(--cb-title-section); }

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

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

.nh-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
  color: #3e4378;
  font-size: var(--cb-eyebrow-size);
  font-weight: var(--cb-eyebrow-weight);
  letter-spacing: var(--cb-eyebrow-tracking);
  line-height: 1.3;
  text-transform: uppercase;
}

.nh-eyebrow__num {
  font-weight: 600;
  letter-spacing: .04em;
}

.nh-eyebrow__num::after {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  margin-left: 14px;
  vertical-align: middle;
  -webkit-text-fill-color: initial;
  background: rgba(62, 67, 120, .45);
}

.nh-lead,
.nh-hero__lead {
  max-width: 34em;
  margin: 24px 0 0;
  color: var(--nh-ink-soft);
  font-size: calc(var(--cb-lead-section) * .72);
  font-weight: var(--cb-lead-weight);
  letter-spacing: var(--cb-lead-tracking);
  line-height: 1.55;
  text-wrap: pretty;
}

.nh-hero__lead { max-width: 30em; margin-top: 26px; }

/* ---------- Buttons, links, chips, cards, bubbles ---------- */

.nh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.nh-btn svg,
.nh-link svg,
.nh-focus__link svg,
.nh-article__more svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s ease;
}

/* .nh prefix: news.css resets every link colour with .news-page a (0-1-1). */
.nh .nh-btn--primary {
  color: #fff;
  background: var(--nh-accent-button);
  box-shadow: 0 14px 34px rgba(66, 140, 223, .32), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.nh-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(66, 140, 223, .42), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.nh-btn:hover svg,
.nh-link:hover svg,
.nh-focus__link:hover svg { transform: translateX(3px); }

.nh .nh-btn--ghost {
  color: var(--nh-ink);
  background: rgba(255, 253, 249, .6);
  box-shadow: inset 0 0 0 1px rgba(7, 8, 63, .22);
}

.nh-btn--ghost:hover { background: #fffdf9; transform: translateY(-2px); }

.nh .nh-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--nh-link);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.nh-link:hover { text-decoration: underline; text-underline-offset: 5px; }

.nh-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  color: var(--nh-ink);
  background: var(--nh-card);
  box-shadow: var(--nh-shadow-soft);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.nh-chip b { font-weight: 600; }
.nh-chip time { font-variant-numeric: tabular-nums; }

.nh-chip__sep {
  display: inline-block;
  width: 1px;
  height: 14px;
  margin-inline: 2px;
  background: var(--nh-line);
}

.nh-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--nh-ok);
  box-shadow: 0 0 0 3px rgba(29, 143, 85, .16);
}

.nh-card {
  border-radius: 16px;
  color: var(--nh-ink);
  background: var(--nh-card);
  box-shadow: var(--nh-shadow);
  font-size: 14px;
}

.nh-card__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 11px 14px;
  border-bottom: 1px solid var(--nh-line);
  border-radius: 16px 16px 0 0;
  background: #f6f2ea;
  font-size: 13px;
}

.nh-card__bar i { width: 9px; height: 9px; border-radius: 50%; background: #d9d2c4; }

.nh-card__status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 16px 14px;
  color: var(--nh-muted);
  font-size: 12.5px;
  font-weight: 500;
}

.nh-card__status .nh-dot { width: 7px; height: 7px; }

.nh-bubble {
  position: absolute;
  z-index: 3;
  max-width: 260px;
  margin: 0;
  padding: 11px 17px;
  border-radius: 18px;
  color: var(--nh-ink);
  background: #fff;
  box-shadow: var(--nh-shadow-soft);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.3;
}

.nh-bubble::after {
  content: "";
  position: absolute;
  bottom: -6px;
  width: 14px;
  height: 14px;
  background: inherit;
  border-radius: 0 0 4px 0;
  transform: rotate(45deg);
}

.nh-bubble--left::after { left: 22px; }
.nh-bubble--right::after { right: 22px; }

.nh-check {
  flex: none;
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--nh-ok);
}

.nh-check::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 4px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Vignettes are laid on the paper like the film's boards: their near-white washes take the paper tone. */
.nh-vignette { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }

/* ---------- Category strip ---------- */

/* The homepage "proofs" pill, made of real links (landing hero and list pages). */
.nh-topics {
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 clamp(24px, 4.4vh, 48px);
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 252, 245, .86);
  box-shadow: var(--nh-shadow-soft);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.nh-topics a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--nh-ink);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}

.nh-topics a + a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  bottom: 13px;
  width: 1px;
  background: var(--nh-line);
}

.nh-topics a:hover { color: var(--nh-link); background: rgba(86, 126, 255, .08); }
.nh-topics a[aria-current="page"] { color: #fff; background: var(--nh-ink); }
.nh-topics a[aria-current="page"] + a::before,
.nh-topics a:hover + a::before,
.nh-topics a:hover::before { opacity: 0; }
.nh-topics b { font-weight: 600; }

.nh-topics__count {
  min-width: 26px;
  padding: 2px 8px;
  border-radius: 999px;
  color: #3e4378;
  background: #efeadf;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.nh-topics a[aria-current="page"] .nh-topics__count { color: var(--nh-ink); background: #fff; }
.nh-topics svg { width: 17px; height: 17px; fill: none; stroke: #3e4378; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Scenes ---------- */

.nh-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 22px 0 0;
  color: var(--nh-muted);
  font-size: 14px;
  font-weight: 500;
}

.nh-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: 32px;
}

.nh-scene {
  position: relative;
  margin: 0;
}

/* 01 Featured: Nadia presents the new site */
.nh-scene--feature { aspect-ratio: 760 / 560; }

.nh-feature__nadia {
  position: absolute;
  right: 0;
  top: 7%;
  width: 84%;
}

.nh-feature__bubble { right: 7%; top: 0; }

.nh-browser {
  position: absolute;
  left: 0;
  top: 40%;
  z-index: 2;
  width: 47%;
}

.nh-browser__url {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  color: var(--nh-ink-soft);
  background: #fff;
  font-size: 12.5px;
  font-weight: 600;
}

.nh-browser__url svg { width: 13px; height: 13px; fill: none; stroke: var(--nh-ok); stroke-width: 2; }
.nh-browser__body { padding: 16px 16px 12px; }
.nh-browser__label { margin: 0; color: var(--nh-muted); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

.nh-browser__domain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0 12px;
  font-size: 15px;
  font-weight: 600;
}

.nh-browser__domain s { color: #8c8fa6; font-weight: 500; }
.nh-browser__domain svg { width: 16px; height: 16px; fill: none; stroke: #3e4378; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nh-browser__domain b { color: var(--nh-ink); font-size: 18px; font-weight: 700; letter-spacing: -.04em; }

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

.nh-line { display: block; height: 7px; margin-top: 7px; border-radius: 4px; background: #ece6da; }
.nh-line--short { width: 62%; }

.nh-changes {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 36%;
  padding: 16px 18px;
}

.nh-changes__title { margin: 0 0 12px; color: var(--nh-muted); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.nh-changes ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.nh-changes li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }

/* ---------- Article and film lists ---------- */

.nh-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  gap: 24px clamp(32px, 5vw, 96px);
}

.nh-head .nh-lead { margin: 0; }

.nh-articles,
.nh-films {
  display: grid;
  margin: clamp(40px, 4.4vw, 64px) 0 0;
  padding: 0;
  list-style: none;
}

.nh-articles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.2vw, 32px); }

.nh-article {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  background: var(--nh-card);
  box-shadow: var(--nh-shadow-soft);
  transition: transform .3s ease, box-shadow .3s ease;
}

.nh-article:hover { transform: translateY(-4px); box-shadow: var(--nh-shadow); }

/* Line art of the Neoo Resources family, drawn in ink on a watercolour wash. */
.nh-article__art {
  --wash: rgba(86, 126, 255, .16);
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 380 / 180;
  padding: 30px 18px 10px;
  background:
    radial-gradient(ellipse 60% 70% at 32% 40%, var(--wash), transparent 72%),
    radial-gradient(ellipse 50% 60% at 74% 66%, rgba(222, 186, 120, .2), transparent 70%),
    #fbf6ec;
}

.nh-article:nth-child(3n + 2) .nh-article__art { --wash: rgba(103, 224, 185, .2); }
.nh-article:nth-child(3n) .nh-article__art { --wash: rgba(66, 187, 223, .18); }

.nh .nh-article__art .news-art {
  width: auto;
  max-width: 82%;
  height: 100%;
  color: #2f43b8;
  stroke-width: 2;
  opacity: .82;
}

.nh-article__art span {
  position: absolute;
  left: 16px;
  top: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--nh-ink);
  background: rgba(255, 253, 249, .92);
  box-shadow: 0 2px 8px rgba(61, 44, 14, .08);
  font-size: 12px;
  font-weight: 600;
}

.nh-article__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px 24px 24px;
}

.nh-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  color: var(--nh-muted);
  font-size: 13px;
  font-weight: 500;
}

.nh-article h3,
.nh-film h3 {
  margin: 12px 0 0;
  color: var(--nh-ink);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.3;
  text-wrap: balance;
}

.nh-article h3 a,
.nh-film h3 a {
  color: inherit;
  text-decoration: none;
}

/* The whole card opens the article (one link per card for assistive technologies). */
.nh-article h3 a::after,
.nh-film h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.nh-article h3 a:focus-visible,
.nh-film h3 a:focus-visible { outline: none; }

.nh-article:has(h3 a:focus-visible),
.nh-film:has(h3 a:focus-visible) { outline: 3px solid var(--nh-focus); outline-offset: 4px; }

.nh-article__body > p:not(.nh-article__meta) {
  margin: 10px 0 0;
  color: var(--nh-ink-soft);
  font-size: 15px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nh-article__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  color: var(--nh-link);
  font-size: 15px;
  font-weight: 600;
}

.nh-article:hover .nh-article__more svg { transform: translateX(3px); }

.nh-section__more { margin-top: clamp(32px, 3.4vw, 48px); }

.nh-films { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 2.6vw, 40px) clamp(18px, 2vw, 28px); }

.nh-film {
  position: relative;
  border-radius: 16px;
}

.nh-film__frame {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #e9e2d3;
  box-shadow: var(--nh-shadow-soft);
  aspect-ratio: 16 / 9;
}

.nh-film__frame img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.nh-film:hover .nh-film__frame img { transform: scale(1.04); }

.nh-film__play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 253, 249, .92);
  box-shadow: inset 0 0 0 1.5px var(--nh-ink), 0 0 0 8px rgba(255, 253, 249, .28);
  transform: translate(-50%, -50%);
  transition: transform .3s ease;
}

.nh-film__play svg { width: 18px; height: 18px; margin-left: 3px; fill: #3249c7; }
.nh-film:hover .nh-film__play { transform: translate(-50%, -50%) scale(1.08); }

.nh-film__time {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  color: #fff;
  background: rgba(7, 8, 40, .72);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.nh-film h3 { margin-top: 16px; font-size: 18px; }
.nh-film p { margin: 6px 0 0; color: var(--nh-muted); font-size: 14.5px; line-height: 1.5; }

/* ---------- Final card: subscription (end card of the film, blue wash) ---------- */

.nh-final { padding-bottom: clamp(110px, 12vw, 180px); text-align: center; }

.nh-final::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 2%;
  z-index: -1;
  width: min(1100px, 110vw);
  aspect-ratio: 1;
  background: url("/assets/home/home-v27/wash-blue-20261011.webp") center / contain no-repeat;
  opacity: .34;
  mix-blend-mode: multiply;
  transform: translateX(-50%);
  pointer-events: none;
}

.nh-final__inner { display: flex; flex-direction: column; align-items: center; }

.nh-final__mark {
  margin: 0;
  font-size: clamp(56px, 7.4vw, 116px);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: 1;
}

.nh-final__mark b { color: var(--nh-ink); font-weight: 700; }

.nh-final__mark em {
  margin-left: .18em;
  font-style: normal;
  font-weight: 700;
  background: var(--cb-accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.nh-final__sig {
  margin: 16px 0 0;
  color: var(--nh-ink);
  font-size: calc(var(--cb-title-section) * .66);
  font-weight: 300;
  letter-spacing: -.045em;
  line-height: 1.1;
}

.nh .nh-final__title { margin-top: clamp(40px, 4vw, 60px); font-size: var(--cb-title-cta); }
.nh-final__lead { margin-inline: auto; text-align: center; }

.nh-subscribe {
  width: min(640px, 100%);
  margin-top: 34px;
  padding: clamp(22px, 2.6vw, 32px);
  border-radius: 24px;
  background: rgba(255, 253, 249, .9);
  box-shadow: var(--nh-shadow-soft);
  text-align: left;
}

.nh-subscribe__label { display: block; color: var(--nh-ink); font-size: 14px; font-weight: 600; }

.nh-subscribe__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 10px;
}

.nh-subscribe__row input {
  min-width: 0;
  min-height: 56px;
  padding: 0 20px;
  border: 1px solid rgba(7, 8, 63, .22);
  border-radius: 999px;
  color: var(--nh-ink);
  background: #fff;
  font-size: 16px;
}

.nh-subscribe__row input::placeholder { color: #7a7d96; }
.nh-subscribe__row input:focus-visible { outline: 3px solid var(--nh-focus); outline-offset: 2px; }

.nh-subscribe__consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
  color: var(--nh-ink-soft);
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
}

.nh-subscribe__consent input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: #3249c7;
}

.nh-subscribe .newsletter-form__status:not(:empty) {
  margin: 14px 0 0;
  color: var(--nh-ink);
  font-size: 14px;
  font-weight: 600;
}

.nh-subscribe .newsletter-form__status:empty { margin: 0; }
.nh-subscribe__trust { margin: 12px 0 0; color: var(--nh-muted); font-size: 13px; }

.nh-final__more { margin-top: 18px; }

.nh-follow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 8px;
  margin-top: 24px;
  color: var(--nh-muted);
  font-size: 14px;
  font-weight: 500;
}

.nh-follow > span { margin-right: 6px; }

.nh-follow a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--nh-ink);
  background: rgba(255, 253, 249, .7);
  box-shadow: inset 0 0 0 1px var(--nh-line);
  font-weight: 600;
  text-decoration: none;
}

.nh-follow a:hover { color: var(--nh-link); background: #fffdf9; }
.nh-follow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nh-final__note { max-width: 46em; margin: 40px 0 0; color: var(--nh-muted); font-size: 13px; line-height: 1.5; }

/* ---------- Newsroom header re-skinned for paper ---------- */

.news-page--paper .news-site-header {
  border-bottom: 1px solid rgba(7, 8, 63, .06);
  background: rgba(251, 244, 230, .9);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
}

.news-page--paper .news-site-header.is-compact {
  background: rgba(251, 244, 230, .92);
  box-shadow: 0 1px 0 rgba(7, 8, 63, .07);
}

.news-page--paper .cb-header-wordmark--light { --cb-header-wordmark-ink: var(--nh-ink); }

.news-page--paper .news-site-header__nav a,
.news-page--paper .news-header-login,
.news-page--paper .news-site-header__toggle { color: var(--nh-ink); }

.news-page--paper .news-site-header__nav a:hover,
.news-page--paper .news-site-header__nav a.is-current,
.news-page--paper .news-header-login:hover { color: var(--nh-link); }

.news-page--paper .news-language { border-color: rgba(7, 8, 63, .2); background: rgba(255, 253, 249, .7); }
.news-page--paper .news-language summary { color: var(--nh-ink); }

.news-page--paper .news-language nav {
  border-color: rgba(7, 8, 63, .12);
  background: #fffdf9;
  box-shadow: var(--nh-shadow-soft);
}

.news-page--paper .news-language a { color: var(--nh-ink-soft); }

.news-page--paper .news-language a:hover,
.news-page--paper .news-language a[aria-current='page'] {
  color: var(--nh-ink);
  background: rgba(86, 126, 255, .12);
}

.news-page--paper .news-header-cta,
.news-page--paper .news-header-cta:hover {
  color: #fff;
  background: var(--nh-accent-button);
  box-shadow: 0 10px 26px rgba(66, 140, 223, .28);
}

@media (max-width: 1260px) {
  .news-page--paper .news-site-header__nav {
    border-color: rgba(7, 8, 63, .1);
    background: rgba(251, 244, 230, .98);
    box-shadow: 0 26px 50px rgba(61, 44, 14, .16);
  }

  .news-page--paper .news-site-header__nav a:hover,
  .news-page--paper .news-site-header__nav a.is-current { background: #fffdf9; }
}

/* ---------- Motion ---------- */

@keyframes nh-rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

@keyframes nh-pop {
  from { opacity: 0; transform: scale(.82) translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes nh-bloom {
  from { -webkit-mask-size: 100% 100%, 100% 100%, 0% 0%; mask-size: 100% 100%, 100% 100%, 0% 0%; }
  to { -webkit-mask-size: 100% 100%, 100% 100%, 330% 330%; mask-size: 100% 100%, 100% 100%, 330% 330%; }
}

@keyframes nh-paint {
  from { -webkit-mask-size: 0% 0%; mask-size: 0% 0%; }
  to { -webkit-mask-size: 340% 340%; mask-size: 340% 340%; }
}

@keyframes nh-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes nh-check {
  from { background: #e5e0d4; transform: scale(.8); }
  60% { transform: scale(1.15); }
  to { background: var(--nh-ok); transform: none; }
}

/* Copy blocks and lists rise in when they enter the viewport (news.js adds .is-in). */
html.nh-motion .nh-copy[data-nh-reveal] > *,
html.nh-motion .nh-head[data-nh-reveal] > *,
html.nh-motion .nh-final__inner[data-nh-reveal] > *,
html.nh-motion .nh-articles[data-nh-reveal] > li,
html.nh-motion .nh-films[data-nh-reveal] > li {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
}

html.nh-motion [data-nh-reveal].is-in > * { opacity: 1; transform: none; }
html.nh-motion .nh-copy.is-in > :nth-child(2),
html.nh-motion .nh-head.is-in > :nth-child(2),
html.nh-motion .nh-final__inner.is-in > :nth-child(2) { transition-delay: .08s; }
html.nh-motion .nh-copy.is-in > :nth-child(3),
html.nh-motion .nh-final__inner.is-in > :nth-child(3) { transition-delay: .16s; }
html.nh-motion .nh-copy.is-in > :nth-child(4),
html.nh-motion .nh-final__inner.is-in > :nth-child(4) { transition-delay: .24s; }
html.nh-motion .nh-copy.is-in > :nth-child(n + 5),
html.nh-motion .nh-final__inner.is-in > :nth-child(n + 5) { transition-delay: .32s; }
html.nh-motion .nh-articles.is-in > li,
html.nh-motion .nh-films.is-in > li { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 90ms); }

/* Scenes: the vignette paints in with the watercolour bloom, then the UI pieces arrive. */
html.nh-motion .nh-scene .nh-vignette {
  -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 .nh-scene.is-in .nh-vignette { animation: nh-paint 1.6s cubic-bezier(.3, .6, .2, 1) both; }

html.nh-motion .nh-scene .nh-card,
html.nh-motion .nh-scene .nh-chip,
html.nh-motion .nh-scene .nh-bubble { opacity: 0; }

html.nh-motion .nh-scene.is-in .nh-card { animation: nh-rise .8s cubic-bezier(.2, .7, .2, 1) both .7s; }
html.nh-motion .nh-scene.is-in .nh-chip { animation: nh-pop .6s cubic-bezier(.3, 1.4, .5, 1) both 1.1s; }
html.nh-motion .nh-scene.is-in .nh-bubble { animation: nh-pop .55s cubic-bezier(.3, 1.4, .5, 1) both 1.6s; }
html.nh-motion .nh-scene.is-in .nh-changes { animation-delay: 1.1s; }
html.nh-motion .nh-scene.is-in .nh-focus { animation-delay: 1s; }

html.nh-motion .nh-changes .nh-check { background: #e5e0d4; }
html.nh-motion .nh-changes .nh-check::after { opacity: 0; }
html.nh-motion .nh-scene.is-in .nh-changes .nh-check { animation: nh-check .45s ease both calc(1.7s + var(--i) * .35s); }
html.nh-motion .nh-scene.is-in .nh-changes .nh-check::after { animation: nh-fade-in .3s ease both calc(1.85s + var(--i) * .35s); }

/* ---------- Responsive (shared) ---------- */

@media (max-width: 1360px) {
  .nh-films { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .news-videos .nh-films > li:nth-child(n + 7) { display: none; }
}

@media (max-width: 1120px) {
  .nh-head { grid-template-columns: minmax(0, 1fr); }
  .nh-scene { width: min(100%, 760px); margin-inline: auto; }
  .nh-lead,
  .nh-hero__lead { font-size: calc(var(--cb-lead-section) * .9); }
  .nh-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nh-films { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-videos .nh-films > li:nth-child(n + 7) { display: block; }
}

@media (max-width: 760px) {
  .nh-shell { width: calc(100% - 40px); }
  .nh-section { padding-block: 80px; }
  .nh .nh-title,
  .nh .nh-title--wide { font-size: var(--cb-title-section-side); }
  .nh-lead,
  .nh-hero__lead { font-size: calc(var(--cb-lead-section) * .88); }
  .nh-eyebrow { font-size: 13px; }
  .nh-section__more { width: 100%; }
  .nh-chip { padding: 7px 12px 7px 10px; font-size: 12.5px; }
  .nh-topics { padding: 4px; border-radius: 20px; }
  .nh-topics a { padding: 0 12px; font-size: 13.5px; }
  .nh-topics a + a::before { display: none; }

  /* The featured scene becomes stacked: illustration first, then the live UI pieces in flow. */
  .nh-scene--feature { aspect-ratio: auto; display: grid; gap: 12px; }
  .nh-scene--feature > * { position: relative; inset: auto; width: 100%; }
  .nh-feature__bubble { width: max-content; max-width: 100%; justify-self: end; margin-bottom: -6px; }
  .nh-changes { width: 100%; }

  .nh-articles,
  .nh-films { grid-template-columns: minmax(0, 1fr); }
  .news-videos .nh-films > li:nth-child(n + 5) { display: none; }

  .nh-subscribe__row { grid-template-columns: minmax(0, 1fr); }
  .nh-subscribe__row .nh-btn { width: 100%; }
}

@media (forced-colors: active) {
  .nh .nh-hero__title em,
  .nh .nh-title em,
  .nh-final__sig em,
  .nh-eyebrow__num,
  .nh-final__mark em,
  .nh-browser__domain em {
    background: none;
    color: LinkText;
    -webkit-text-fill-color: currentColor;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nh-btn,
  .nh-watch__ring,
  .nh-article,
  .nh-film__frame img,
  .nh-film__play,
  .nh-btn svg,
  .nh-link svg { transition: none; }
}