/* ==========================================================================
   NNP RAISINS — NEWS INDEX, v3 THE MAP (2026-09-21). Loaded by
   news/index.html only, after site.css.

   His verdict on v2, the hall: "try another concept." The page is called
   Where We Meet Our Buyers, so v3 shows WHERE: one pinned screen with a
   dotted map from Europe to China (the land mask is generated from the
   site's own globe texture, news-map.js), Samarkand marked as home, and
   on every scroll step a route draws out from Samarkand to the next show,
   the city lights, and the stand photograph opens beside it as a pinned
   print carrying the reading. A strip of eight stops under the map is the
   progress and the jump. The last stop is SIAL Paris 2026 with the
   booking button; the head carries the next show as well.

   The hall (v2) is in archives/news-hall-2026-09-21.{css,js} and
   archives/news-index-v2-hall-2026-09-21.html.

   ⚠ EVERY MOTION RULE IS `.js`-GATED. On a phone, under reduced motion and
   without a script the stops are a column of prints, newest first.
   ⚠ HIS LAPTOP IS 1270×680. The map is sized in vh with a width ceiling and
   was checked there.
   ========================================================================== */

/* ------------------------------------------------------------- page ---- */
.nm { --nm-bg: #08060e; --nm-line: rgba(242,237,248,.14); --nm-glass: rgba(242,237,248,.06); --nm-r: 14px; --nm-cream: #f3f0e7;
      background: var(--nm-bg); color: var(--chalk); overflow-x: clip; }
.nm-dark-page, .nm-dark-page body { background: #08060e; }
.nm-dark-page body { padding-top: 0; }

/* ------------------------------------------------------- masthead ---- */
.nm-dark-page .masthead:not(.is-stuck) { background: transparent; border-bottom-color: transparent; }
.nm-dark-page .masthead.is-stuck { background: rgba(14,7,28,.42); border-bottom-color: rgba(242,237,248,.12);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .nm-dark-page .masthead.is-stuck { background: rgba(14,7,28,.86); }
}
.nm-dark-page .masthead .brand { color: #fff; }
.nm-dark-page .masthead .navtoggle { color: #fff; border-color: rgba(255,255,255,.35); }
@media (min-width: 1001px) {
  .nm-dark-page .masthead .mainnav a:not(.btn) { color: var(--chalk-dim); }
  .nm-dark-page .masthead .mainnav a:not(.btn):hover,
  .nm-dark-page .masthead .mainnav a:not(.btn)[aria-current="page"] { color: #fff; }
  .nm-dark-page .masthead .btn-primary { background: var(--chalk); color: var(--violet-dp); }
  .nm-dark-page .masthead .btn-primary::before { background: #fff; }
  .nm-dark-page .masthead :focus-visible { outline-color: #fff; }
}

/* ------------------------------------------------------------- type ---- */
.nm-kick { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--violet-lt); margin: 0 0 16px; }
.nm-word { display: inline-block; overflow: hidden; vertical-align: top; }
.nm-word > span { display: inline-block; will-change: transform; }
.nm-glass { background: var(--nm-glass); border: 1px solid var(--nm-line); border-radius: var(--nm-r);
  box-shadow: 0 1px 0 rgba(242,237,248,.06) inset, 0 30px 60px -30px rgba(0,0,0,.7);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }

/* =============================================================== MAP ==== */
.nm-mapsec { position: relative; background: var(--nm-bg); }
.nm-scene { position: relative; }
.nm-pin { position: relative; min-height: 100vh; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; padding: 84px 0 0;
  background: radial-gradient(ellipse at 50% 30%, #140c26 0%, #0b0814 45%, #08060e 100%); }
.nm-pin > .wrap { width: 100%; }
.nm-light { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.nm-light::before { content: ''; position: absolute; left: 55%; top: 40%; width: 60vw; height: 70vh; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(75,30,120,.45) 0%, rgba(75,30,120,.12) 45%, rgba(8,6,14,0) 70%); filter: blur(40px); }

/* ---- the head ---- */
.nm-head { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; }
.nm-h1 { font-family: var(--display); font-weight: 800; color: #fff; font-size: clamp(30px, 4.4vh, 44px); line-height: 1; letter-spacing: -.035em; margin: 0; }
.nm-h1 .accent { color: var(--violet-lt); }
.nm-head .nm-kick { margin-bottom: 10px; }
.nm-lead { margin: 10px 0 0; font-size: clamp(13.5px, 1.9vh, 16px); line-height: 1.5; color: var(--chalk-dim); max-width: 60ch; }
.nm-next { display: grid; gap: 4px; padding: 12px 16px; border-radius: 12px; text-decoration: none; color: var(--chalk); white-space: nowrap;
  transition: background-color var(--t-hover) ease, border-color var(--t-hover) ease; }
.nm-next:hover { background: rgba(242,237,248,.1); border-color: rgba(242,237,248,.3); }
.nm-next span { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--violet-lt); }
.nm-next b { font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: -.02em; color: #fff; }
.nm-next em { font-style: normal; font-size: 12.5px; color: var(--chalk-dim); }
.nm-next em i { font-style: normal; display: inline-block; transition: transform .3s var(--ease-out); }
.nm-next:hover em i { transform: translateX(4px); }

/* ---- the map ----
   A box in the map's own proportion (253 × 100 dots), as tall as the room
   allows. The dots are a canvas drawn once; the routes are an SVG over it;
   the pins and the prints are HTML placed by the script. */
.nm-stage { position: relative; z-index: 1; display: grid; place-items: center; padding-block: 6px; }
.nm-map { position: relative; width: min(100%, 58vh * 2.53); aspect-ratio: 253 / 100; will-change: transform; }
.nm-dots { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: .9; }
.nm-routes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* ⚠ NO non-scaling-stroke: with it Chrome measures stroke-dasharray in SCREEN
   pixels, and the draw (dasharray = the path's length in map units) covered
   only 1/scale of the route: 83% on a 1920 screen, so the far end stopped
   short of the city (his PC, 2026-09-22). The stroke now scales with the
   map, 2 units ≈ 2–2.4 px. */
.nm-routes path { fill: none; stroke-linecap: round; }
.nm-leg-base { stroke: rgba(226,183,255,.22); stroke-width: 1; }
.nm-leg-lit { stroke: var(--violet-lt); stroke-width: 2; filter: drop-shadow(0 0 6px rgba(226,183,255,.8)); opacity: 0; }
/* the pins */
.nm-city { position: absolute; width: 0; height: 0; z-index: 2; }
.nm-city i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: rgba(242,237,248,.55);
  transition: background-color .4s ease, box-shadow .4s ease; }   /* no dark ring: it cut the route 8 px short of every city (his PC, 2026-09-22: "the line is not reaching cities") */
.nm-city.is-on i, .nm-city.is-home i { background: #fff; box-shadow: 0 0 18px 6px rgba(226,183,255,.6); }
.nm-city.is-on::before, .nm-city.is-home::before { content: ''; position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--violet-lt);
  animation: nm-pulse 2.2s ease-out infinite; }
.nm-city.is-home::before { animation-duration: 3s; }
@keyframes nm-pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .nm-city::before { animation: none; } }
.nm-city b { position: absolute; left: 12px; top: -8px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--chalk-dim); white-space: nowrap; transition: color .4s ease; }
.nm-city.is-on b { color: #fff; }
.nm-city.is-home b { color: var(--violet-lt); }
.nm-city.is-home b em { font-style: normal; color: var(--chalk-dim); }
.nm-city[data-flip] b { left: auto; right: 12px; }
/* a warm glow under the lit city */
.nm-glow { position: absolute; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: 1; opacity: 0;
  background: radial-gradient(circle, rgba(226,183,255,.28) 0%, rgba(226,183,255,.06) 40%, rgba(8,6,14,0) 70%); filter: blur(6px); will-change: transform, opacity; }

/* ---- the prints ----
   The stand photograph on a cream mount, the reading under it, pinned by
   the city. The script positions each one beside its pin and pops the
   current one; on a phone they are the column. */
.nm-stops { display: contents; }
.nm-stop { position: absolute; z-index: 3; width: min(300px, 40vh); opacity: 0; pointer-events: none; will-change: transform, opacity; }
.nm-stop.is-on { pointer-events: auto; }
.nm-print { position: relative; display: block; background: var(--nm-cream); color: var(--ink); border-radius: 4px; padding: 10px 10px 0; text-decoration: none;
  box-shadow: 0 40px 80px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.6) inset; transform: rotate(var(--tilt, -2deg)); }
/* the pin through the top of the mount */
.nm-print::before { content: ''; position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--violet) 55%, var(--violet-dp)); box-shadow: 0 3px 6px rgba(0,0,0,.5); z-index: 1; }
/* height: auto is load-bearing: the img's height attribute is a presentational
   hint and set every print 1200px tall until it was overridden (first build). */
.nm-print img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; background: #ddd8cc; }
.nm-caption { display: grid; gap: 5px; padding: 12px 4px 14px; }
.nm-caption .nm-kick { margin: 0; color: var(--violet); font-size: 9.5px; }
.nm-caption h2 { font-family: var(--display); font-weight: 800; color: var(--ink); font-size: clamp(20px, 3.4vh, 26px); line-height: 1; letter-spacing: -.03em; margin: 0; }
.nm-caption p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--dim); }
.nm-caption .nm-meta { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--violet-dp); }
.nm-caption .nm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 4px; }
.nm-more { display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--violet); text-decoration: none; }
.nm-more i { font-style: normal; display: inline-block; margin-left: 6px; transition: transform .3s var(--ease-out); }
.nm-print:hover .nm-more i, .nm-more:hover i { transform: translateX(4px); }
.nm-caption .btn { padding-block: 10px; font-size: 13px; }
/* the last print carries a button, so its photograph is a shade shorter to
   keep the print off the strip on his 680 */
.nm-stop[data-id="sial-paris-2026"] .nm-print img { aspect-ratio: 16 / 9; }

/* ---- the strip of stops under the map: progress and the jump ---- */
.nm-strip { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; padding: 12px 0 22px; }
.nm-tick { display: grid; gap: 6px; padding: 8px 4px 0; border: 0; background: transparent; cursor: pointer; text-align: left; color: var(--chalk-dim); border-top: 2px solid rgba(242,237,248,.14);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color var(--t-hover) ease, border-color .4s ease; }
.nm-tick b { font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: -.02em; color: var(--chalk); }
.nm-tick:hover { color: #fff; }
.nm-tick.is-on { color: #fff; border-top-color: var(--violet-lt); }
.nm-tick.is-on b { color: #fff; }
.nm-tick.is-done { border-top-color: rgba(226,183,255,.5); }
.nm-tick:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nm-hint { display: none; }

/* ==================================================== pinned motion ==== */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .js .nm-scene { height: 640vh; }
  .js .nm-pin { position: sticky; top: 0; height: 100vh; min-height: 0; }
  .js .nm-hint { display: block; position: absolute; right: var(--spine); bottom: 8px; margin: 0; z-index: 4; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--chalk-dim); transition: opacity .4s ease; }
  .js .nm-hint.is-off { opacity: 0; }
}
/* Short laptops: his is 1270×680. */
@media (min-width: 901px) and (max-height: 760px) {
  .nm-pin { padding-top: 74px; }
  .nm-h1 { font-size: 30px; }
  .nm-lead { font-size: 13.5px; margin-top: 8px; }
  .nm-next { padding: 10px 14px; }
  .nm-next b { font-size: 15px; }
  .nm-map { width: min(100%, 54vh * 2.53); }
  .nm-stop { width: 262px; }
  .nm-caption { padding: 10px 4px 12px; gap: 4px; }
  .nm-caption p { font-size: 12.5px; }
  .nm-strip { padding: 8px 0 18px; }
  .nm-tick b { font-size: 14px; }
}

/* ------------------------------------------------------------- phone ----
   and reduced motion, and no script: the prints in a column, newest first. */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .nm-pin { min-height: 0; padding: 96px 0 40px; display: block; }
  .nm-head { grid-template-columns: 1fr; gap: 16px; }
  .nm-lead { max-width: none; }
  .nm-next { white-space: normal; justify-self: start; }
  .nm-stage { display: block; padding-top: 28px; }
  .nm-map { width: 100%; aspect-ratio: auto; transform: none !important; }
  .nm-dots, .nm-routes, .nm-city, .nm-glow, .nm-strip, .nm-hint { display: none !important; }
  .nm-stops { display: flex; flex-direction: column-reverse; gap: 28px; }
  .nm-stop { position: static; width: 100%; opacity: 1 !important; transform: none !important; pointer-events: auto; }
  .nm-print { transform: none; }
  .nm-caption h2 { font-size: 24px; }
  .nm-caption p { font-size: 14px; }
  .nm-kick { font-size: 12px; }
}