/* Sept 21 approved board: live type, shared source data, no browser-side chart runtime. */
.narrative { font-variant-numeric:tabular-nums; margin:0 0 70px }
.narrative > section { padding:64px 0; border-top:1px solid var(--line) }
.narrative h2 { font-size:clamp(29px,3.6vw,46px); max-width:24ch; margin:0 0 30px; line-height:1.2 }
.nv-label,.nv-meta,.nv-fine,.nv-evidence,.nv-compare-head { font:13px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace; color:var(--muted) }
.nv-label { letter-spacing:.08em; margin:0 0 16px }
.nv-meta { margin:24px 0 0 } .nv-meta a { color:inherit }
.nv-fine { margin:24px 0 0 } .nv-evidence { display:inline-block; color:var(--accent); margin-top:24px }
.narrative .nv-hero { position:relative; isolation:isolate; display:flex; align-items:flex-end; min-height:640px; padding:0; border:0; margin:0 0 40px; overflow:hidden }
.nv-hero > img { position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover }
.nv-hero-panel { width:68%; background:var(--bg); padding:26px 32px 18px; border-top:2px solid var(--accent); margin-top:230px }
.nv-hero h1 { font-size:clamp(34px,4.4vw,55px); margin:12px 0 20px; max-width:20ch }
.nv-lead { font-size:19px; color:var(--muted); line-height:1.6; margin:0 }
.nv-tiles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-block:1px solid var(--line); margin:30px 0 38px }
.nv-tiles > div { padding:24px 18px; border-left:1px solid var(--line) } .nv-tiles > div:first-child { border-left:0 }
.nv-tiles p { font-size:14px; color:var(--muted); margin:0 0 12px }
.nv-tiles strong { display:block; font-size:clamp(30px,3.5vw,44px); line-height:1.2; color:var(--accent); letter-spacing:-.03em }
.nv-tiles span { display:block; font:15px/1.8 ui-monospace,monospace; margin-top:10px }
.nv-numbers { background-image:radial-gradient(var(--line) .7px,transparent .7px); background-size:16px 16px }
.nv-numbers h2,.nv-tiles,.nv-bars { background:var(--bg) }
.nv-bars { padding:24px 0; display:grid; gap:22px }
.nv-bar { display:grid; grid-template-columns:110px minmax(0,1fr) 94px; align-items:center; gap:12px; font:15px/1.4 ui-monospace,monospace }
.nv-bar > div { height:28px; background:var(--panel) } .nv-bar i { display:block; height:100%; background:var(--accent) }
.nv-bar b { color:var(--accent); font-weight:500 }
.nv-compare-head { display:grid; grid-template-columns:1fr 100px 1fr; text-align:center; align-items:center; padding:8px 0 24px }
.nv-compare-head span:nth-child(2) { font:80px/1 sans-serif; color:var(--accent) }
.nv-compare-row { display:grid; grid-template-columns:110px 1fr 1fr; border-top:1px solid var(--line) }
.nv-compare-row h3 { font:13px/1.5 ui-monospace,monospace; color:var(--muted); padding:24px 8px 24px 0; margin:0 }
.nv-compare-row p { margin:0; padding:24px; font-size:17px; line-height:1.7 }
.nv-compare-row p:nth-child(2) { background:var(--panel); color:var(--muted) }
.nv-compare-row p:last-child { border-left:1px solid var(--accent) }
.nv-split { display:grid; grid-template-columns:1.15fr 1fr; gap:34px; align-items:center }
.nv-panel { padding:32px; background:var(--panel); border:1px solid var(--line) }
.nv-panel ul,.nv-closing > ul { list-style:none; padding:0; margin:28px 0 0 }
.nv-panel li,.nv-closing > ul > li { border-top:1px solid var(--line); padding:18px 0; font-size:16px }
.nv-prices { text-align:center } .nv-prices h2 { margin-inline:auto; max-width:none }
.nv-pair { display:grid; grid-template-columns:1fr 1fr; gap:1px; border:1px solid var(--line); background:var(--line) }
.nv-pair figure { min-width:0; background:var(--panel); margin:0; padding:18px 8px 8px }
.nv-pair figcaption { text-align:left; padding:0 12px; font:13px/1.5 ui-monospace,monospace; color:var(--muted) }
.nv-pair img { display:block; width:100%; height:auto }
.nv-timeline { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); list-style:none; padding:0; margin:0; border:1px solid var(--line) }
.nv-timeline li { min-width:0; padding:22px 16px; border-left:1px solid var(--line); background:var(--panel) }
.nv-timeline li:first-child { border-left:0 } .nv-timeline li:nth-child(-n+2) { background:var(--bg) }
.nv-timeline li > p:nth-child(2) { min-height:132px; font-size:15px; line-height:1.6; border-left:1px solid var(--line); padding-left:12px; margin:20px 0 }
.nv-timeline li:nth-child(2) > p:nth-child(2) { border-color:var(--accent) }
.nv-photo { aspect-ratio:1/1.8; background-image:url('/assets/reviews/narrative-week-2026-09-21.webp'); background-size:500% 100%; background-repeat:no-repeat }
.nv-photo-0 { background-position:0% 50% } .nv-photo-1 { background-position:25% 50% } .nv-photo-2 { background-position:50% 50% } .nv-photo-3 { background-position:75% 50% } .nv-photo-4 { background-position:100% 50% }
.nv-loop { align-self:stretch; padding:32px 24px; border:1px solid var(--line); background-image:radial-gradient(var(--line) .7px,transparent .7px); background-size:16px 16px }
.nv-loop ol { display:grid; grid-template-columns:1fr 1fr; list-style:none; padding:0; margin:35px 0; gap:28px 18px }
.nv-loop li { position:relative; min-height:125px; padding:22px 18px; background:var(--panel); border:1px solid var(--muted); font-size:17px; line-height:1.4 }
.nv-loop li b { display:block; font:12px/1.5 ui-monospace,monospace; margin-bottom:10px }
.nv-loop li span { position:absolute; right:12px; bottom:12px }
.nv-loop .nv-current { background:var(--accent); color:var(--bg); border-color:var(--accent) }
.nv-view blockquote { margin:20px 0; font-size:20px; line-height:1.8 }
.nv-closing { text-align:center } .nv-closing h2 { margin-inline:auto }
.nv-closing > ul { max-width:670px; margin:0 auto }
.nv-actions { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:24px; margin:34px 0 }
.nv-button { background:var(--accent); color:var(--bg); padding:13px 24px; text-decoration:none; font-weight:650 } .nv-button:hover { color:var(--bg); background:#b3ffdc }
.nv-closing .nv-tags { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:26px }
.nv-closing .nv-tags li { font-size:12px; border:1px solid var(--line); padding:4px 10px; color:var(--muted) }
@media(max-width:980px) {
  .narrative .nv-hero { display:block; min-height:0 } .nv-hero > img { position:static; height:auto; aspect-ratio:16/9 }
  .nv-hero-panel { width:100%; margin:0; padding:24px 0 10px } .nv-hero h1 { max-width:24ch }
  .nv-timeline { grid-template-columns:repeat(3,minmax(0,1fr)) } .nv-timeline li:nth-child(4) { border-left:0 } .nv-timeline li:nth-child(n+4) { border-top:1px solid var(--line) }
  .nv-split { grid-template-columns:1fr; gap:24px } .nv-loop ol { grid-template-columns:repeat(4,minmax(0,1fr)) }
}
@media(max-width:640px) {
  .narrative > section { padding-block:38px } .narrative h2 { font-size:30px } .nv-hero h1 { font-size:37px }
  .nv-tiles { grid-template-columns:1fr 1fr } .nv-tiles > div:nth-child(3) { border-left:0 } .nv-tiles > div:nth-child(n+3) { border-top:1px solid var(--line) }
  .nv-tiles > div { padding:18px 12px } .nv-tiles strong { font-size:34px }
  .nv-bar { grid-template-columns:80px minmax(0,1fr) 72px; gap:8px; font-size:12px }
  .nv-bar > div { height:24px } .nv-pair { grid-template-columns:1fr }
  .nv-compare-head { grid-template-columns:1fr 42px 1fr; font-size:11px } .nv-compare-head span:nth-child(2) { font-size:42px }
  .nv-compare-row { grid-template-columns:1fr 1fr } .nv-compare-row h3 { grid-column:1/-1; padding:18px 0 8px }
  .nv-compare-row p { padding:16px 12px; font-size:15px }
  .nv-timeline { grid-template-columns:1fr } .nv-timeline li { border-left:0; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 100px; gap:0 16px; padding:20px }
  .nv-timeline li:first-child { border-top:0 } .nv-timeline li > p:nth-child(2) { min-height:0; margin:0; grid-column:1 }
  .nv-photo { grid-column:2; grid-row:1/3; width:100px } .nv-loop ol { grid-template-columns:1fr 1fr }
  .nv-panel,.nv-loop { padding:24px 20px } .nv-loop li { padding:18px 14px; font-size:16px }
}