/* Opening story "Is the UN order really broken?", shown above the chess board on the home page. Scoped to .nr. */
.nr { --nr-w: 74rem; font-family: var(--font-anthropic-sans); color: var(--color-fg); max-width: var(--nr-w); margin-inline: auto; padding-bottom: var(--cds-pad-lg); }
.nr[hidden], .nr [hidden] { display: none; }
.nr b { font-weight: 600; font-variant-numeric: tabular-nums; }


/* hero */

.nr-hero-in { display: grid; gap: var(--cds-gap-md); max-width: 58rem; }
.nr-kicker, .nr-num { margin: 0; font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); letter-spacing: .06em; text-transform: uppercase; }
.nr-title { margin: 0; font-family: var(--font-anthropic-serif); font-weight: 400; font-size: clamp(2.4rem, 6.4vw, 4.6rem); line-height: 1.02; text-wrap: balance; }
.nr-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--cds-gap-sm); margin-top: var(--cds-gap-xs); }
.nr-q { margin: 0; padding: var(--cds-pad-sm) 0 var(--cds-pad-sm) var(--cds-pad-md); border-left: 3px solid var(--cds-chart-categorical-8, #e34948); display: grid; gap: 6px; align-content: start; }
.nr-q blockquote { margin: 0; font-family: var(--font-anthropic-serif); font-size: calc(var(--cds-font-size-body) * 1.08); line-height: 1.45; }
.nr-q figcaption { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); line-height: 1.4; }
.nr-hero-lede { margin: var(--cds-gap-xs) 0 0; font-size: calc(var(--cds-font-size-body) * 1.15); line-height: 1.6; text-wrap: pretty; max-width: 48rem; }
.nr-cue { margin: var(--cds-gap-sm) 0 0; font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); letter-spacing: .06em; text-transform: uppercase; animation: nr-bob 2.4s ease-in-out infinite; }
@keyframes nr-bob { 50% { transform: translateY(5px); } }

/* text */
.nr-h2 { margin: 0; font-family: var(--font-anthropic-serif); font-weight: 400; font-size: calc(var(--cds-font-size-title) * 1.2); line-height: 1.18; text-wrap: balance; }
.nr-p { margin: 0; font-size: var(--cds-font-size-body); line-height: 1.65; text-wrap: pretty; max-width: 46rem; }
.nr-strong { font-family: var(--font-anthropic-serif); font-size: calc(var(--cds-font-size-body) * 1.15); }
.nr h3 { margin: 0; font-size: var(--cds-font-size-body); font-weight: var(--cds-font-weight-medium); }

/* chapters: text left, sticky chart right */
.nr-ch > .nr-in { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr); gap: var(--cds-gap-lg); align-items: center; }
.nr-ch.nr-scene > .nr-in { align-self: stretch; }
.nr-tclip { align-self: stretch; overflow: hidden; position: relative;
            -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 92%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 92%, transparent 100%); }
.nr-tclip > .nr-text { position: relative; padding-block: calc(var(--nr-vh, 100vh) * .06) calc(var(--nr-vh, 100vh) * .3); will-change: transform; }
.nr-fig .nr-slider { margin-top: var(--cds-gap-xs); }
.nr-text { display: grid; gap: var(--cds-gap-sm); min-width: 0; }
.nr-step { min-height: calc(var(--nr-vh, 100vh) * .42); display: flex; align-items: center; opacity: .35; transition: opacity var(--cds-dur-slow); }
.nr-step.on { opacity: 1; }
.nr-step p { margin: 0; }
.nr-step p { margin: 0; padding: var(--cds-pad-md) var(--cds-pad-lg); background: var(--color-panel); border: 1px solid var(--color-border-line);
             border-radius: var(--cds-radius); font-size: var(--cds-font-size-body); line-height: 1.6; text-wrap: pretty; }
.nr-fig { margin: 0; min-width: 0; background: var(--color-panel); border: 1px solid var(--color-border-line);
          border-radius: var(--cds-radius); padding: var(--cds-pad-lg); display: grid; gap: var(--cds-gap-xs); }
.nr-plot { position: relative; min-height: 10rem; }
.nr-plot svg, .nr-mini svg { max-height: calc(var(--nr-vh, 100vh) * .5); }
.nr-mini svg { max-height: calc(var(--nr-vh, 100vh) * .2); }
.nr-cap { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); line-height: 1.45; }
.nr-take { margin: var(--cds-gap-xs) 0 0; padding: var(--cds-pad-sm) 0 0 1.1rem; border-top: 1px solid var(--color-border-line); display: grid; gap: 2px;
           font-size: var(--cds-font-size-caption); line-height: 1.45; }
.nr-take li::marker { color: var(--color-fg-muted); }
.nr-fail { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); padding: var(--cds-pad-md); }

/* bands */
.nr-band > .nr-in { display: grid; gap: var(--cds-gap-sm); }
.nr-rq { margin: 0; font-family: var(--font-anthropic-serif); font-size: calc(var(--cds-font-size-body) * 1.3); line-height: 1.45; max-width: 56rem; text-wrap: pretty; }
.nr-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--cds-gap-sm); }
.nr-counts > div { display: grid; gap: 4px; align-content: start; padding: var(--cds-pad-md) var(--cds-pad-lg); background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); }
.nr-counts > div > b { font-family: var(--font-anthropic-serif); font-weight: 400; font-size: calc(var(--cds-font-size-title) * 1.5); line-height: 1.05; min-height: 1.05em; }
.nr-counts span { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); line-height: 1.45; }
.nr-counts span b { color: var(--color-fg); }
.nr-note { margin: 0; font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); line-height: 1.5; }

/* method lenses */
.nr-lens { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--cds-gap-md); }
.nr-lens-col { display: grid; gap: var(--cds-gap-xs); align-content: start; }
.nr-lens-col:last-child { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.nr-lens-col:last-child h3 { grid-column: 1 / -1; }
.nr-m { font: inherit; text-align: left; cursor: pointer; display: flex; gap: var(--cds-gap-sm); align-items: flex-start; padding: var(--cds-pad-sm) var(--cds-pad-md);
        background: var(--color-panel); color: var(--color-fg); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); }
.nr-m:hover, .nr-m:focus-visible { border-color: var(--color-fg); outline: none; }
.nr-m svg { flex: none; width: 2rem; height: 2rem; fill: var(--color-fg); stroke: var(--color-fg); }
.nr-m span { font-size: var(--cds-font-size-caption); line-height: 1.45; color: var(--color-fg-muted); }
.nr-m span b { display: block; font-size: var(--cds-font-size-body); color: var(--color-fg); font-weight: var(--cds-font-weight-medium); }
.nr-m-wide { width: 100%; }

/* evidence badges, how sure, slider */
.nr-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.nr-badge { font: inherit; font-size: var(--cds-font-size-caption); cursor: pointer; padding: 2px 9px; border-radius: 4px;
            border: 1px solid var(--color-border-line); background: transparent; color: var(--color-fg-muted); }
.nr-badge::before { content: "✓ "; color: var(--color-ok); }
.nr-badge:hover { color: var(--color-fg); border-color: var(--color-fg); }
.nr-sure { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); line-height: 1.55; border-top: 1px dashed var(--color-border-line); padding-top: var(--cds-pad-sm); }
.nr-sure summary { cursor: pointer; color: var(--color-fg); font-weight: var(--cds-font-weight-medium); }
.nr-sure p { margin: var(--cds-gap-xs) 0 0; }
.nr-slider { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cds-gap-xs) var(--cds-gap-sm); font-size: var(--cds-font-size-caption); }
.nr-slider input { flex: 1 1 10rem; min-width: 0; }
.nr-play, .nr-link { font: inherit; font-size: var(--cds-font-size-caption); cursor: pointer; padding: 4px 12px; border-radius: 999px;
                     border: 1px solid var(--color-border-line); background: var(--color-panel); color: var(--color-fg); }
.nr-link { margin-left: 4px; }
.nr-badge:focus-visible, .nr-play:focus-visible, .nr-link:focus-visible, .nr-down:focus-visible { outline: 2px solid var(--color-fg); outline-offset: 2px; }

/* what is new */
.nr-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--cds-gap-sm); }
.nr-card { display: grid; gap: var(--cds-gap-xs); align-content: start; padding: var(--cds-pad-lg); background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); }
.nr-card > b { font-family: var(--font-anthropic-serif); font-weight: 400; font-size: calc(var(--cds-font-size-title) * 1.3); line-height: 1; color: var(--color-fg-muted); }
.nr-card p { margin: 0; font-size: var(--cds-font-size-caption); line-height: 1.55; }
.nr-mini { position: relative; margin-top: var(--cds-gap-xs); min-height: 7rem; }

/* conclusion */
.nr-end > .nr-in { padding: var(--cds-pad-xl) var(--cds-pad-lg); background: var(--color-panel); border: 1px solid var(--color-border-line);
          border-radius: var(--cds-radius); display: grid; gap: var(--cds-gap-sm); }
.nr-big { margin: 0; font-family: var(--font-anthropic-serif); font-weight: 400; font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.05; text-wrap: balance; }
.nr-end .nr-p { font-size: calc(var(--cds-font-size-body) * 1.08); }
.nr-limits > .nr-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--cds-gap-md) var(--cds-gap-lg); }
.nr-limits > .nr-in > div { display: grid; gap: var(--cds-gap-xs); align-content: start; }
.nr-ol { margin: 0; padding-left: 1.2rem; display: grid; gap: 6px; font-size: var(--cds-font-size-body); line-height: 1.55; }

/* hand-off to the board */
.nr-handoff { grid-column: 1 / -1; display: grid; justify-items: center; text-align: center; gap: var(--cds-gap-sm); padding-top: var(--cds-gap-md); border-top: 1px solid var(--color-border-line); }
.nr-down { font: inherit; font-family: var(--font-anthropic-serif); font-size: calc(var(--cds-font-size-body) * 1.15); padding: 10px 28px; border-radius: 999px;
           border: 1px solid #1d3f31; background: #1d3f31; color: #f3efe4; cursor: pointer; }
.nr-down:hover { background: #2a5844; border-color: #2a5844; }

/* chart text */
.nr svg { display: block; overflow: visible; }
.nr svg text { font-family: var(--font-anthropic-sans); }
.nr .nr-tick { font-size: 11px; fill: var(--color-fg-muted); }
.nr .nr-lbl { font-size: 11.5px; fill: var(--color-fg); font-weight: 500; }
.nr .nr-ttl { font-size: 12px; font-weight: 600; fill: var(--color-fg); }
.nr .nr-grid { stroke: var(--cds-chart-grid); }
.nr .nr-ref { stroke: var(--cds-chart-reference); stroke-dasharray: 2 3; }
.nr .nr-dim { transition: opacity var(--cds-dur-slow); }
.nr-tip { position: absolute; z-index: 8; pointer-events: none; background: var(--cds-surface-popover); border: 1px solid var(--cds-border);
          border-radius: var(--cds-radius); box-shadow: var(--cds-shadow-popover); padding: var(--cds-pad-xs) var(--cds-pad-sm);
          font-size: var(--cds-font-size-caption); max-width: 16rem; line-height: 1.45; }
.nr-tip .h { color: var(--cds-text-secondary); margin-bottom: 2px; }

/* narrow: the chart sits above its chapter's text */
@media (max-width: 820px) {
  .nr-ch > .nr-in { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: var(--cds-gap-sm); }
  .nr-fig { order: -1; padding: var(--cds-pad-sm); }
  .nr-step { min-height: calc(var(--nr-vh, 100vh) * .28); }
  .nr-plot svg { max-height: calc(var(--nr-vh, 100vh) * .36); }
  .nr-take, .nr-cap:empty { display: none; }
  .nr-lens { grid-template-columns: minmax(0, 1fr); }

}


/* ---------- the stage: one scene at a time ---------- */
.nr-track { position: relative; }
.nr-stage { position: sticky; top: 0; height: var(--nr-vh, 100vh); overflow: hidden; }
.nr-scene { position: absolute; inset: 0; display: flex; align-items: center; padding: clamp(16px, 5vh, 56px) 16px; box-sizing: border-box;
            opacity: 0; visibility: hidden; transform: translateY(0) scale(.985);
            transition: opacity .55s ease, transform .7s cubic-bezier(.3,.7,.2,1), visibility 0s linear .7s; }
.nr-scene.nr-tall { align-items: flex-start; }
.nr-scene > .nr-in { width: 100%; max-width: var(--nr-w); margin-inline: auto; will-change: transform; }
.nr-scene.is-on { opacity: 1; visibility: visible; transform: none;
                  transition: opacity .6s ease .18s, transform .8s cubic-bezier(.2,.75,.2,1) .18s, visibility 0s; }
.nr-scene.gone-up { transform: translateY(-7vh) scale(.985); }
.nr-scene.gone-down { transform: translateY(7vh) scale(.985); }
.nr-scene.from-below { transform: translateY(9vh); }
.nr-scene.from-above { transform: translateY(-9vh); }
.nr-scene.nr-prep { transition: none !important; }
/* the incoming scene's parts rise in one after another */
@keyframes nr-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes nr-fade { from { opacity: 0; } to { opacity: 1; } }
.nr-scene.is-on > .nr-in > *, .nr-scene.is-on .nr-hero-in > * { animation: nr-rise .75s cubic-bezier(.2,.75,.2,1) both; }
.nr-scene.is-on > .nr-in > *:nth-child(2), .nr-scene.is-on .nr-hero-in > *:nth-child(2):nth-child(2) { animation-delay: .28s; }
.nr-scene.is-on > .nr-in > *:nth-child(3), .nr-scene.is-on .nr-hero-in > *:nth-child(3):nth-child(3) { animation-delay: .38s; }
.nr-scene.is-on > .nr-in > *:nth-child(4), .nr-scene.is-on .nr-hero-in > *:nth-child(4):nth-child(4) { animation-delay: .48s; }
.nr-scene.is-on > .nr-in > *:nth-child(n+5), .nr-scene.is-on .nr-hero-in > *:nth-child(n+5):nth-child(n+5) { animation-delay: .58s; }
.nr-scene.is-on > .nr-in > *:first-child, .nr-scene.is-on .nr-hero-in > *:first-child:first-child { animation-delay: .18s; }
.nr-ch.is-on > .nr-in > .nr-fig { animation-delay: .3s; }
/* within a finding, the next step's text slides in and the chart redraws with a fade */
.nr-plot.nr-anim svg { animation: nr-fade .6s ease both; }
.nr-hero-in > .nr-quotes > .nr-q { animation: nr-rise .8s cubic-bezier(.2,.75,.2,1) both; }
.nr-hero-in > .nr-quotes > .nr-q:nth-child(2) { animation-delay: .5s; }
.nr-hero-in > .nr-quotes > .nr-q:nth-child(3) { animation-delay: .7s; }
.nr-scene:not(.is-on) .nr-q { animation: none; }
.nr-scene.is-on .nr-q:first-child { animation-delay: .35s; }

/* scene dots and progress */
.nr-dots { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.nr-dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1px solid var(--color-fg-muted); background: transparent; cursor: pointer; transition: transform .3s, background .3s; }
.nr-dot.sub { width: 6px; height: 6px; }
.nr-dot.on { background: var(--color-fg); border-color: var(--color-fg); transform: scale(1.35); }
.nr-dot:hover { border-color: var(--color-fg); }
.nr-dot:focus-visible { outline: 2px solid var(--color-fg); outline-offset: 2px; }
.nr-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-border-line); z-index: 5; }
.nr-prog i { display: block; height: 100%; width: 0; background: var(--color-fg); transition: width .2s linear; }
@media (min-width: 821px) { .nr-scene { padding-right: 36px; padding-left: 36px; } }
@media (max-width: 820px) { .nr-dots { display: none; } .nr-scene { padding: 20px 16px; } .nr-limits > .nr-in { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .nr-scene, .nr-scene.is-on { transition: opacity .2s linear, visibility 0s; transform: none !important; }
  .nr-scene *, .nr-plot.nr-anim svg { animation: none !important; }
  .nr .nr-dim { transition: none; }
}