/* Read First — shell for article pages: atmosphere, top bar, nav, click effects. Touches no article content. */
:root{--void:#070B12;--ink-0:#E6EDF5;--dim-0:#8A98AB;--rule-0:rgba(138,152,171,.16);--signal:#44C4FF}
html{background:var(--void)}
#mesh{position:fixed;inset:0;z-index:0;pointer-events:none}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 40%,transparent 35%,rgba(3,5,9,.55) 75%,rgba(2,3,6,.92) 100%)}
.grain{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.grain::before{content:"";position:absolute;inset:-50%;opacity:.06;animation:rfgrain 1.2s steps(6) infinite;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
@keyframes rfgrain{20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}}
.page{position:relative;z-index:3;transition:opacity .6s ease}
.rf-disclose{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim-0);
  text-align:center;padding:9px 16px;border-bottom:1px solid var(--rule-0);background:rgba(7,11,18,.7)}
.rf-disclose a{color:var(--ink-0);border-bottom:1px solid var(--rule-0)}
nav.rf-top{position:sticky;top:0;z-index:20;background:rgba(7,11,18,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--rule-0)}
nav.rf-top .rf-in{max-width:1180px;margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;height:64px}
nav.rf-top .mark{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:22px;letter-spacing:-.01em;color:var(--ink-0);text-decoration:none}
nav.rf-top .mark i{color:var(--signal);font-style:normal}
nav.rf-top ul{display:flex;gap:30px;list-style:none;margin:0;padding:0;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
nav.rf-top ul a{color:var(--dim-0);text-decoration:none;border:0}
nav.rf-top ul a:hover,nav.rf-top ul a[aria-current]{color:var(--ink-0)}
.burst{position:fixed;width:0;height:0;z-index:100;pointer-events:none}
.burst::before,.burst::after{content:"";position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;
  border:2px solid var(--signal);box-shadow:0 0 14px rgba(68,196,255,.9),inset 0 0 8px rgba(68,196,255,.6);animation:wave .7s cubic-bezier(.15,.8,.3,1) forwards}
.burst::after{border-color:rgba(255,255,255,.85);animation-duration:.45s}
@keyframes wave{to{transform:scale(9);opacity:0;border-width:.5px}}
.burst i{position:absolute;left:0;top:-1px;width:16px;height:2px;border-radius:2px;transform-origin:0 50%;
  background:linear-gradient(90deg,#fff,var(--signal) 40%,transparent);box-shadow:0 0 8px var(--signal);transform:rotate(var(--a)) translateX(6px);animation:spark .55s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes spark{to{transform:rotate(var(--a)) translateX(58px) scaleX(.2);opacity:0}}
.leaving .page{opacity:0;transform:scale(1.04);filter:blur(4px);transition:opacity .55s ease-in,transform .6s ease-in,filter .6s ease-in}
.warping .page{opacity:0}
@media (max-width:900px){ nav.rf-top{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(7,11,18,.95)} }
@media (max-width:640px){ nav.rf-top .rf-in{padding:0 16px} nav.rf-top ul{gap:16px;font-size:11px} }
@media (prefers-reduced-motion:reduce){ .grain::before{animation:none} }
nav.rf-top li{list-style:none;margin:0!important;padding:0!important;line-height:1;display:block}
nav.rf-top li::before,nav.rf-top li::after{content:none!important;display:none!important}