/* ─────────────────────────────────────────────────────────────────
 * Nexurion Field Notes — reading view
 * Shared chrome for all volume long-reads.
 * Loaded after styles/nexurion.css
 * ───────────────────────────────────────────────────────────────── */

html,body{font-family:"Inter Tight","Inter",system-ui,sans-serif;font-feature-settings:"ss01" on,"cv11" on;-webkit-font-smoothing:antialiased}
body{background:var(--paper);color:var(--ink-2)}

/* container parity */
.fn-container{max-width:1280px;margin:0 auto;padding:0 56px}
.fn-narrow{max-width:780px;margin:0 auto;padding:0 56px}
@media (max-width:900px){.fn-container,.fn-narrow{padding:0 24px}}

/* ─── Force Inter Tight 300 across editorial type, matching home/services/briefs ─── */
.fn-h1,.fn-h1 em,
.fn-dek,.fn-dek em,
.fn-section h2,.fn-section h2 em,
.fn-section h3,.fn-section h3 em,
.fn-pullquote,.fn-pullquote em,
.fn-cover-h,.fn-cover-h em,
.fn-meta-row .v,.fn-meta-row .v em{
  font-family:"Inter Tight","Inter",system-ui,sans-serif!important;
  font-weight:300!important;
  font-style:normal!important;
  letter-spacing:-.022em;
  font-feature-settings:"ss01" on;
}
.fn-h1 em,.fn-section h2 em,.fn-section h3 em,
.fn-pullquote em,.fn-cover-h em,.fn-meta-row .v em{
  color:var(--magenta-deep)!important;font-weight:300!important;
}

/* ───────── Top strip (compact for reading view) ───────── */
.fn-topstrip{background:var(--ink);color:rgba(242,238,227,.7);font-family:var(--mono);font-size:11px;letter-spacing:.05em;border-bottom:1px solid rgba(255,255,255,.06)}
.fn-topstrip-inner{max-width:1280px;margin:0 auto;padding:11px 56px;display:flex;align-items:center;gap:20px;flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
.fn-topstrip-inner > span{white-space:nowrap}
.fn-topstrip .pill{display:inline-flex;align-items:center;gap:8px;color:var(--paper);font-weight:500;text-transform:uppercase;letter-spacing:.18em;font-size:10px}
.fn-topstrip .pill::before{content:"";width:6px;height:6px;background:var(--magenta);box-shadow:0 0 0 2px rgba(186,85,227,.25)}
.fn-topstrip .sep{color:rgba(242,238,227,.25)}
.fn-topstrip .right{margin-left:auto;display:flex;gap:18px;color:rgba(242,238,227,.55);text-transform:uppercase;letter-spacing:.14em;font-size:10px}
@media (max-width:900px){.fn-topstrip-inner{padding:11px 24px}.fn-topstrip .right{display:none}}

/* ───────── Reading progress bar ───────── */
.fn-progress{position:fixed;top:0;left:0;height:2px;background:var(--magenta);z-index:100;width:0%;transition:width .1s linear}

/* ───────── Masthead ───────── */
.fn-mast{padding:48px 0 64px;border-bottom:1px solid var(--rule)}
.fn-mast-rule{display:flex;align-items:center;gap:18px;font-family:var(--mono);font-size:10.5px;color:var(--slate);text-transform:uppercase;letter-spacing:.22em;margin-bottom:36px}
.fn-mast-rule .dot{width:4px;height:4px;background:var(--magenta);border-radius:50%}
.fn-mast-rule .sep{flex:1;height:1px;background:var(--rule)}

.fn-eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.26em;color:var(--magenta-deep);text-transform:uppercase;display:inline-flex;align-items:center;gap:12px;margin-bottom:22px}
.fn-eyebrow .marker{width:9px;height:9px;background:var(--magenta);display:inline-block;animation:fn-pulse 2.4s ease-in-out infinite}
@keyframes fn-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.85)}}

.fn-h1{font-size:clamp(40px,5.4vw,76px);line-height:1;letter-spacing:-.04em;color:var(--ink);text-wrap:balance;margin-bottom:28px}
.fn-h1 em{color:var(--magenta-deep)}

.fn-dek{font-size:clamp(18px,1.8vw,22px);line-height:1.5;color:var(--ink-mute);margin-bottom:36px;max-width:780px}

.fn-meta-row{display:flex;flex-wrap:wrap;gap:36px 56px;padding:24px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.fn-meta-row .m{display:flex;flex-direction:column;gap:4px}
.fn-meta-row .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:var(--slate);text-transform:uppercase}
.fn-meta-row .v{font-size:17px;color:var(--ink);letter-spacing:-.01em}

/* ───────── Volume cover panel (editorial slab beside intro) ───────── */
.fn-cover{background:var(--ink);color:#F4F2EE;padding:48px 44px 36px;position:relative;aspect-ratio:3/4;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.fn-cover::before{content:"";position:absolute;inset:0;background:radial-gradient(800px 400px at 100% 0%,rgba(186,85,227,.18),transparent 60%);pointer-events:none}
.fn-cover-top{display:flex;justify-content:space-between;align-items:flex-start;font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(244,242,238,.55);position:relative;z-index:1}
.fn-cover-mark{display:flex;align-items:center;gap:10px;color:var(--paper)}
.fn-cover-mark .sq{width:10px;height:10px;background:var(--magenta)}
.fn-cover-vol{color:var(--magenta-mid)}
.fn-cover-h{font-size:38px;line-height:1.05;letter-spacing:-.025em;color:var(--paper);margin-top:auto;text-wrap:balance;position:relative;z-index:1}
.fn-cover-h em{color:#F96BEE}
.fn-cover-foot{display:flex;justify-content:space-between;align-items:flex-end;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,242,238,.55);position:relative;z-index:1;margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1)}
.fn-cover-foot .lh em{color:var(--magenta-mid);font-style:normal;letter-spacing:.18em}

/* ───────── Article body ───────── */
.fn-article{padding:80px 0 96px}
.fn-article-grid{display:grid;grid-template-columns:240px 1fr;gap:80px;align-items:start;max-width:1180px;margin:0 auto;padding:0 56px}
@media (max-width:1024px){.fn-article-grid{grid-template-columns:1fr;gap:40px}}
@media (max-width:900px){.fn-article-grid{padding:0 24px}}

.fn-toc{position:sticky;top:80px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--slate);line-height:1.8}
.fn-toc-h{font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);margin-bottom:14px;font-size:10.5px}
.fn-toc a{display:block;color:var(--slate);padding:6px 0 6px 14px;border-left:1px solid var(--rule);transition:all .2s ease}
.fn-toc a:hover{color:var(--ink);border-left-color:var(--ink)}
.fn-toc a.active{color:var(--magenta-deep);border-left-color:var(--magenta)}

.fn-section{margin-bottom:64px;scroll-margin-top:80px}
.fn-section-num{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--magenta-deep);text-transform:uppercase;margin-bottom:14px;display:block}
.fn-section h2{font-size:clamp(28px,3vw,40px);line-height:1.1;letter-spacing:-.024em;color:var(--ink);text-wrap:balance;margin-bottom:24px}
.fn-section h3{font-size:22px;line-height:1.25;letter-spacing:-.012em;color:var(--ink);margin:36px 0 14px}
.fn-section p{font-size:17px;line-height:1.7;color:var(--ink);margin:0 0 18px;max-width:680px}
.fn-section p em{font-style:italic;color:var(--magenta-deep);font-weight:400}
.fn-section p strong{font-weight:600;color:var(--ink-2)}
.fn-section a{color:var(--magenta-deep);border-bottom:1px solid var(--magenta-mid);transition:all .2s ease}
.fn-section a:hover{color:var(--magenta);border-bottom-color:var(--magenta)}
.fn-section ul,.fn-section ol{margin:0 0 24px;padding-left:0;list-style:none;max-width:680px}
.fn-section ul li,.fn-section ol li{font-size:17px;line-height:1.65;color:var(--ink);padding:8px 0 8px 28px;position:relative}
.fn-section ul li::before{content:"";position:absolute;left:0;top:18px;width:14px;height:1px;background:var(--magenta)}
.fn-section ol{counter-reset:fnli}
.fn-section ol li{counter-increment:fnli}
.fn-section ol li::before{content:counter(fnli,decimal-leading-zero);position:absolute;left:0;top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--magenta-deep);font-weight:500}
.fn-section ol li{padding-left:36px}

/* Pull quote */
.fn-pullquote{font-size:clamp(22px,2.4vw,30px);line-height:1.25;letter-spacing:-.018em;color:var(--ink);max-width:760px;margin:48px 0;padding:28px 0 28px 28px;border-left:3px solid var(--magenta);position:relative}
.fn-pullquote em{color:var(--magenta-deep)}
.fn-pullquote-cite{display:block;margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--slate);text-transform:uppercase}

/* Callout box */
.fn-callout{background:#FFF;border:1px solid var(--rule);padding:28px 32px;margin:32px 0;max-width:760px;position:relative}
.fn-callout::before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--magenta)}
.fn-callout-h{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--magenta-deep);text-transform:uppercase;margin-bottom:14px;font-weight:500}
.fn-callout p{margin:0;font-size:16px;line-height:1.65;color:var(--ink-2)}
.fn-callout p + p{margin-top:12px}

/* Definition list / data block */
.fn-dl{display:grid;grid-template-columns:200px 1fr;gap:14px 32px;margin:24px 0 32px;max-width:760px;padding:24px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.fn-dl dt{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--magenta-deep);text-transform:uppercase;font-weight:500;padding-top:3px}
.fn-dl dd{margin:0;font-size:16px;line-height:1.55;color:var(--ink)}
@media (max-width:760px){.fn-dl{grid-template-columns:1fr;gap:6px 0}.fn-dl dd{padding-bottom:12px;border-bottom:1px dashed var(--rule);margin-bottom:6px}}

/* Comparison table */
.fn-table{width:100%;border-collapse:collapse;margin:32px 0;font-size:14.5px;max-width:760px}
.fn-table th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--magenta-deep);text-transform:uppercase;font-weight:500;padding:12px 16px 12px 0;border-bottom:1px solid var(--ink)}
.fn-table td{padding:14px 16px 14px 0;border-bottom:1px solid var(--rule);color:var(--ink);line-height:1.5;vertical-align:top}
.fn-table td em{color:var(--magenta-deep);font-style:italic}

/* Numbered "marker" list (used for steps) */
.fn-steps{counter-reset:fnstep;list-style:none;padding:0;margin:32px 0;max-width:760px}
.fn-steps li{counter-increment:fnstep;padding:24px 0 24px 76px;position:relative;border-top:1px solid var(--rule)}
.fn-steps li:last-child{border-bottom:1px solid var(--rule)}
.fn-steps li::before{content:"§ " counter(fnstep,decimal-leading-zero);position:absolute;left:0;top:24px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--magenta-deep);font-weight:500}
.fn-steps h4{font-size:18px;line-height:1.3;letter-spacing:-.012em;color:var(--ink);margin:0 0 8px;font-weight:500}
.fn-steps p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-mute)}

/* Closing strip */
.fn-close{padding:64px 0;border-top:1px solid var(--rule);background:#EFECE5}
.fn-close-grid{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;max-width:1180px;margin:0 auto;padding:0 56px}
@media (max-width:900px){.fn-close-grid{grid-template-columns:1fr;padding:0 24px}}
.fn-close h3{font-family:var(--serif);font-size:30px;line-height:1.2;letter-spacing:-.018em;color:var(--ink);margin:0 0 12px;font-weight:400}
.fn-close p{font-size:15.5px;line-height:1.55;color:var(--ink-mute);max-width:520px;margin:0}
.fn-close .actions{display:flex;gap:12px;flex-wrap:wrap}

/* Byline */
.fn-byline{display:flex;align-items:center;gap:18px;padding:32px 0;margin-top:40px;border-top:1px solid var(--rule)}
.fn-byline-bug{width:48px;height:48px;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:.06em}
.fn-byline-who{font-size:15.5px;color:var(--ink);line-height:1.5}
.fn-byline-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--slate);text-transform:uppercase;margin-top:4px}

/* Reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}

/* Print */
@media (max-width:1024px){
  /* Disable sticky TOC on mobile/tablet — otherwise article content scrolls UNDER the TOC */
  .fn-toc,.v1-toc,.v2-toc,.v3-toc,.v4-toc,.v5-toc{position:static!important;top:auto!important;margin-bottom:24px}
}
@media print{
  .fn-topstrip,.nav,.fn-toc,.fn-progress,.fn-close{display:none!important}
  .fn-article-grid{grid-template-columns:1fr}
  body{background:#fff}
  .fn-section{break-inside:avoid}
}