/* ============================================================================
   Quarterly newsletter pages (/market-insights/<market>-q<n>-<year>).
   The web version of the eblast built in Claude Design: masthead, the quarter
   in four numbers, two charts with "Our read" boxes, Our view, the founder's
   quote, and the authors. Shared by every issue; each issue is its own page.

   Motion, all of it one-shot and quiet: numbers count up, chart bars build,
   icons draw themselves in (and replay on hover), the quote fills in word by
   word as it is scrolled into reading position. Hidden states apply only once
   newsletter.js adds .nl-js to <html>, so without JS, or with reduced motion,
   everything simply shows.
============================================================================ */
.nl { --cream: #F8F6F1; --rule: rgba(12,53,25,0.12); --gold-lt: #E4D6B4; container-type: inline-size; }
.nl-eyebrow { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); margin: 0; }
.nl-wrap { max-width: 1340px; margin: 0 auto; }

/* ---- Masthead: a sky gradient for the type, the skyline, then the green
   foot with the headline. The photo's top edge fades into the sky. ---- */
.nl-mast { background: var(--dark-green); color: var(--white); overflow: hidden; }
.nl-mast-sky { background: linear-gradient(180deg, #1F4230 0%, #2C4838 34%, #4A5B52 72%, #666D6A 100%); padding: 36px 40px 0; }
.nl-mast-top { display: flex; justify-content: flex-end; align-items: center; gap: 18px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; }
.nl-mast-top i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.nl-mast-type { padding: 34px 0 0; }
.nl-mast .nl-eyebrow { display: flex; align-items: center; gap: 22px; }
.nl-mast .nl-eyebrow::before { content: ""; width: 40px; height: 1px; background: var(--gold); }
.nl-mast h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(50px, 6.6vw, 96px); line-height: 1.08; margin: 22px 0 18px; text-shadow: 0 2px 22px rgba(0,0,0,0.18); }
.nl-mast-sub { font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; margin: 0; }
.nl-mast-photo { position: relative; overflow: hidden; margin-top: -2px; background: #666D6A; }
.nl-mast-photo img {
  width: 100%; aspect-ratio: 3 / 1; max-height: 640px; object-fit: cover; object-position: 50% 70%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%); mask-image: linear-gradient(180deg, transparent 0, #000 14%);
  transform-origin: 30% 70%; animation: nlDrift 26s ease-in-out infinite alternate;
}
.nl-mast-photo::after { content: ""; position: absolute; inset: auto 0 0 0; height: 22%; background: linear-gradient(180deg, rgba(11,38,20,0), #0B2614); }
@keyframes nlDrift { from { transform: scale(1); } to { transform: scale(1.05) translateX(-1%); } }
.nl-mast-foot { background: linear-gradient(180deg, #0B2614 0%, var(--dark-green) 70%); padding: 0 40px 64px; }
.nl-mast-foot .nl-wrap { border-top: 1px solid rgba(191,165,107,0.7); padding-top: 52px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; }
.nl-mast-foot h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(34px, 4.4vw, 62px); line-height: 1.12; margin: 0 0 22px; }
.nl-mast-foot h2 em { color: var(--gold); }
.nl-mast-foot p { font-family: var(--font-sans); font-size: 17px; line-height: 1.85; color: rgba(255,255,255,0.92); max-width: 700px; margin: 0; }
.nl-mast-logo { width: 150px; }
/* Load-in: the type rises once */
.nl-js .nl-mast-type > *, .nl-js .nl-mast-foot h2, .nl-js .nl-mast-foot p { opacity: 0; transform: translateY(14px); animation: nlRise 0.8s ease forwards; }
.nl-js .nl-mast-type > :nth-child(2) { animation-delay: 0.12s; }
.nl-js .nl-mast-type > :nth-child(3) { animation-delay: 0.24s; }
.nl-js .nl-mast-foot h2 { animation-delay: 0.4s; }
.nl-js .nl-mast-foot p { animation-delay: 0.52s; }
@keyframes nlRise { to { opacity: 1; transform: none; } }

/* ---- The quarter in four numbers ---- */
.nl-nums { background: var(--white); padding: 84px 40px 76px; }
.nl-nums .nl-eyebrow { margin-bottom: 30px; }
.nl-num-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 4px solid var(--gold); }
.nl-num { padding: 34px 30px 28px; border-left: 1px solid rgba(0,0,0,0.1); transition: background-color 0.35s ease; }
.nl-num:first-child { border-left: 0; }
.nl-num-val { font-family: var(--font-serif); font-size: clamp(40px, 3.9vw, 54px); line-height: 1; color: var(--dark-green); margin: 0 0 18px; font-variant-numeric: lining-nums tabular-nums; transition: color 0.35s ease; }
.nl-num-lab { font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-dark); line-height: 1.5; margin: 0 0 10px; }
.nl-num-note { font-family: var(--font-sans); font-size: 16px; line-height: 1.7; color: #6E6F71; margin: 0; }
.nl-num:hover { background: var(--cream); }
.nl-num:hover .nl-num-val { color: var(--gold); }
.nl-num:first-child:hover { background: linear-gradient(90deg, rgba(248,246,241,0) 0, var(--cream) 30px); }

/* ---- Charts ---- */
.nl-charts { background: var(--white); padding: 0 40px 96px; }
.nl-charts-panel { display: grid; grid-template-columns: 1fr 1fr; background: var(--cream); border-top: 4px solid var(--gold); }
.nl-chart { padding: 54px 56px 46px; display: flex; flex-direction: column; }
.nl-chart + .nl-chart { border-left: 1px solid rgba(12,53,25,0.14); }
.nl-chart h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px, 2.3vw, 32px); line-height: 1.2; color: var(--dark-green); margin: 18px 0 0; }
.nl-chart h3 em { color: var(--gold); }
.nl-plot-lab { font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-dark); }
.nl-plot-val { font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; color: var(--dark-green); white-space: nowrap; }

/* Horizontal bars against a dashed market average */
.hb { --max: 14; position: relative; margin: 30px 76px 0 0; padding-top: 84px; flex: 1; }
.hb-row { margin-bottom: 22px; }
.hb-row .nl-plot-lab { display: block; margin-bottom: 9px; }
.hb-track { position: relative; height: 30px; }
.hb-bar { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) / var(--max) * 100%); background: var(--dark-green); transform-origin: left; }
.hb-bar.is-hi { background: var(--gold); }
.hb-track .nl-plot-val { position: absolute; z-index: 2; top: 50%; left: calc(var(--v) / var(--max) * 100% + 12px); transform: translateY(-50%); padding: 2px 4px; background: var(--cream); }
.hb-avg { position: absolute; top: 0; bottom: 6px; left: calc(var(--v) / var(--max) * 100%); width: 0; z-index: 1; pointer-events: none; }
/* Dashes are painted, not a dashed border: phones (iOS especially) can drop
   a thin dashed border entirely */
.hb-avg::after { content: ""; position: absolute; top: 66px; bottom: 0; left: -1px; width: 2px; background: repeating-linear-gradient(180deg, rgba(12,53,25,0.7) 0 5px, transparent 5px 9px); }
.hb-avg-lab { position: absolute; top: 0; left: 0; transform: translateX(-50%); text-align: center; font-family: var(--font-sans); font-size: 12.5px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dark-green); white-space: nowrap; }
.hb-arrow { display: block; width: 20px; height: 20px; margin: 6px auto 0; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; animation: nlBob 2.4s ease-in-out infinite; }
@keyframes nlBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* Grouped vertical bars */
.vb { --max: 11.5; display: grid; grid-template-columns: repeat(3, 1fr); height: 290px; margin-top: 40px; border-bottom: 1.5px solid rgba(12,53,25,0.55); padding: 0 2%; }
.vb-group { display: flex; align-items: flex-end; justify-content: center; gap: 14px; }
.vb-bar { position: relative; width: 30%; max-width: 64px; height: calc(var(--v) / var(--max) * 100%); }
.vb-bar i { position: absolute; inset: 0; background: var(--dark-green); transform-origin: bottom; }
.vb-bar.is-d i { background: var(--gold); }
.vb-bar .nl-plot-val { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 9px; }
.vb-cats { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 2%; margin-top: 22px; text-align: center; }
.vb-key { display: flex; justify-content: center; gap: 34px; margin-top: 22px; }
.vb-key span { display: inline-flex; align-items: center; gap: 12px; }
.vb-key span::before { content: ""; width: 18px; height: 18px; background: var(--dark-green); }
.vb-key span.is-d::before { background: var(--gold); }

/* Bars build when the chart scrolls into view; each waits its --i turn */
.nl-js .hb-bar, .nl-js .vb-bar i { transform: scaleX(0); transition: transform 1s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 0.14s + 0.15s); }
.nl-js .vb-bar i { transform: scaleY(0); }
.nl-js .nl-plot-val, .nl-js .hb-avg { opacity: 0; transition: opacity 0.5s ease calc(var(--i, 0) * 0.14s + 0.9s); }
.nl-js .hb-avg { transition-delay: 1.3s; }
.nl-js .is-in .hb-bar { transform: scaleX(1); }
.nl-js .is-in .vb-bar i { transform: scaleY(1); }
.nl-js .is-in .nl-plot-val, .nl-js .is-in .hb-avg { opacity: 1; }

/* Our read */
.nl-read { margin-top: 36px; background: var(--dark-green); border-left: 6px solid var(--gold); padding: 32px 40px 34px; color: var(--white); transition: transform 0.35s ease, box-shadow 0.35s ease; }
.nl-read:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(12,53,25,0.22); }
.nl-read-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-lt); }
.nl-read p { font-family: var(--font-sans); font-size: 17px; line-height: 1.8; color: rgba(255,255,255,0.93); margin: 0; }
.nl-src { font-family: var(--font-sans); font-size: 13.5px; font-style: italic; color: var(--text-gray); margin: 26px 0 0; }

/* ---- Icons: draw in, then one small move of their own; hover replays ---- */
.nl-ico { width: 30px; height: 30px; flex: none; overflow: visible; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nl-ico .acc { stroke: var(--gold-lt); }
.nl-ico .mv { transform-box: fill-box; transform-origin: center; }
.nl-ico .mv-top { transform-box: fill-box; transform-origin: top center; }
.nl-js .nl-ico .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.nl-js .nl-ico .pop { opacity: 0; }
.nl-js .is-in .nl-ico .draw { animation: nlDraw 0.9s ease var(--d, 0s) forwards; }
.nl-js .is-in .nl-ico .pop { animation: nlFade 0.4s ease calc(var(--d, 0s) + 0.8s) forwards; }
.nl-js .is-in .nl-ico .glow { animation: nlFade 0.4s ease calc(var(--d, 0s) + 0.8s) forwards, nlGlow 1.4s ease-in-out calc(var(--d, 0s) + 1.2s) 1; }
.nl-js .is-in .nl-ico .shake { animation: nlShake 0.9s ease-in-out calc(var(--d, 0s) + 1.1s) 1 both; }
.nl-js .is-in .nl-ico .scan { animation: nlScan 1.1s ease-in-out calc(var(--d, 0s) + 1.1s) 1 both; }
.nl-js .is-in .nl-ico .dip { animation: nlDip 0.9s ease-in-out calc(var(--d, 0s) + 1.1s) 1 both; }
@keyframes nlDraw { to { stroke-dashoffset: 0; } }
@keyframes nlFade { to { opacity: 1; } }
@keyframes nlGlow { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 4px rgba(228,214,180,0.9)); } }
@keyframes nlShake { 0%, 100% { transform: none; } 20%, 60% { transform: translateY(-2px) rotate(-5deg); } 40%, 80% { transform: translateY(2px) rotate(5deg); } }
@keyframes nlScan { 0%, 100% { transform: none; } 30% { transform: translate(-3px, 1px) rotate(-8deg); } 65% { transform: translate(3px, -1px) rotate(6deg); } }
@keyframes nlDip { 0%, 100% { transform: none; } 35% { transform: scaleY(1.18); } 65% { transform: scaleY(0.94); } }

/* ---- Our view: photo left, the three moves right ---- */
/* Full-bleed band, content held to the page margins: the photo runs off the
   left edge, its heading starts on the margin line, and the right column ends
   on the margin like every other section. --edge is the margin width. */
.nl-view { --edge: max(40px, calc((100cqw - 1340px) / 2)); display: grid; grid-template-columns: minmax(0, 1fr) calc(min(58cqw - 40px, 780px) + var(--edge)); background: var(--dark-green); color: var(--white); }
.nl-view-photo { position: relative; overflow: hidden; min-height: 560px; }
.nl-view-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.nl-view-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(12,53,25,0.92) 0%, rgba(12,53,25,0.6) 20%, rgba(12,53,25,0) 42%); }
.nl-view-head { position: relative; z-index: 2; padding: 64px 48px 64px var(--edge); }
.nl-view-head .nl-eyebrow { display: flex; align-items: center; gap: 26px; }
.nl-view-head .nl-eyebrow::before { content: ""; width: 40px; height: 1px; background: var(--gold); }
.nl-view-head h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(36px, 3.5vw, 52px); line-height: 1.16; margin: 22px 0 0; }
.nl-view-head h2 em { display: block; color: var(--gold); }
.nl-view-body { padding: 60px var(--edge) 64px 64px; }
/* The rule sits on the margin line; the hover glow reaches 22px past it */
.nl-move { --bleed: 22px; position: relative; padding: 28px var(--bleed) 32px; margin: 0 calc(var(--bleed) * -1); transition: background-color 0.35s ease; }
.nl-move::before { content: ""; position: absolute; top: 0; left: var(--bleed); right: var(--bleed); height: 1px; background: rgba(191,165,107,0.55); transition: background-color 0.35s ease; }
.nl-move:hover { background: rgba(255,255,255,0.045); }
.nl-move:hover::before { background: var(--gold); }
.nl-move .nl-eyebrow { font-size: 12.5px; letter-spacing: 0.26em; }
.nl-move h3 { display: flex; align-items: center; gap: 18px; font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px, 2.3vw, 32px); line-height: 1.2; margin: 14px 0 12px; transition: color 0.35s ease; }
.nl-move:hover h3 { color: var(--gold-lt); }
.nl-move p { font-family: var(--font-sans); font-size: 16.5px; line-height: 1.8; color: rgba(255,255,255,0.9); margin: 0; }
.nl-js .nl-move h3, .nl-js .nl-move p { opacity: 0; transform: translateY(12px); }
.nl-js .nl-move.is-in h3, .nl-js .nl-move.is-in p { animation: nlRise 0.6s ease calc(var(--d, 0s) + 0.2s) forwards; }

/* The founder's quote fills in word by word as it is read */
.nl-quote { margin: 44px 0 0; background: var(--cream); border-top: 6px solid var(--gold); border-radius: 44px 0; padding: 42px 52px 38px; color: var(--dark-green); }
.nl-quote blockquote { margin: 0; font-family: var(--font-serif); font-size: clamp(22px, 2.15vw, 30px); line-height: 1.42; }
.nl-quote blockquote em { color: var(--gold); }
.nl-quote .w { transition: color 0.35s ease; }
.nl-js .nl-quote .w { color: rgba(12,53,25,0.16); }
.nl-js .nl-quote em .w { color: rgba(191,165,107,0.3); }
.nl-js .nl-quote .w.on { color: var(--dark-green); }
.nl-js .nl-quote em .w.on { color: var(--gold); }
.nl-quote figcaption { font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-dark); margin-top: 24px; transition: opacity 0.6s ease; }
.nl-js .nl-quote:not(.is-done) figcaption { opacity: 0; }

/* ---- Close: next step and the authors ---- */
.nl-close { background: var(--cream); padding: 64px 40px 40px; }
.nl-close-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-bottom: 46px; border-bottom: 1px solid rgba(12,53,25,0.14); }
.nl-close-cta h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(30px, 3.3vw, 46px); line-height: 1.15; color: var(--dark-green); margin: 0; }
.nl-close-cta h2 em { color: var(--gold); }
.nl-btn { flex: none; display: inline-block; background: var(--gold); color: var(--dark-green); font-family: var(--font-sans); font-size: 13px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; padding: 22px 40px; border-radius: 999px; transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease; }
.nl-btn:hover { background: var(--dark-green); color: var(--white); transform: translateY(-2px); }
/* Secondary: outlined, so it does not compete with the report download */
.nl-btn--line { background: transparent; border: 1.5px solid var(--dark-green); padding: 16px 32px; }
.nl-authors .nl-btn--line { margin-left: auto; }
.nl-authors { display: flex; align-items: center; gap: 30px 56px; flex-wrap: wrap; padding: 36px 0; border-bottom: 1px solid rgba(12,53,25,0.14); }
.nl-author { display: flex; align-items: center; gap: 24px; }
.nl-author + .nl-author { padding-left: 56px; border-left: 1px solid rgba(12,53,25,0.18); }
.nl-author img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.nl-author-name { font-family: var(--font-serif); font-size: 24px; line-height: 1.2; color: var(--dark-green); margin: 0 0 4px; transition: color 0.3s ease; }
.nl-author-title { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-dark); margin: 0; }
.nl-author:hover .nl-author-name { color: var(--gold); }
.nl-close .nl-src { margin: 22px 0 0; }

/* Generic reveal for blocks that only need to fade up */
.nl-js [data-rise] { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s ease; }
.nl-js [data-rise].is-in { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .nl-charts-panel { grid-template-columns: 1fr; }
  .nl-chart + .nl-chart { border-left: 0; border-top: 1px solid rgba(12,53,25,0.14); }
  .nl-num-grid { grid-template-columns: 1fr 1fr; }
  .nl-num:nth-child(3) { border-left: 0; }
  .nl-num:nth-child(n+3) { border-top: 1px solid rgba(0,0,0,0.1); }
  .nl-view { grid-template-columns: 1fr; }
  /* Stacked: the heading stays over the photo as on desktop. The photo's sky
     is brighter at this crop, so the green fade runs deeper behind the type. */
  .nl-view-photo { min-height: 560px; }
  .nl-view-photo img { object-position: 50% 85%; }
  .nl-view-photo::before { background: linear-gradient(180deg, rgba(12,53,25,0.95) 0%, rgba(12,53,25,0.82) 26%, rgba(12,53,25,0.35) 50%, rgba(12,53,25,0) 70%); }
  .nl-view-head { padding: 64px 40px; }
  .nl-view-body { padding: 56px 40px 64px; }
}
@media (max-width: 768px) {
  .nl-mast-sky { padding: 22px 20px 0; }
  .nl-mast-top { font-size: 10.5px; letter-spacing: 0.22em; gap: 12px; }
  .nl-mast-type { padding-top: 26px; }
  .nl-mast .nl-eyebrow { font-size: 10.5px; gap: 14px; }
  .nl-mast .nl-eyebrow::before { width: 26px; }
  .nl-mast-sub { font-size: 11px; letter-spacing: 0.22em; }
  .nl-mast-photo img { aspect-ratio: 16 / 9; }
  .nl-mast-foot { padding: 0 20px 48px; }
  .nl-mast-foot .nl-wrap { grid-template-columns: 1fr; padding-top: 36px; gap: 30px; }
  .nl-mast-foot p { font-size: 16px; }
  .nl-mast-logo { width: 120px; }
  .nl-nums { padding: 56px 20px 48px; }
  /* Charts: shorter plots and tighter boxes so the section isn't so tall */
  .nl-charts { padding: 0 20px 56px; }
  .nl-chart { padding: 32px 20px 28px; }
  .nl-chart h3 { font-size: 23px; margin-top: 12px; }
  .hb { margin: 18px 56px 0 0; padding-top: 62px; }
  .hb-avg::after { top: 50px; }
  .hb-avg-lab { font-size: 10.5px; letter-spacing: 0.18em; }
  .hb-arrow { width: 16px; height: 16px; margin-top: 4px; }
  .hb-row { margin-bottom: 14px; }
  .hb-row .nl-plot-lab { margin-bottom: 6px; }
  .hb-track { height: 22px; }
  .vb { height: 170px; margin-top: 34px; }
  .vb-group { gap: 10px; }
  .vb .nl-plot-val { font-size: 11px; letter-spacing: 0.02em; margin-bottom: 6px; }
  .vb-cats { margin-top: 14px; }
  .vb-key { margin-top: 14px; }
  .vb-key span::before { width: 14px; height: 14px; }
  .nl-plot-lab { font-size: 10.5px; letter-spacing: 0.16em; }
  .nl-read { margin-top: 26px; padding: 20px 20px 22px; border-left-width: 5px; }
  .nl-read-head { font-size: 11.5px; margin-bottom: 10px; gap: 12px; }
  .nl-read-head .nl-ico { width: 24px; height: 24px; }
  .nl-read p { font-size: 15px; line-height: 1.7; }
  .nl-src { font-size: 12.5px; margin-top: 18px; }
  .nl-view-photo { min-height: 460px; }
  .nl-view-head { padding: 44px 22px; }
  .nl-view-body { padding: 40px 22px 48px; }
  .nl-move { --bleed: 0px; padding: 24px 0 28px; }
  .nl-move h3 { gap: 14px; }
  .nl-quote { padding: 32px 24px 30px; border-radius: 30px 0; }
  .nl-close { padding: 48px 20px 32px; }
  .nl-close-cta { flex-direction: column; align-items: flex-start; gap: 22px; }
  .nl-btn { font-size: 11px; letter-spacing: 0.16em; padding: 14px 24px; white-space: nowrap; }
  .nl-btn--line { padding: 12px 22px; }
  .nl-author + .nl-author { padding-left: 0; border-left: 0; }
  .nl-authors .nl-btn--line { margin-left: 0; }
}
@media (max-width: 560px) {
  /* All four numbers fit on one screen: a compact 2 x 2 grid */
  .nl-nums .nl-eyebrow { margin-bottom: 20px; font-size: 10.5px; letter-spacing: 0.24em; }
  .nl-num { padding: 20px 14px 18px; }
  .nl-num:nth-child(odd) { padding-left: 0; }
  .nl-num:nth-child(even) { padding-right: 0; }
  .nl-num-val { font-size: 34px; margin-bottom: 10px; }
  .nl-num-lab { font-size: 10px; letter-spacing: 0.14em; margin-bottom: 6px; }
  .nl-num-note { font-size: 13.5px; line-height: 1.5; }
  .nl-num:hover, .nl-num:first-child:hover { background: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nl-mast-photo img, .hb-arrow { animation: none; }
  .nl-js .nl-mast-type > *, .nl-js .nl-mast-foot h2, .nl-js .nl-mast-foot p,
  .nl-js .nl-move h3, .nl-js .nl-move p, .nl-js [data-rise], .nl-js .nl-ico *,
  .nl-js .nl-plot-val, .nl-js .hb-avg { animation: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; transition: none !important; }
  .nl-js .hb-bar, .nl-js .vb-bar i { transform: none !important; transition: none !important; }
  .nl-js .nl-quote .w { color: inherit !important; }
  .nl-js .nl-quote:not(.is-done) figcaption { opacity: 1; }
}