/* Generated by tools/chrome-sync.mjs from css/page-motion.css, vendor/katex/katex.min.css, css/main.css, css/preferred-source.css, css/polish/header.css, css/polish/toggle.css, css/polish/body.css, css/polish/rail.css, css/polish/refs.css, css/polish/history.css, css/polish/chrome.css, css/polish/runninghead.css. Edit the sources and run `npm run chrome`; hand edits here are overwritten. */ /* ── css/page-motion.css ── */ /* Decorative timing is not homepage readiness. No JS leaves reporting usable. */ html[data-page-motion="pending"] :is(#view,body > main,.abhero){opacity:0} .home-startup-loading,.home-startup-recovery{display:none} html[data-home-startup="pending"] #view{opacity:0;pointer-events:none} html[data-home-startup="pending"] .home-startup-loading{display:block} /* Skeleton of the settled homepage: hero band, lead story, two side stories. Stylesheet classes only (strict CSP); shimmer is opacity-only and stops under reduced motion. */ .hsk{display:block;border-radius:4px;background:var(--line-2,#EEDFBC); animation:hsk-pulse 1.4s ease-in-out infinite} @keyframes hsk-pulse{0%,100%{opacity:1}50%{opacity:.55}} @media(prefers-reduced-motion:reduce){.hsk{animation:none}} .hsk-band{background:linear-gradient(90deg,#56001E 0%,#921943 100%);padding:40px 0 44px;margin-bottom:40px} .hsk-band .hsk{background:rgba(255,255,255,.22)} .hsk-h1{width:min(420px,70%);height:34px;margin-bottom:12px} .hsk-h1b{width:min(300px,52%);margin-bottom:26px} .hsk-dek{width:min(520px,88%);height:13px;margin-bottom:9px} .hsk-dekb{width:min(380px,66%);margin-bottom:0} .hsk-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:40px;padding-bottom:56px} .hsk-pic{aspect-ratio:16/10;width:100%;margin-bottom:14px;border-radius:var(--r-im,5px)} .hsk-kk{width:78px;height:11px;margin-bottom:12px} .hsk-t{width:92%;height:22px;margin-bottom:10px} .hsk-tb{width:64%;margin-bottom:16px} .hsk-l{width:100%;height:12px;margin-bottom:8px} .hsk-lb{width:72%} .hsk-side{display:grid;gap:28px;align-content:start} .hsk-sart .hsk-t{height:16px} @media(max-width:1080px){.hsk-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:32px}} @media(max-width:720px){ .hsk-band{padding:30px 0 32px;margin-bottom:28px} .hsk-h1{height:28px} .hsk-grid{grid-template-columns:1fr;gap:28px;padding-bottom:40px} .hsk-side .hsk-sart:last-child{display:none} } html[data-home-startup="pending"] #view{position:absolute;width:100%} html[data-home-startup="recovery"] .home-startup-recovery{display:block;padding-block:24px} .page-motion-cover{ position:absolute;inset:0;z-index:5;pointer-events:none; transform-origin:bottom; } /* ── vendor/katex/katex.min.css ── */ @font-face{font-display:block;font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url(../../vendor/katex/fonts/KaTeX_AMS-Regular.woff2) format("woff2"),url(../../vendor/katex/fonts/KaTeX_AMS-Regular.woff) format("woff"),url(../../vendor/katex/fonts/KaTeX_AMS-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url(../../vendor/katex/fonts/KaTeX_Caligraphic-Bold.woff2) format("woff2"),url(../../vendor/katex/fonts/KaTeX_Caligraphic-Bold.woff) format("woff"),url(../../vendor/katex/fonts/KaTeX_Caligraphic-Bold.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url(../../vendor/katex/fonts/KaTeX_Caligraphic-Regular.woff2) format("woff2"),url(../../vendor/katex/fonts/KaTeX_Caligraphic-Regular.woff) format("woff"),url(../../vendor/katex/fonts/KaTeX_Caligraphic-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url(../../vendor/katex/fonts/KaTeX_Fraktur-Bold.woff2) format("woff2"),url(../../vendor/katex/fonts/KaTeX_Fraktur-Bold.woff) format("woff"),url(../../vendor/katex/fonts/KaTeX_Fraktur-Bold.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url(../../vendor/katex/fonts/KaTeX_Fraktur-Regular.woff2) format("woff2"),url(../../vendor/katex/fonts/KaTeX_Fraktur-Regular.woff) format("woff"),url(../../vendor/katex/fonts/KaTeX_Fraktur-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:700;src:url(../../vendor/katex/fonts/KaTeX_Main-Bold.woff2) format("woff2"),url(../../vendor/katex/fonts/KaTeX_Main-Bold.woff) format("woff"),url(../../vendor/katex/fonts/KaTeX_Main-Bold.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url(../../vendor/katex/fonts/KaTeX_Main-BoldItalic.woff2) format("woff2"),url(../../vendor/katex/fonts/KaTeX_Main-BoldItalic.woff) format("woff"),url(../../vendor/katex/fonts/KaTeX_Main-BoldItalic.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url(../../vendor/katex/fonts/KaTeX_Main-Italic.woff2) format("woff2"),url(../../vendor/katex/fonts/KaTeX_Main-Italic.woff) format("woff"),url(../../vendor/katex/fonts/KaTeX_Main-Italic.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url(../../vendor/katex/fonts/KaTeX_Main-Regular.woff2) format("woff2"),url(../../vendor/katex/fonts/KaTeX_Main-Regular.woff) format("woff"),url(../../vendor/katex/fonts/KaTeX_Main-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url(../../vendor/katex/fonts/KaTeX_Math-BoldItalic.woff2) format("woff2"),url(../../vendor/katex/fonts/KaTeX_Math-BoldItalic.woff) format("woff"),url(../../vendor/katex/fonts/KaTeX_Math-BoldItalic.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(../../vendor/katex/fonts/KaTeX_Math-Italic.woff2) format("woff2"),url(../../vendor/katex/fonts/KaTeX_Math-Italic.woff) format("woff"),url(../../vendor/katex/fonts/KaTeX_Math-Italic.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:700;src:url(../../vendor/katex/fonts/KaTeX_SansSerif-Bold.woff2) format("woff2"),url(../../vendor/katex/fonts/KaTeX_SansSerif-Bold.woff) format("woff"),url(../../vendor/katex/fonts/KaTeX_SansSerif-Bold.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:italic;font-weight:400;src:url(../../vendor/katex/fonts/KaTeX_SansSerif-Italic.woff2) format("woff2"),url(../../vendor/katex/fonts/KaTeX_SansSerif-Italic.woff) format("woff"),url(../../vendor/katex/fonts/KaTeX_SansSerif-Italic.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:400;src:url(../../vendor/katex/fonts/KaTeX_SansSerif-Regular.woff2) format("woff2"),url(../../vendor/katex/fonts/KaTeX_SansSerif-Regular.woff) format("woff"),url(../../vendor/katex/fonts/KaTeX_SansSerif-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url(../../vendor/katex/fonts/KaTeX_Script-Regular.woff2) format("woff2"),url(../../vendor/katex/fonts/KaTeX_Script-Regular.woff) format("woff"),url(../../vendor/katex/fonts/KaTeX_Script-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url(../../vendor/katex/fonts/KaTeX_Size1-Regular.woff2) format("woff2"),url(../../vendor/katex/fonts/KaTeX_Size1-Regular.woff) format("woff"),url(../../vendor/katex/fonts/KaTeX_Size1-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url(../../vendor/katex/fonts/KaTeX_Size2-Regular.woff2) format("woff2"),url(../../vendor/katex/fonts/KaTeX_Size2-Regular.woff) format("woff"),url(../../vendor/katex/fonts/KaTeX_Size2-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url(../../vendor/katex/fonts/KaTeX_Size3-Regular.woff2) format("woff2"),url(../../vendor/katex/fonts/KaTeX_Size3-Regular.woff) format("woff"),url(../../vendor/katex/fonts/KaTeX_Size3-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url(../../vendor/katex/fonts/KaTeX_Size4-Regular.woff2) format("woff2"),url(../../vendor/katex/fonts/KaTeX_Size4-Regular.woff) format("woff"),url(../../vendor/katex/fonts/KaTeX_Size4-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url(../../vendor/katex/fonts/KaTeX_Typewriter-Regular.woff2) format("woff2"),url(../../vendor/katex/fonts/KaTeX_Typewriter-Regular.woff) format("woff"),url(../../vendor/katex/fonts/KaTeX_Typewriter-Regular.ttf) format("truetype")}.katex{font:normal 1.21em KaTeX_Main,Times New Roman,serif;line-height:1.2;position:relative;text-indent:0;text-rendering:auto}.katex *{-ms-high-contrast-adjust:none!important;border-color:currentColor}.katex .katex-version:after{content:"0.18.2"}.katex .katex-mathml{border:0;-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.katex .katex-html>.katex-newline{display:block}.katex .katex-base{position:relative;white-space:nowrap;width:-webkit-min-content;width:-moz-min-content;width:min-content}.katex .katex-base,.katex .katex-strut{display:inline-block}.katex .textbf{font-weight:700}.katex .textit{font-style:italic}.katex .textrm{font-family:KaTeX_Main}.katex .textsf{font-family:KaTeX_SansSerif}.katex .texttt{font-family:KaTeX_Typewriter}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.katex .mathit{font-family:KaTeX_Main;font-style:italic}.katex .mathrm{font-style:normal}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .boldsymbol{font-family:KaTeX_Math;font-style:italic;font-weight:700}.katex .amsrm,.katex .mathbb,.katex .textbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak,.katex .textfrak{font-family:KaTeX_Fraktur}.katex .mathboldfrak,.katex .textboldfrak{font-family:KaTeX_Fraktur;font-weight:700}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr,.katex .textscr{font-family:KaTeX_Script}.katex .mathsf,.katex .textsf{font-family:KaTeX_SansSerif}.katex .mathboldsf,.katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}.katex .mathitsf,.katex .mathsfit,.katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}.katex .mainrm{font-family:KaTeX_Main;font-style:normal}.katex .vlist-t{border-collapse:collapse;display:inline-table;table-layout:fixed}.katex .vlist-r{display:table-row}.katex .vlist{display:table-cell;position:relative;vertical-align:bottom}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist>span>.pstrut{overflow:hidden;width:0}.katex .vlist-t2{margin-right:-2px}.katex .vlist-s{display:table-cell;font-size:1px;min-width:2px;vertical-align:bottom;width:2px}.katex .katex-vbox{align-items:baseline;display:inline-flex;flex-direction:column}.katex .katex-thinbox{display:inline-flex;flex-direction:row;max-width:0;width:0}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .katex-hdashline,.katex .katex-hline,.katex .katex-overline .overline-line,.katex .katex-rule,.katex .katex-underline .underline-line,.katex .mfrac .frac-line{min-height:1px}.katex .mspace{display:inline-block}.katex .katex-smash{display:inline;line-height:0}.katex .clap,.katex .llap,.katex .rlap{position:relative;width:0}.katex .clap>.katex-inner,.katex .llap>.katex-inner,.katex .rlap>.katex-inner{position:absolute}.katex .clap>.katex-fix,.katex .llap>.katex-fix,.katex .rlap>.katex-fix{display:inline-block}.katex .llap>.katex-inner{right:0}.katex .clap>.katex-inner,.katex .rlap>.katex-inner{left:0}.katex .clap>.katex-inner>span{margin-left:-50%;margin-right:50%}.katex .katex-rule{border:0 solid;display:inline-block;position:relative}.katex .katex-hline,.katex .katex-overline .overline-line,.katex .katex-underline .underline-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .katex-hdashline{border-bottom-style:dashed;display:inline-block;width:100%}.katex .sqrt>.katex-root{margin-left:.2777777778em;margin-right:-.5555555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .katex-sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .katex-sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .katex-sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .katex-sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .katex-sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .katex-sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .katex-sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .katex-sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .katex-sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .katex-sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .katex-sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .katex-sizing.reset-size2.size1{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .katex-sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .katex-sizing.reset-size2.size3{font-size:1.1666666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .katex-sizing.reset-size2.size4{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .katex-sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .katex-sizing.reset-size2.size6{font-size:1.6666666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .katex-sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .katex-sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .katex-sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .katex-sizing.reset-size2.size10{font-size:3.4566666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .katex-sizing.reset-size2.size11{font-size:4.1466666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .katex-sizing.reset-size3.size1{font-size:.7142857143em}.katex .fontsize-ensurer.reset-size3.size2,.katex .katex-sizing.reset-size3.size2{font-size:.8571428571em}.katex .fontsize-ensurer.reset-size3.size3,.katex .katex-sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .katex-sizing.reset-size3.size4{font-size:1.1428571429em}.katex .fontsize-ensurer.reset-size3.size5,.katex .katex-sizing.reset-size3.size5{font-size:1.2857142857em}.katex .fontsize-ensurer.reset-size3.size6,.katex .katex-sizing.reset-size3.size6{font-size:1.4285714286em}.katex .fontsize-ensurer.reset-size3.size7,.katex .katex-sizing.reset-size3.size7{font-size:1.7142857143em}.katex .fontsize-ensurer.reset-size3.size8,.katex .katex-sizing.reset-size3.size8{font-size:2.0571428571em}.katex .fontsize-ensurer.reset-size3.size9,.katex .katex-sizing.reset-size3.size9{font-size:2.4685714286em}.katex .fontsize-ensurer.reset-size3.size10,.katex .katex-sizing.reset-size3.size10{font-size:2.9628571429em}.katex .fontsize-ensurer.reset-size3.size11,.katex .katex-sizing.reset-size3.size11{font-size:3.5542857143em}.katex .fontsize-ensurer.reset-size4.size1,.katex .katex-sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .katex-sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .katex-sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .katex-sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .katex-sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .katex-sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .katex-sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .katex-sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .katex-sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .katex-sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .katex-sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .katex-sizing.reset-size5.size1{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .katex-sizing.reset-size5.size2{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .katex-sizing.reset-size5.size3{font-size:.7777777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .katex-sizing.reset-size5.size4{font-size:.8888888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .katex-sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .katex-sizing.reset-size5.size6{font-size:1.1111111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .katex-sizing.reset-size5.size7{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .katex-sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .katex-sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .katex-sizing.reset-size5.size10{font-size:2.3044444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .katex-sizing.reset-size5.size11{font-size:2.7644444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .katex-sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .katex-sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .katex-sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .katex-sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .katex-sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .katex-sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .katex-sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .katex-sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .katex-sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .katex-sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .katex-sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .katex-sizing.reset-size7.size1{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .katex-sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .katex-sizing.reset-size7.size3{font-size:.5833333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .katex-sizing.reset-size7.size4{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .katex-sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .katex-sizing.reset-size7.size6{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .katex-sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .katex-sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .katex-sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .katex-sizing.reset-size7.size10{font-size:1.7283333333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .katex-sizing.reset-size7.size11{font-size:2.0733333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .katex-sizing.reset-size8.size1{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .katex-sizing.reset-size8.size2{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .katex-sizing.reset-size8.size3{font-size:.4861111111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .katex-sizing.reset-size8.size4{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .katex-sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .katex-sizing.reset-size8.size6{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .katex-sizing.reset-size8.size7{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .katex-sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .katex-sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .katex-sizing.reset-size8.size10{font-size:1.4402777778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .katex-sizing.reset-size8.size11{font-size:1.7277777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .katex-sizing.reset-size9.size1{font-size:.2893518519em}.katex .fontsize-ensurer.reset-size9.size2,.katex .katex-sizing.reset-size9.size2{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .katex-sizing.reset-size9.size3{font-size:.4050925926em}.katex .fontsize-ensurer.reset-size9.size4,.katex .katex-sizing.reset-size9.size4{font-size:.462962963em}.katex .fontsize-ensurer.reset-size9.size5,.katex .katex-sizing.reset-size9.size5{font-size:.5208333333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .katex-sizing.reset-size9.size6{font-size:.5787037037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .katex-sizing.reset-size9.size7{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .katex-sizing.reset-size9.size8{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .katex-sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .katex-sizing.reset-size9.size10{font-size:1.2002314815em}.katex .fontsize-ensurer.reset-size9.size11,.katex .katex-sizing.reset-size9.size11{font-size:1.4398148148em}.katex .fontsize-ensurer.reset-size10.size1,.katex .katex-sizing.reset-size10.size1{font-size:.2410800386em}.katex .fontsize-ensurer.reset-size10.size2,.katex .katex-sizing.reset-size10.size2{font-size:.2892960463em}.katex .fontsize-ensurer.reset-size10.size3,.katex .katex-sizing.reset-size10.size3{font-size:.337512054em}.katex .fontsize-ensurer.reset-size10.size4,.katex .katex-sizing.reset-size10.size4{font-size:.3857280617em}.katex .fontsize-ensurer.reset-size10.size5,.katex .katex-sizing.reset-size10.size5{font-size:.4339440694em}.katex .fontsize-ensurer.reset-size10.size6,.katex .katex-sizing.reset-size10.size6{font-size:.4821600771em}.katex .fontsize-ensurer.reset-size10.size7,.katex .katex-sizing.reset-size10.size7{font-size:.5785920926em}.katex .fontsize-ensurer.reset-size10.size8,.katex .katex-sizing.reset-size10.size8{font-size:.6943105111em}.katex .fontsize-ensurer.reset-size10.size9,.katex .katex-sizing.reset-size10.size9{font-size:.8331726133em}.katex .fontsize-ensurer.reset-size10.size10,.katex .katex-sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .katex-sizing.reset-size10.size11{font-size:1.1996142719em}.katex .fontsize-ensurer.reset-size11.size1,.katex .katex-sizing.reset-size11.size1{font-size:.2009646302em}.katex .fontsize-ensurer.reset-size11.size2,.katex .katex-sizing.reset-size11.size2{font-size:.2411575563em}.katex .fontsize-ensurer.reset-size11.size3,.katex .katex-sizing.reset-size11.size3{font-size:.2813504823em}.katex .fontsize-ensurer.reset-size11.size4,.katex .katex-sizing.reset-size11.size4{font-size:.3215434084em}.katex .fontsize-ensurer.reset-size11.size5,.katex .katex-sizing.reset-size11.size5{font-size:.3617363344em}.katex .fontsize-ensurer.reset-size11.size6,.katex .katex-sizing.reset-size11.size6{font-size:.4019292605em}.katex .fontsize-ensurer.reset-size11.size7,.katex .katex-sizing.reset-size11.size7{font-size:.4823151125em}.katex .fontsize-ensurer.reset-size11.size8,.katex .katex-sizing.reset-size11.size8{font-size:.578778135em}.katex .fontsize-ensurer.reset-size11.size9,.katex .katex-sizing.reset-size11.size9{font-size:.6945337621em}.katex .fontsize-ensurer.reset-size11.size10,.katex .katex-sizing.reset-size11.size10{font-size:.8336012862em}.katex .fontsize-ensurer.reset-size11.size11,.katex .katex-sizing.reset-size11.size11{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .delimcenter,.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .katex-accent>.vlist-t,.katex .op-limits>.vlist-t{text-align:center}.katex .katex-accent .accent-body{position:relative}.katex .katex-accent .accent-body:not(.accent-full){width:0}.katex .katex-overlay{display:block}.katex .mtable .vertical-separator{display:inline-block;min-width:1px}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist-t{text-align:center}.katex .mtable .col-align-l>.vlist-t{text-align:left}.katex .mtable .col-align-r>.vlist-t{text-align:right}.katex .svg-align{text-align:left}.katex svg{fill:currentColor;stroke:currentColor;display:block;height:inherit;position:absolute;width:100%}.katex svg path{stroke:none}.katex svg{fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1}.katex img{border-style:none;max-height:none;max-width:none;min-height:0;min-width:0}.katex .katex-stretchy{display:block;overflow:hidden;position:relative;width:100%}.katex .katex-stretchy:after,.katex .katex-stretchy:before{content:""}.katex .hide-tail{overflow:hidden;position:relative;width:100%}.katex .halfarrow-left{left:0;overflow:hidden;position:absolute;width:50.2%}.katex .halfarrow-right{overflow:hidden;position:absolute;right:0;width:50.2%}.katex .brace-left{left:0;overflow:hidden;position:absolute;width:25.1%}.katex .brace-center{left:25%;overflow:hidden;position:absolute;width:50%}.katex .brace-right{overflow:hidden;position:absolute;right:0;width:25.1%}.katex .x-arrow-pad{padding:0 .5em}.katex .cd-arrow-pad{padding:0 .55556em 0 .27778em}.katex .mover,.katex .munder,.katex .x-arrow{text-align:center}.katex .boxpad{padding:0 .3em}.katex .fbox,.katex .fcolorbox{border:.04em solid;box-sizing:border-box}.katex .cancel-pad{padding:0 .2em}.katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}.katex .katex-sout{border-bottom-style:solid;border-bottom-width:.08em}.katex .angl{border-right:.049em solid;border-top:.049em solid;box-sizing:border-box;margin-right:.03889em}.katex .anglpad{padding:0 .03889em}.katex .eqn-num:before{content:"(" counter(katexEqnNo) ")";counter-increment:katexEqnNo}.katex .mml-eqn-num:before{content:"(" counter(mmlEqnNo) ")";counter-increment:mmlEqnNo}.katex .mtr-glue{width:50%}.katex .cd-vert-arrow{display:inline-block;position:relative}.katex .cd-label-left{display:inline-block;position:absolute;right:calc(50% + .3em);text-align:left}.katex .cd-label-right{display:inline-block;left:calc(50% + .3em);position:absolute;text-align:right}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:block;text-align:center;white-space:nowrap}.katex-display>.katex>.katex-html{display:block;position:relative}.katex-display>.katex>.katex-html>.katex-tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.katex-tag{left:0;right:auto}.katex-display.fleqn>.katex{padding-left:2em;text-align:left}body{counter-reset:katexEqnNo mmlEqnNo} /* ── css/main.css ── */ /* ============================================================================ PRIMARY — V100 A design system for a product whose subject is confidence. Principles 1. One voice. Every size, space, colour and duration comes from a scale. 2. Tier is form. Confidence is carried by shape and weight, not decoration. 3. Motion informs. Nothing moves that is not reporting a state change. 4. Quiet by default. The record is dense; the interface must not be. ========================================================================== */ /* ---------------------------------------------------------------- tokens --*/ :root{ color-scheme:light; /* -- type scale ------------------------------------------------------- */ --fs-3xs:10.5px; /* eyebrows, all-caps keys */ --fs-2xs:11.5px; /* micro-meta, counters */ --fs-xs:12.5px; /* captions, source lines */ --fs-sm:13.5px; /* secondary body, UI labels */ --fs-base:15px; /* interface body */ --fs-md:16.5px; /* deks, lead-ins */ --fs-lg:18px; /* article body */ --fs-xl:21px; --fs-2xl:26px; --fs-3xl:31px; --fs-4xl:38px; /* the one fluid step: the lead headline, which has the most room to give */ --fs-lead:clamp(28px,1.6rem + 1.6vw,44px); --lh-tight:1.14; --lh-head:1.24; --lh-snug:1.38; --lh-body:1.55; --lh-read:1.7; --tr-tight:-.024em; --tr-head:-.014em; --tr-snug:-.006em; --tr-caps:.085em; /* -- spacing (4px base) ----------------------------------------------- */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:28px; --s8:32px; --s10:40px; --s12:48px; --s14:56px; --s16:64px; --s20:80px; --s24:96px; /* -- surface + ink ---------------------------------------------------- */ --page:#FFF7E9; --app:#FFF7E9; --sunk:#F7E6C1; --card:#FFF8E6; --raised:#FFF8E6; --ink:#131011; --ink-2:#645E60; --ink-3:#98918F; --ink-4:#B6AFAC; --line:#E5D2A9; --line-2:#EEDFBC; --line-3:#F6EBD2; /* -- brand ------------------------------------------------------------ */ --accent:#AE2448; --accent-ink:#8E1638; /* accessible on light surfaces */ --accent-soft:#FBF1F4; --accent-line:rgba(174,36,72,.24); --deep:#4E041E; --on-accent:#FFFFFF; /* -- the tier ladder -------------------------------------------------- Four rungs. Each carries three tokens so no tint is ever hand-mixed: --tN the mark (glyph, dot, rule) --tN-ink the label (text on a light ground, >=4.5:1) --tN-bg the ground (tinted surface) --tN-ln the edge (border on that ground) */ --t1:#A8A29E; --t1-ink:#6E6763; --t1-bg:rgba(168,162,158,.13); --t1-ln:rgba(168,162,158,.34); --t2:#C08221; --t2-ink:#8A5B12; --t2-bg:rgba(204,139,42,.13); --t2-ln:rgba(204,139,42,.34); --t3:#3E7BA6; --t3-ink:#2E5F82; --t3-bg:rgba(62,123,166,.11); --t3-ln:rgba(62,123,166,.30); --t4:#2E7D5B; --t4-ink:#236046; --t4-bg:rgba(46,125,91,.11); --t4-ln:rgba(46,125,91,.30); /* -- radius ------------------------------------------------------------ */ --r-xs:5px; --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:22px; --r-2xl:26px; --r-full:999px; --r-im:5px; /* image corners: near-square */ /* -- elevation --------------------------------------------------------- Two-part shadows throughout: a 1px contact edge plus a wide, soft cast. Ambient light comes from above, so every cast is offset down. */ --sh-1:0 1px 2px rgba(19,16,17,.04); --sh-2:0 1px 2px rgba(19,16,17,.04), 0 10px 28px -16px rgba(19,16,17,.12); --sh-3:0 1px 2px rgba(19,16,17,.05), 0 14px 32px -14px rgba(19,16,17,.20); --sh-4:0 2px 6px rgba(19,16,17,.05), 0 18px 42px -16px rgba(19,16,17,.30); --sh-5:0 2px 8px rgba(19,16,17,.06), 0 30px 70px -24px rgba(19,16,17,.45); --sh:var(--sh-2); /* legacy alias */ --sh-lift:var(--sh-4); /* was used, never defined */ /* -- motion ------------------------------------------------------------- Durations scale with the distance a thing travels. Easings are named for what they do, not for their curve. */ --d-1:120ms; --d-2:180ms; --d-3:240ms; --d-4:320ms; --d-5:440ms; --d-6:620ms; --e-out:cubic-bezier(.22,.61,.36,1); /* enters, reveals */ --e-in:cubic-bezier(.55,.06,.68,.19); /* exits */ --e-inout:cubic-bezier(.65,0,.35,1); /* moves between two states */ --e-glide:cubic-bezier(.32,.72,0,1); /* sheets, drawers, headers */ /* a real spring, sampled — overshoots ~4% then settles. Used for anything that should feel picked up rather than faded in. */ --e-spring:linear( 0,.0055 1.2%,.0217 2.5%,.0873 5.1%,.1962 7.9%,.3372 10.9%,.6449 16.5%, .8004 19.4%,.9255 22.3%,1.0217 25.4%,1.0629 27.4%,1.0866 29.5%, 1.0938 31.7%,1.0862 34.3%,1.0669 37.2%,1.0201 43.5%,1.0021 47.1%, .9941 51.2%,.9968 58.6%,1.0011 71.5%,1 ); /* The "Fallback" families are the metric-matched local fonts in font-fallbacks.css (generated): while a web font is still loading, text is set in Arial/Georgia/… at the web font's measurements, so the swap moves nothing. */ --sans:"DM Sans","DM Sans Fallback: Arial","DM Sans Fallback: Segoe UI","DM Sans Fallback: Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --disp:"Sentient","Sentient Fallback: Georgia","Sentient Fallback: Times New Roman","Sentient Fallback: Noto Serif","Iowan Old Style",Georgia,serif; /* -- focus -------------------------------------------------------------- */ --focus:0 0 0 2px var(--app), 0 0 0 4.5px var(--accent); --focus-tight:0 0 0 2.5px var(--accent); --measure:74ch; } /* ------------------------------------------------------------ dark mode -- A reading product earns a night surface. The warm base is kept — this is a dimmed paper, not an OLED void — and every tier is lifted to hold contrast against it. */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark; --page:#131110; --app:#16130F; --sunk:#1D1914; --card:#1B1712; --raised:#221D17; --ink:#F4F0E8; --ink-2:#ABA49B; --ink-3:#7C756D; --ink-4:#5E5850; --line:#302A23; --line-2:#26211B; --line-3:#1F1A15; --accent:#E9587C; --accent-ink:#F2839E; --accent-soft:rgba(233,88,124,.13); --accent-line:rgba(233,88,124,.30); --deep:#2E0512; --on-accent:#1A0208; --t1:#9C958F; --t1-ink:#ADA69F; --t1-bg:rgba(156,149,143,.14); --t1-ln:rgba(156,149,143,.30); --t2:#D99B3E; --t2-ink:#E3B067; --t2-bg:rgba(217,155,62,.14); --t2-ln:rgba(217,155,62,.30); --t3:#63A2CC; --t3-ink:#85B8DA; --t3-bg:rgba(99,162,204,.13); --t3-ln:rgba(99,162,204,.28); --t4:#4CA57B; --t4-ink:#6FBB96; --t4-bg:rgba(76,165,123,.13); --t4-ln:rgba(76,165,123,.28); --sh-1:0 1px 2px rgba(0,0,0,.34); --sh-2:0 1px 2px rgba(0,0,0,.34), 0 10px 28px -16px rgba(0,0,0,.7); --sh-3:0 1px 3px rgba(0,0,0,.4), 0 14px 32px -14px rgba(0,0,0,.75); --sh-4:0 2px 8px rgba(0,0,0,.45), 0 18px 42px -16px rgba(0,0,0,.8); --sh-5:0 4px 12px rgba(0,0,0,.5), 0 30px 70px -24px rgba(0,0,0,.9); --focus:0 0 0 2px var(--app), 0 0 0 4.5px var(--accent); } } :root[data-theme="dark"]{ color-scheme:dark; --page:#131110; --app:#16130F; --sunk:#1D1914; --card:#1B1712; --raised:#221D17; --ink:#F4F0E8; --ink-2:#ABA49B; --ink-3:#7C756D; --ink-4:#5E5850; --line:#302A23; --line-2:#26211B; --line-3:#1F1A15; --accent:#E9587C; --accent-ink:#F2839E; --accent-soft:rgba(233,88,124,.13); --accent-line:rgba(233,88,124,.30); --deep:#2E0512; --on-accent:#1A0208; --t1:#9C958F; --t1-ink:#ADA69F; --t1-bg:rgba(156,149,143,.14); --t1-ln:rgba(156,149,143,.30); --t2:#D99B3E; --t2-ink:#E3B067; --t2-bg:rgba(217,155,62,.14); --t2-ln:rgba(217,155,62,.30); --t3:#63A2CC; --t3-ink:#85B8DA; --t3-bg:rgba(99,162,204,.13); --t3-ln:rgba(99,162,204,.28); --t4:#4CA57B; --t4-ink:#6FBB96; --t4-bg:rgba(76,165,123,.13); --t4-ln:rgba(76,165,123,.28); --sh-1:0 1px 2px rgba(0,0,0,.34); --sh-2:0 1px 2px rgba(0,0,0,.34), 0 10px 28px -16px rgba(0,0,0,.7); --sh-3:0 1px 3px rgba(0,0,0,.4), 0 14px 32px -14px rgba(0,0,0,.75); --sh-4:0 2px 8px rgba(0,0,0,.45), 0 18px 42px -16px rgba(0,0,0,.8); --sh-5:0 4px 12px rgba(0,0,0,.5), 0 30px 70px -24px rgba(0,0,0,.9); } /* --------------------------------------------------------------- reset ---*/ *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ background:var(--app);color:var(--ink); font-family:var(--sans);font-size:var(--fs-base);line-height:var(--lh-body); min-height:100vh;min-height:100dvh; display:flex;flex-direction:column; font-optical-sizing:auto; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; font-synthesis-weight:none; text-rendering:optimizeLegibility; transition:background-color var(--d-4) var(--e-inout),color var(--d-4) var(--e-inout); } button{font-family:inherit;color:inherit} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} ::selection{background:var(--accent);color:var(--on-accent)} /* Headlines set in the display face get optical treatment everywhere: balanced ragging, hanging punctuation, and true small tracking at large sizes. */ h1,h2,h3,.stmt,.cq2,.tcrow .q,.nbh,.hq,.tcard .tq,.rail .rt .a{ text-wrap:balance; -webkit-hyphens:none;hyphens:none; } p,.dek,.nbd,.sub{text-wrap:pretty} .dek,.sub,.because{hanging-punctuation:first last} /* Numerals in any statistical context are tabular so columns never jitter. */ .amst,.pc,.mbig .n,.tcrow .s,.hs,.tn{ font-variant-numeric:tabular-nums; } /* ------------------------------------------------------------- a11y ------*/ /* Nothing in the product relied on a focus ring before V100. Every interactive surface now carries one, shaped to the control it sits on. */ :where(a,button,input,[tabindex]):focus{outline:none} :where(a,button,input,[tabindex]):focus-visible{ outline:none;box-shadow:var(--focus);border-radius:var(--r-xs); position:relative;z-index:3; } .btn:focus-visible,.srclink:focus-visible,.viewall:focus-visible,.sug:focus-visible,.ft-circle:focus-visible{ border-radius:var(--r-full); } .clcard:focus-visible,.card:focus-visible,.nbcard:focus-visible,.nbfeat:focus-visible, .tcard:focus-visible,.opt:focus-visible,.cta:focus-visible{border-radius:var(--r-lg)} .cl:focus-visible{border-radius:3px;box-shadow:var(--focus-tight)} .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--app); padding:var(--s3) var(--s5);border-radius:0 0 var(--r) 0;font-size:var(--fs-sm);font-weight:700} .skip:focus{left:0} .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} /* --------------------------------------------------------- layout ------- */ .wrap{max-width:1240px;margin:0 auto;padding:0 var(--s5)} .narrow{max-width:720px} /* Motion primitives retained for interactive sheets and panels. Page openings and scroll reveals are owned by page-motion.js. */ @keyframes fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}} @keyframes riseIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} @keyframes popIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}} /* Pressable: every control that can be tapped acknowledges the tap. The scale is deliberately small — this is a newspaper, not a toy. */ .press{transition:transform var(--d-1) var(--e-out)} .press:active{transform:scale(.975)} /* ------------------------------------------------- reduced motion -------- One global switch. Anything that moves is reduced to an opacity change or removed; nothing that carries meaning is lost. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important; } .press:active{transform:none} } /* ------------------------------------------ Insights inline status ------- A reserved reading space on first load; a small notice when cards remain. Scoped here so the hero, shared chrome and card layouts stay untouched. */ .insstatus{ display:flex;flex-direction:column;align-items:center;justify-content:center; gap:var(--s4);min-height:320px;min-height:clamp(280px,38vh,420px); width:100%;padding:var(--s12) var(--s5); color:var(--ink-2);text-align:center; font-family:var(--sans);font-size:var(--fs-sm);line-height:var(--lh-body); } .insstatus .insloadmark{ display:block;flex:0 0 auto;width:36px;height:36px; max-width:100%;color:var(--accent); animation:insStatusOpacity 2.4s var(--e-inout) infinite; } .insstatus .insloadmark svg{display:block;width:100%;height:100%} .insstatus .insloadmark path{fill:var(--accent)} .insstatus .insstatuscopy{ min-width:0;max-width:42ch;margin:0;overflow-wrap:anywhere; } .insstatus .insstatuscopy > :first-child{margin-top:0} .insstatus .insstatuscopy > :last-child{margin-bottom:0} .insstatus button.insretry{ appearance:none;display:inline-flex;align-items:center;justify-content:center; min-height:44px;max-width:100%;padding:var(--s2) var(--s5); border:1px solid var(--line);border-radius:var(--r-xs); background:transparent;color:var(--accent-ink); font-family:var(--sans);font-size:var(--fs-sm);font-weight:600; line-height:var(--lh-snug);text-align:center;white-space:normal; overflow-wrap:anywhere;cursor:pointer; transition:opacity var(--d-2) var(--e-out); } .insstatus button.insretry:hover:not(:disabled){ background:var(--sunk);border-color:var(--accent-line); } .insstatus button.insretry:active:not(:disabled){opacity:.8} .insstatus button.insretry:focus-visible{ outline:2px solid var(--accent);outline-offset:3px; box-shadow:var(--focus);border-radius:var(--r-xs); } .insstatus button.insretry:disabled{opacity:.55;cursor:default} .insstatus.insstatus--retained{ flex-direction:row;flex-wrap:wrap;justify-content:flex-start; gap:var(--s3);min-height:0; padding:var(--s3) 0;margin-bottom:var(--s5); border-bottom:1px solid var(--line-2);text-align:left; font-size:var(--fs-xs); } .insstatus--retained .insloadmark{width:20px;height:20px} .insstatus--retained .insstatuscopy{flex:1 1 220px;max-width:none} .insstatus--retained button.insretry{ flex:0 0 auto;font-size:var(--fs-xs);padding-inline:var(--s3); } @keyframes insStatusOpacity{ 0%,100%{opacity:.9} 50%{opacity:.45} } @media (max-width:480px){ .insstatus{padding:var(--s10) var(--s4);min-height:280px} .insstatus.insstatus--retained{padding:var(--s3) 0;min-height:0} .insstatus--retained .insstatuscopy{flex-basis:calc(100% - 32px)} .insstatus--retained button.insretry{margin-left:var(--s8)} } @media (prefers-reduced-motion:reduce){ .insstatus .insloadmark{animation:none;opacity:1} .insstatus button.insretry{transition:none} } /* ============================ CHROME + OVERLAYS ========================== */ /* ------------------------------------------- demo harness (not shipped) --*/ /* The harness is not part of the product, so it does not follow the product's theme — it stays dark in both. Using --ink/--app here inverted it under dark mode and rendered the active pills white-on-white. */ .demo{background:#131011;color:#F4F0E8;font-size:var(--fs-xs); border-bottom:1px solid rgba(255,255,255,.08)} .demo .wrap{display:flex;align-items:center;gap:var(--s2);height:46px; flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none} .demo .wrap::-webkit-scrollbar{display:none} .demo .lb{color:rgba(255,255,255,.42);font-weight:700;letter-spacing:.06em; text-transform:uppercase;font-size:var(--fs-3xs);flex:0 0 auto} .demo button{background:rgba(255,255,255,.09);border:0;color:rgba(255,255,255,.7); font-size:var(--fs-xs);font-weight:500;padding:6px var(--s3);border-radius:var(--r-full); cursor:pointer;white-space:nowrap;flex:0 0 auto; transition:background var(--d-2) var(--e-out),color var(--d-2) var(--e-out)} .demo button:hover{background:rgba(255,255,255,.16);color:#fff} .demo button.on{background:#fff;color:var(--ink);font-weight:700} .demo .ev{margin-left:auto;flex:0 0 auto} .demo .vsep{width:1px;height:18px;background:rgba(255,255,255,.16);flex:0 0 auto;margin:0 var(--s1)} /* ------------------------------------------------------------- header ----*/ .hd{position:sticky;top:0;z-index:22; border-top:3px solid var(--accent);border-bottom:1px solid var(--line-2); background:color-mix(in srgb,var(--app) 88%,transparent); backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%); transition:transform var(--d-4) var(--e-glide),box-shadow var(--d-3) var(--e-out)} .hd.away{transform:translateY(calc(-100% - 3px))} /* travels its own height plus the header's, so it clears the viewport */ .catrow.away{transform:translateY(calc(-100% - var(--hd-h)))} /* the bars are separated by a rule, not a cast shadow */ .hd.stuck{box-shadow:none;border-bottom-color:var(--line)} @media (prefers-reduced-transparency:reduce){ .hd{background:var(--app);backdrop-filter:none;-webkit-backdrop-filter:none} } .hd .wrap{display:flex;align-items:center;justify-content:space-between;height:62px} .hd .logo{display:flex;align-items:center;border-radius:var(--r-xs)} .hd .logo svg{display:block;height:21px;width:auto} .hd .logo path:first-of-type,.hd .logo path:nth-of-type(2){transition:opacity var(--d-2) var(--e-out)} .hd .logo:hover path:first-of-type,.hd .logo:hover path:nth-of-type(2){opacity:.78} /* the wordmark is ink-coloured, so it has to invert with the theme */ :root[data-theme="dark"] .hd .logo path:not(:nth-of-type(-n+2)), :root[data-theme="dark"] .flogo path:not(:nth-of-type(-n+2)){fill:var(--ink)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .hd .logo path:not(:nth-of-type(-n+2)), :root:not([data-theme="light"]) .flogo path:not(:nth-of-type(-n+2)){fill:var(--ink)} } .hd .desktopnav{display:flex;align-items:center;gap:2px} .hd .desktopnav a{position:relative;display:flex;align-items:center;height:62px;padding:0 var(--s4); font-size:14px;font-weight:500;color:var(--ink-3); transition:color var(--d-2) var(--e-out)} .hd .desktopnav a:hover{color:var(--ink)} .hd .desktopnav a.on{color:var(--ink);font-weight:700} .hd .desktopnav a.on::after{content:"";position:absolute;left:var(--s4);right:var(--s4);bottom:-1px; height:2px;background:var(--ink);border-radius:2px 2px 0 0; animation:navIn var(--d-3) var(--e-out) both} @keyframes navIn{from{transform:scaleX(.3);opacity:0}to{transform:none;opacity:1}} .menubtn,.mobilemenu{display:none} /* an unread mark that draws the eye once, then stops */ @keyframes ping{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(2.6);opacity:0}} /* theme switch — a single control, two states, no menu */ .themebtn{width:34px;height:34px;border-radius:var(--r-full);background:transparent;border:0; display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-2);padding:0; transition:background var(--d-2) var(--e-out),color var(--d-2) var(--e-out)} .themebtn:hover{background:var(--sunk);color:var(--ink)} .themebtn svg{display:block;transition:transform var(--d-5) var(--e-spring)} .themebtn:active svg{transform:rotate(38deg) scale(.9)} .themebtn .moon{display:none} :root[data-theme="dark"] .themebtn .sun{display:none} :root[data-theme="dark"] .themebtn .moon{display:block} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .themebtn .sun{display:none} :root:not([data-theme="light"]) .themebtn .moon{display:block} } /* reading progress — only ever shown on a story, where length is unknown */ .hprog{position:absolute;left:0;bottom:-1px;height:2px;background:var(--accent); width:0;transform-origin:left;z-index:2;opacity:0; transition:opacity var(--d-2) var(--e-out)} body.reading .hprog{opacity:1} /* ------------------------------------------------------- category bar ----*/ .catrow{border-bottom:1px solid var(--line-2);background:var(--app);position:relative} .catrow.hide{display:none} .catrow .wrap{display:flex;align-items:stretch;gap:0;overflow-x:auto;scrollbar-width:none; position:relative;scroll-behavior:smooth} .catrow .wrap::-webkit-scrollbar{display:none} .catrow a{position:relative;display:flex;align-items:center;height:46px;padding:0 var(--s4); font-size:13px;font-weight:500;color:var(--ink-3);white-space:nowrap;flex:0 0 auto; transition:color var(--d-2) var(--e-out)} .catrow a:first-child{padding-left:0} .catrow a:hover{color:var(--ink)} .catrow a.on{color:var(--ink);font-weight:700} /* one indicator for the whole bar, moved by JS — it slides between tabs instead of each tab drawing and discarding its own rule */ .catink{position:absolute;left:0;bottom:0;height:2px;background:var(--accent);border-radius:2px 2px 0 0; transition:transform var(--d-4) var(--e-glide),width var(--d-4) var(--e-glide); pointer-events:none;will-change:transform,width} .catink.idle{transition:none} /* --------------------------------------------------------------- scrim ---*/ .scrim{position:fixed;inset:0;background:rgba(12,10,11,.5);opacity:0;pointer-events:none; transition:opacity var(--d-4) var(--e-out);z-index:40; backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)} .scrim.on{opacity:1;pointer-events:auto} body.locked{position:fixed;left:0;right:0;width:100%;overflow:hidden} /* --------------------------------------------------------------- sheet --- Phone: a bottom sheet that springs up from the edge it was summoned from. Desktop: a centred modal that scales in from 98.5%. */ .sheet{position:fixed;left:50%;bottom:0;width:min(560px,100%); transform:translate(-50%,calc(100% + 40px)); background:var(--card);border-radius:var(--r-2xl) var(--r-2xl) 0 0;z-index:41; max-height:92vh;display:flex;flex-direction:column; visibility:hidden;pointer-events:none; transition:transform var(--d-5) var(--e-glide),visibility 0s var(--d-5); box-shadow:0 -18px 44px -18px rgba(19,16,17,.34)} .sheet.on{transform:translate(-50%,0);visibility:visible;pointer-events:auto; transition:transform var(--d-5) var(--e-glide)} .grab{width:40px;height:4px;border-radius:2px;background:var(--line);margin:var(--s3) auto 0; flex:0 0 auto;transition:background var(--d-2) var(--e-out)} .sheet:active .grab{background:var(--ink-4)} .sheetx{display:none;position:absolute;top:14px;right:16px;z-index:2;width:32px;height:32px; border-radius:var(--r-full);background:var(--sunk);border:0;cursor:pointer;color:var(--ink-2); font-size:18px;line-height:1;padding:0; transition:background var(--d-2) var(--e-out),color var(--d-2) var(--e-out),transform var(--d-1) var(--e-out)} .sheetx:hover{background:var(--line-2);color:var(--ink)} .sheetx:active{transform:scale(.9)} #sheetin{display:flex;flex-direction:column;flex:1 1 auto;min-height:0} #sheetin > *{flex:1 1 auto;min-height:0} .sheet .in{padding:var(--s4) var(--s6) var(--s7);overflow-y:auto;overscroll-behavior:contain; min-height:0;scrollbar-width:none} .sheet .in::-webkit-scrollbar{display:none} .sheet h2{font-family:var(--disp);font-size:23px;line-height:var(--lh-head);font-weight:300; margin:0 0 var(--s2);letter-spacing:var(--tr-head)} .sheet .sub{font-size:var(--fs-sm);color:var(--ink-2);line-height:var(--lh-body);margin:0 0 var(--s5)} .sheet .quote{font-family:var(--disp);font-weight:300;font-size:19px;line-height:1.42; margin:0 0 var(--s3);letter-spacing:var(--tr-snug)} /* sheet content arrives a beat after the surface, so the two reads as one move */ .sheet.on #sheetin > *{animation:fade var(--d-4) var(--e-out) 90ms both} @media (min-width:721px){ .sheet{top:50%;bottom:auto;border-radius:var(--r-xl); width:min(580px,calc(100vw - 56px));max-height:86vh; opacity:0;transform:translate(-50%,-48%) scale(.985); transition:transform var(--d-4) var(--e-glide),opacity var(--d-3) var(--e-out),visibility 0s var(--d-4); box-shadow:var(--sh-5)} .sheet.on{opacity:1;transform:translate(-50%,-50%) scale(1); transition:transform var(--d-4) var(--e-spring),opacity var(--d-2) var(--e-out)} .grab{display:none} .sheetx{display:flex;align-items:center;justify-content:center} .sheet .in{padding:var(--s7) var(--s7)} .sheet h2,.sheet .quote{padding-right:46px} } /* --------------------------------------------------------- share menu ----*/ .sharewrap{position:relative} .sharemenu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;background:var(--card); border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-4);padding:var(--s2); min-width:212px;display:none;transform-origin:top right} .sharemenu.on{display:block;animation:popIn var(--d-3) var(--e-spring) both} .sharemenu button{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left; background:transparent;border:0;padding:var(--s3);border-radius:var(--r-sm); font-size:var(--fs-sm);color:var(--ink);cursor:pointer; transition:background var(--d-1) var(--e-out)} .sharemenu button:hover{background:var(--sunk)} .sharemenu button .si{color:var(--ink-3);display:flex;flex:0 0 auto} /* Saved stories: native forms, dressed like the adjacent share controls. */ @media(scripting:none){.sharemenu{display:block;position:static}} .saved-page{padding-top:var(--s8);padding-bottom:var(--s8)} .saved-page>p{margin:var(--s4) 0 var(--s8)} .saved-page .grid{grid-template-columns:repeat(3,minmax(0,1fr))} .saved-page .im{aspect-ratio:16/10} .saved-page .im img{width:100%;height:100%;object-fit:cover} .saved-page .dstamp{display:block;margin:var(--s3) 0} @media(max-width:700px){.saved-page .grid{grid-template-columns:1fr}} [data-save-form]{display:inline-flex;flex-wrap:wrap;align-items:center;margin:0} .sharemenu [data-save-form]{display:flex;width:100%} .sharemenu [data-save-form] button{justify-content:flex-start;min-height:40px} [data-save-form] button{ display:inline-flex;align-items:center;justify-content:center;gap:var(--s2); min-height:44px;padding:var(--s3);border:0;border-radius:var(--r-sm); background:transparent;color:var(--ink);font-family:var(--sans); font-size:var(--fs-sm);line-height:var(--lh-snug);cursor:pointer; } [data-save-form] button:hover{background:var(--sunk)} [data-save-form] button svg{display:block;width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor} [data-save-form] button[aria-pressed="true"]{color:#AE2448} [data-save-form] button[aria-pressed="true"] svg{fill:currentColor} [data-save-form] button:disabled{opacity:.55;cursor:wait} [data-save-form][data-long-label] button{ padding-inline:0;color:var(--ink-2);background:transparent; } [data-save-form][data-long-label] button:hover{color:#AE2448} [data-save-form][data-long-label] button[aria-pressed="true"]{color:#AE2448} [data-save-form] [data-save-error]{flex-basis:100%;max-width:36ch;margin:var(--s1) 0; color:var(--accent-ink);font-size:var(--fs-xs);line-height:var(--lh-body)} .hd [data-saved-nav][hidden],[data-saved-empty][hidden]{display:none} [data-save-form][data-remove-only] button{color:var(--ink-2)} @media (hover:hover) and (pointer:fine){ [data-saved-card] [data-save-form][data-remove-only]{opacity:0;transition:opacity var(--d-1) var(--e-out)} [data-saved-card]:hover [data-save-form][data-remove-only], [data-saved-card]:focus-within [data-save-form][data-remove-only], [data-saved-card] [data-save-form][data-remove-only][aria-busy="true"], [data-saved-card] [data-save-form][data-remove-only]:has([data-save-error]){opacity:1} } /* ------------------------------------------------------------- toast -----*/ .toast{position:fixed;left:50%;bottom:var(--s7);z-index:60;visibility:hidden; background:var(--ink);color:var(--app);font-size:13px;font-weight:500; padding:var(--s3) var(--s5);border-radius:var(--r-full); opacity:0;transform:translate(-50%,14px) scale(.96);pointer-events:none; max-width:84%;text-align:center;box-shadow:var(--sh-4); transition:opacity var(--d-3) var(--e-out),transform var(--d-4) var(--e-spring),visibility 0s var(--d-4)} .toast.on{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);transition-delay:0s} /* ------------------------------------------------------- back to top -----*/ .totop{position:fixed;right:var(--s4);bottom:calc(var(--s4) + env(safe-area-inset-bottom,0px)); z-index:31;width:44px;height:44px;border-radius:var(--r-full);border:1px solid var(--line); padding:0;background:#fff; backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%); color:#131011;cursor:pointer;display:none;align-items:center;justify-content:center; box-shadow:var(--sh-3);opacity:0;transform:translateY(10px) scale(.9);pointer-events:none; transition:opacity var(--d-3) var(--e-out),transform var(--d-4) var(--e-spring)} @media (max-width:720px){.totop{display:flex}} @media (min-width:721px){.totop{left:var(--s4);right:auto}} .totop.article{display:flex} .totop:not(.show){visibility:hidden} .totop:focus-visible{position:fixed;z-index:31;border-radius:var(--r-full);box-shadow:var(--focus)} .totop.show{opacity:1;transform:none;pointer-events:auto} .totop.show:active{transform:scale(.9)} @media (prefers-reduced-transparency:reduce){ .totop{backdrop-filter:none;-webkit-backdrop-filter:none} } /* ------------------------------------------------------- events panel ----*/ .evpanel{position:fixed;right:var(--s4);bottom:var(--s4);width:min(320px,calc(100vw - 32px)); max-height:52vh;background:#131011;color:#F4F0E8;border-radius:var(--r-lg); padding:var(--s4);z-index:50;display:none;box-shadow:var(--sh-5); overflow-y:auto;scrollbar-width:none;transform-origin:bottom right} .evpanel::-webkit-scrollbar{display:none} .evpanel.on{display:block;animation:popIn var(--d-3) var(--e-spring) both} .evpanel h4{margin:0 0 var(--s1);font-size:var(--fs-xs);font-weight:700} .evpanel .hint{font-size:var(--fs-2xs);color:rgba(255,255,255,.45);margin-bottom:var(--s3);line-height:1.45} .evpanel .e{font-size:12px;padding:7px 0;border-top:1px solid rgba(255,255,255,.1); font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:rgba(255,255,255,.8); word-break:break-word;animation:fade var(--d-3) var(--e-out) both} .evpanel .e b{color:#F0B8C6;font-weight:700} .evpanel .none{font-size:12px;color:rgba(255,255,255,.4)} /* ------------------------------------------------------------- footer ----*/ .ft{position:relative;overflow:hidden; margin-top:auto; /* flat page-coloured band — same token the body paints with, so the page and the footer read as one continuous surface in both themes */ background:var(--app)} .ft .wrap{position:relative;z-index:2;padding:var(--s14) var(--s5) var(--s8)} /* the halftone footer plate was removed in v104 */ .ft-main{display:grid;grid-template-columns:260px 1fr;column-gap:110px;align-items:start} .ft-brand .flogo{display:block;margin-bottom:var(--s5);border-radius:var(--r-xs)} .ft-brand .flogo svg{display:block;height:26px;width:auto} .ft-tag{margin:0 0 var(--s5);font-size:14px;line-height:1.63;color:var(--ink-2);max-width:32ch} .ft-mail{display:inline-block;font-size:14px;line-height:20px;color:var(--accent-ink); margin-bottom:var(--s5);border-bottom:1px solid transparent; transition:border-color var(--d-2) var(--e-out)} .ft-mail:hover{border-color:var(--accent-line)} .ft-social{display:flex;gap:var(--s3);align-items:center} .ft-circle{width:32px;height:32px;border-radius:var(--r-full);border:1px solid var(--line); display:flex;align-items:center;justify-content:center;flex:0 0 auto;cursor:pointer; transition:border-color var(--d-2) var(--e-out),background var(--d-2) var(--e-out),transform var(--d-2) var(--e-spring)} .ft-circle:hover{border-color:var(--ink-3);background:color-mix(in srgb,var(--ink) 5%,transparent); transform:translateY(-2px)} .ft-circle svg{display:block} .ft-circle svg path{fill:var(--ink-2)} .ft-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s8)} .ft-col{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)} .ft-h{font-size:var(--fs-3xs);font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--ink);line-height:1.5} .ft-col a{font-size:14px;line-height:20px;color:var(--ink-2)} .ft-col a{cursor:pointer; transition:color var(--d-2) var(--e-out)} .ft-col a:hover{color:var(--ink)} .ft-bottom{margin-top:var(--s7);padding-top:var(--s6);border-top:1px solid var(--line); display:flex;align-items:center;justify-content:space-between;gap:var(--s5);flex-wrap:wrap} .ft-copy{font-size:var(--fs-3xs);line-height:1.5;letter-spacing:.15em;text-transform:uppercase; color:var(--ink-3)} /* ================================ HOME ================================== */ /* ------------------------------------------------------------- imagery --- Every image is a rounded plate with a foot-gradient so white headlines can sit on it. Images fade up once decoded rather than snapping in. */ /* The plate, the shimmer, the foot gradient and the crop are all driven by custom properties so a single modifier (.imtr, below) can neutralise them for images that carry real transparency. */ .im{position:relative;overflow:hidden;border-radius:var(--r-im);box-shadow:var(--sh-2); --im-plate:var(--line-3);--im-shim-a:var(--line-3);--im-shim-b:var(--line-2); --im-foot:rgba(12,10,11,.34); --im-fit:cover;--im-pos:center 28%; background:var(--im-plate);aspect-ratio:16/10;isolation:isolate} .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:var(--im-fit);border:0; /* bias the crop toward the top third: news photography puts faces there, and a centred crop on a portrait-shaped frame decapitates them */ object-position:var(--im-pos); opacity:0;transition:opacity var(--d-5) var(--e-out),transform var(--d-6) var(--e-out)} .im>.imratio{display:none} .im img.ready,.im img[data-ready]{opacity:1} .im::after{content:"";position:absolute;inset:0;border-radius:var(--r-im);pointer-events:none; background:linear-gradient(180deg,rgba(12,10,11,0) 45%,var(--im-foot) 100%)} /* the plate holds a quiet shimmer until the photograph lands */ .im::before{content:"";position:absolute;inset:0;z-index:0; background:linear-gradient(100deg,var(--im-shim-a) 30%,var(--im-shim-b) 46%,var(--im-shim-a) 62%); background-size:280% 100%;animation:shim 1.5s linear infinite} .im:has(img.ready)::before,.im:has(img[data-ready])::before{animation:none;opacity:0; transition:opacity var(--d-4) var(--e-out)} @keyframes shim{from{background-position:180% 0}to{background-position:-80% 0}} @media (prefers-reduced-motion:reduce){.im::before{animation:none}} /* ── Transparent images (alpha channel) ─────────────────────────────────── A logo or cut-out has no photograph to hide the plate: the warm fill, the shimmer and the dark foot wash all read straight through its transparent pixels, and the cover-crop clips it at the frame edge. Such an image sits on whatever surface surrounds it — page or card, light theme or dark — and is shown whole. The server-rendered article route emits this class from its Sharp alpha probe; the client sets the same custom properties inline (never a runtime class — see adaptArtImages in js/app.js). */ .im.imtr{--im-plate:transparent;--im-shim-a:transparent;--im-shim-b:transparent; --im-foot:transparent; --im-fit:contain;--im-pos:center;box-shadow:none} .im.imtr::before{animation:none} /* one hover rule for every card that owns an image */ .lead2,.sart,.mini,.card,.tcard,.nbfeat,.nbcard,.edchoice,.latest .big,.rail,.lead{ transition:opacity var(--d-2) var(--e-out)} .lead2 .im img,.sart .im img,.mini .im img,.card .im img,.tcard .im img,.nbfeat .im img,.nbcard .im img,.edchoice .im img,.latest .big .im img{ transition:opacity var(--d-5) var(--e-out),transform var(--d-6) var(--e-out)} .lead2:hover .im img,.sart:hover .im img,.mini:hover .im img,.card:hover .im img,.tcard:hover .im img,.nbfeat:hover .im img,.nbcard:hover .im img,.edchoice:hover .im img,.latest .big:hover .im img{transform:scale(1.04)} .nbfeat:active .im img,.nbcard:active .im img,.card:active .im img,.tcard:active .im img{ transform:scale(1.015);transition-duration:var(--d-1)} /* the shared headline hover: one colour move, everywhere */ .lead:hover h2,.card:hover h2,.lead2:hover h2,.sart:hover h3,.mini:hover h3,.rail:hover .rt .a,.tcrow:hover .q,.tcard:hover .tq,.nbfeat:hover .nbh,.nbcard:hover .nbh,.latest .big:hover h3,.edchoice:hover h3,.dep:hover .c{color:var(--accent-ink)} /* --------------------------------------------------------- date stamp --- ONE treatment for every article date a reader sees — card meta rows, the compact latest list, news blocks, the article header, corrections and the cited-source list. The casing lives here rather than in the renderers, so no surface can be uppercased ad hoc while another stays mixed-case. Sits ahead of the surfaces that use it, and it carries the size and ink too: every stamp reads at one scale wherever it appears. */ .dstamp{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase; font-variant-numeric:tabular-nums;color:var(--ink-4);white-space:nowrap} /* two hosts carry non-stamp content as well, so their own rules set a larger scale; the stamp restates itself against them rather than being weakened. */ .ameta .amt.dstamp,.amv.dstamp,.ahd.dstamp{font-size:var(--fs-2xs);color:var(--ink-4)} /* ------------------------------------------------------------ date row ---*/ .daterow{display:flex;align-items:baseline;justify-content:space-between;padding:var(--s8) 0 0} .daterow h1{font-family:var(--disp);font-size:var(--fs-3xl);font-weight:300;margin:0; letter-spacing:var(--tr-head)} .daterow .d{font-size:13px;color:var(--ink-3)} /* --------------------------------------------------------- section head --*/ .secthead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4); margin-bottom:var(--s6)} .secthead .st{font-family:var(--disp);font-size:var(--fs-2xl);font-weight:300; letter-spacing:var(--tr-head);color:var(--ink)} /* the claims track uses .tcarhead, not .secthead — without it here the qualifier ran into the title as "Top claimsthis week" */ .secthead .sd{font-size:var(--fs-xs);color:var(--ink-3);margin-left:var(--s3)} .secthead .va:not(.flowbtn){font-size:var(--fs-xs);font-weight:500;color:var(--ink-2);cursor:pointer; white-space:nowrap;display:inline-flex;align-items:center;gap:5px; transition:color var(--d-2) var(--e-out),gap var(--d-2) var(--e-out)} .secthead .va:not(.flowbtn):hover{color:var(--accent-ink);gap:9px} .vamob{display:none} .sect{font-size:13px;font-weight:700;color:var(--ink-3);margin:var(--s1) 0 var(--s4); letter-spacing:.02em} .kk{font-size:var(--fs-3xs);font-weight:700;color:var(--accent-ink);letter-spacing:var(--tr-caps); text-transform:uppercase;margin-bottom:7px} /* ----------------------------------------------------------- hero zone ---*/ .heropanel{background:var(--app);margin-bottom:var(--s14)} .heroz{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--s12); padding:var(--s7) 0 var(--s12);align-items:start} .lead2{position:sticky;top:84px;cursor:pointer} .lead2 .im{aspect-ratio:16/10;margin-bottom:var(--s6)} .lead2 h2{font-family:var(--disp);font-weight:300;font-size:var(--fs-lead); line-height:var(--lh-tight);margin:0 0 var(--s4);letter-spacing:var(--tr-tight); transition:color var(--d-2) var(--e-out)} .lead2 .dek{font-size:var(--fs-md);line-height:1.6;color:var(--ink-2);margin:0 0 var(--s4); max-width:52ch} .sidestack{min-width:0} .sart{display:block;padding:0 0 var(--s7);margin-bottom:var(--s7); border-bottom:1px solid var(--line-2);cursor:pointer} .sart:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0} .sart .im{aspect-ratio:16/9;margin-bottom:var(--s4)} .sart h3{font-family:var(--disp);font-weight:300;font-size:19px;line-height:1.28; margin:0 0 var(--s2);letter-spacing:var(--tr-snug);transition:color var(--d-2) var(--e-out)} .sart .dek{font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--ink-2);margin:0 0 var(--s3)} .mini{cursor:pointer;margin-bottom:var(--s6)} .mini:last-child{margin-bottom:0} .mini .im{aspect-ratio:4/3;margin-bottom:var(--s3);box-shadow:none} .mini h3{font-family:var(--disp);font-size:17.5px;line-height:1.28;font-weight:300;margin:0; letter-spacing:var(--tr-snug);transition:color var(--d-2) var(--e-out)} /* legacy lead (category pages) */ .lead{display:grid;grid-template-columns:7fr 5fr;gap:var(--s8);align-items:center; padding-bottom:var(--s8);border-bottom:1px solid var(--line-2);margin-bottom:var(--s8);cursor:pointer} .lead h2{font-family:var(--disp);font-size:33px;line-height:1.18;font-weight:300; margin:0 0 var(--s3);letter-spacing:var(--tr-tight)} .lead .dek{font-size:var(--fs-md);line-height:var(--lh-body);color:var(--ink-2);margin:0 0 var(--s4)} .src{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:13px;color:var(--ink-3)} .src .o{color:var(--ink-2);font-weight:500} .src .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-4);flex:0 0 auto} .claimcount{display:inline-flex;align-items:center;gap:var(--s2);margin-top:var(--s3); background:var(--sunk);border:1px solid var(--line);border-radius:var(--r-full); padding:var(--s2) var(--s3);font-size:var(--fs-xs);color:var(--ink-2);cursor:pointer; font-family:inherit;text-align:left; transition:border-color var(--d-2) var(--e-out),background var(--d-2) var(--e-out)} .claimcount:hover{border-color:var(--ink-4)} .claimcount b{color:var(--ink);font-weight:700} .cdots{display:flex;gap:2px;flex:0 0 auto} .cdots i{width:5px;height:5px;border-radius:50%;display:block} /* --------------------------------------------------------- top claims ----*/ .tcrow{display:block;width:100%;text-align:left;background:transparent;border:0; border-bottom:1px solid var(--line-2);padding:var(--s4) 0;cursor:pointer; font-family:inherit;color:inherit} .tcrow:last-of-type{border-bottom:0} .tcrow .q{display:block;font-family:var(--disp);font-weight:300;font-size:17.5px;line-height:1.34; letter-spacing:var(--tr-snug);transition:color var(--d-2) var(--e-out)} .tcrow .s{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-3);margin-top:var(--s2)} .tcrow .s i,.hs i{width:7px;height:7px;border-radius:50%;display:block;flex:0 0 auto} /* ------------------------------------------------------- claims track ----*/ .tcar{margin-bottom:var(--s14)} .tcartrack{display:flex;gap:var(--s6);overflow-x:auto;scroll-snap-type:x mandatory; scroll-behavior:smooth;scrollbar-width:none;padding-bottom:2px; margin-right:calc(50% - 50vw); /* the track fades at the viewport edge instead of being cut */ -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 90px),transparent 100%); mask-image:linear-gradient(90deg,#000 calc(100% - 90px),transparent 100%)} .tcartrack::-webkit-scrollbar{display:none} .tcard{flex:0 0 clamp(266px,26.5vw,392px);min-width:0;scroll-snap-align:start;cursor:pointer; display:flex;flex-direction:column} .tcard .im{aspect-ratio:16/10;margin-bottom:var(--s4)} .tg{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line); border-radius:var(--r-full);padding:5px var(--s3);font-size:var(--fs-2xs);font-weight:500; color:var(--ink-2);background:var(--card);white-space:nowrap} .tcard .tq{display:block;font-family:var(--disp);font-weight:300;font-size:19px;line-height:1.3; letter-spacing:var(--tr-snug);margin-bottom:var(--s3);transition:color var(--d-2) var(--e-out)} .tcard .tm{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-2xs); letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:auto} .tcard .tm i{width:3px;height:3px;border-radius:50%;background:var(--ink-4);display:block;flex:0 0 auto} /* --------------------------------------------------- hot on the internet -*/ @keyframes hotfill{from{width:0}to{width:100%}} /* ------------------------------------------- people + contribution boxes -*/ .twobox{display:grid;grid-template-columns:1fr 1fr;gap:0;background:transparent; border:1px solid var(--line);border-radius:var(--r-im);overflow:hidden;margin-bottom:var(--s12)} .twobox.one{grid-template-columns:1fr} .tbox{background:transparent;padding:var(--s7) var(--s7) var(--s8)} .tbox:first-child{border-right:1px solid var(--line)} .pc{font-size:var(--fs-3xs);font-weight:700;color:var(--ink-3);letter-spacing:.08em; text-transform:uppercase;white-space:nowrap;background:none;border:0;padding:0} .cq2{display:block;font-family:var(--disp);font-weight:300;font-size:17px;line-height:1.36; letter-spacing:var(--tr-snug);transition:color var(--d-2) var(--e-out)} /* -------------------------------------------------------- news blocks ----*/ .newsblock{background:transparent;border:1px solid var(--line);border-radius:var(--r-im); overflow:hidden;margin-bottom:var(--s14)} .nbfeat{display:grid;grid-template-columns:1fr 1fr;gap:var(--s10);align-items:center; padding:var(--s7);cursor:pointer;transition:background var(--d-3) var(--e-out)} .nbfeat:hover,.nbcard:hover{background:color-mix(in srgb,var(--sunk) 55%,transparent)} .nbfeat .im{aspect-ratio:16/10;box-shadow:none} .nbrow{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)} .nbcard{padding:var(--s7);cursor:pointer;min-width:0;border-left:1px solid var(--line); display:flex;flex-direction:column;transition:background var(--d-3) var(--e-out)} .nbcard:first-child{border-left:0} .nbcard .im{aspect-ratio:16/10;margin-bottom:var(--s5);box-shadow:none} .nbtx{display:block;min-width:0} .nbcard .nbtx{display:flex;flex-direction:column;flex:1} .nbm{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4)} .nbtag{font-size:var(--fs-3xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:var(--accent-ink);border:1px solid var(--accent-line);border-radius:var(--r-full); padding:5px var(--s3);line-height:1;white-space:nowrap} .nbdate{white-space:nowrap} .nbh{display:block;font-family:var(--disp);font-weight:300;line-height:1.22; letter-spacing:var(--tr-head);margin-bottom:var(--s3);transition:color var(--d-2) var(--e-out)} .nbfeat .nbh{font-size:28px} .nbcard .nbh{font-size:19.5px;line-height:1.28;letter-spacing:var(--tr-snug);margin-bottom:var(--s3)} .nbd{display:block;color:var(--ink-2);margin-bottom:var(--s5)} .nbfeat .nbd{font-size:15px;line-height:1.6} .nbcard .nbd{font-size:var(--fs-sm);line-height:var(--lh-body);flex:1} .nbcard .amstats{align-self:flex-start;margin-left:0} .newsgrid{background:transparent;border:1px solid var(--line);border-radius:var(--r-im); overflow:hidden;display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:var(--s14)} .newsgrid .nbcard{border-left:1px solid var(--line)} .newsgrid .nbcard:nth-child(4n+1){border-left:0} .newsgrid .nbcard:nth-child(n+5){border-top:1px solid var(--line)} /* --------------------------------------------------------- latest, grid --*/ .latest{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-bottom:var(--s14)} .latest .big{padding-right:var(--s8);border-right:1px solid var(--line-2);cursor:pointer} .latest .big .im{aspect-ratio:16/10;margin-bottom:var(--s4)} .latest .big h3{font-family:var(--disp);font-size:22px;line-height:1.24;font-weight:300; margin:0 0 var(--s3);letter-spacing:var(--tr-head)} .latest .big .dek{font-size:14px;line-height:var(--lh-body);color:var(--ink-2);margin:0} .latest .side{padding-left:var(--s8)} .rail{display:flex;align-items:flex-start;gap:var(--s4);padding:var(--s4) 0; border-bottom:1px solid var(--line);cursor:pointer} .rail:first-child{padding-top:0} .rail:last-child{border-bottom:0;padding-bottom:0} .rail .rth{display:block;width:76px;height:66px;border-radius:var(--r-im);flex:0 0 auto; background:var(--line-3);position:relative;overflow:hidden} .rail .rth img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform var(--d-6) var(--e-out)} .rail:hover .rth img{transform:scale(1.06)} .rail .rt{display:block;flex:1;min-width:0} .rail .rt .a{display:block;font-family:var(--disp);font-size:16px;font-weight:300;line-height:1.28; letter-spacing:var(--tr-snug);color:var(--ink);transition:color var(--d-2) var(--e-out)} .rail .rt .b{display:block;font-size:var(--fs-2xs);color:var(--ink-3);margin-top:7px} .edchoice{display:grid;grid-template-columns:1fr 1fr;gap:var(--s10);align-items:center; padding-bottom:var(--s14);border-bottom:1px solid var(--line-2);margin-bottom:var(--s14);cursor:pointer} .edchoice h3{font-family:var(--disp);font-size:var(--fs-2xl);line-height:1.24;font-weight:300; margin:0 0 var(--s3);letter-spacing:var(--tr-head)} .edchoice .dek{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0 0 var(--s4)} .edchoice .im{aspect-ratio:4/3} .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s8) var(--s7);margin-bottom:var(--s12)} .card{cursor:pointer;min-width:0} .card .im{display:block;margin-bottom:var(--s3);min-height:1px} .card .im>.imratio{display:block;position:relative;width:100%;height:auto} .card h2{font-family:var(--disp);font-size:18.5px;line-height:1.27;font-weight:300; margin:0 0 var(--s2);letter-spacing:var(--tr-snug);transition:color var(--d-2) var(--e-out)} .card .dek{font-size:14px;line-height:1.48;color:var(--ink-2);margin:0 0 var(--s3)} .card .src{font-size:12px} .card .claimcount{margin-top:var(--s3);padding:7px var(--s3);font-size:var(--fs-2xs)} /* ------------------------------------------------- the closing statement - v13 composition: the statement sits beside a looping mark rather than under a logo chip. The source has a black ground rather than an alpha channel, so `screen` drops it into the gradient without a visible box. */ .synth{border:0;border-radius:var(--r-im); background:linear-gradient(90deg,#56001E 0%,#921943 100%); margin-bottom:var(--s14);box-shadow:none;position:relative;overflow:hidden; display:flex;align-items:center;gap:44px;padding:48px 46px;text-align:left} .synth .stx{position:relative;z-index:1;display:block;flex:1 1 auto;min-width:0;max-width:62ch} .synthvid{flex:0 0 auto;margin-left:auto;width:clamp(150px,17vw,248px);height:auto;display:block; mix-blend-mode:screen;pointer-events:none;user-select:none} .synth .sa{display:block;font-family:var(--disp);font-weight:300;font-size:25px;line-height:1.3; color:#fff;letter-spacing:var(--tr-head);margin-bottom:var(--s4)} .synth .sb{display:block;font-size:var(--fs-sm);color:rgba(255,255,255,.74);margin-top:0;line-height:1.65} .synth .sb b{color:#fff;font-weight:500} @media (max-width:900px){ .synth{gap:var(--s7);padding:36px 30px} .synth .stx{max-width:none} .synthvid{width:clamp(112px,16vw,160px)} } /* ======================= STORY + THE CLAIM SUBSTRATE ==================== */ .art{padding:var(--s7) 0 var(--s24);max-width:790px} .artto{display:flex;align-items:center;justify-content:space-between;gap:var(--s4); margin-bottom:var(--s6)} .backlink{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-3); cursor:pointer;background:transparent;border:0;padding:0; transition:color var(--d-2) var(--e-out),gap var(--d-2) var(--e-out)} .backlink:hover{color:var(--ink);gap:10px} .art .kick{font-size:var(--fs-xs);font-weight:700;color:var(--accent-ink);margin-bottom:var(--s3); letter-spacing:.04em;text-transform:uppercase} .art h1{font-family:var(--disp);font-size:var(--fs-4xl);line-height:var(--lh-tight);font-weight:400; margin:0 0 var(--s4);letter-spacing:var(--tr-tight)} .art .dek{font-size:var(--fs-lg);line-height:var(--lh-body);color:var(--ink-2);margin:0 0 var(--s3); max-width:60ch} .artby{display:flex;align-items:center;justify-content:space-between;gap:var(--s4); margin-bottom:var(--s6)} .art .byline{font-size:var(--fs-sm);line-height:var(--lh-body);font-weight:700;color:var(--ink); margin:0;min-width:0} .artby .sharewrap{flex:0 0 auto} .art .hero{margin-bottom:var(--s6)} figure.hero{margin:0} .art .hero figcaption{font-size:var(--fs-xs);color:var(--ink-3);margin-top:var(--s2)} /* Article image frame — one frame for the cover and every inline section image (the server emits .imcover on both). Full content-column width at a fixed 16/9, so the masthead-to-image rhythm never changes between articles and no figure down the page is a different width from the one above it. Only the fit adapts, and only through the frame's custom properties: .imfit contains the image on the plate (scale-down, so a sub-column source is never enlarged into blur and an extreme panorama/portrait is never reduced to a slice), everything else keeps the top-biased cover crop. */ .art .im.imcover{aspect-ratio:16/9;width:100%} .art .im.imcover.imfit{--im-fit:scale-down;--im-pos:center} .art .bimg{margin:var(--s7) 0} .art .bimg .im{aspect-ratio:16/9} .art .bimg figcaption{font-size:var(--fs-xs);color:var(--ink-3);margin-top:var(--s2)} /* Article figures show muted attribution only; descriptions live in alt text. */ .art figcaption .imsrc{color:var(--ink-3)} .art figcaption .imsrc a{color:inherit;text-decoration:underline; text-decoration-color:var(--line);text-underline-offset:3px} /* ------------------------------------------------- how it was assembled --*/ .assembled{border:1px solid var(--line);border-radius:var(--r-im);background:var(--card); padding:var(--s4);margin-bottom:var(--s7);box-shadow:var(--sh-2)} .assembled .smark{width:36px;height:36px;border-radius:var(--r-sm);background:var(--accent-soft); display:flex;align-items:center;justify-content:center;flex:0 0 auto} .assembled .stx{flex:1;min-width:0} .assembled .sa{display:block;font-size:14px;font-weight:700;line-height:1.3; transition:color var(--d-2) var(--e-out)} .assembled .sb{display:block;font-size:var(--fs-xs);color:var(--ink-3);margin-top:3px;line-height:1.45} /* ----------------------------------------------- the verified-layer switch */ .layerrow{display:flex;align-items:center;justify-content:space-between;gap:var(--s3); border-top:1px solid var(--line-2);padding:var(--s4) 0;cursor:pointer} .layerrow .t{flex:1;min-width:0;display:block} .layerrow .t .a{display:block;font-size:14px;font-weight:500;line-height:1.35} .layerrow .t .b{display:block;font-size:var(--fs-xs);color:var(--ink-3);margin-top:2px;line-height:1.4} .sw{width:44px;height:26px;border-radius:var(--r-full);background:var(--line);position:relative; flex:0 0 auto;display:block;transition:background var(--d-3) var(--e-out)} .sw i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%; background:#fff;display:block;box-shadow:0 1px 3px rgba(19,16,17,.3); transition:transform var(--d-4) var(--e-spring),width var(--d-2) var(--e-out)} .layerrow:active .sw i{width:24px} .layerrow.on .sw{background:var(--accent)} .layerrow.on .sw i{transform:translateX(18px)} .layerrow.on:active .sw i{transform:translateX(14px)} /* Source mode is desktop-only. Keep this in the blocking base stylesheet: no enhancement, delayed script, or pinned-nav class may reveal it on phones. */ @media (max-width:720px){ #layerrow,html .hd nav.desktopnav .pl-navsw{display:none!important} /* The right-hand evidence rail is desktop-only. The record (#refs) below the article remains visible, including citation targets and navigation. */ .artgrid > .clrail{display:none!important} } /* ------------------------------------------------------------- legend ----*/ .legend{display:none;flex-wrap:wrap;gap:var(--s2);align-items:center;justify-content:space-between; border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);padding:var(--s4) 0; margin-bottom:var(--s7)} @media (max-width:720px){.legend{display:flex}.art.plain .legend{display:none}} .legend .ls{display:flex;flex-wrap:wrap;gap:var(--s4)} .legend .li{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-xs);color:var(--ink-2)} .legend .li i{width:9px;height:9px;border-radius:50%;display:block;flex:0 0 auto} .legend .lt{font-size:var(--fs-xs);color:var(--ink-3)} /* ------------------------------------------------------- article body ---- Claims are marked with a real underline, not a box-shadow: it skips descenders, breaks correctly across lines, and survives text zoom. The two uncertain tiers additionally carry a tint, because those are the sentences the reader is being asked to help with. */ .art p{font-size:var(--fs-lg);line-height:var(--lh-read);margin:0 0 var(--s5)} /* section heads inside a piece — deliberately quiet, so they organise the read without competing with the headline or the claim underlines */ .art .bsub{font-family:var(--disp);font-size:var(--fs-2xl);line-height:var(--lh-head); font-weight:300;letter-spacing:var(--tr-head);color:var(--ink); margin:var(--s8) 0 var(--s5);max-width:34ch} .art .bsub:first-of-type{margin-top:var(--s7)} /* The rest of what an article body can contain. Published bodies come from upstream, so they carry more than paragraphs and subheads: quotes, lists and inline links. Without these each falls to a browser default — a list set at interface size inside reading copy, a link with no affordance at all — so every one is given the design's type. Scoped to the body flow (direct children of .art) so the bibliography, the corrections note and the page controls keep their own treatment. */ .art > blockquote{margin:var(--s6) 0 var(--s6) 0;padding-left:var(--s5); border-left:2px solid var(--line); font-family:var(--disp);font-size:var(--fs-xl);font-weight:300; line-height:var(--lh-head);letter-spacing:var(--tr-head);color:var(--ink)} .art > blockquote p{font-size:inherit;line-height:inherit;margin:0 0 var(--s3)} .art > blockquote > :last-child{margin-bottom:0} .cqt .katex,.art blockquote .katex{color:inherit} .cqt .katex math[display="block"],.art blockquote .katex math[display="block"]{ overflow-x:auto;overflow-y:hidden;margin:var(--s3) 0} .art > ul,.art > ol{font-size:var(--fs-lg);line-height:var(--lh-read); margin:0 0 var(--s5);padding-left:var(--s6)} .art > ul li,.art > ol li{margin:0 0 var(--s2)} .art > ul ul,.art > ol ol,.art > ul ol,.art > ol ul{margin:var(--s2) 0 0} .art > ul li::marker,.art > ol li::marker{color:var(--ink-3)} /* links in reading copy read as the settled tier does elsewhere: an underline in its ink, never a colour change alone */ .art > p a,.art > ul a,.art > ol a,.art > blockquote a,.art > .bsub a{ color:var(--t3-ink);text-decoration:underline; text-decoration-color:var(--t3-ln);text-underline-offset:3px; transition:text-decoration-color var(--d-2) var(--e-out)} .art > p a:hover,.art > ul a:hover,.art > ol a:hover,.art > blockquote a:hover{ text-decoration-color:var(--t3)} .cl{cursor:pointer;border-radius:3px;padding:1px 0; text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:4px; text-decoration-skip-ink:auto; transition:background var(--d-2) var(--e-out),text-decoration-color var(--d-2) var(--e-out)} .cl[data-t="1"]{text-decoration-color:var(--t1);text-decoration-style:dashed;background:var(--t1-bg)} .cl[data-t="2"]{text-decoration-color:var(--t2);background:var(--t2-bg)} /* the two settled tiers carry no tint, so their rule does all the work of telling them apart — at --tN-ln both read as the same grey on cream */ .cl[data-t="3"]{text-decoration-color:color-mix(in srgb,var(--t3) 68%,transparent)} .cl[data-t="4"]{text-decoration-color:color-mix(in srgb,var(--t4) 68%,transparent)} .cl:hover[data-t="1"]{background:color-mix(in srgb,var(--t1-bg) 60%,var(--t1-ln))} .cl:hover[data-t="2"]{background:color-mix(in srgb,var(--t2-bg) 60%,var(--t2-ln))} .cl:hover[data-t="3"]{background:var(--t3-bg);text-decoration-color:var(--t3)} .cl:hover[data-t="4"]{background:var(--t4-bg);text-decoration-color:var(--t4)} .cl.mine{outline:2px solid var(--accent-line);outline-offset:2px;border-radius:3px} /* rail card hover lights its sentence and vice versa — the pair is one object */ .cl.lit[data-t="1"]{background:color-mix(in srgb,var(--t1-bg) 30%,var(--t1-ln));text-decoration-color:var(--t1)} .cl.lit[data-t="2"]{background:color-mix(in srgb,var(--t2-bg) 30%,var(--t2-ln));text-decoration-color:var(--t2)} .cl.lit[data-t="3"]{background:color-mix(in srgb,var(--t3-bg) 40%,var(--t3-ln));text-decoration-color:var(--t3)} .cl.lit[data-t="4"]{background:color-mix(in srgb,var(--t4-bg) 40%,var(--t4-ln));text-decoration-color:var(--t4)} /* with the layer off the article reads as ordinary prose */ .art.plain .cl{background:none!important;text-decoration-line:none!important;cursor:default} .art.plain .legend{display:none} /* the layer toggle is a real state change, so the body acknowledges it */ .art{transition:none} @keyframes layerFlip{from{opacity:.55}to{opacity:1}} .origin{background:var(--sunk);border-radius:var(--r);padding:var(--s4);margin:var(--s8) 0 0} .origin .k{font-size:12px;font-weight:700;color:var(--ink-3);margin-bottom:7px; letter-spacing:.05em;text-transform:uppercase} .origin p{font-size:var(--fs-sm);line-height:1.6;margin:0;color:var(--ink-2)} .origin .corr+.corr{margin-top:var(--s4)} .origin a{color:var(--t3-ink);font-weight:700; text-decoration:underline;text-decoration-color:var(--t3-ln);text-underline-offset:3px} /* --------------------------------------------------------------- CTAs ----*/ .cta{border:1px solid var(--line);border-radius:var(--r-im);background:var(--card); box-shadow:var(--sh-2);padding:var(--s6);margin-top:var(--s8)} .cta h3{font-family:var(--disp);font-size:var(--fs-xl);font-weight:300;margin:0 0 var(--s2); line-height:1.3;letter-spacing:var(--tr-head)} .cta p{font-size:14px;line-height:var(--lh-body);color:var(--ink-2);margin:0 0 var(--s4)} .cta .row{display:flex;gap:var(--s3);flex-wrap:wrap} .btn{border:0;border-radius:var(--r-full);background:var(--accent);color:var(--on-accent); padding:var(--s3) var(--s5);font-size:14px;font-weight:700;cursor:pointer; box-shadow:0 10px 24px -14px var(--accent); transition:transform var(--d-1) var(--e-out),box-shadow var(--d-2) var(--e-out), filter var(--d-2) var(--e-out)} .btn:hover{box-shadow:0 14px 30px -14px var(--accent);filter:brightness(1.06)} .btn:active{transform:scale(.97)} .btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:none} .btn.ghost:hover{border-color:var(--ink-4);filter:none} .btn.dark{background:var(--ink);color:var(--app);box-shadow:none} .btn.dark:hover{filter:brightness(1.18)} .btn.sm{padding:9px var(--s4);font-size:var(--fs-xs);box-shadow:none} .btn.sm.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line)} /* ---------------------------------------------------- invited banner -----*/ .invite{background:var(--deep);color:#fff;border-radius:var(--r-im);padding:var(--s5) var(--s6); margin:var(--s7) 0 0;position:relative;overflow:hidden} .invite::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 140% at 100% 0%,rgba(240,184,198,.16),transparent 60%)} .invite > *{position:relative} .invite .tag{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-2xs);font-weight:700; color:#F0B8C6;margin-bottom:var(--s3);letter-spacing:.05em;text-transform:uppercase} .invite h3{font-family:var(--disp);font-size:22px;line-height:1.3;font-weight:300;margin:0 0 var(--s2)} .invite p{margin:0 0 var(--s4);font-size:14px;line-height:var(--lh-body);color:rgba(255,255,255,.74)} .invite .go{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap} .invite .b{background:#fff;color:var(--deep);border:0;border-radius:var(--r-full); padding:var(--s3) var(--s5);font-size:var(--fs-sm);font-weight:700;cursor:pointer; transition:transform var(--d-1) var(--e-out),box-shadow var(--d-2) var(--e-out)} .invite .b:hover{box-shadow:0 10px 24px -12px rgba(0,0,0,.6)} .invite .b:active{transform:scale(.97)} .invite .l{background:transparent;border:0;color:rgba(255,255,255,.68);font-size:13px; cursor:pointer;padding:var(--s3) 2px;text-decoration:underline;text-underline-offset:3px; transition:color var(--d-2) var(--e-out)} .invite .l:hover{color:#fff} /* ------------------------------------------------- article + claim rail --*/ .artgrid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:var(--s14);align-items:stretch} .clrail{align-self:stretch;padding-top:var(--s7)} .bodytop,.artend{display:block;height:0;overflow:hidden} .sharehold{position:relative} .railclaims{position:sticky;top:78px;padding-top:0} .clrail .rh{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3); margin-bottom:var(--s3)} .clrail .rh .a{font-size:var(--fs-3xs);font-weight:700;letter-spacing:var(--tr-caps); text-transform:uppercase;color:var(--accent-ink)} .clrail .rh .b{font-size:var(--fs-2xs);color:var(--ink-3)} /* The stack scrolls on its own inside the sticky column. Its height leaves room for the rail heading above and the "All sources" button below, so a card is never parked underneath the button, and the bottom of the last card clears the fade instead of being eaten by it — the overflow cue is the .clfade overlay below, switched off once the stack is scrolled to the end. */ .clwrap{position:relative} .clstack{max-height:calc(100vh - 225px);overflow-y:auto;scrollbar-width:none; margin:0 -4px;padding:4px 4px var(--s5);scroll-behavior:smooth; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10px,#000 100%); mask-image:linear-gradient(180deg,transparent 0,#000 10px,#000 100%)} .clstack::-webkit-scrollbar{display:none} .clfade{position:absolute;left:0;right:0;bottom:0;height:52px;display:block; pointer-events:none;opacity:0;transition:opacity var(--d-2) var(--e-out); background:linear-gradient(180deg,transparent 0,var(--app) 78%)} .clfade::after{content:"";position:absolute;left:50%;bottom:9px;width:8px;height:8px; border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3); transform:translateX(-50%) rotate(45deg)} .clwrap.more .clfade{opacity:1} .viewall{display:flex;align-items:center;justify-content:center;gap:var(--s2);width:100%; background:var(--card);border:1px solid var(--line);border-radius:var(--r-full); padding:var(--s3) var(--s4);margin-top:var(--s3);cursor:pointer;font-family:inherit; font-size:var(--fs-xs);font-weight:700;color:var(--ink); transition:border-color var(--d-2) var(--e-out),background var(--d-2) var(--e-out), transform var(--d-1) var(--e-out)} .viewall:hover{border-color:var(--ink-4);background:var(--sunk)} .viewall:active{transform:scale(.985)} .viewall .n{color:var(--ink-3);font-weight:500} /* --------------------------------------------------------- claim card ---- One flat surface inside a single border: the source's identity, the sentence it carries, and — under a hairline — the quiet attribution and citation chips. Nothing inside the card changes background; the only colour on it is the maroon accent on the kind label and the citation chips. */ .clcard{position:relative;display:block;width:100%;text-align:left;cursor:pointer; font-family:inherit;color:inherit;border-radius:var(--r-im);padding:0; margin:0 0 var(--s7);border:1px solid; transition:box-shadow var(--d-3) var(--e-out),transform var(--d-3) var(--e-out), border-color var(--d-3) var(--e-out)} .clcard:last-child{margin-bottom:var(--s1)} .clcard:hover{transform:translateY(-2px);box-shadow:var(--sh-3)} .clcard:active{transform:translateY(0) scale(.995);transition-duration:var(--d-1)} .clcard .chd{display:flex;align-items:center;gap:var(--s2);padding:var(--s5) var(--s4) var(--s5)} .clcard .clb{font-size:13px;font-weight:700;letter-spacing:var(--tr-snug);flex:1;min-width:0} /* The heading is the source's identity: its type label, then the document it names, on one line with a single separator. Long titles clamp so a card cannot grow taller than the sentence it stands under. */ .clcard .clb{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; overflow:hidden;line-height:1.35} .clcard .clb:has(.clstate){display:flex;flex-direction:column;overflow:visible} .clcard .clidentity{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; overflow:hidden} .clcard .ckl + .clt::before{content:"\00b7";margin:0 5px;color:var(--ink-4)} .clcard .clstate{display:block;font-size:var(--fs-2xs);font-weight:500; line-height:1.35;color:var(--ink-3);letter-spacing:normal} .clcard .cat{display:block;margin-top:0;font-size:var(--fs-2xs);line-height:1.4; color:var(--ink-3);font-weight:500} .clcard .cac{font-size:12px;font-weight:700;flex:0 0 auto;opacity:.85;white-space:nowrap} /* the body is a column so the quiet material — who it was, its numbers and its date — gathers under the hairline, whatever order the markup contract puts those spans in */ .clcard .cbd{display:flex;flex-direction:column;background:none; padding:0 var(--s4) var(--s5)} .clcard .cqt{order:1} .clcard .cdv{order:2} .clcard .cat{order:3} .clcard .csr{order:4} .clcard .cqt{display:block;font-size:14.5px;line-height:1.45;font-weight:500;color:var(--ink)} .clcard .cdv{display:block;height:1px;background:var(--line-2);margin:var(--s3) 0} .clcard .csr{display:block;font-size:var(--fs-xs);line-height:1.45;color:var(--ink-3)} .clcard .csr b{color:var(--accent-ink);font-weight:700} .clcard.t1{--tier:var(--t1);--tint:var(--t1-bg);--tline:var(--t1-ln);--tring:var(--app)} .clcard.t2{--tier:var(--t2);--tint:var(--t2-bg);--tline:var(--t2-ln);--tring:var(--app)} .clcard.t3{--tier:var(--t3);--tint:var(--t3-bg);--tline:var(--t3-ln);--tring:var(--app)} .clcard.t4{--tier:var(--t4);--tint:var(--t4-bg);--tline:var(--t4-ln);--tring:var(--app)} .clcard{background:var(--tint);border-color:var(--tline)} .clcard .clb,.clcard .cac{color:var(--tier)} .clcard.lit{box-shadow:0 0 0 2px var(--tline),var(--sh-3);transform:translateY(-2px)} .clcard.mine{box-shadow:0 0 0 2px var(--accent-line)} .clcard.mine:hover{box-shadow:0 0 0 2px var(--accent),var(--sh-3)} /* ---------------------------------------------------- source attribution -*/ .srcbadge{width:37px;height:37px;border-radius:var(--r-full);display:flex;align-items:center; justify-content:center;font-size:12px;font-weight:700;letter-spacing:.02em;color:#fff; flex:0 0 auto;border:2.5px solid var(--card);margin-left:-11px;background:var(--ink-2); position:relative;overflow:hidden; transition:transform var(--d-3) var(--e-spring),z-index 0s} .srcbadge .ini{position:relative;z-index:1} .srcbadge img{position:absolute;inset:0;z-index:2;background:#fff;object-fit:contain;padding:14%; width:100%;height:100%;border-radius:var(--r-full)} /* Google returns a decoded transparent placeholder for unknown domains. Keep the initials visible underneath it; error/zero-size events hide the image. */ .srcbadge img[data-favicon]{background:transparent} /* a contributor's face fills its circle — a logo is inset on white, a person is cropped to the disc; the initials stay underneath either way */ .srcbadge img.face{background:transparent;object-fit:cover;padding:0} .srcbadge:first-child{margin-left:0} .srclink{display:inline-flex;align-items:center;gap:6px;background:var(--card); border:1px solid var(--line);border-radius:var(--r-full);padding:7px var(--s3); font-size:12px;font-weight:700;color:var(--ink);cursor:pointer;font-family:inherit; white-space:nowrap; transition:border-color var(--d-2) var(--e-out),background var(--d-2) var(--e-out), transform var(--d-1) var(--e-out)} .srclink:hover{border-color:var(--ink-4);background:var(--sunk)} .srclink:active{transform:scale(.96)} .srclink .ei{color:var(--ink-3);display:block} .artby .srclink[data-shareopen]{background:var(--ink);border-color:var(--ink);color:var(--app)} .artby .srclink[data-shareopen]:hover{filter:brightness(1.2)} /* ------------------------------------------------------- article meta ----*/ .ameta{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s3)} .ameta .amsrc{display:flex;align-items:center;gap:var(--s2);min-width:0} .ameta .amsrc .srcbadge{border-width:2.5px;margin-left:-10px} .ameta .amsrc .srcbadge:first-child{margin-left:0} /* .ameta .amo (byline / meta text) is declared once, further down with the source-pill rules, so the two can never drift apart again */ .ameta .amt{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-3);flex:0 0 auto} .sic{display:inline-block;vertical-align:-1.5px;flex:0 0 auto} .stand .sic,.legend .li .sic{display:block} .amstats{display:inline-flex;align-items:center;gap:var(--s3);flex:0 0 auto;margin-left:auto; position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-full); padding:var(--s2) var(--s4);transition:border-color var(--d-2) var(--e-out)} .amstats:hover{border-color:var(--ink-4)} .amst{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);font-weight:700; color:var(--ink-3);cursor:default;line-height:1} .amst svg{display:block;opacity:.9} .amst.c4{color:var(--t4-ink)} .amst.ac{color:var(--accent-ink)} .amstats.inline{background:transparent;border:0;border-radius:0;padding:0;margin-left:0;gap:var(--s3)} .ameta.sm{gap:var(--s3);margin-top:var(--s3)} .ameta.sm .amo,.ameta.sm .amst{font-size:var(--fs-2xs)} .ameta.sm .amstats{gap:var(--s3)} .ameta.sm .amst svg{width:12px;height:12px} .ameta.lg{gap:var(--s4);margin-top:var(--s4)} .ameta.lg .amo{font-size:13px} .ameta.lg .amst{font-size:var(--fs-sm)} .ameta.stack{display:block} .ameta.stack .amd{width:3px;height:3px;border-radius:50%;background:var(--ink-4);flex:0 0 auto} .ameta.stack .amt2{white-space:nowrap} .ameta.stack .amstats{display:inline-flex;margin-left:0;margin-top:var(--s3); justify-content:flex-start;gap:var(--s3);padding:7px var(--s3)} /* --------------------------------------------------------- claim list ----*/ .claimsec{margin-top:var(--s10)} .claimrow{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s4) 0; border-top:1px solid var(--line-2);cursor:pointer;width:100%;text-align:left; background:transparent;border-left:0;border-right:0;border-bottom:0;font-family:inherit; color:inherit;transition:background var(--d-2) var(--e-out)} .claimrow:hover{background:color-mix(in srgb,var(--sunk) 60%,transparent)} .claimrow .ci{width:9px;height:9px;border-radius:50%;flex:0 0 auto;margin-top:7px;display:block} .claimrow .ct{flex:1;min-width:0} .claimrow .cx{display:block;font-size:15px;line-height:1.45} .claimrow .cm{display:block;font-size:var(--fs-xs);color:var(--ink-3);margin-top:5px} /* ---------------------------------------------- mobile claim toaster -----*/ /* the docked source toaster was removed in v106 */ /* ===================== CLAIM RECORD + TRANSCRIPT ======================== */ .cp{padding:var(--s7) 0 var(--s24)} .stmt{font-family:var(--disp);font-size:var(--fs-3xl);line-height:var(--lh-head);font-weight:300; letter-spacing:var(--tr-tight);margin:var(--s5) 0 var(--s4);max-width:26ch} /* ------------------------------------------------------- the tier ladder -*/ .ladder{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s1)} .ladder .rail{display:flex;align-items:center;flex:0 0 auto} .ladder .seg{width:26px;height:2px;background:var(--line);display:block; transition:background var(--d-3) var(--e-out)} .ladder .seg.on{background:var(--t4)} .ladder .seg.broke{background:transparent; background-image:linear-gradient(90deg,var(--accent) 55%,transparent 0); background-size:5px 2px;opacity:.75} .ladder .d{width:11px;height:11px;border-radius:50%;border:1.8px solid var(--line); background:var(--card);display:block;cursor:pointer;flex:0 0 auto;padding:0; transition:background var(--d-3) var(--e-out),border-color var(--d-3) var(--e-out), transform var(--d-3) var(--e-spring)} .ladder .d:hover{transform:scale(1.25)} .ladder .d.on{background:var(--t4);border-color:var(--t4)} .ladder .lab{font-size:var(--fs-xs);font-weight:700;color:var(--ink)} .sbox{border-radius:var(--r);padding:var(--s5) var(--s5) var(--s4);margin-bottom:var(--s4)} .sbox.t1{background:var(--t1-bg)} .sbox.t2{background:var(--t2-bg)} .sbox.t3{background:var(--t3-bg)} .sbox.t4{background:var(--t4-bg)} .stand{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s4)} .stand i{width:9px;height:9px;border-radius:50%;display:block;flex:0 0 auto} .stand .l1{display:flex;align-items:center;gap:var(--s3)} .stand .dot{width:9px;height:9px;border-radius:50%;display:block;flex:0 0 auto} .stand .st{font-size:15.5px;font-weight:700} .stand .since{font-size:14px;color:var(--ink-3)} .stand .spark{margin-left:auto;display:block;flex:0 0 auto} .because{font-size:var(--fs-md);line-height:var(--lh-body);margin:0;color:var(--ink);max-width:60ch} /* --------------------------------------------------------- impact panel -- Four metrics, one of which is model retrievals. They are peers, so they get identical weight and a shared hairline grid — no card is emphasised. */ .impact{margin:var(--s6) 0 var(--s2);border:1px solid var(--line);border-radius:var(--r-im); background:var(--card);padding:var(--s4);box-shadow:var(--sh-2)} @keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* ------------------------------------------------------- metric sheet ----*/ .mbig{display:flex;align-items:baseline;gap:var(--s2);margin:0 0 2px} .mbig .n{font-family:var(--disp);font-size:36px;font-weight:300;letter-spacing:-.02em;line-height:1} .mbig .u{font-size:14px;color:var(--ink-3)} /* ------------------------------------------------------------ the record - A ledger: one spine, one node per entry, filled where the claim reached a rung and dashed where it came back down. */ .cp h3.sec{font-size:13px;font-weight:700;color:var(--ink-3);margin:var(--s8) 0 2px; letter-spacing:.03em} .rec{position:relative;padding-left:var(--s8)} .pav3{width:34px;height:34px;border-radius:var(--r-full);flex:0 0 auto;display:flex; align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700} .pav3.big{width:46px;height:46px;font-size:14px} .pstat{display:block;font-size:var(--fs-xs);color:var(--ink-2);line-height:var(--lh-body);margin-top:var(--s2)} .pstat b{color:var(--ink);font-weight:700} /* sits inline after the document title, so it needs its own left gap — without it the two run together as "Octagon statementBusiness Wire" */ /* ------------------------------------------------------- dependencies ----*/ .dep{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s4) 0; border-top:1px solid var(--line-2);cursor:pointer;transition:background var(--d-2) var(--e-out)} .dep:hover{background:color-mix(in srgb,var(--sunk) 55%,transparent)} .dep .ar{flex:0 0 auto;margin-top:2px;color:var(--ink-3);display:flex; transition:transform var(--d-2) var(--e-out)} .dep:hover .ar{transform:translateX(2px)} .dep.against .ar{color:var(--accent)} .dep .tx{flex:1;display:block} .dep .c{display:block;font-size:14.5px;line-height:1.42;transition:color var(--d-2) var(--e-out)} .dep .why{display:block;font-size:var(--fs-xs);color:var(--ink-2);line-height:1.45;margin-top:5px} .dep .stt{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3);margin-top:6px} .dep .stt .sic{display:block} /* ========================== TRANSCRIPT ================================== */ .qt{background:var(--accent-soft);border-radius:3px;padding:1px 0;cursor:pointer; text-decoration:underline;text-decoration-color:var(--accent-line);text-decoration-thickness:2px; text-underline-offset:4px;text-decoration-skip-ink:auto; transition:background var(--d-2) var(--e-out)} .qt:hover{background:color-mix(in srgb,var(--accent-soft) 40%,var(--accent-line))} .qt.hit{animation:qtHit 1.8s var(--e-out) both} @keyframes qtHit{ 0%{background:var(--accent-soft)} 18%,56%{background:color-mix(in srgb,var(--accent) 26%,transparent)} 100%{background:var(--accent-soft)} } /* struck passages are shown struck — withheld, visibly, not silently removed */ /* ======================= BREAKDOWN + LIST SHEETS ======================== */ .tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:var(--s1) 0 0;position:relative} .tabs .tab{flex:1;min-width:0;background:transparent;border:0;padding:var(--s3) 3px; font-family:inherit;font-size:13px;font-weight:700;color:var(--ink-3);cursor:pointer; position:relative;display:flex;align-items:center;justify-content:center;gap:6px; transition:color var(--d-2) var(--e-out)} .tabs .tab:hover{color:var(--ink-2)} .tabs .tab .tn{font-size:var(--fs-3xs);font-weight:700;background:var(--sunk);color:var(--ink-3); border-radius:var(--r-full);padding:2px 6px;line-height:1.55; transition:background var(--d-2) var(--e-out),color var(--d-2) var(--e-out)} .tabs .tab.on{color:var(--ink)} .tabs .tab.on .tn{background:var(--accent-soft);color:var(--accent-ink)} .tabs .tab.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px; background:var(--ink);border-radius:2px;animation:navIn var(--d-3) var(--e-out) both} /* ----------------------------------------------------- notifications -----*/ /* ==================== CONTRIBUTION: THE INTERVIEW ======================= */ /* The single most consequential surface in the product — it is where someone decides how much of their name to attach to a fact. It is therefore the calmest thing here: no urgency, no progress pressure, nothing that reads like a funnel. */ .frag{display:flex;gap:var(--s3);background:var(--sunk);border-radius:var(--r); padding:var(--s3) var(--s4);margin-bottom:var(--s2)} .frag .k{font-size:12px;font-weight:700;color:var(--ink-2);display:block;margin-bottom:3px; letter-spacing:.04em;text-transform:uppercase} .frag .v{font-size:var(--fs-sm);line-height:var(--lh-body);display:block;color:var(--ink-2)} .opt{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;background:var(--card); border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);font-size:15px; font-weight:500;color:var(--ink);cursor:pointer;margin-bottom:9px; transition:border-color var(--d-2) var(--e-out),transform var(--d-1) var(--e-out), box-shadow var(--d-2) var(--e-out)} .opt:hover{border-color:var(--ink-4);box-shadow:var(--sh-2)} .opt:active{transform:scale(.99)} .opt .ico{width:36px;height:36px;border-radius:var(--r-sm);background:var(--sunk);display:flex; align-items:center;justify-content:center;flex:0 0 auto} .opt .tx{flex:1;min-width:0;display:block} .opt .tx .a{display:block;line-height:1.35} .opt .tx .b{display:block;font-size:var(--fs-xs);color:var(--ink-3);font-weight:400;margin-top:3px; line-height:1.45} .opt.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .opt.primary:hover{filter:brightness(1.05)} .opt.primary .ico{background:rgba(255,255,255,.18)} .opt.primary .tx .b{color:rgba(255,255,255,.78)} .quiet{width:100%;background:transparent;border:0;color:var(--ink-2);padding:var(--s3); font-size:var(--fs-sm);font-weight:500;cursor:pointer;border-radius:var(--r-sm); transition:color var(--d-2) var(--e-out),background var(--d-2) var(--e-out)} .quiet:hover{color:var(--ink);background:var(--sunk)} /* --------------------------------------------------------- chat frame ----*/ .iv{display:flex;flex-direction:column;min-height:0} /* how far through, stated plainly and without pressure */ .bq{max-width:90%;margin-bottom:var(--s5);animation:riseIn var(--d-4) var(--e-out) both} .bq .who{display:block;font-size:var(--fs-2xs);font-weight:700;color:var(--ink-3);margin-bottom:6px; letter-spacing:.06em} .bq .tx{display:block;font-size:16px;line-height:var(--lh-body)} .ba{max-width:84%;margin:0 0 var(--s5) auto;background:var(--accent-soft); border:1px solid var(--accent-line);border-radius:16px 16px 4px 16px;padding:var(--s3) var(--s4); font-size:15px;line-height:var(--lh-body);animation:riseIn var(--d-3) var(--e-out) both} .typing{display:inline-flex;gap:var(--s1);padding:var(--s1) 0 var(--s5)} .typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);display:block; animation:tp 1.2s infinite} .typing i:nth-child(2){animation-delay:.15s} .typing i:nth-child(3){animation-delay:.3s} @keyframes tp{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:.9;transform:translateY(-3px)}} .sug{background:transparent;border:1px solid var(--line);border-radius:var(--r-full); padding:9px var(--s3);font-size:13px;color:var(--ink-2);cursor:pointer; animation:popIn var(--d-4) var(--e-spring) both; transition:border-color var(--d-2) var(--e-out),background var(--d-2) var(--e-out), color var(--d-2) var(--e-out),transform var(--d-1) var(--e-out)} .sug:hover{border-color:var(--ink-4);background:var(--sunk);color:var(--ink)} .sug:active{transform:scale(.96)} @keyframes recPulse{ 0%,100%{box-shadow:0 0 0 0 var(--accent-line)} 50%{box-shadow:0 0 0 8px transparent} } /* ------------------------------------------------------------- consent --- Four levels, in descending order of what they publish. The pseudonymous cap is a real architectural constraint, so it is stated on the option itself rather than buried in a footnote. */ .consent{margin-top:var(--s1)} .cline{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s3) var(--s3); margin:0 calc(var(--s3) * -1);border-top:1px solid var(--line-2);cursor:pointer; border-radius:var(--r-sm);transition:background var(--d-2) var(--e-out)} .cline:hover{background:var(--sunk)} .cline .rad{width:19px;height:19px;border-radius:50%;border:1.8px solid var(--line);flex:0 0 auto; margin-top:2px;position:relative;background:var(--card); transition:border-color var(--d-2) var(--e-out)} .cline .rad::after{content:"";position:absolute;inset:3.5px;border-radius:50%; background:var(--accent);transform:scale(0); transition:transform var(--d-3) var(--e-spring)} .cline.on .rad{border-color:var(--accent)} .cline.on .rad::after{transform:scale(1)} .cline .t{display:block;min-width:0} .cline .t .a{display:block;font-size:14.5px;font-weight:700;line-height:1.35} .cline .t .b{display:block;font-size:var(--fs-xs);color:var(--ink-3);margin-top:3px;line-height:1.45} /* --------------------------------------------------------- v0 ask box ----*/ .v0ask{border-top:1px solid var(--line-2);margin-top:var(--s5);padding-top:var(--s5)} .v0ask .qa{display:block;font-size:15.5px;font-weight:700;line-height:1.35} .v0row{display:flex;gap:9px;margin-top:var(--s4)} .v0row input{flex:1;min-width:0;border:1px solid var(--line);background:var(--card); border-radius:var(--r-full);padding:var(--s3) var(--s4);font-family:inherit;font-size:14.5px; color:var(--ink);outline:none; transition:border-color var(--d-2) var(--e-out),box-shadow var(--d-2) var(--e-out)} .v0row input::placeholder{color:var(--ink-3)} .v0row input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .v0ask.bad .v0row input{border-color:var(--accent)} .v0ask.bad .v0row{animation:shake var(--d-5) var(--e-out) both} @keyframes shake{ 0%,100%{transform:translateX(0)} 22%{transform:translateX(-5px)}52%{transform:translateX(4px)}78%{transform:translateX(-2px)} } .v0ask .err{display:none;font-size:var(--fs-xs);color:var(--accent-ink);margin-top:var(--s3)} .v0ask.bad .err{display:block;animation:fade var(--d-2) var(--e-out) both} .v0done .da{display:block;font-family:var(--disp);font-weight:300;font-size:19px;line-height:1.35} .v0done .db{display:block;font-size:var(--fs-sm);color:var(--ink-2);line-height:var(--lh-body);margin-top:7px} .v0done .db b{color:var(--ink);font-weight:500} /* ------------------------------------------------------ receipt + steps --*/ .tick{width:52px;height:52px;border-radius:var(--r-full);background:var(--t4-bg);display:flex; align-items:center;justify-content:center;color:var(--t4);margin:0 0 var(--s4); animation:tickIn var(--d-6) var(--e-spring) both} @keyframes tickIn{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}} .steps .s{display:flex;gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--line-2); font-size:14px;line-height:var(--lh-body);animation:riseIn var(--d-4) var(--e-out) both} .steps .s:first-child{border-top:0} .steps .s:nth-child(1){animation-delay:60ms} .steps .s:nth-child(2){animation-delay:120ms} .steps .s:nth-child(3){animation-delay:180ms} .steps .s:nth-child(4){animation-delay:240ms} .steps .s .n{width:22px;height:22px;border-radius:var(--r-full);background:var(--sunk); color:var(--ink-2);font-size:var(--fs-2xs);font-weight:700;display:flex;align-items:center; justify-content:center;flex:0 0 auto;margin-top:1px} .steps .s .tt{flex:1} .steps .s .tt b{font-weight:700} .steps .s .tt span{display:block;font-size:var(--fs-xs);color:var(--ink-3);margin-top:3px;line-height:1.45} /* ============================== RESPONSIVE ============================== */ @media (max-width:1080px){ .grid{grid-template-columns:repeat(2,1fr)} .twobox{grid-template-columns:1fr} .tbox:first-child{border-right:0;border-bottom:1px solid var(--line)} .ft-main{grid-template-columns:1fr;row-gap:var(--s10)} .ft-tag{max-width:46ch} .artgrid{grid-template-columns:minmax(0,1fr);gap:0} .clrail{max-width:none;padding-top:0;margin-top:var(--s2)} .sharehold{height:auto!important} .railclaims{position:static;padding-top:0} .clstack{max-height:none;overflow:visible;margin:0;padding:0 0 var(--s3); -webkit-mask-image:none;mask-image:none} /* stacked under the body, the rail scrolls with the page — nothing overflows, so there is nothing to cue */ .clfade{display:none} .clcard{margin-bottom:var(--s6);transform:none!important} .clcard .chd{padding:var(--s5) var(--s4) var(--s5)} .clcard .cbd{padding:0 var(--s4) var(--s5)} .clcard .cqt{font-size:15px} .nbfeat{grid-template-columns:1fr;gap:var(--s5);padding:var(--s6)} .nbrow{grid-template-columns:1fr} .nbrow .nbcard{border-left:0;border-top:1px solid var(--line)} .nbrow .nbcard:first-child{border-top:0} .nbcard{padding:var(--s6)} .newsgrid{grid-template-columns:repeat(2,1fr)} .newsgrid .nbcard{border-left:1px solid var(--line);border-top:1px solid var(--line)} .newsgrid .nbcard:nth-child(2n+1){border-left:0} .newsgrid .nbcard:nth-child(-n+2){border-top:0} .heroz{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:var(--s8)} .sart h3{font-size:18px} .tcard{flex:0 0 clamp(240px,38vw,320px)} } @media (max-width:720px){ .wrap{padding:0 var(--s4)} .hd .wrap{height:56px} .hd .logo svg{height:19px} .hd .desktopnav>a{display:none} .hd .desktopnav .searchbtn{margin-left:0} .menubtn{display:flex;width:34px;height:34px;border:0;border-radius:var(--r-full); padding:8px;background:transparent;color:var(--ink);cursor:pointer; flex-direction:column;justify-content:center;gap:4px} .menubtn:hover{background:var(--sunk)} .menubtn span{display:block;width:18px;height:1.5px;border-radius:2px;background:currentColor; transition:transform var(--d-3) var(--e-out),opacity var(--d-2) var(--e-out)} .menubtn[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)} .menubtn[aria-expanded="true"] span:nth-child(2){opacity:0} .menubtn[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)} .mobilemenu{display:block;position:absolute;top:100%;left:0;right:0;background:var(--app); max-height:calc(100vh - var(--hd-h));overflow-y:auto; border-bottom:1px solid var(--line);box-shadow:0 18px 30px -24px rgba(19,16,17,.55)} .mobilemenu[hidden]{display:none} .mobilenav{display:block;padding:var(--s3) var(--s4) var(--s5)} .mobilemain,.mobilecats{display:flex;flex-direction:column;align-items:stretch} .mobilemain{padding-bottom:var(--s3);border-bottom:1px solid var(--line-2)} .mobilecats{padding-top:var(--s3)} .mobilenav a{display:block;padding:10px var(--s2);border-radius:var(--r-xs); color:var(--ink-2);font-size:15px;font-weight:500;text-align:left} .mobilenav a:hover{background:var(--sunk);color:var(--ink)} .mobilenav a.on{background:var(--sunk);color:var(--ink);font-weight:700} .mobilenav a.on::before{content:"";display:inline-block;width:6px;height:6px; margin:0 10px 2px 0;border-radius:50%;background:var(--accent)} .catrow{display:none!important} body.reading .hd.mobile-away{transform:translateY(calc(-100% - 3px))} .daterow{padding:var(--s6) 0 0} .daterow h1{font-size:var(--fs-2xl)} .heropanel{margin-bottom:var(--s10)} .heroz{grid-template-columns:1fr;gap:0;padding:var(--s6) 0 var(--s8)} .lead2{position:static;padding-bottom:var(--s7);margin-bottom:var(--s7); border-bottom:1px solid var(--line)} .lead2 .dek{font-size:15px} .sidestack{border-left:0;padding-left:0} .sart{padding-bottom:var(--s6);margin-bottom:var(--s6)} .sart h3{font-size:20px} .tcar{margin-bottom:var(--s10)} .tcard{flex:0 0 78%} .tcartrack{-webkit-mask-image:none;mask-image:none} .latest{grid-template-columns:1fr;margin-bottom:var(--s10)} .latest .big{padding-right:0;border-right:0;padding-bottom:var(--s6);margin-bottom:6px; border-bottom:1px solid var(--line-2)} .latest .side{padding-left:0} .edchoice{grid-template-columns:1fr;gap:var(--s5);padding-bottom:var(--s10);margin-bottom:var(--s10)} .edchoice h3{font-size:22px} .grid{grid-template-columns:1fr;gap:var(--s8);margin-bottom:var(--s10)} .newsblock,.newsgrid{margin-bottom:var(--s10)} .nbfeat{padding:var(--s5)} .nbcard{padding:var(--s5)} .newsgrid{grid-template-columns:1fr} .newsgrid .nbcard{border-left:0;border-top:1px solid var(--line)} .newsgrid .nbcard:first-child{border-top:0} .nbfeat .nbh{font-size:23px} .secthead{margin-bottom:var(--s5)} .secthead .st{font-size:22px} .secthead .va{display:none} .vamob{display:block;width:100%;margin:calc(var(--s6) * -1) 0 var(--s10);padding:var(--s3); background:var(--card);border:1px solid var(--line);border-radius:var(--r-full); font-family:inherit;font-size:var(--fs-sm);font-weight:700;color:var(--ink);cursor:pointer; text-align:center} .vamob:active{background:var(--sunk);transform:scale(.99)} .twobox{margin-bottom:var(--s10)} .tbox{padding:var(--s5) var(--s5) var(--s6)} .synth{margin-bottom:var(--s10);flex-direction:column-reverse;align-items:flex-start; gap:var(--s5);padding:26px 20px 28px} .synth .stx{max-width:none} .synthvid{width:104px;margin-left:0} .synth .sa{font-size:18.5px;margin-bottom:var(--s3)} .synth .sb{font-size:var(--fs-xs);line-height:1.62} .ameta .amstats{margin-left:0} .art{padding:var(--s5) 0 var(--s20)} .art h1{font-size:27px;line-height:1.2} .art .dek{font-size:16px} .art p{font-size:17px;line-height:1.65} .invite{padding:var(--s5)} .invite h3{font-size:19px} .cp{padding:var(--s5) 0 var(--s20)} .stmt{font-size:25px;line-height:1.26} .ladder .seg{width:18px} .sheet{border-radius:var(--r-xl) var(--r-xl) 0 0} .sheet .in{padding:var(--s4) var(--s5) var(--s6)} .evpanel{right:var(--s3);left:var(--s3);width:auto;bottom:var(--s3)} .ft .wrap{padding:var(--s10) var(--s4) var(--s8)} .ft-cols{grid-template-columns:repeat(2,1fr);gap:var(--s7)} .ft-bottom{flex-direction:column;align-items:flex-start;gap:var(--s4)} /* iOS zooms any input under 16px on focus */ .v0row input{font-size:16px} } /* ======================== SOURCE-FIRST SURFACES ========================= */ /* --------------------------------------------------- the USP block ------- Sized so the statement lands but the first story still breaks the fold. */ .usp{border-bottom:1px solid var(--line);background:var(--app)} .usp .uspin{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:var(--s12);padding:var(--s8) 0 var(--s7);align-items:start} .usph{margin:0 0 var(--s4);font-family:var(--disp);font-weight:300; font-size:clamp(26px,1.2rem + 1.5vw,38px);line-height:1.12; letter-spacing:var(--tr-tight);max-width:17ch} .uspd{margin:0;font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2);max-width:56ch} /* the hand-off from "what this is" to "what to read" */ /* ------------------------------------------------ publication metadata ---*/ .artmeta{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s8);align-items:flex-start; padding:var(--s4) 0;margin-bottom:var(--s6); border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .amitem{display:block;min-width:0} .amk{display:block;font-size:var(--fs-3xs);font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--ink-3);margin-bottom:5px} .amv{display:block;font-size:var(--fs-sm);color:var(--ink);font-variant-numeric:tabular-nums} .amlink{display:inline-flex;align-items:center;gap:var(--s2);background:transparent; border:0;padding:0;font-family:inherit;font-size:var(--fs-sm);font-weight:700; color:var(--ink);cursor:pointer;font-variant-numeric:tabular-nums; transition:color var(--d-2) var(--e-out)} .amlink:hover{color:var(--accent-ink)} .amlink .amb{display:inline-flex;align-items:center} .amlink .srcbadge{width:22px;height:22px;font-size:9px;border-width:2px;margin-left:-7px} .amlink .srcbadge:first-child{margin-left:2px} /* -------------------------------------------------- cited sentences ------ v0 marks provenance, not confidence: one neutral rule for "this rests on a document", plus the number of the document it rests on. */ .cl{cursor:pointer;border-radius:3px;padding:1px 0; text-decoration-line:underline;text-decoration-thickness:1.5px; text-underline-offset:4px;text-decoration-skip-ink:auto; text-decoration-color:color-mix(in srgb,var(--ink-4) 70%,transparent); transition:background var(--d-2) var(--e-out),text-decoration-color var(--d-2) var(--e-out)} .cl:hover,.cl.lit{background:var(--accent-soft);text-decoration-color:var(--accent)} /* the gap is left of the marker, never inside it: a marker set tight against the full stop reads as one token ("12" after "cases."), so 4px of margin separates punctuation from number or tag while the padding keeps the tap target wider than the glyph */ .cite{font-size:.62em;font-weight:700;line-height:0;vertical-align:super; margin-left:4px;padding:0 2px;color:var(--accent-ink);cursor:pointer; font-variant-numeric:tabular-nums;text-decoration:none} .cl:hover .cite,.cite:hover{text-decoration:underline;text-underline-offset:2px} .art.plain .cite{display:none} /* ------------------------------------------------------- source cards ----*/ .clcard{background:var(--card);border-color:var(--line)} .clcard .chd{gap:var(--s2);padding:var(--s5) var(--s4) var(--s5)} .clcard .chd .srcbadge{width:24px;height:24px;font-size:9px;border-width:2px;margin-left:0} .clcard .clb{color:var(--ink);font-size:var(--fs-xs);font-weight:700} .clcard .ckl{color:var(--accent-ink)} .clcard .cbd{background:none} /* the quiet last row: attribution and chips under the hairline, never a second surface and never a second hue */ .clcard .csr{display:flex;align-items:center;gap:var(--s2);color:var(--ink-3); margin-top:6px;padding-right:0;border-left:0} .clcard .cnum{display:inline-flex;align-items:center;justify-content:center; min-width:17px;height:17px;padding:0 4px;border-radius:var(--r-full); background:var(--accent-soft);color:var(--accent-ink);font-size:var(--fs-3xs); font-weight:700;font-variant-numeric:tabular-nums;flex:0 0 auto} .clcard.lit,.clcard:hover{box-shadow:0 0 0 2px var(--accent-line),var(--sh-3)} /* the track's source chip carries the outlet mark */ .tcard .tg .srcbadge{width:18px;height:18px;font-size:8px;border-width:1.5px;margin:0 5px 0 -2px} /* --------------------------------------------------- the references ------ A bibliography, set the way a publication sets one. */ .refs{margin:var(--s14) 0 0;padding-top:var(--s8);border-top:2px solid var(--ink)} .refhead{margin-bottom:var(--s6)} .refh{margin:0 0 var(--s2);font-family:var(--disp);font-weight:300; font-size:var(--fs-2xl);letter-spacing:var(--tr-head)} .refl{margin:0;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.55;max-width:56ch} .reffilters{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)} .reffilter{display:inline-flex;align-items:center;gap:var(--s2);border:1px solid var(--line); border-radius:var(--r-full);padding:6px var(--s3);background:transparent; color:var(--ink-2);font-family:inherit;font-size:var(--fs-xs);cursor:pointer; transition:background var(--d-2) var(--e-out),border-color var(--d-2) var(--e-out), color var(--d-2) var(--e-out)} .reffilter:hover{border-color:var(--ink-4);color:var(--ink)} .reffilter.on{border-color:var(--accent-line);background:var(--accent-soft); color:var(--accent-ink);font-weight:700} .reffilter span{font-variant-numeric:tabular-nums;color:var(--ink-3)} .reffilter.on span{color:var(--accent-ink)} .reflist{list-style:none;margin:0;padding:0;counter-reset:ref} .refitem{display:flex;gap:var(--s4);padding:var(--s5) 0;border-top:1px solid var(--line-2); border-radius:var(--r-xs);transition:background var(--d-3) var(--e-out)} .refitem[hidden]{display:none} .refitem:first-child{border-top:0} .refitem.hit{animation:refHit 1.8s var(--e-out) both} @keyframes refHit{ 0%{background:transparent} 14%,52%{background:var(--accent-soft)} 100%{background:transparent} } .refn{flex:0 0 auto;width:26px;font-size:var(--fs-sm);font-weight:700;color:var(--ink-3); font-variant-numeric:tabular-nums;padding-top:2px} .refb{display:block;min-width:0;flex:1} .refmeta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-bottom:var(--s2)} .refmeta .srcbadge{width:24px;height:24px;font-size:9px;border-width:2px;margin-left:0} .refo{font-size:var(--fs-sm);font-weight:700;color:var(--ink)} .refkind{font-size:var(--fs-3xs);font-weight:700;border-radius:var(--r-full); padding:3px 9px;background:var(--sunk);color:var(--ink-2);white-space:nowrap} .refkind.doc{background:var(--t3-bg);color:var(--t3-ink)} .refkind.reg{background:var(--t4-bg);color:var(--t4-ink)} .refkind.ann{background:var(--accent-soft);color:var(--accent-ink)} .refd{font-size:var(--fs-xs);color:var(--ink-3)} .reft{display:block;font-size:var(--fs-md);line-height:1.45;color:var(--ink); margin-bottom:var(--s3);max-width:62ch} .refstate{display:block;font-size:var(--fs-xs);line-height:1.35;color:var(--ink-3); margin:-1px 0 var(--s3)} .refu{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:700; color:var(--accent-ink);border-bottom:1px solid var(--accent-line);padding-bottom:1px; transition:border-color var(--d-2) var(--e-out)} .refu:hover{border-color:var(--accent)} .refu svg{display:block} .refnu{font-size:var(--fs-xs);color:var(--ink-3);font-style:italic} .consulted{margin-top:var(--s6);padding-top:var(--s4);border-top:2px solid var(--line)} .consulted-toggle{display:flex;align-items:center;justify-content:space-between;gap:var(--s4); width:100%;padding:var(--s3) 0;border:0;background:transparent;color:var(--ink); font:inherit;text-align:left;cursor:pointer} .consulted-copy{font-size:var(--fs-sm);color:var(--ink-2)} .consulted-copy b{color:var(--ink);font-weight:700} .consulted-chevron{width:8px;height:8px;flex:0 0 auto;border-right:1.5px solid var(--ink-2); border-bottom:1.5px solid var(--ink-2);transform:rotate(45deg) translateY(-2px); transition:transform var(--d-2) var(--e-out)} .consulted.on .consulted-chevron{transform:rotate(225deg) translate(-2px,-2px)} .consulted-body{padding:var(--s2) 0 var(--s4)} .consulted-domain{border-top:1px solid var(--line-2)} .consulted-domain:last-child{border-bottom:1px solid var(--line-2)} .consulted-domain summary{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s3) 0; color:var(--ink);font-size:var(--fs-sm);font-weight:700;cursor:pointer;list-style:none} .consulted-domain summary::-webkit-details-marker{display:none} .consulted-domain summary::after{content:"";width:6px;height:6px;flex:0 0 auto; margin:4px var(--s2) 0 auto;border-right:1px solid var(--ink-3); border-bottom:1px solid var(--ink-3);transform:rotate(45deg)} .consulted-domain[open] summary::after{transform:rotate(225deg);margin-top:8px} .consulted-domain summary span:last-child{margin-left:auto;color:var(--ink-3);font-weight:500; font-variant-numeric:tabular-nums} .consulted-domain ul{list-style:none;margin:0 0 var(--s3);padding:0 0 0 var(--s4)} .consulted-domain li{padding:var(--s2) 0;color:var(--ink-2);font-size:var(--fs-xs);line-height:1.45} .consulted-domain a{color:inherit;text-decoration:underline;text-decoration-color:var(--line); text-underline-offset:3px} .consulted-domain a:hover{color:var(--accent-ink);text-decoration-color:var(--accent)} /* --------------------------------------------------- article history ---- What changed after publication, shown rather than absorbed. Dates stay in the muted greys the rest of the page uses for metadata; the alert red is reserved for corrections, so it never appears on a routine update. */ .corrbar{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s3); margin:var(--s5) 0 0;padding:var(--s3) var(--s4);border-radius:var(--r-sm); background:var(--accent-soft);border:1px solid var(--accent-line)} .corrbar .cbt{font-size:var(--fs-sm);font-weight:700;color:var(--accent-ink)} /* a button in the SPA, a plain anchor on the server-rendered page (where the URL is a real path, so #arthist can do the scrolling natively) — both read as the same link */ .corrbar .cbl{background:transparent;border:0;padding:0;font-family:inherit; font-size:var(--fs-xs);font-weight:700;color:var(--accent-ink);cursor:pointer; text-decoration:none; border-bottom:1px solid var(--accent-line); transition:border-color var(--d-2) var(--e-out)} .corrbar .cbl:hover{border-color:var(--accent)} /* the banner links here with a bare #arthist on the server-rendered page, so the jump has to clear the sticky header the way the About panes do */ .arthist{margin:var(--s10) 0 0;padding-top:var(--s6);border-top:1px solid var(--line-2); scroll-margin-top:calc(var(--hd-h) + 20px)} .ahh{margin:0 0 var(--s2);font-family:var(--disp);font-weight:300; font-size:var(--fs-2xl);letter-spacing:var(--tr-head)} .ahlist{list-style:none;margin:0;padding:0} /* one spine, one node per entry — the same ledger a claim's record draws, because the history is the record at story scale */ .ahitem{position:relative;padding:var(--s5) var(--s2) var(--s6) 34px; font-size:var(--fs-sm);line-height:1.55;border-bottom:1px solid var(--line-2)} .ahitem:last-child{border-bottom:0;padding-bottom:var(--s3)} .ahitem::before{content:"";position:absolute;left:10px;top:0;bottom:0;width:1.5px; background:var(--line)} .ahitem:first-child::before{top:24px} .ahitem:last-child::before{bottom:auto;height:56px} .ahitem::after{content:"";position:absolute;left:4px;top:24px;width:13px;height:13px; border-radius:50%;background:var(--card);border:2px solid var(--line)} .ahitem.corr::after{background:var(--accent);border-color:var(--accent)} .ahitem.hit{animation:refHit 1.8s var(--e-out) both} .ahtop{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap} .ahk{font-weight:700;color:var(--ink);font-size:var(--fs-md)} .ahk.corr{color:var(--accent-ink)} .ahd{flex:0 0 auto;color:var(--ink-3);font-size:var(--fs-sm); font-variant-numeric:tabular-nums} .arthist .ahn{margin:var(--s3) 0 0;max-width:600px;font-size:var(--fs-md); line-height:1.6;color:var(--ink)} /* the corrected sentence as it now reads — a quote, so it is set like one; the old figure stays legible under its strike */ .ahchange{margin-top:var(--s4);background:var(--sunk);border-radius:var(--r-sm); padding:var(--s4) var(--s5)} .arthist .ahcx{margin:var(--s3) 0 0;font-family:var(--disp);font-weight:300; font-size:17.5px;line-height:1.5;color:var(--ink);max-width:56ch} .ahcx del{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:1.5px} .ahcx ins{text-decoration:none;border-bottom:2px solid var(--accent)} .ahcs{display:block;margin-top:var(--s3);font-size:var(--fs-xs);color:var(--ink-2)} .ahwho{margin-top:var(--s5);display:flex;align-items:center;gap:var(--s3)} .ahwn{display:block;font-size:var(--fs-sm);font-weight:700;color:var(--ink)} .ahwn .ahwd{font-weight:500;color:var(--ink-3)} /* the descriptor is the article's own wording about the person, so its length is not ours to choose: it wraps to two lines and clips there rather than pushing the avatar row apart. Absent entirely on a contributor the article never describes, the name line stands alone — the row is centred, so nothing collapses. */ .ahwr{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; overflow:hidden;font-size:var(--fs-xs);line-height:1.45;color:var(--ink-2); margin-top:3px;max-width:60ch;overflow-wrap:break-word} /* the same sentence needs a third line once the column is a phone's wide */ @media (max-width:720px){.ahwr{-webkit-line-clamp:3}} .ahline{margin-top:var(--s3);font-size:var(--fs-sm);color:var(--ink-2)} .ahline b{color:var(--ink);font-weight:700} /* the document link sits inside a sentence here, so it dresses as a link, not as the doc-row chip */ /* the jump's landing flash — box-shadow so it reads even with the source layer toggled off, where sentence backgrounds are suppressed */ @keyframes clHit{ 0%,100%{box-shadow:none;background:transparent} 14%,52%{box-shadow:0 0 0 3px var(--accent-soft);background:var(--accent-soft)} } .cl.hit{animation:clHit 1.8s var(--e-out) both} /* the inline marker: the citation's shape, in words */ .cite.corr{font-size:var(--fs-3xs);font-weight:700;letter-spacing:.02em;margin-left:4px} /* a source behind a corrected claim says so in its date line */ .clcard .csr.corr{color:var(--accent-ink);font-weight:700} /* ── contributions ─────────────────────────────────────────────────────── A contribution is not a fault in the reporting, so it never borrows the alert red a correction owns: the banner sits in the sunk tint, and the marker and dates speak in the third accent the source layer already uses for people who went on the record. */ .corrbar.contrib{background:var(--sunk);border-color:var(--line)} .corrbar.contrib .cbt{color:var(--ink)} .corrbar.contrib .cbl{color:var(--t3-ink);border-bottom-color:var(--line)} .corrbar.contrib .cbl:hover{border-color:var(--t3-ink)} .art .cite.contrib{display:inline-flex;position:relative;vertical-align:middle; width:24px;height:24px;margin:0 4px 0 5px;padding:0;border:0;border-radius:50%; font:700 10px/1 var(--sans);letter-spacing:0;text-decoration:none;cursor:pointer} .cite-avatar{display:flex;align-items:center;justify-content:center;position:relative; width:100%;height:100%;border-radius:50%;overflow:hidden;background:#435344;color:#fff7e9} .cite-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .art .cite.contrib:hover,.art .cite.contrib:focus-visible{box-shadow:var(--focus-tight)} .art.plain .cite.contrib{display:none} .contrib-markers,.contrib-popover{display:inline} /* A zero-width anchor attaches the hover portraits to the final text position, not the bounding box of a potentially multiline sentence. */ @media (hover:hover) and (pointer:fine){ .art .contrib-markers{display:inline-block;position:relative;width:0;height:0;vertical-align:baseline} .art .contrib-popover{position:absolute;display:flex;gap:4px;left:3px;bottom:5px; padding:3px;z-index:4;opacity:0;transform:translateY(4px);pointer-events:none; transition:opacity var(--d-2) var(--e-out),transform var(--d-2) var(--e-out)} html .art .contrib-popover .cite.contrib{flex:0 0 24px;margin:0} .art .cl.contribution:hover .contrib-popover, .art .cl.contribution:focus-within .contrib-popover{ opacity:1;transform:translateY(0);pointer-events:auto} /* The padding bridges the small distance from the period to the portrait. */ .art .contrib-popover::after{content:"";position:absolute;left:0;right:0;top:100%;height:6px} } .ahitem.contrib::after{background:var(--t3-ink);border-color:var(--t3-ink)} /* the jump sits in the panel's footer line here, next to the source number, because a grouped entry has one panel per contributed sentence */ .ahitem.contrib .ahchange + .ahchange,.ahfold .ahchange + .ahchange{margin-top:var(--s3)} /* a contribution that was in the first edition folds into the publication entry: the same panels and contributor row, under a heading that names the interview date, indented off the publication's own line */ .ahfold{margin-top:var(--s4);padding-left:var(--s4);border-left:2px solid var(--t3-ink)} .ahfh{font-size:var(--fs-sm);color:var(--ink-2)} .ahfh b{color:var(--ink);font-weight:700} .ahd.ahdi{flex:1 1 auto} /* "5 of 16 shown · show all": the rest are in the markup, hidden, and the control says exactly how many */ .ahmore{margin-top:var(--s3);font-size:var(--fs-xs);color:var(--ink-2)} .ahshow{background:transparent;border:0;padding:0;font-family:inherit;font-size:inherit; font-weight:700;color:var(--t3-ink);cursor:pointer;border-bottom:1px solid transparent} .ahshow:hover{border-color:var(--t3-ink)} .ahchange:focus{outline:none} .ahchange:focus-visible{outline:2px solid var(--t3-ink);outline-offset:2px} /* no per-contributor colour arrives with the data, so the avatar takes the neutral ink rather than inventing one */ .arthist .pav3{background:var(--ink-2);color:var(--card)} /* a contributor's photo — from their payload or a committed local asset — is drawn over the initials inside the same circle, so a photo that fails to load reveals the letters rather than an empty disc, and nothing moves */ .pav3{position:relative;overflow:hidden} .pav3 img.face{position:absolute;inset:0;width:100%;height:100%;display:block; object-fit:cover;object-position:center top;border-radius:inherit; border:1px solid var(--line);box-sizing:border-box;background:var(--card)} /* a contributor's portrait, when upstream sends one, takes the initials' place in the byline block: same square, cropped to it, same typographic size */ .ahwho .pav3.ahpor{overflow:hidden;background:var(--line)} .ahwho .pav3.ahpor img{width:100%;height:100%;display:block;object-fit:cover; object-position:center top;border-radius:inherit} /* a source that is somebody's contribution says so where the date goes */ .refd.contrib,.clcard .csr.contrib{color:var(--t3-ink);font-weight:700} @media (max-width:1080px){ .usp .uspin{grid-template-columns:1fr;gap:var(--s10);padding:var(--s12) 0 var(--s10)} .usph{max-width:22ch} } @media (max-width:720px){ .usp .uspin{gap:var(--s8);padding:var(--s10) 0 var(--s8)} .usph{max-width:none} .uspd{font-size:15px} .artmeta{gap:var(--s4) var(--s6)} .refs{margin-top:var(--s10)} .refitem{gap:var(--s3)} .refn{width:20px} .reft{font-size:15px} } /* ================= FRONT PAGE — three columns ========================== */ /* lead | two stacked | a headline-only LATEST rail, divided by hairlines */ .heroz{grid-template-columns:minmax(0,1.75fr) minmax(0,1.15fr) minmax(0,.95fr);gap:0} .heroz > .lead2{padding-right:var(--s8)} /* The three lead stories carry a full-width picture, so their date stamp is pushed to the far end of the meta row: it then sits flush with the right edge of the image above it instead of trailing the source pill. */ .heroz .lead2 .ameta .amt,.heroz .lead2 .ameta .amt2, .heroz .sidestack .ameta .amt,.heroz .sidestack .ameta .amt2{margin-left:auto} .heroz > .sidestack{padding:0 var(--s8);border-left:1px solid var(--line)} .latestcol{padding-left:var(--s8);border-left:1px solid var(--line);min-width:0} .lclist{list-style:none;margin:0;padding:0} /* Latest runs three stories, each stacked: picture, headline, hour. */ /* same plate custom properties as .im, so a transparent thumbnail gets the same neutralised treatment from one inline set of properties */ .lcthumb{display:block;width:100%;aspect-ratio:16/10;border-radius:var(--r-im); --im-plate:var(--line-3);--im-fit:cover;--im-pos:center 28%; overflow:hidden;background:var(--im-plate);position:relative} .lcthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:var(--im-fit); object-position:var(--im-pos);opacity:0;transition:opacity var(--d-5) var(--e-out)} .lcthumb img.ready,.lcthumb img[data-ready]{opacity:1} .lcitem{display:flex;flex-direction:column;align-items:stretch;gap:var(--s3);padding:var(--s5) 0; border-top:1px solid var(--line-2);cursor:pointer; transition:background var(--d-2) var(--e-out)} .lcitem:first-child{border-top:0} /* Only the three-column rail shares its first image edge with the lead. Stacked layouts retain their existing section and item spacing. */ @media (min-width:1081px){ .lcitem:first-child{padding-top:0} } .lct{min-width:0;font-family:var(--disp);font-weight:400;font-size:17px; line-height:1.3;letter-spacing:var(--tr-snug); transition:color var(--d-2) var(--e-out)} /* the foot of a rail item: the pill reads alongside the hour rather than competing with the headline, and wraps under it if the column gets tight. Scoped to the direct child — a pill nested in a meta row takes the .ameta rule below instead, never both (see .cslead for the same pairing). */ .lcfoot{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;min-width:0} .lcfoot > .amsrc,.lcfoot > .amsrcw{max-width:100%;min-width:0} .lcfoot > .ameta{margin-top:0} .lcm{align-self:center;padding-top:0} .lcitem:hover .lct{color:var(--accent-ink)} @media (max-width:1080px){ .heroz{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)} /* LATEST drops to its own row here, and a sticky lead travels straight over it — the sticky is only correct while all three columns share a row */ .lead2{position:static} .latestcol{grid-column:1 / -1;border-left:0;padding-left:0;padding-top:var(--s7); margin-top:var(--s7);border-top:1px solid var(--line)} .lclist{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s8)} .lcitem:nth-child(2){border-top:0} } @media (max-width:720px){ .heroz{grid-template-columns:1fr} .heroz > .lead2{padding-right:0} .heroz > .sidestack{padding:0;border-left:0} .lclist{grid-template-columns:1fr} .lcitem:nth-child(2){border-top:1px solid var(--line-2)} .lct{font-size:16px} } /* the docked mobile bar now carries a source, so its label is neutral */ /* --- article page, phones ------------------------------------------------ The rail stacks under the body, so its heading needs to read as a section rather than a sidebar label, and the references need room. */ @media (max-width:720px){ .clrail{margin-top:var(--s8);padding-top:var(--s6);border-top:2px solid var(--ink)} .clrail .rh{margin-bottom:var(--s4)} .clrail .rh .a{font-size:var(--fs-xs);letter-spacing:.12em} .artmeta{gap:var(--s4) var(--s6);padding:var(--s4) 0} .amk{font-size:9.5px;letter-spacing:.1em} .cite{font-size:.66em} /* the docked bar must not sit on top of the last line of the references */ .art,.clrail{padding-bottom:0} } /* ---- the source cluster is the pill now (the claim pill is gone) ------- */ .amsrc{display:inline-flex;align-items:center;gap:var(--s2);min-width:0;flex:0 0 auto; background:var(--card);border:1px solid var(--line);border-radius:var(--r-full); padding:5px var(--s3) 5px 6px; transition:border-color var(--d-2) var(--e-out)} .amsrc:hover{border-color:var(--ink-4)} .amsrc .srcbadge{border-color:var(--card)} /* the single source of truth for meta text (bylines). The pill's own count label is styled by the pill rules below, not here. */ .ameta .amo{font-size:var(--fs-xs);font-weight:700;color:var(--ink);white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .ameta.sm{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap} .ameta.sm .amo{font-size:var(--fs-2xs)} .nbcard .nbtx > .amsrcw,.nbfeat .nbtx > .amsrcw{align-self:flex-start;margin-top:auto} /* --------------------------------------------- card source pill list ---- The pill is a disclosure: the wrapper is the anchor the panel is measured against, and the panel itself is moved to while open (cards clip their overflow, so a panel positioned inside one is cut off at the card's edge) and placed in viewport coordinates by the SPA. */ .amsrcw{display:inline-flex;align-items:center;min-width:0;flex:0 0 auto;position:relative} .amsrc[role="button"]{cursor:pointer} .amsrc:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px} .srcpop{position:fixed;left:0;top:0;z-index:60;display:flex;flex-direction:column; width:max-content;max-width:min(320px,calc(100vw - 20px));max-height:min(340px,60vh); overflow-y:auto;overscroll-behavior:contain;background:var(--card); border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-4); padding:var(--s2);opacity:0;visibility:hidden;pointer-events:none; transform:translateY(4px); transition:opacity var(--d-2) var(--e-out),transform var(--d-2) var(--e-out), visibility 0s var(--d-2)} .srcpop.up{transform:translateY(-4px)} .srcpop.on{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s} /* the panel is a small two-column table: a header row naming both columns, then rows whose numbers line up against the same right edge */ .srcpop .spg{display:flex;align-items:baseline;gap:var(--s3); padding:var(--s2) var(--s3) 4px;color:var(--ink-3); font-size:var(--fs-3xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase} .srcpop .spgn{flex:1 1 auto;min-width:0} .srcpop .spgv{flex:0 0 auto;text-align:right} /* the second group opens against a stronger line than the one between rows */ .srcpop .spr + .spg{margin-top:var(--s2);padding-top:var(--s2); border-top:1px solid var(--line)} /* two lines per source, with the number centred against the whole row */ .srcpop .spr{display:flex;align-items:center;gap:var(--s3);padding:6px var(--s3); border-radius:var(--r-sm);min-width:0;text-decoration:none;color:inherit; transition:background var(--d-2) var(--e-out),transform var(--d-2) var(--e-out)} /* a hairline between rows of the same group; a heading or the footer ends the run, so no line trails a group's last row */ .srcpop .spr + .spr{border-top:1px solid var(--line-2)} .srcpop .spr.lnk{cursor:pointer} .srcpop .spr.lnk:hover{background:var(--sunk);transform:translateX(2px)} .srcpop .spr.lnk:hover .srcbadge{transform:scale(1.06)} .srcpop .spr.lnk:active{transform:translateX(1px) scale(.995)} .srcpop .spr.lnk:focus-visible{background:var(--sunk);outline:2px solid var(--accent-ink); outline-offset:-2px} /* bigger in the panel than on the card: these read as logos, not dots */ .srcpop .srcbadge{width:30px;height:30px;font-size:11px;margin-left:0;border-width:2px; border-color:var(--card);flex:0 0 auto; transition:transform var(--d-2) var(--e-out)} .srcpop .spt{display:flex;flex:1;flex-direction:column;min-width:0} .srcpop .spn{font-size:var(--fs-xs);font-weight:700;color:var(--ink);line-height:1.35; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* kind, page count and state read as one muted line, clipped to the panel's width — the whole text stays in the element's title */ .srcpop .spd{font-size:var(--fs-2xs);color:var(--ink-3);line-height:1.3; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* the number column: the name's size, right-aligned on one edge, and tabular so the digits stack straight across both groups */ .srcpop .spv{margin-left:auto;padding-left:var(--s3);align-self:center; font-size:var(--fs-xs);font-weight:700;color:var(--ink-2);text-align:right; font-variant-numeric:tabular-nums;white-space:nowrap} .srcpop .spr.consulted{border-top:1px solid var(--line);margin-top:var(--s2); padding-top:var(--s3);cursor:default} .srcpop .spr.consulted .spn{color:var(--ink-3);font-weight:500} /* a contributor is a person, not a document: with the kind label gone, the name itself carries the accent the site uses for people elsewhere */ .srcpop .spr.contrib .spn{color:var(--accent-ink)} @media (prefers-reduced-motion:reduce){ .srcpop .spr,.srcpop .srcbadge{transition:none} .srcpop .spr.lnk:hover,.srcpop .spr.lnk:active{transform:none} .srcpop .spr.lnk:hover .srcbadge{transform:none} } /* ---- one pill, many sizes --------------------------------------------- The renderer sets --pill-s from the slot the pill sits in (see pillScale in app.js) and EVERY dimension below is derived from it, so a pill in the narrow rail is the same component as the one under the lead image, not a lead pill with smaller badges. A pill without the property — the server-rendered article page — sits at scale 1. */ .amsrc{--pill-s:1} .amsrc,.ameta .amsrc{ gap:calc(var(--s2) * var(--pill-s)); padding:calc(5px * var(--pill-s)) calc(var(--s3) * var(--pill-s)) calc(5px * var(--pill-s)) calc(6px * var(--pill-s))} /* .ameta .amsrc … is listed too so these win over the article-meta rules above, which are more specific than a bare .amsrc descendant selector */ .amsrc .srcbadge,.ameta .amsrc .srcbadge{ width:calc(20px * var(--pill-s));height:calc(20px * var(--pill-s)); font-size:calc(9.5px * var(--pill-s)); border-width:calc(2.5px * var(--pill-s)); margin-left:calc(-10px * var(--pill-s))} .amsrc .srcbadge:first-child,.ameta .amsrc .srcbadge:first-child{margin-left:0} /* the count label's SIZE rides on the scale, but its WEIGHT is constant: the same component must not read bolder because of the slot it sits in (a bare pill would otherwise inherit the card's weight, a nested one the meta row's) */ .amsrc .amo,.ameta .amsrc .amo{font-size:calc(var(--fs-2xs) * var(--pill-s));font-weight:500} /* ===================== V104 — MASTHEAD + TYPE WEIGHTS =================== */ /* --- the masthead: centred, large, with newspaper air above it ---------- */ .masthead{background:var(--app);text-align:center; margin-top:-20px;padding:var(--s2) var(--s5) var(--s4)} .masthead[hidden]{display:none} .mmark{display:flex;justify-content:center;margin:0} .mmark svg{height:clamp(38px,4.6vw,64px);width:auto;display:block} /* the wordmark is ink-coloured, so it inverts with the theme like the header */ :root[data-theme="dark"] .mmark path:not(:nth-of-type(-n+2)){fill:var(--ink)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .mmark path:not(:nth-of-type(-n+2)){fill:var(--ink)} } /* on the front the masthead is the masthead — the compact bar waits until it has scrolled away, so the wordmark never appears twice at once */ body.masthead-top .hd{opacity:0;pointer-events:none;box-shadow:none; border-bottom-color:transparent;transition:opacity var(--d-3) var(--e-out)} /* --- the section menu sits centred beneath it -------------------------- */ .catrow .wrap{justify-content:center} .catrow a:first-child{padding-left:var(--s4)} @media (max-width:720px){ .catrow .wrap{justify-content:flex-start} .catrow a:first-child{padding-left:0} } /* --- type weights ------------------------------------------------------ The lead carries the page, so it is smaller but set bold. Every other headline moves from light to regular, which is what makes a front page read as reported rather than as a brochure. */ .lead2 h2{font-size:clamp(26px,1.1rem + 1.5vw,36px);font-weight:400; letter-spacing:-.02em;line-height:1.14} .sart h3,.mini h3,.card h2,.nbh,.lct,.rail .rt .a,.latest .big h3,.edchoice h3,.tcard .tq,.cq2,.tcrow .q,.hq,.lead h2{font-weight:400} /* =============== V104 — THE HERO BAND, ON THE BRAND GRADIENT ============ */ /* Same gradient as the closing statement above the footer, so the page opens and closes on the same surface. */ .usp{background:linear-gradient(90deg,#56001E 0%,#921943 100%); border-bottom:0;color:#fff} .usp .uspin{padding:var(--s10) 0;align-items:start} .usph{color:#fff;max-width:15ch} .uspd{color:rgba(255,255,255,.76);max-width:52ch} .pi{flex:0 0 auto;width:22px;height:22px;display:flex;color:#F3B9C7;margin-top:1px} .pi svg{width:100%;height:100%;display:block} /* the look lives in .flowbtn; this only places it */ @media (max-width:1080px){ .usp .uspin{padding:var(--s8) 0} .usph{max-width:20ch} } @media (max-width:720px){ .usp .uspin{padding:var(--s7) 0} .usph{max-width:none} /* full-bleed on a phone read as a layout error */ } /* ---- the hero band: ranged left, and centred against the proof list ---- */ .uspa{text-align:left;align-self:center} .usph,.uspd{margin-left:0;margin-right:0} /* ===================== CATEGORY FRONTS (Semafor-style) ================== */ .csec{border-top:2px solid var(--ink);padding-top:var(--s5);margin-bottom:var(--s14)} .csech{font-family:var(--disp);font-weight:400;font-size:30px;letter-spacing:var(--tr-head); margin:0 0 var(--s6);line-height:1.1} .csband{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr) minmax(0,1fr); gap:0;align-items:start} .cscol{padding:0 var(--s6);min-width:0} .csl{padding-left:0;border-right:1px dotted var(--line)} .csr{padding-right:0;border-left:1px dotted var(--line)} .cslead{padding:0 var(--s6);cursor:pointer;text-align:center;min-width:0} .csleadh{font-family:var(--disp);font-weight:400;font-size:26px;line-height:1.2; margin:0 0 var(--s3);letter-spacing:var(--tr-head)} .csleadd{font-size:var(--fs-sm);line-height:1.55;color:var(--ink-2); margin:0 auto var(--s4);max-width:44ch} .cslead .im{aspect-ratio:16/10} /* the pill row sits 11px under the lead image, whether it is the bare pill (sample stories) or the .ameta wrapper (real articles) — scoped to the direct child so a nested .amsrc does not take the margin a second time */ .cslead > .amsrc,.cslead > .amsrcw{display:flex;width:fit-content;margin:11px auto 0} .cslead > .ameta{justify-content:center;margin-top:11px} .cslead:hover .csleadh{color:var(--accent-ink)} .csitem{display:block;cursor:pointer;padding:var(--s4) 0;border-top:1px dotted var(--line); text-align:left} .csitem:first-child{border-top:0;padding-top:0} .csh{display:block;font-family:var(--disp);font-weight:400;font-size:17px;line-height:1.24; margin-bottom:6px;letter-spacing:var(--tr-snug);transition:color var(--d-2) var(--e-out)} .csd{display:block;font-size:var(--fs-xs);line-height:1.5;color:var(--ink-2)} /* the flanking headlines carry the same pill as their section lead, one step smaller — direct child only, so a pill inside a meta row is spaced by the wrapper rule beside it and never by both */ .csitem > .amsrc,.csitem > .amsrcw{display:inline-flex;max-width:100%;margin-top:var(--s3)} .csitem > .ameta{margin-top:var(--s3)} .csitem:hover .csh{color:var(--accent-ink)} @media (max-width:1080px){ .csband{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)} .csr{grid-column:1 / -1;padding:var(--s5) 0 0;border-left:0; border-top:1px dotted var(--line);margin-top:var(--s5)} } @media (max-width:720px){ .csband{grid-template-columns:1fr} .cscol,.cslead{padding:0} /* Keep the stacked group's divider clearance after the phone reset. .csr alone also names article claim metadata, so scope to story columns. */ .cscol.csr{padding-top:var(--s5)} /* Phone reading order: lead first (order:-1), then the headline columns. The seam rule moves with it — lead carries the divider that used to sit on .csl's bottom edge; .csr keeps its top rule between the two headline groups. */ .csl{border-right:0} .cslead{order:-1;text-align:left;padding-bottom:var(--s5); border-bottom:1px dotted var(--line);margin-bottom:var(--s5)} .csleadd{margin-left:0} .csr{margin-top:var(--s5)} .csech{font-size:25px} } /* --- "Expert Insights": double scale, bold ------------------------ */ .secthead{align-items:flex-end} .secthead .st{font-size:clamp(32px,1.5rem + 2.1vw,52px);font-weight:600; line-height:1.06;letter-spacing:-.022em} .experthead{margin-bottom:var(--s5)} .experthead>span:first-child{min-width:0} .expertsub{display:block;margin-top:var(--s3);max-width:66ch;font-size:var(--fs-sm); line-height:1.55;color:var(--ink-2)} /* Shared flow button: only placement and surface polarity belong here. */ .experthead .flowbtn{ flex:0 0 auto;white-space:nowrap; --fb-ink:var(--ink);--fb-edge:color-mix(in srgb,var(--ink) 55%,transparent); --fb-fill:var(--ink);--fb-on:var(--app); } .experthead ~ .vamob:focus-visible{border-radius:var(--r-full)} .experthead ~ .vamob:hover{background:var(--sunk)} @media (max-width:720px){ .secthead .st{font-size:30px} .experthead{align-items:flex-start} .experthead .va{display:none} } /* ========================= THE PRIMARY INDEX =========================== */ .pindex{border-top:2px solid var(--ink);padding-top:var(--s5);margin-bottom:var(--s14)} .pixgrid{display:grid;grid-template-columns:1fr 1fr;gap:0; border:1px solid var(--line);border-radius:var(--r-im);overflow:hidden; background:var(--card)} /* a row that links to a profile: the anchor takes over the grid + padding so the whole row is the click/focus target */ @media (max-width:900px){ .pixgrid{grid-template-columns:1fr} } /* ---- Primary Index: header row, regular-weight titles, score number ---- */ .secthead .st{font-weight:400} /* the look lives in .flowbtn */ .pixcta{white-space:nowrap} /* a publication row has no second line, so the name centres on the avatar */ /* On a narrow phone the score block and the name compete for the same row. "The Wall Street Journal" is the longest label we carry, so the step below is sized to let it set without an ellipsis. */ /* ============ V104b — BOTH BANDS AS INSET COLOUR BLOCKS ================= */ /* The colour stops at the wrap, not at the viewport, so the paper frames it. */ /* ---- the hero band: flat brand crimson, serif point titles ------------- */ .usp{background:transparent;border-bottom:0} .usp .uspin{background:#AE2448;border-radius:var(--r-im); padding:var(--s10) var(--s8);margin:0} /* the point titles take the display face, matching the headline above them */ .pi{color:rgba(255,255,255,.62);margin-top:0} /* ---- the Primary Index: a gold band holding a cream panel -------------- */ .pindex{background:#E9A93C;border-top:0;border-radius:var(--r-im); padding:var(--s10) var(--s8);margin-bottom:var(--s14)} .pixgrid{border:0;border-radius:var(--r-sm);background:var(--card);overflow:hidden} @media (max-width:1080px){ .usp .uspin{padding:var(--s8) var(--s6)} .pindex{padding:var(--s8) var(--s6)} } @media (max-width:720px){ .usp .uspin{padding:var(--s7) var(--s5)} .pindex{padding:var(--s7) var(--s5)} } /* ---- both bands run edge to edge again; content stays on the wrap ------ */ .usp{background:#AE2448} /* The Expert Insights band is this same banner wearing different copy, so it shares every geometry rule below. Only globe-dependent insets stay on .usp. */ .usp .uspin,.inshero .uspin{background:transparent;border-radius:0;padding:calc(var(--s10) + 10px) 0} /* Full bleed, so the gap below it reads as cream, not gold. The bottom padding runs deeper than the top so the leaderboards are not crowded against the band edge. */ .pindex{background:linear-gradient(90deg,#56001E 0%,#921943 100%);border-radius:0;margin-bottom:var(--s20); padding:var(--s16) 0 var(--s20)} .pindex .wrap{padding-left:var(--s5);padding-right:var(--s5)} @media (max-width:1080px){ .usp .uspin{padding:var(--s8) 0} .pindex{padding:var(--s10) 0} } @media (max-width:720px){ .usp .uspin{padding:var(--s7) 0} .pindex{padding:var(--s8) 0} } /* ============================ V105 — THE GLOBE ========================= */ .usp{position:relative;overflow:hidden} .usp .wrap{position:relative;z-index:2} .usp .uspin{display:block} .uspa{max-width:54ch;align-self:auto} .usph{max-width:16ch} .hglobe{position:absolute;z-index:1;right:-7%;top:50%;transform:translateY(-50%); width:clamp(340px,52vw,720px);aspect-ratio:1/1;display:block; opacity:0;pointer-events:none; transition:opacity 1.2s ease} @media (prefers-reduced-motion:reduce){.hglobe{transition:opacity .2s ease}} @media (max-width:1080px){ .hglobe{right:-18%;width:clamp(300px,60vw,560px);opacity:.85} .uspa{max-width:46ch} } @media (max-width:720px){ /* Keep the globe below the type without making the opening band dominate the phone viewport. The homepage band drops its globe entirely at this width (see the rail block below); this is the About page placement. */ .hglobe{right:-24%;top:auto;bottom:-60%;transform:none; width:min(285px,78vw)} .uspa{max-width:none;position:relative;z-index:2} } /* ======================= V1 — HOMEPAGE PARTNER RAIL ===================== */ /* The rail's caption: one line in the display face above the logo block, readable but quieter than the headline it sits beside. Its height is a known quantity so the centred desktop columns can hold the logo rows on their approved baseline. It ships with the rail, so both hero placements carry the same label. */ .uspb{--uspbcap-h:calc(17px * 1.3 + 34px)} .uspbcap{margin:0 0 34px;padding-left:0;text-align:left;white-space:nowrap; font-family:var(--disp);font-size:17px;font-weight:400;line-height:1.3; letter-spacing:var(--tr-snug);color:rgba(255,255,255,.8)} .usplmask{overflow:hidden;max-width:100%; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)} .uspltrack{display:flex;width:max-content; animation:uspl-left 42s linear infinite;will-change:transform} .uspltrack:hover{animation-play-state:paused} .usplset{display:flex;align-items:center;flex:none;gap:52px;padding-right:52px} .usplset img{height:28px;width:auto;max-width:150px;display:block; object-fit:contain;flex-shrink:0; filter:brightness(0) invert(1);opacity:.62} @keyframes uspl-left{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes uspl-right{from{transform:translateX(-50%)}to{transform:translateX(0)}} /* Caption, row one and row two step down evenly — no lift on the first row. */ .usplmask + .usplmask{margin-top:var(--s12)} @media (min-width:1200px){ .usp .uspin,.inshero .uspin{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.2fr); column-gap:var(--s12);align-items:center; min-height:313px; padding:var(--s6) 0} /* Globe clearance only: the Insights band carries no globe, so it keeps the normal content edge instead of this inset. */ .usp .uspin{padding-left:max(0px,calc(clamp(300px,31vw,446px) / 2 - 26px - max(20px,(100vw - 1200px) / 2)))} .uspa{margin-left:0} /* Offset the caption against the centred rail. Cancelling the caption's own height would pin the logo rows exactly where a label-less rail puts them; the extra step lets the caption lift a little while the rows settle a little lower, which is the labelled-block reading. */ .uspb{min-width:0;align-self:center;margin-top:calc(var(--s1) - var(--uspbcap-h))} .usplmask{max-width:none;width:calc(100% + max(20px,(100vw - 1200px) / 2)); -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 97%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 97%,transparent 100%)} } /* Keep the approved 1440px composition and its full-bleed rail unchanged. */ @media (min-width:1440px){ .usp .uspin{padding-left:180px} .usp .uspa{margin-left:-100px} } @media (min-width:721px){ .hglobe{right:auto;left:calc(50% - 50vw); transform:translate(calc(-50% - 58px),-50%); width:clamp(300px,31vw,446px);opacity:.9} } @media (min-width:721px) and (max-width:1199px){ /* Both text and marquees start 32px beyond the globe's visible edge. */ .usp .wrap{max-width:none; padding-left:calc(clamp(300px,31vw,446px) / 2 - 26px)} .usp .uspin,.inshero .uspin{padding:var(--s8) 0} .usp .uspa{margin-left:0;max-width:56ch} .usp .usph{max-width:22ch} } @media (max-width:1199px){ .usp .uspin,.inshero .uspin{display:block} .uspb{min-width:0;margin-top:var(--s7)} .usplmask{max-width:100%;width:100%;margin-left:0} .usplset img{height:22px;max-width:110px} .usplset{gap:36px;padding-right:36px} /* One loop travels one logo set, and the smaller marks and gaps shorten the set (row one: 1053px at desktop, 783px here, 723px on phones). The loop shortens in the same proportion, so each row keeps its desktop on-screen speed of about 25 and 23px/s: 42s × 783/1053 ≈ 31.2s. */ .uspltrack{animation-duration:31.2s} .usplmask + .usplmask{margin-top:var(--s6)} .uspbcap{margin-bottom:22px;font-size:16px;white-space:normal} } @media (max-width:720px){ /* On phones the band is type only. The globe is hidden in the stylesheet rather than by the renderer, so no fragment can paint before globe.js runs, and it is scoped to .usp so the About page globe is untouched. With the decoration gone the decorative shelf goes too: the bottom padding closes up level with the top. */ .usp .uspin{padding:var(--s7) 0} .usp .hglobe{display:none} .uspa,.uspb{position:relative;z-index:2} .usp .usph{font-size:clamp(26px,5.5vw,34px);max-width:22ch;line-height:1.12} .usp .uspd{font-size:13px;line-height:1.55} .usplset img{height:22px;max-width:110px} .usplset{gap:26px;padding-right:26px} /* Desktop speed again, for the narrower gaps: 42s × 723/1053 ≈ 28.6s. */ .uspltrack{animation-duration:28.6s} .usplmask + .usplmask{margin-top:var(--s5)} /* The height the globe's shelf gives back is spent here: the rail opens with a real gap under the description, twice the caption's own gap above the logo rows, so the label reads as belonging to the block below it rather than running on from the paragraph above. Left on the shared rail rule deliberately — the Insights band wears the same rail and its label was equally flush; one set of declarations keeps the two from drifting. */ .uspb{margin-top:var(--s8)} .uspbcap{margin-bottom:16px;font-size:15px} } @media (prefers-reduced-motion:reduce){ .uspltrack{animation:none} } /* ================================ ABOUT ================================ One page ground throughout: no dividers between chapters and no alternating tints. Colour lands exactly three times — the crimson hero, the dark code panel in chapter 07 and the closing deep band. Everywhere else crimson survives only as a small mark: the square in a label pill, the principle icons, the rule above the pull quote. The page carries its own corner radii. --r-im (5px) is the site-wide near-square image corner and is not repointed here. */ .abhero,.abmain,.abclose{--ab-r:12px;--ab-r-sm:9px} /* ---- hero -------------------------------------------------------------- */ /* The band continues the masthead rather than carrying its own colour: same maroon as the header and the front-page banner, one hairline where it meets the nav row and no separate bottom rule. It holds in either theme, as the masthead does. */ /* --ab-globe is how far the globe reaches up into the band. The bottom padding is derived from it, so the standfirst always clears the crest by the gap term no matter how the band is sized. */ .abhero{position:relative;overflow:hidden;background:var(--mast);color:var(--mast-ink); border-top:1px solid var(--mast-line);border-bottom:0; --ab-globe:168px; padding:clamp(44px,5vw,76px) 0 calc(var(--ab-globe) + clamp(28px,4vw,56px))} .abheroin{position:relative;z-index:2;text-align:center} .abhh{margin:0 auto var(--s7);font-family:var(--disp);font-weight:400; font-size:clamp(34px,1.7rem + 3vw,68px);line-height:1.04;letter-spacing:-.026em; max-width:26ch} .abhp{margin:0 auto;font-size:var(--fs-md);line-height:1.62; color:rgba(255,255,255,.84);max-width:58ch} /* The globe hangs off the foot of the band, so it is placed from the band's own height with `top`. A percentage `bottom` resolves against the hero while the globe is sized from viewport width, and at desktop the two drift apart until it climbs up behind the standfirst. The canvas sets its own inline opacity once it has drawn, which outranks the rule below. */ .abglobe{position:absolute;z-index:1;top:calc(100% - var(--ab-globe));left:50%; transform:translateX(-50%);width:min(900px,104vw);aspect-ratio:1/1;display:block; opacity:0;pointer-events:none;transition:opacity 1.2s ease} /* ---- the two rooms ----------------------------------------------------- */ /* The page is two environments rather than one column of like-sized chapters: room one pins a stage and advances its panes as the reader scrolls, room two stands still and lays its material out as a bento. Both open on a bare line of type instead of a label. */ .abmain{display:block} .abroom{position:relative} .abroomline{margin:0 auto;max-width:60ch;text-align:center;font-family:var(--disp); font-weight:400;font-size:clamp(24px,1.2rem + 1.6vw,40px);line-height:1.16; letter-spacing:var(--tr-head);color:var(--ink)} .abh{margin:0 0 var(--s6);font-family:var(--disp);font-weight:400; font-size:clamp(28px,1.4rem + 2.1vw,54px);line-height:1.08;letter-spacing:-.022em; max-width:24ch} .abp{margin:0;font-size:var(--fs-md);line-height:1.68;color:var(--ink-2); max-width:58ch} .abp + .abp{margin-top:var(--s4)} /* ---- room one: the pinned stage ---------------------------------------- */ /* --ab-pin is the single source of truth for whether the stage pins: the breakpoint and the reduced-motion opt-out below flip it to 0 and app.js reads it back, so the switch is not written down twice. Three panes, so the section runs three viewports tall and each pane owns one of them. */ .abroom1{--ab-pin:1;height:calc(3 * 100vh)} .abstage{position:sticky;top:var(--hd-h);height:calc(100vh - var(--hd-h)); height:calc(100svh - var(--hd-h));display:flex;align-items:center;overflow:hidden} .abstagein{width:100%} .abtabs{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(10px,2.2vw,32px); margin:clamp(22px,3vw,40px) 0 clamp(26px,4vw,54px)} .abtab{appearance:none;background:none;border:0;border-bottom:2px solid transparent; padding:var(--s2) 0;font:inherit;font-size:var(--fs-sm);color:var(--ink-3); cursor:pointer;transition:color .25s ease,border-color .25s ease} .abtab:hover{color:var(--ink-2)} .abtab.on{color:var(--ink);border-bottom-color:var(--accent)} .abpanes{position:relative} .abpane{display:grid;gap:clamp(22px,3.5vw,60px);align-items:center; scroll-margin-top:calc(var(--hd-h) + 20px); opacity:0;visibility:hidden;transform:translateY(14px); transition:opacity .45s ease,transform .45s ease} .abpane:not(.on){position:absolute;inset:0} .abpane.on{position:relative;opacity:1;visibility:visible;transform:none} .abpl,.abpr{min-width:0} /* one pane is bare type, one sets its quote beside the prose, one runs the flow full width under a two-column head */ .abpsolo{grid-template-columns:minmax(0,1fr);max-width:62ch;margin:0 auto;text-align:center} .abpsolo .abh,.abpsolo .abp{margin-left:auto;margin-right:auto} .abpsplit{grid-template-columns:minmax(0,5fr) minmax(0,7fr)} .abpwide{grid-template-columns:minmax(0,1fr)} .abpwide .abpl{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(24px,4vw,56px);align-items:end} .abpwide .abh{margin-bottom:0} .abstage .abh{font-size:clamp(26px,1.1rem + 1.7vw,44px)} /* the quote sets with the prose here, not centred on the page */ .abpr .abquote{margin:0;max-width:26ch;padding-top:var(--s8)} .abpr .abquote::before{left:0;transform:none} /* the stage pins at every width now, so the flow keeps its three tracks wherever the stage is pinned: it has exactly one screen to work with */ .abroom1:not(.abstack) .abflow{grid-template-columns:repeat(3,minmax(0,1fr))} .abroom1:not(.abstack) .abstep{padding:var(--s5)} /* pane internals go single-column on narrow screens in either mode */ @media (max-width:880px){ .abpsolo,.abpsplit,.abpwide{grid-template-columns:minmax(0,1fr); max-width:none;margin:0;text-align:left} .abpsolo .abh,.abpsolo .abp{margin-left:0;margin-right:0} .abpwide .abpl{grid-template-columns:minmax(0,1fr);gap:var(--s5)} .abpwide .abh{margin-bottom:var(--s6)} } /* the compact register the pinned stage needs to fit a phone screen; the flow becomes a snap carousel so three cards never stack vertically */ @media (max-width:720px){ .abroom1:not(.abstack) .abroomline{font-size:clamp(17px,4.8vw,22px)} .abroom1:not(.abstack) .abtabs{margin:var(--s4) 0 var(--s5)} .abroom1:not(.abstack) .abstage .abh{font-size:clamp(20px,5.6vw,26px)} .abroom1:not(.abstack) .abstage .abp{font-size:var(--fs-sm);line-height:1.6} .abroom1:not(.abstack) .abpane{gap:var(--s5)} .abroom1:not(.abstack) .abpr .abquote{padding-top:var(--s6); font-size:clamp(20px,5.8vw,26px)} .abroom1:not(.abstack) .abflow{grid-template-columns:none; grid-auto-flow:column;grid-auto-columns:min(300px,82vw);gap:var(--s3); overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s2)} .abroom1:not(.abstack) .abstep{scroll-snap-align:center;padding:var(--s4) var(--s5)} } /* one measuring frame: every pane in flow so the controller can read the natural heights and decide whether the stage can pin */ .abroom1.abmeasure .abpane{position:relative;inset:auto} /* the stacked fallback. The controller applies it when the tallest pane cannot fit one screen — short landscape viewports, mostly — and when motion is unwelcome. It owns --ab-pin so the controller and the layout cannot disagree. */ .abroom1.abstack{--ab-pin:0;height:auto;padding:clamp(56px,8vw,96px) 0} .abstack .abstage{position:static;display:block;height:auto;overflow:visible} .abstack .abpanes{display:grid;gap:clamp(52px,9vw,88px)} .abstack .abpane,.abstack .abpane:not(.on){position:relative;inset:auto; opacity:1;visibility:visible;transform:none} /* ---- the pull quote: type, not a card ---------------------------------- */ .abquote{position:relative;margin:0 auto;padding:var(--s10) 0 0;max-width:34ch; font-family:var(--disp);font-weight:400;font-size:clamp(24px,1.2rem + 1.7vw,42px); line-height:1.16;letter-spacing:-.018em;color:var(--ink)} .abquote::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%); width:52px;height:2px;background:var(--accent)} /* ---- the source-to-story flow ---------------------------------------- */ .abflow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)} .abstep{display:flex;flex-direction:column;text-align:left;padding:var(--s6); background:var(--card);border:1px solid var(--line-3);border-radius:var(--ab-r); transition:border-color var(--d-2) var(--e-out)} .abstep:hover{border-color:var(--line-2)} .abstepn{font-size:var(--fs-2xs);font-weight:700;color:var(--ink-4); font-variant-numeric:tabular-nums;letter-spacing:.08em;margin-bottom:var(--s5)} .absteph{font-family:var(--disp);font-weight:400;font-size:19px;line-height:1.25; margin:var(--s5) 0 var(--s2)} .abstepp{margin:0;font-size:var(--fs-xs);line-height:1.6;color:var(--ink-2)} /* miniatures of the real surfaces; they sit sunk into the step card */ .fx{background:var(--page);border:1px solid var(--line-3);border-radius:var(--ab-r-sm); padding:var(--s4);min-height:104px;display:flex;flex-direction:column;justify-content:center} .fxrow{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3);flex-wrap:wrap} .fxrow .srcbadge{width:22px;height:22px;font-size:9px;border-width:2px;margin-left:0} .fxo{font-size:var(--fs-xs);font-weight:700;color:var(--ink)} .fxk{font-size:var(--fs-3xs);font-weight:700;border-radius:var(--r-full);padding:3px 8px; background:var(--t3-bg);color:var(--t3-ink);white-space:nowrap} .fxt{font-size:var(--fs-sm);line-height:1.4;color:var(--ink)} .fxd{font-size:var(--fs-2xs);color:var(--ink-3);margin-top:var(--s2)} .fxp{margin:0;font-size:var(--fs-sm);line-height:1.55; text-decoration-line:underline;text-decoration-thickness:1.5px;text-underline-offset:4px; text-decoration-color:color-mix(in srgb,var(--ink-4) 70%,transparent)} .fxrefrow{display:flex;gap:var(--s3);align-items:flex-start} .fxn{flex:0 0 auto;font-size:var(--fs-xs);font-weight:700;color:var(--ink-3); font-variant-numeric:tabular-nums} .fxlink{display:block;font-size:var(--fs-2xs);font-weight:700;color:var(--accent-ink); margin-top:4px} /* ---- principles: six equal compact cards ------------------------------ */ /* three across, so the six principles land as a clean 3x2 */ .ablist{list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)} .ablist li{position:relative;display:flex;align-items:center;gap:var(--s4);text-align:left; padding:var(--s5) var(--s6);background:var(--card);border:1px solid var(--line-3); border-radius:var(--ab-r);transition:border-color var(--d-2) var(--e-out)} .ablist li:hover{border-color:var(--line-2)} .abi{flex:0 0 auto;width:26px;height:26px;color:var(--accent);display:flex} .abi svg{width:100%;height:100%;display:block} .abt{flex:1;min-width:0;font-family:var(--disp);font-weight:400;font-size:19px; line-height:1.24;letter-spacing:var(--tr-snug);padding-right:var(--s6)} .abln{position:absolute;top:50%;right:var(--s6);transform:translateY(-50%); font-size:var(--fs-2xs);font-weight:700;color:var(--ink-4); font-variant-numeric:tabular-nums;letter-spacing:.08em} /* ---- the closing band -------------------------------------------------- */ .abclose{background:var(--deep);padding:clamp(76px,9vw,140px) 0;text-align:center} .abch{margin:0 auto var(--s6);font-family:var(--disp);font-weight:400; font-size:clamp(30px,1.5rem + 2.4vw,58px);line-height:1.06;letter-spacing:-.026em; max-width:24ch;color:#fff} .abcp{margin:0 auto;font-size:var(--fs-md);line-height:1.62; color:rgba(255,255,255,.78);max-width:58ch} /* the look lives in .flowbtn; the deep band takes the light polarity. Scoped to .abclose so it outranks .flowbtn's own defaults — a bare .abcta ties on specificity and loses on order. */ .abclose .abcta,.abclose .abcta2{--fb-ink:#FFF8E6;--fb-edge:rgba(255,248,230,.42); --fb-fill:#FFF8E6;--fb-on:var(--deep)} /* a.uspcta outranks .flowbtn, so it must not re-declare display */ @media (max-width:1000px){ .ablist{grid-template-columns:repeat(2,minmax(0,1fr))} .abflow{grid-template-columns:minmax(0,1fr)} } @media (max-width:720px){ .abhero{--ab-globe:66px; padding:var(--s12) 0 calc(var(--ab-globe) + clamp(24px,6vw,44px))} .abglobe{width:min(520px,118vw)} .ablist{grid-template-columns:minmax(0,1fr)} .abstep{padding:var(--s5)} } /* ================================ SEARCH =============================== */ .searchbtn{width:34px;height:34px;border-radius:var(--r-full);background:transparent;border:0; display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-2); padding:0;margin-left:var(--s1); transition:background var(--d-2) var(--e-out),color var(--d-2) var(--e-out)} .searchbtn:hover{background:var(--sunk);color:var(--ink)} .searchbtn[aria-expanded="true"]{background:var(--ink);color:var(--app)} .searchpanel{position:sticky;top:0;z-index:19;background:var(--app); border-bottom:1px solid var(--line); box-shadow:0 14px 30px -22px rgba(19,16,17,.5)} .searchpanel[hidden]{display:none} .searchpanel .wrap{padding-top:var(--s5);padding-bottom:var(--s5)} .searchbar{display:flex;align-items:center;gap:var(--s3);border-bottom:2px solid var(--ink); padding-bottom:var(--s3);color:var(--ink-3)} .searchbar svg{flex:0 0 auto;display:block} .searchbar input{flex:1;min-width:0;border:0;background:transparent;outline:none; font-family:var(--disp);font-weight:400;font-size:clamp(20px,1rem + 1.2vw,30px); line-height:1.2;color:var(--ink);padding:0} .searchbar input::placeholder{color:var(--ink-4)} .searchbar input::-webkit-search-cancel-button{display:none} .searchx{flex:0 0 auto;background:transparent;border:0;font-size:24px;line-height:1; color:var(--ink-3);cursor:pointer;padding:0 var(--s2)} .searchx:hover{color:var(--ink)} .searchres{margin-top:var(--s2);max-height:min(52vh,460px);overflow-y:auto} .searchhit{display:block;width:100%;text-align:left;background:transparent;border:0; border-bottom:1px solid var(--line-2);padding:var(--s4) 0;cursor:pointer;font-family:inherit; transition:background var(--d-2) var(--e-out)} .searchhit:hover,.searchhit.on{background:color-mix(in srgb,var(--sunk) 60%,transparent)} .shk{display:block;font-size:var(--fs-3xs);font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--accent-ink);margin-bottom:5px} .shh{display:block;font-family:var(--disp);font-weight:400;font-size:19px;line-height:1.25; letter-spacing:var(--tr-snug);color:var(--ink)} .shm{display:block;font-size:var(--fs-2xs);color:var(--ink-3);margin-top:5px} .searchnone{margin:var(--s5) 0;font-size:var(--fs-sm);color:var(--ink-2)} /* the masthead hides the compact bar at rest; searching needs it back */ body.searching .hd{opacity:1!important;pointer-events:auto!important} @media (max-width:720px){ .searchpanel .wrap{padding-top:var(--s4);padding-bottom:var(--s4)} .searchbar input{font-size:19px} .shh{font-size:17px} } /* source cards are a reading aid, not a control — the only thing they used to open was the contribution sheet */ .clcard{cursor:default} .clcard:hover,.clcard.lit{box-shadow:none!important;transform:none!important} .clcard.lit .cqt,.cl.lit{color:var(--accent-ink)} /* Blue means one thing: the sentence is carried by commentary alone, so its marker is the "contributed" tag. A sentence showing citation numbers — even one a contributor also commented on — keeps the ordinary document styling; its contribution stays discoverable through the history block. */ .art:not(.plain) .cl.contribution{ color:inherit;text-decoration-color:var(--t3-ln); } .art:not(.plain) .cl.contribution:hover, .art:not(.plain) .cl.contribution.lit{ color:inherit;background:var(--t3-bg);text-decoration-color:var(--t3); } @keyframes contributionHit{ 0%,100%{box-shadow:none;background:transparent} 14%,52%{box-shadow:0 0 0 3px var(--t3-bg);background:var(--t3-bg)} } .art:not(.plain) .cl.contribution.hit{animation-name:contributionHit} .art.plain .cl.contribution{color:inherit;box-shadow:none;animation:none} /* flat card, so the highlight is the whole surface: the full edge in the accent and the faintest accent wash, not a tinted band */ .clcard.lit{border-color:var(--accent)!important;background:var(--accent-soft)} /* a contributed or corrected source is told apart by its wording and weight — the card carries no second hue now that it is one surface */ .clcard .csr.contrib,.clcard .csr.corr{color:var(--ink-3);font-weight:700} /* ── the contributor's card ────────────────────────────────────────────── The sentence and the card beside it are one pair, so they speak in one colour: a card standing behind a contributed sentence takes the same blue the sentence's underline, tint and tag already use — kind label, number chip, the added-on line, and the whole lit surface. Cards behind documents keep the accent exactly as they were. */ .clcard.contribution .ckl{color:var(--t3-ink)} .clcard.contribution .cnum{background:var(--t3-bg);color:var(--t3-ink)} .clcard.contribution .csr.contrib,.clcard.contribution .csr b{color:var(--t3-ink)} .clcard.contribution.lit{border-color:var(--t3)!important;background:var(--t3-bg)} .clcard.contribution.lit .cqt{color:var(--t3-ink)} /* ============ SECTION BAR + SEARCH, ANCHORED TO THE HEADER ============= */ /* One source of truth for the compact bar's height — the section bar and the search panel both hang off it. */ :root{--hd-h:62px} @media (max-width:720px){:root{--hd-h:56px}} /* NYT pattern: once the masthead has scrolled away, the sections stay with the compact bar instead of leaving it stranded on its own. */ .catrow{position:sticky;top:var(--hd-h);z-index:19; transition:transform var(--d-4) var(--e-glide)} .catrow.stuck{box-shadow:none;border-bottom-color:var(--line)} /* the panel hangs under the bar rather than joining the scroll flow, where it used to stick and leave its rule floating mid-page */ /* Stacking order matters here: the panel is a dropdown, so it must cover the section bar (19) while staying under the header (22) it hangs from. At 18 the section bar painted straight through the results. */ .searchpanel{position:fixed;left:0;right:0;top:var(--hd-h);bottom:auto;z-index:21; box-shadow:0 18px 34px -24px rgba(19,16,17,.55)} /* a long result list must never run past the viewport */ .searchpanel .searchres{max-height:calc(100vh - var(--hd-h) - 190px)} /* ---- the Index's own claims, four across -------------------------------- */ .pixusp{list-style:none;margin:0 0 var(--s14);padding:0; display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s8)} .pixusp li{padding:0;min-width:0} .put{display:block;font-family:var(--disp);font-weight:400;font-size:18.5px;line-height:1.25; letter-spacing:var(--tr-snug);color:var(--ink);margin-bottom:var(--s2)} @media (max-width:1080px){ .pixusp{grid-template-columns:repeat(2,1fr);gap:var(--s7)} } @media (max-width:720px){ .pixusp{grid-template-columns:1fr;gap:var(--s6)} } /* ---- Index layout: the CTA sits beside the heading on desktop and after the rankings on a phone, without being rendered twice --------------- */ /* The CTA sits under the description on its own row rather than riding alongside the heading, and the description runs in two columns. */ .pindex .wrap{display:grid;grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "desc" "cta" "usp" "grid";align-items:start} .pindex .pixcta{grid-area:cta;justify-self:start;margin:var(--s8) 0 var(--s16)} /* Two unequal measures, set against the USP grid below: 584 + 32 = 616 is exactly two USP columns, so the second paragraph starts on the third USP column. The widths are what the copy needs — 584 keeps the opening paragraph at three lines, 495 breaks the second after "evidence, and". Equal tracks cannot do both. .pixs also carries a 56px bottom margin from the article-page rules, which stacked with the button's own top margin. */ .pindex .pixusp{grid-area:usp} .pindex .pixgrid{grid-area:grid} @media (max-width:720px){ /* the button reads as the end of the description, not a footnote to the leaderboards, so it keeps the desktop position */ .pindex .wrap{grid-template-columns:1fr; grid-template-areas:"head" "desc" "cta" "usp" "grid";row-gap:0} .pindex .pixcta{justify-self:start;margin:var(--s6) 0 var(--s10)} } /* ---- the closing statement's methodology link -------------------------- */ /* the look lives in .flowbtn; this only places it */ .synthcta{margin-top:var(--s6)} /* On the gold band the polarity flips: dark outline at rest, flooding to dark ink with the band's own cream as the label. */ .pindex .pixcta{--fb-ink:var(--ink);--fb-edge:rgba(19,16,17,.4); --fb-fill:var(--ink);--fb-on:#FFF8E6} /* ---- the Index band is always gold, whatever the theme ------------------ Rebinding the tokens here keeps every descendant rule intact rather than overriding each colour one at a time. */ .pindex{--ink:#FFFFFF;--ink-2:rgba(255,255,255,.86);--ink-3:rgba(255,255,255,.72); --ink-4:rgba(255,255,255,.58);--card:rgba(255,255,255,.07);--raised:rgba(255,255,255,.07); --app:#6B0F2C;--line:rgba(255,255,255,.22);--line-2:rgba(255,255,255,.16); --line-3:rgba(255,255,255,.10);--accent-ink:#FFC9D8;--deep:#FFFFFF} /* ============================ ABOUT: consolidated ======================== The page carries both halves of the product, so it needs an act divider, a team block and a two-button close. */ /* ---- room two: the standing bento -------------------------------------- */ /* Six tracks, and the cells take different widths so no two read the same way. Only the two prose cells are panelled: the rest already carry their own cards, and panelling those as well would box a box. */ .abroom2{padding:clamp(72px,9vw,140px) 0 clamp(64px,8vw,120px)} .abbento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(16px,2vw,28px);margin-top:clamp(40px,5vw,76px);align-items:stretch} .abcell{display:flex;flex-direction:column;min-width:0;grid-column:span 6} .abtint{background:var(--card);border:1px solid var(--line-3); border-radius:var(--ab-r);padding:clamp(24px,3vw,46px)} .abbelief{grid-column:span 2;justify-content:center} .abindex{grid-column:span 4} .abwho{grid-column:span 6;margin-top:clamp(16px,2vw,28px)} .abroom2 .abh{font-size:clamp(23px,1rem + 1.05vw,33px);max-width:22ch} .abbelief .abh{font-size:clamp(25px,1.05rem + 1.5vw,40px);max-width:16ch} .abroom2 .abp{max-width:62ch} .abbelief .abp{font-size:var(--fs-sm)} .abcell .abflow,.abcell .ablist,.abcell .abteam{ margin-top:clamp(24px,3vw,42px)} /* the principles keep their pre-bento shape: a full-width centred chapter with the six equal compact cards on the .ablist base grid (3x2, then 2x3, then a single column — the base responsive rules above still apply) */ .abprin{grid-column:span 6;text-align:center;padding:clamp(24px,3.5vw,56px) 0} .abprin .abh{font-size:clamp(28px,1.4rem + 2.1vw,54px);max-width:24ch;margin-inline:auto} .abprin .ablist{margin-top:clamp(40px,5vw,68px)} .abindex .abixcta{align-self:flex-start} @media (max-width:1000px){ .abbelief,.abindex{grid-column:span 6} .abbelief .abh{max-width:22ch} } @media (max-width:720px){ .abtint{padding:var(--s5)} } /* ---- the Index call to action, inside chapter 05 ---------------------- */ .abixcta{display:inline-block;margin-top:var(--s7);background:var(--ink);color:var(--app); border:0;border-radius:var(--r-full);padding:var(--s4) var(--s7);font-family:inherit; font-size:var(--fs-sm);font-weight:700;cursor:pointer; transition:transform var(--d-1) var(--e-out),opacity var(--d-2) var(--e-out)} .abixcta:hover{opacity:.88} .abixcta:active{transform:scale(.97)} /* ---- team: portrait-led cards ----------------------------------------- */ .abteam{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)} .abmem{overflow:hidden;text-align:left;border:1px solid var(--line-3); border-radius:var(--ab-r);background:var(--card); transition:border-color var(--d-2) var(--e-out)} .abmem:hover{border-color:var(--line-2)} /* the photo bleeds to the card edges, so it drops .im's own corner and lift */ /* the deep green plate is a property, not a hard background, so .imtr (or the client's inline equivalent) neutralises it for a cut-out portrait */ .abshot{aspect-ratio:5/4;border-radius:0;box-shadow:none;--im-plate:#14312B; border-bottom:1px solid var(--line-3)} .abshot::after{display:none} .abshot{--im-pos:56% 24%} .abmemh{padding:var(--s6) var(--s6) var(--s5);border-bottom:1px solid var(--line-3)} /* a card with no bullet block ends at the header: no dangling divider, and the bottom padding matches the sides so the card still reads as finished */ .abmemh:last-child{padding-bottom:var(--s6);border-bottom:0} /* the initials are the fallback; a loaded portrait replaces them */ .abmem:has(.abshot) .abmono{display:none} .abmono{display:grid;place-items:center;width:40px;height:40px;margin-bottom:var(--s4); border-radius:var(--r-full);background:var(--accent-soft);border:1px solid var(--accent-line); color:var(--accent-ink);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.06em} .abmemn{display:block;font-family:var(--disp);font-size:var(--fs-xl);font-weight:400; color:var(--ink);line-height:1.18;letter-spacing:var(--tr-snug)} /* --ink-3, not --ink-4: the role is real information, and the faintest ink does not lift in dark mode the way the chapter eyebrows do */ .abrole{display:block;margin-top:5px;font-size:var(--fs-3xs);font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)} .abbul{list-style:none;margin:0;padding:var(--s5) var(--s6) var(--s6);display:grid;gap:var(--s3)} .abbul li{position:relative;padding-left:var(--s5);font-size:var(--fs-sm); line-height:1.55;color:var(--ink-3)} .abbul li::before{content:"";position:absolute;left:0;top:.66em;width:4px;height:4px; border-radius:var(--r-full);background:var(--ink-4)} /* ---- the close now offers both halves --------------------------------- */ .abctas{display:flex;gap:var(--s4);flex-wrap:wrap;justify-content:center; margin-top:var(--s10)} @media (max-width:860px){ .abteam{grid-template-columns:minmax(0,1fr);gap:var(--s4)} } @media (max-width:560px){ .abctas{flex-direction:column} .abctas > *{width:100%;text-align:center} } /* ============================== FLOW BUTTON ============================== Outline at rest, flooded at hover. Three moving parts, each on its own curve: the arrow overshoots in from the left, the label slides right to make room, and a white disc scales out from the centre to fill the pill. No arrow is drawn at rest — it lives outside the clip until hover. */ .flowbtn{--fb-ink:#fff; /* label + arrow at rest */ --fb-edge:rgba(255,255,255,.55); /* the outline */ --fb-fill:#fff; /* the disc that floods in */ --fb-on:var(--deep); /* label + arrow once flooded */ position:relative;display:inline-flex;align-items:center; overflow:hidden;isolation:isolate; border:1.5px solid var(--fb-edge);border-radius:var(--r-full); background:transparent;color:var(--fb-ink); padding:12px 30px;font-family:inherit;font-size:var(--fs-sm);font-weight:700; line-height:1.2;text-decoration:none;cursor:pointer; /* These four timings are the reference component's own, kept literal rather than mapped onto our motion scale — the scale tops out at 620ms and the interaction depends on the shell settling before the parts do. */ transition:color 600ms cubic-bezier(.23,1,.32,1), border-color 600ms cubic-bezier(.23,1,.32,1), border-radius 600ms cubic-bezier(.23,1,.32,1), transform var(--d-1) var(--e-out)} .flowbtn:hover{color:var(--fb-on);border-color:transparent;border-radius:12px} .flowbtn:active{transform:scale(.95)} /* the arrow waits outside the clip; the spring curve gives it the overshoot */ .fb-arr{position:absolute;left:-25%;width:16px;height:16px;z-index:2; pointer-events:none; transition:left 800ms cubic-bezier(.34,1.56,.64,1)} .flowbtn:hover .fb-arr{left:14px} /* the label carries the colour change through currentColor */ .fb-t{position:relative;z-index:2;pointer-events:none; transition:transform 800ms ease-out} .flowbtn:hover .fb-t{transform:translateX(12px)} /* The disc must reach the far corner, not just the edges. Our widest button is 207px x 43px — a 211px diagonal — so the reference's 220px left only 4px of margin. 280px keeps the same overshoot ratio the reference had. */ .fb-c{position:absolute;top:50%;left:50%;width:16px;height:16px;z-index:1; margin:-8px 0 0 -8px;border-radius:var(--r-full);background:var(--fb-fill);opacity:0; pointer-events:none; transition:width 800ms cubic-bezier(.19,1,.22,1),height 800ms cubic-bezier(.19,1,.22,1), margin 800ms cubic-bezier(.19,1,.22,1),opacity 800ms cubic-bezier(.19,1,.22,1)} .flowbtn:hover .fb-c{width:280px;height:280px;margin:-140px 0 0 -140px;opacity:1} /* A touch screen cannot hover, so the button simply stays in its resting state there: outlined, unfilled, no arrow. Filling it by default made the button look like a different component on a phone. */ /* ---------------------- headline highlight on hover -------------------- Keep this last in the stylesheet. box-decoration-break:clone gives each wrapped line its own background, so the tint hugs the text rather than filling the block; wrapTitles() supplies the inline span it needs. */ :root{--hl:rgba(174,36,72,.15)} :root[data-theme="dark"]{--hl:rgba(233,88,124,.20)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--hl:rgba(233,88,124,.20)} } .hl{display:inline; background-image:linear-gradient(var(--hl),var(--hl)); background-repeat:no-repeat;background-size:0% 100%; -webkit-box-decoration-break:clone;box-decoration-break:clone; padding:.04em .1em;margin:0 -.1em; transition:background-size var(--d-4) var(--e-out)} /* on the crimson band the tint has to be light, not darker still */ .usp .hl,.abhero .hl{--hl:rgba(255,255,255,.18)} .lead2:hover .hl,.sart:hover .hl,.mini:hover .hl,.card:hover .hl,.nbfeat:hover .hl,.nbcard:hover .hl,.blead:hover .hl,.lcitem:hover .hl,.csitem:hover .hl,.cslead:hover .hl,.rail:hover .hl,.tcrow:hover .hl,.latest .big:hover .hl,.edchoice:hover .hl,a:hover > .hl,button:hover > .hl{background-size:100% 100%} @media (prefers-reduced-motion:reduce){.hl{transition:none}} /* the Index band now sits on crimson, so its button matches the hero's */ .pindex .pixcta{--fb-ink:#fff;--fb-edge:rgba(255,255,255,.55); --fb-fill:#fff;--fb-on:#6B0F2C} /* the Index leaderboard on the crimson ground */ .pindex .pixgrid{background:rgba(0,0,0,.20);border:1px solid rgba(255,255,255,.16)} /* ======================================================== EXPERT INSIGHTS === #/insights — the editorial home for expert-strengthened stories. Built from the system's existing grammar rather than new invention: the About page's crimson band, the rail row, the home card grid, .secthead, and the fxk pill. Every size, space and colour comes from the token scale. ============================================================================*/ /* ---- hero: the homepage banner wearing the Insights copy --------------- Text-only composition, independent of the homepage's globe geometry. */ .inshero{background:var(--mast);color:#fff; border-top:1px solid var(--mast-line);border-bottom:0; position:relative;overflow:hidden} .inshero .wrap{position:relative;z-index:2} .inshero .uspin{display:block;min-height:0;padding:var(--s12) 0} .inshero .insintro{min-width:0} .inshh{margin:0 0 var(--s5);font-family:var(--disp);font-weight:400; font-size:clamp(32px,1.6rem + 2.4vw,56px);line-height:1.08; letter-spacing:var(--tr-tight)} .inslede{margin:0;font-size:var(--fs-md);line-height:1.6; color:rgba(255,255,255,.8);max-width:52ch} @media (max-width:720px){ /* The homepage keeps a deep bottom padding here as a shelf for the globe. There is no globe on this page, so the band closes on its own rhythm. */ .inshero .uspin{padding:var(--s8) 0} } /* Only the Insights listing uses enclosed, equal-row cards. Shared image markup retains its intrinsic dimensions everywhere else. */ .insgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:0;margin-bottom:var(--s12);border-top:1px solid var(--line); border-left:1px solid var(--line)} .insgrid .inscard{display:flex;flex-direction:column;min-width:0; padding:var(--s5);border:0;border-right:1px solid var(--line); border-bottom:1px solid var(--line);border-radius:0;overflow:visible} .insgrid .inscard .im{flex:none;width:100%;height:auto;aspect-ratio:16/10; margin:0 0 var(--s4)} .insgrid .inscard .im > .imratio{display:none} .insgrid .inscard .im img{width:100%;height:100%;object-fit:var(--im-fit,cover)} .inscardmeta{display:flex;align-items:center;justify-content:space-between; flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s3)} .insgrid .inscard .kk{margin:0;padding:3px var(--s2);border:1px solid var(--line); border-radius:var(--r-full);font-size:var(--fs-3xs);line-height:1.2} .inscardmeta .amt{font-size:var(--fs-3xs);color:var(--ink-3);white-space:nowrap} .insgrid .inscard h2,.insgrid .inscard .dek{display:block;overflow:visible; -webkit-line-clamp:unset;line-clamp:unset;max-height:none;overflow-wrap:anywhere} .inscardfoot{margin-top:auto;padding-top:var(--s4);min-height:48px; display:flex;align-items:flex-end} .inscardfoot .amsrc{margin:0} @media (max-width:1080px){.insgrid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:600px){ .insgrid{grid-template-columns:minmax(0,1fr)} .insgrid .inscard{padding:var(--s5)} } /* ---- editorial modules: two rail columns, each under its own rule ----- */ .insmods{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s10) var(--s8); padding:var(--s12) 0 var(--s10)} .insmod{min-width:0} .insmod:only-child{grid-column:1 / -1} .insmodh{padding-bottom:var(--s4);border-bottom:1px solid var(--line); margin-bottom:var(--s2)} .insmodh .t{display:block;font-family:var(--disp);font-weight:300; font-size:var(--fs-xl);letter-spacing:var(--tr-head);color:var(--ink)} .insmodh .q{display:block;margin-top:var(--s1);font-size:var(--fs-2xs);color:var(--ink-3)} @media (max-width:1080px){.insmods{grid-template-columns:1fr;gap:var(--s8); padding:var(--s10) 0 var(--s8)}} /* ---- feed: home-card grammar plus one evolution line ------------------ */ .insfeed{border-top:1px solid var(--line-2);padding-top:var(--s10)} /* the rail thumbnail now holds the real-article image frame (mark under image), so the frame fills the fixed thumb box */ .rail .rth .im{position:absolute;inset:0;width:100%;height:100%; border-radius:inherit;box-shadow:none} /* nothing eligible yet — the page says so rather than showing an empty grid */ .insempty{margin:var(--s12) 0 var(--s16);font-size:var(--fs-md); color:var(--ink-3);max-width:46ch} /* ---- research intake: the band under the hero ------------------------- A full-bleed block in its own pale cream (--intake-bg, #FDEDCF), directly below the maroon hero. It is deliberately not the masthead yellow (--sub), which stays reserved for the header's call-to-action, progress bar and Index accents. Fixed in both themes, like the maroon it carries. */ .intake{--intake-bg:#FDEDCF;background:var(--intake-bg);color:var(--mast);padding:var(--s7) 0} .intakeb{display:flex;align-items:center;justify-content:space-between;gap:var(--s6)} .intaketx{min-width:0} .intakeh{margin:0;font-family:var(--disp);font-weight:300;font-size:26px; line-height:1.2;letter-spacing:var(--tr-head);color:var(--mast)} /* Everything on the band is drawn in the masthead maroon, the one ink this cream is designed to carry. */ .intakesub{margin:var(--s2) 0 0;font-size:14.5px;line-height:var(--lh-body); color:color-mix(in srgb,var(--mast) 82%,transparent)} .intakeact{flex:0 0 auto} /* The homepage's flow button (see FLOW BUTTON), in this band's own colours: the look — pill, 1.5px outline, bold label, the arrow that flies in and the disc that floods the pill — is all .flowbtn's. Only the four colour variables are set here: maroon outline and label at rest, a maroon flood with the band's own cream as the label once hovered, so the flooded pill still reads as part of the band. */ .intake .intakecta{--fb-ink:var(--mast);--fb-edge:var(--mast); --fb-fill:var(--mast);--fb-on:var(--intake-bg);white-space:nowrap} .intakechip{display:inline-flex;align-items:center;gap:7px;padding:9px var(--s4); border-radius:var(--r-full); background:color-mix(in srgb,var(--mast) 14%,transparent); border:1px solid color-mix(in srgb,var(--mast) 34%,transparent); color:var(--mast);font-size:var(--fs-xs);font-weight:500;line-height:1.3} @media (max-width:720px){ .intake{padding:var(--s6) 0} .intakeb{display:block} .intakeh{font-size:23px} .intakeact{margin-top:var(--s5)} } /* ---- research intake: the modal on the shared sheet layer ------------- Only the width differs from every other sheet, and only while this modal owns the layer. */ @media (min-width:721px){ .sheet.intakesheet{width:min(560px,calc(100vw - 56px))} } .sheet .intakem{padding:var(--s5) var(--s5) var(--s6)} @media (min-width:721px){.sheet .intakem{padding:var(--s8)}} .intakekick{display:block;font-size:var(--fs-3xs);font-weight:700; letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--accent-ink)} /* The site balances every heading's rag. This one sits alone at the top of a card with room to spare, so it runs to the measure instead of splitting itself into two short, centred-looking lines. */ .intakem .intakemh{margin:var(--s3) 0 0;font-family:var(--disp);font-weight:300; font-size:30px;line-height:1.16;letter-spacing:var(--tr-head);color:var(--ink); text-wrap:pretty} /* the form opens on the heading; only the success state has a label above it */ .intakem .intakemh:first-child{margin-top:0} .intakemsub{margin:var(--s2) 0 var(--s6);font-size:15px;line-height:var(--lh-body); color:var(--ink-2)} .intakegrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4); margin-bottom:var(--s4)} @media (max-width:600px){.intakegrid{grid-template-columns:1fr}} .intakefield{margin-bottom:var(--s4);min-width:0} .intakegrid .intakefield{margin-bottom:0} .intakelab{display:block;font-size:var(--fs-xs);color:var(--ink-2);margin-bottom:6px} .intakeinput{display:block;width:100%;box-sizing:border-box;padding:12px var(--s3); border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card); font-family:inherit;font-size:15px;line-height:1.4;color:var(--ink);outline:0; transition:border-color var(--d-2) var(--e-out),box-shadow var(--d-2) var(--e-out)} .intakeinput::placeholder{color:var(--ink-3)} .intakeinput:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-line)} .intakefield.bad .intakeinput{border-color:var(--accent)} .intakehint{display:block;margin-top:6px;font-size:var(--fs-xs);color:var(--ink-2); line-height:1.45} .intakeerr{display:none;margin-top:6px;font-size:var(--fs-xs);color:var(--accent-ink); line-height:1.45} .intakefield.bad .intakeerr{display:block} /* honeypot: out of the layout, out of the tab order, never announced */ .intakehp{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden} .intakesend{display:block;width:100%;margin-top:var(--s5);padding:13px var(--s5)} .intakesend[disabled]{opacity:.62;cursor:default;box-shadow:none;filter:none} /* the line is always in the document (it is a live region) and takes room only once it says something; the store message runs to two lines */ .intakefail{margin:0;font-size:var(--fs-xs);line-height:1.45;color:var(--accent-ink); text-align:center} .intakefail:not(:empty){margin-top:var(--s3)} .intakefail a{text-decoration:underline;text-underline-offset:2px} /* ---- research intake: the success state, in the same card ------------- */ .intaketick{display:flex;align-items:center;justify-content:center; width:56px;height:56px;border-radius:var(--r-full);background:var(--t4-bg); margin-bottom:var(--s5)} .intaketick svg{width:28px;height:28px;fill:none;stroke:var(--t4);stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round} /* the tick draws itself on; under reduced motion the global near-zero duration lands it on its finished frame instead */ .intaketick path{stroke-dasharray:26;stroke-dashoffset:26; animation:intaketick var(--d-5) var(--e-out) 80ms forwards} @keyframes intaketick{to{stroke-dashoffset:0}} .intakepara{margin:var(--s3) 0 var(--s6);font-size:15px;line-height:var(--lh-body); color:var(--ink-2)} .intakepara b{color:var(--ink);font-weight:700} .intakesteps{border-top:1px solid var(--line)} .intakestep{display:flex;gap:var(--s4);padding:var(--s3) 0; border-bottom:1px solid var(--line)} .intakestep .k{flex:0 0 116px;font-size:var(--fs-3xs);font-weight:700; letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--accent-ink); line-height:1.7} .intakestep .v{min-width:0;font-size:var(--fs-sm);color:var(--ink-2); line-height:var(--lh-body)} @media (max-width:600px){ .intakestep{display:block} .intakestep .k{margin-bottom:4px} } .intakeacts{display:flex;align-items:center;justify-content:space-between; gap:var(--s4);flex-wrap:wrap;margin-top:var(--s6)} .intakeagain{border:0;background:none;padding:0;cursor:pointer;font-family:inherit; font-size:var(--fs-sm);font-weight:500;color:var(--accent-ink); text-decoration:underline;text-underline-offset:3px; transition:color var(--d-2) var(--e-out)} .intakeagain:hover{color:var(--accent)} /* ── Real-article placeholder (homepage slot filling) ── */ /* the single fixed no-image treatment for real articles: masthead mark on a flat panel, the same asset every time */ .im.imph{--im-plate:var(--sunk)} .im.imph::before{content:none;animation:none} .im.imph>svg:not(.imratio){position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:18%;max-width:64px;height:auto;opacity:.28;z-index:0} .im.imph>svg path{fill:var(--ink-3)} /* ── Server-rendered pages: classes replacing inline style attributes ────── The CSP (style-src-attr) forbids style="" attributes, so every style the server templates need lives here instead. Computed styles are identical to the attributes they replaced. */ /* badge kind colours (mirror OUTLETS colours in data.js) */ .srcbadge.sbk-press{background:#1B458F} .srcbadge.sbk-paper{background:#A32638} .srcbadge.sbk-official{background:#2E4A6B} .srcbadge.sbk-records{background:#6B6567} .srcbadge.sbk-reporting{background:#6B4E7A} .srcbadge.sbk-contributor{background:#41503F} .srcbadge.sbk-document{background:#6B6567} /* badge size variant (sizes <26px use the smaller font, as the old inline rule did) — declared last so it beats contextual overrides like .amlink .srcbadge, exactly as the inline attribute used to */ .srcbadge.sb24{width:24px;height:24px;font-size:9.5px} /* article header actions cluster */ /* article hero */ .hero.herotop{margin-top:24px} /* 404 / 500 pages */ .errpage{padding-top:80px;padding-bottom:120px} .errkick{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--ink-3);margin:0 0 16px} .errttl{font-family:var(--disp);font-size:clamp(28px,5vw,44px);font-weight:300;margin:0 0 16px;line-height:1.2} .errsub{color:var(--ink-2);margin:0 0 32px} .errbtn{display:inline-block;background:var(--ink);color:var(--app);padding:10px 20px;border-radius:999px;font-weight:600;font-size:14px} @media (max-width:720px) and (prefers-reduced-motion:reduce){ .hd,.menubtn span{transition:none} } /* ======================= MASTHEAD ======================================= Two-row masthead on the house maroon: date and time, centred wordmark and the Expert Insights button above; the sections, Menu and search below. The old section strip is folded into the header. */ :root{--hd-h:124px;--mast:#4E041E;--mast-ink:#fff;--mast-mute:rgba(255,255,255,.72); --mast-line:rgba(255,255,255,.28);--mast-hover:rgba(255,255,255,.1);--sub:#FDD179} @media (max-width:720px){:root{--hd-h:100px}} .hd{background:var(--mast);border-top:0;border-bottom:0;color:var(--mast-ink); backdrop-filter:none;-webkit-backdrop-filter:none} .hd.stuck{border-bottom:0;box-shadow:0 10px 24px -18px rgba(0,0,0,.6)} .hd .wrap.hdtop{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:76px; justify-content:stretch} .hd .hddate{display:flex;flex-direction:column;gap:2px;line-height:1.25;justify-self:start} .hd .hdday{font-size:14px;font-weight:700;color:var(--mast-ink)} .hd .hdtime{font-size:13px;color:var(--mast-mute)} .hd .logo{justify-self:center;border-radius:0} .hd .logo svg{height:36px} /* wordmark in white on the maroon, whatever the theme */ :root .hd .logo path:not(:nth-of-type(-n+2)){fill:var(--mast-ink)!important} .hd .hdright{display:flex;align-items:center;justify-content:flex-end;gap:var(--s3);justify-self:end} /* The Insights call to action is the site's flow button (see FLOW BUTTON) in the masthead's yellow: outlined at rest, flooded yellow with the maroon label on hover. Only the colour variables are set here; the look is .flowbtn's, so it is the same button as the homepage's and the band's. */ .hd .hdcta{--fb-ink:var(--sub);--fb-edge:var(--sub);--fb-fill:var(--sub);--fb-on:var(--mast); letter-spacing:0;white-space:nowrap} /* the light/dark toggle app.js injects lands just before Menu in the nav row */ .hd .themebtn{display:flex;width:38px;height:38px;margin:0;flex:0 0 auto;color:var(--mast-ink)} .hd .themebtn:hover{background:var(--mast-hover);color:var(--mast-ink)} .hd .navband{border-top:1px solid var(--mast-line)} .hd .desktopnav.navrow{display:flex;align-items:center;justify-content:flex-start;gap:var(--s2);height:47px} .hd .navcats{display:flex;align-items:center;gap:2px;flex:1 1 auto;min-width:0;overflow-x:auto; scrollbar-width:none;margin-left:-10px} .hd .navcats::-webkit-scrollbar{display:none} .hd .navsep{flex:0 0 1px;height:26px;background:var(--mast-line);margin:0 var(--s2);margin-left:auto} .hd .desktopnav a[hidden]{display:none} .hd .desktopnav a{height:47px;padding:0 10px;font-size:15px;color:var(--mast-ink);white-space:nowrap; border-radius:0} .hd .navcats a{font-weight:700} .hd .desktopnav a:hover{color:var(--mast-ink);background:var(--mast-hover)} .hd .desktopnav a.on{color:var(--mast-ink)} .hd .desktopnav a.on::after{left:10px;right:10px;bottom:0;height:3px;background:var(--mast-ink);border-radius:0} .hd .searchbtn{width:38px;height:38px;margin:0;color:var(--mast-ink);flex:0 0 auto} .hd .searchbtn:hover{background:var(--mast-hover);color:var(--mast-ink)} .hd .searchbtn[aria-expanded="true"]{background:var(--mast-ink);color:var(--mast)} .hd .menubtn{display:flex;flex-direction:row;align-items:center;gap:9px;width:auto;height:38px;flex:0 0 auto; padding:0 10px;border:0;border-radius:var(--r-full);background:transparent;color:var(--mast-ink); cursor:pointer;font-size:17px;font-weight:700} .hd .menubtn:hover{background:var(--mast-hover)} .hd .menubtn>span,.hd .menubtn[aria-expanded="true"]>span{width:auto;height:auto;background:none;transform:none;opacity:1} .hd .menubtn .burger{display:flex;flex-direction:column;justify-content:center;gap:4px;width:20px;height:20px} .hd .menubtn .burger i{display:block;width:20px;height:2px;border-radius:2px;background:currentColor; transition:transform var(--d-3) var(--e-out),opacity var(--d-2) var(--e-out)} .hd .menubtn[aria-expanded="true"] .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)} .hd .menubtn[aria-expanded="true"] .burger i:nth-child(2){opacity:0} .hd .menubtn[aria-expanded="true"] .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* ── Menu drawer takes the banner's place ────────────────────────────── Same maroon, same height as the banner (JS measures it into --drawer-h), so opening reads as the banner's content being swapped rather than a panel dropping over the page. Only transform and opacity animate. */ .hd .mobilemenu{display:flex;align-items:center;position:absolute;top:100%;left:0;right:0; height:var(--drawer-h,320px);max-height:calc(100vh - var(--hd-h));overflow-y:auto; background:var(--mast);color:var(--mast-ink);border-bottom:1px solid var(--mast-line); box-shadow:none;will-change:opacity,transform} .hd .mobilemenu[hidden]{display:none} /* The compact homepage banner is shorter than the navigation contents. Keep the menu's established 320px panel budget without changing its logic. */ body:has(.usp) .hd .mobilemenu{height:max(320px,var(--drawer-h,320px))} .hd .mobilenav{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--s10); width:100%;max-width:1240px;margin:0 auto;padding:var(--s6) var(--s5);align-items:start} .hd .mobilemain,.hd .mobilecats{display:flex;flex-direction:column;align-items:stretch;padding:0;border:0} .hd .mobilemain{padding-top:26px} .hd .mobilecats::before{content:"Categories";display:block;margin:0 var(--s2) var(--s2); font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--mast-mute)} .hd .mobilenav a{display:block;padding:5px var(--s2);border-radius:var(--r-xs);color:var(--mast-ink); font-size:16px;font-weight:500;line-height:1.3;text-align:left; transition:background var(--d-2) var(--e-out),color var(--d-2) var(--e-out)} .hd .mobilemain a{font-family:var(--disp);font-size:clamp(24px,1.2rem + 1vw,32px);font-weight:400; line-height:1.2;padding:7px var(--s2);letter-spacing:var(--tr-tight)} .hd .mobilecats a{font-size:17px;font-weight:700} .hd .mobilenav a:hover{background:var(--mast-hover);color:var(--mast-ink)} .hd .mobilenav a.on{background:transparent;color:var(--mast-ink);font-weight:700} .hd .mobilemain a.on{font-weight:400} .hd .mobilenav a.on::before{content:"";display:inline-block;width:6px;height:6px;margin:0 10px 3px 0; border-radius:50%;background:var(--sub)} .hd .mobilemain a.on::before{width:8px;height:8px;margin:0 12px 4px 0} /* the swap: the drawer fades and settles in, its items follow in a short stagger; the banner content underneath eases away at the same time */ @keyframes drawerIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} @keyframes drawerOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-6px)}} @keyframes drawerItem{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .hd .mobilemenu.open{animation:drawerIn .26s var(--e-glide) both} .hd .mobilemenu.closing{animation:drawerOut .18s var(--e-out) both;pointer-events:none} .hd .mobilemenu.open .mobilenav a{animation:drawerItem .34s var(--e-glide) both} .hd .mobilemenu.open .mobilenav a:nth-child(1){animation-delay:40ms} .hd .mobilemenu.open .mobilenav a:nth-child(2){animation-delay:65ms} .hd .mobilemenu.open .mobilenav a:nth-child(3){animation-delay:90ms} .hd .mobilemenu.open .mobilenav a:nth-child(4){animation-delay:115ms} .hd .mobilemenu.open .mobilenav a:nth-child(5){animation-delay:140ms} .hd .mobilemenu.open .mobilenav a:nth-child(6){animation-delay:165ms} .hd .mobilemenu.open .mobilenav a:nth-child(7){animation-delay:190ms} .usp .uspin,.usp .hglobe{transition:opacity .22s var(--e-out),transform .26s var(--e-glide)} body.menu-open .usp .uspin{opacity:0;transform:translateY(6px)} body.menu-open .usp .hglobe{opacity:0} @media (prefers-reduced-motion:reduce){ .hd .mobilemenu.open,.hd .mobilemenu.closing,.hd .mobilemenu.open .mobilenav a{animation:none} .usp .uspin,.usp .hglobe{transition:none} } /* the standalone section strip is now inside the header */ .catrow{display:none!important} .hd .hprog{background:var(--sub)} /* the header carries the big wordmark now, so the front page's separate masthead and the "hide the compact bar at the top" behaviour retire */ .masthead{display:none!important} body.masthead-top .hd{opacity:1;pointer-events:auto;border-bottom-color:transparent;box-shadow:none} /* the front-page banner continues the masthead: same maroon, one hairline between the nav row and the banner, no separate bottom rule */ .usp{background:var(--mast);border-top:1px solid var(--mast-line);border-bottom:0} /* Homepage-only compact banner. Keep shared Insights/About rules and the existing type, artwork and menu transitions intact. Height is a floor, not a crop: longer text and enlarged browser fonts can grow the band. */ .usp .wrap{max-width:1240px;padding-left:20px;padding-right:20px} .usp .uspin{ display:flex;flex-direction:column;justify-content:center;align-items:stretch; min-height:219px;box-sizing:border-box; padding:20px 0;gap:0; } .usp .uspa{margin-left:0} @media (min-width:721px){ .usp{--home-globe-visible:clamp(240px,calc(50vw - 120px),540px)} .usp .uspin{padding-right:calc(var(--home-globe-visible) + 32px)} .usp .hglobe{ /* Size against the band, not the viewport: keep the oversized vertical crop on tablets too. The canvas extends beyond the right edge so its transparent perimeter never leaves a strip beside the sphere. */ display:block;left:calc(100% - var(--home-globe-visible));right:auto;top:50%;bottom:auto; width:auto;height:273%;aspect-ratio:1; transform:translateY(-50%); } } @media (min-width:721px) and (max-width:1199px){ .usp .uspin{min-height:clamp(245px,calc(229px + 2.25vw),257px);padding-top:20px;padding-bottom:20px} } @media (max-width:720px){ .usp .wrap{padding-left:var(--s4);padding-right:var(--s4)} .usp .uspin{ min-height:clamp(238px,calc(264px - 3.5vw),253px); padding:20px 0; } .usp .hglobe{display:none} } @media (width > 1280px){ .usp .uspin{min-height:251.85px} } /* compact header: the sticky offset lifts the top row out of view while the nav row stays pinned; flow height is untouched so nothing jumps */ :root{--hdtop-h:76px} @media (max-width:720px){:root{--hdtop-h:58px}} .hd{transition:transform var(--d-4) var(--e-glide),box-shadow var(--d-3) var(--e-out),top var(--d-4) var(--e-glide)} .hd.compact{top:calc(-1 * var(--hdtop-h))} body.hd-compact{--hd-h:47px} @media (max-width:720px){body.hd-compact{--hd-h:42px}} .hd.compact .navband{border-top-color:transparent} .hd.compact.stuck{box-shadow:0 10px 24px -18px rgba(0,0,0,.6)} @media (max-width:720px){ .hd .wrap.hdtop{height:58px;grid-template-columns:auto 1fr auto} .hd .hddate{display:none} .hd .logo{justify-self:start;order:-1} .hd .logo svg{height:26px} .hd .hdright{grid-column:3} /* the phone row is 58px, so the pill keeps its compact 34px height there */ .hd .hdcta{height:34px;padding:0 16px} .hd .desktopnav.navrow{height:42px} /* icon-only Menu, and the section strip fades out at its right edge so a half-visible next section reads as "there is more to scroll" */ .hd .menulbl{display:none} .hd .menubtn{font-size:16px;gap:0;padding:0 9px;width:38px;justify-content:center} .hd .navcats{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent 100%); mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent 100%); padding-right:28px;margin-left:-8px} .hd .navcats a{padding:0 8px} .hd .navsep{margin-left:4px} .hd .mobilenav{grid-template-columns:1.1fr 1fr;gap:var(--s2) var(--s5);padding:var(--s4)} .hd .mobilemain{padding-top:24px} .hd .mobilemain a{font-size:20px;padding:5px var(--s2)} .hd .mobilecats a{font-size:15px;padding:4px var(--s2)} } /* Legacy scroll handlers still toggle these classes; compact owns the header offset now, so those transforms must not hide the new masthead. */ .hd.away,.hd.mobile-away{transform:none!important} /* Keep an already-open search panel attached while the sticky masthead transitions into its compact section row. The client still measures the normal header edge inline; this state override intentionally wins only while the compact offset is active, and the matching top transition keeps the panel moving with the header instead of jumping or lagging behind it. */ .searchpanel{transition:top var(--d-4) var(--e-glide)} body.hd-compact .searchpanel{top:var(--hd-h)!important} /* If search opens during the compact glide, both surfaces must settle on the same edge in the same frame. The overlay is the stronger state: finish the header offset and its panel position together instead of exposing a gap between the moving sticky chrome and the dropdown. */ body.searching .hd{transition:box-shadow var(--d-3) var(--e-out)} body.searching .searchpanel{transition:none} .searchhit mark{color:inherit;background:transparent;text-decoration:underline;text-decoration-color:var(--mast);text-underline-offset:3px} /* ── The Primary Index: flat maroon, a lede beside the heading, four illustrated feature cards, then the two standings tables ───────────── */ .pindex{background:var(--mast);border-radius:0;margin-bottom:var(--s20);padding:var(--s16) 0 var(--s20)} .pindex .wrap{display:block} .pindex .pixcta,.pindex .pixusp,.pindex .pixgrid{grid-area:auto} .pindex .pixcta{margin:0;justify-self:start} /* feature cards: the illustration floats on the card, one accent, 1.5px strokes, the page's own type */ .pindex .pixusp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5);margin:0 0 var(--s16)} .pindex .pixcard{display:flex;flex-direction:column;min-width:0;padding:0 var(--s7) var(--s8); background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:18px;overflow:hidden} .pindex .pviz{display:block;margin:0 0 var(--s4);padding:var(--s8) 0 0} .pindex .pviz svg{display:block;width:100%;height:auto;overflow:visible;font-family:var(--sans)} .pindex .put{font-family:var(--sans);font-weight:700;font-size:16px;line-height:1.3;letter-spacing:-.01em; color:#fff;margin-bottom:6px} /* illustration palette */ /* source cards, glyph line work and the dashed routes between them */ /* standings tables keep a glass frame on the flat maroon */ .pindex .pixgrid{background:rgba(0,0,0,.14);border:1px solid rgba(255,255,255,.1);border-radius:16px} /* the standings are scored out of 1000; say so at the right of each heading */ /* Index cards share the page-motion section lifecycle. */ @media (max-width:1080px){ .pindex .pixusp{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:720px){ .pindex{padding:var(--s12) 0 var(--s14);margin-bottom:var(--s16)} .pindex .pixusp{grid-template-columns:1fr;gap:var(--s4)} } /* ── css/preferred-source.css ── */ /* Preferred Sources: additive placements only. Load after main.css. Keep the frozen DM Sans / warm-paper / maroon visual system and its tokens. Rendering, eligibility, completion and stacking measurements belong to JS. */ .preferred-source-pill{ box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; gap:8px; max-width:100%; padding:10px 16px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--ink); font-family:var(--sans); font-size:13px; font-weight:700; line-height:16px; text-decoration:none; white-space:nowrap; vertical-align:middle; cursor:pointer; } .preferred-source-pill:hover{ border-color:var(--accent-line); text-decoration:none; } .preferred-source-pill:focus-visible{ border-radius:999px; box-shadow:var(--focus); } .preferred-source-pill.preferred-source-maroon{ background:transparent; border-color:rgba(255,255,255,.28); color:#fff; } .preferred-source-pill.preferred-source-maroon:hover{ border-color:rgba(255,255,255,.55); } .preferred-source-google{ display:block; width:14px; height:14px; flex:0 0 14px; } /* Do not set fill/currentColor on the Google mark: retain its four colours. */ .preferred-source-about{ display:flex; justify-content:center; margin-top:28px; } /* Replace the existing reserved clearance, rather than adding to it. The absolute globe's crest is at hero bottom minus --ab-globe. */ .abhero.has-preferred-source{ padding-bottom:calc(var(--ab-globe) + 36px); } .preferred-source-insights{ display:flex; justify-content:flex-start; margin-top:24px; } .preferred-source-home{ position:fixed; right:16px; bottom:var(--preferred-source-bottom,calc(16px + env(safe-area-inset-bottom,0px))); z-index:30; max-width:calc(100vw - 32px); animation:preferred-source-reveal 220ms var(--e-out) both; } .preferred-source-home .preferred-source-pill{ box-shadow:var(--sh-3); } /* Reserve the sibling close target without changing the anchor's 10px/16px padding, or nesting an interactive control inside it. */ .preferred-source-home .preferred-source-pill::after{ content:""; width:22px; flex:0 0 22px; } /* JS sets --preferred-source-bottom to viewport bottom minus the visible #totop top + 10px. Never infer visibility from .show alone or enable totop. At exactly 720px the two controls can coexist; below that only totop does. */ .preferred-source-home.is-stacked{ bottom:var(--preferred-source-bottom,calc(16px + env(safe-area-inset-bottom,0px))); } .preferred-source-close{ position:absolute; top:50%; right:7px; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; border:0; border-radius:999px; background:transparent; color:var(--ink-3); font-family:var(--sans); font-size:16px; font-weight:400; line-height:1; cursor:pointer; } .preferred-source-close:hover{ color:var(--ink); } /* Override main.css's generic focus position so the sibling close control stays visually inside the anchor's reserved right end. */ .preferred-source-close:focus-visible{ position:absolute; border-radius:999px; box-shadow:var(--focus-tight); } @media (width < 720px){ .preferred-source-home{display:none} } /* Floating promotion must not cover or compete with existing overlays. */ body.locked .preferred-source-home, body.menuing .preferred-source-home, body.searching .preferred-source-home{ display:none; } .preferred-source-article{ display:flex; align-items:center; flex-wrap:wrap; gap:12px 16px; max-width:100%; margin:24px 0 0; animation:preferred-source-reveal 200ms var(--e-out) both; } .preferred-source-article .preferred-source-pill{ flex:0 0 auto; } .art .preferred-source-copy{ flex:1 1 260px; min-width:0; margin:0; color:var(--ink-3); font-family:var(--sans); font-size:12.5px; font-weight:400; line-height:1.55; } .art .preferred-source-thanks{ margin:24px 0 0; color:var(--ink-3); font-family:var(--sans); font-size:12.5px; font-weight:400; line-height:1.55; } .preferred-source-article .preferred-source-thanks{ margin:0; } @media (max-width:720px){ .preferred-source-article{ flex-direction:column; align-items:flex-start; } .art .preferred-source-copy{flex:0 1 auto} } .preferred-source-home[hidden], .preferred-source-about[hidden], .preferred-source-insights[hidden], .preferred-source-article[hidden], .preferred-source-thanks[hidden]{ display:none!important; } @keyframes preferred-source-reveal{ from{opacity:0} to{opacity:1} } @media (prefers-reduced-motion:reduce){ .preferred-source-home, .preferred-source-article{ animation:none; } } /* ── css/polish/header.css ── */ /* Article polish: header. Visual finish only. */ html[data-polish]{ --plh-knob:0 0 0 .5px rgba(19,16,17,.08),0 1px 2px rgba(19,16,17,.24); } @media (prefers-color-scheme:dark){ html[data-polish]:not([data-theme="light"]){ --plh-knob:0 0 0 .5px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.5); } } html[data-polish][data-theme="dark"]{ --plh-knob:0 0 0 .5px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.5); } html[data-polish] .artto{margin-bottom:var(--s6)} html[data-polish] .backlink{ display:inline-block;position:relative; margin:-2px -5px;padding:2px 5px;border-radius:6px; font-size:var(--fs-sm);font-weight:500;line-height:1.4;letter-spacing:0;color:var(--ink-3); transition:color var(--d-2) var(--e-out); } html[data-polish] .backlink::before{content:"";position:absolute;inset:-8px -6px} html[data-polish] .backlink .pl-arr{display:inline-block; transition:transform var(--d-2) var(--e-out)} html[data-polish] .backlink:focus-visible{box-shadow:var(--focus);border-radius:6px} html[data-polish] .art .kick{ font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;line-height:1.3; margin-bottom:var(--s3);color:var(--accent-ink); } html[data-polish] .art h1{margin-bottom:var(--s4)} html[data-polish] .art .dek{margin-bottom:var(--s5);color:var(--ink-2)} html[data-polish] .artby{margin-bottom:var(--s6);min-height:34px} html[data-polish] .art .byline{font-size:var(--fs-sm);font-weight:600;line-height:1.4;color:var(--ink)} html[data-polish] .art .byline .pl-by{font-weight:400;color:var(--ink-2)} html[data-polish] .artby .sharewrap{display:inline-flex;align-items:center;gap:8px} html[data-polish] .artby .srclink:is([data-shareopen],[data-save-pill]){ height:34px;min-height:34px;padding:0 14px 0 12px;gap:7px;border-radius:var(--r-full); background:transparent;border:1px solid var(--line);color:var(--ink); font-size:13px;font-weight:600;line-height:1;letter-spacing:.005em; filter:none; transition:background-color var(--d-2) var(--e-out),border-color var(--d-2) var(--e-out), transform var(--d-1) var(--e-out); } html[data-polish] .artby .srclink[data-shareopen] svg{display:block;flex:0 0 auto;overflow:visible} html[data-polish] .artby .srclink[data-shareopen] svg path:nth-child(-n+2){ transition:transform var(--d-2) var(--e-out)} html[data-polish] .artby .sharewrap:has(.sharemenu.on) .srclink[data-shareopen]{ background:var(--card);border-color:var(--ink-4);filter:none} html[data-polish] .artby .sharewrap:has(.sharemenu.on) .srclink[data-shareopen] svg path:nth-child(-n+2){ transform:translateY(-1.5px)} html[data-polish] .artby .srclink:is([data-shareopen],[data-save-pill]):active{transform:scale(.97)} html[data-polish] .artby .srclink:is([data-shareopen],[data-save-pill]):focus-visible{box-shadow:var(--focus);border-radius:var(--r-full)} html[data-polish] .artby [data-save-pill][aria-pressed="true"]{color:#AE2448} html[data-polish] .artby [data-save-pill] svg{width:14px;height:14px} html[data-polish] .sharemenu{ display:block;visibility:hidden;opacity:0;pointer-events:none; top:calc(100% + 6px);min-width:208px;padding:6px; background:var(--raised);border:0;border-radius:10px;box-shadow:var(--pc-cast),var(--pc-ring); transform-origin:top right;transform:translateY(-4px) scale(.97); animation:none; transition:opacity var(--d-2) var(--e-in),transform var(--d-2) var(--e-in), visibility 0s linear var(--d-2); } html[data-polish] .sharemenu.on{ visibility:visible;opacity:1;pointer-events:auto;transform:none;animation:none; transition:opacity var(--d-3) var(--e-out),transform var(--d-3) var(--e-out),visibility 0s; } html[data-polish] .sharemenu button{ height:40px;padding:0 12px 0 10px;gap:10px;border-radius:6px; font-size:var(--fs-sm);font-weight:500;line-height:1;color:var(--ink); transition:background-color var(--d-1) var(--e-out); } html[data-polish] .sharemenu button .si{width:20px;height:20px;align-items:center;justify-content:center; color:var(--ink-3);transition:color var(--d-1) var(--e-out)} html[data-polish] .sharemenu [data-save-form] button[aria-pressed="true"], html[data-polish] .sharemenu [data-save-form] button[aria-pressed="true"] .si{color:#AE2448} @media(scripting:none){html[data-polish] .sharemenu{ visibility:visible;opacity:1;pointer-events:auto;position:static;transform:none}} html[data-polish] .sharemenu [data-share="x"] .si svg{width:14px;height:14px} html[data-polish] .sharemenu [data-share="li"] .si svg{width:14px;height:14px} html[data-polish] .sharemenu [data-share="mail"] .si svg{width:18px;height:18px} html[data-polish] .sharemenu button:active{background:var(--sunk)} html[data-polish] .sharemenu button:focus-visible{box-shadow:var(--focus);border-radius:6px} html[data-polish] .corrbar.contrib{ display:block;position:relative;margin:var(--s5) 0 0;padding:0; background:none;border:0;border-radius:0; font-size:var(--fs-sm);line-height:20px;color:var(--ink-2); } html[data-polish] .corrbar.contrib.pl-hasav{padding-left:28px} html[data-polish] .corrbar.contrib .pl-av{ position:absolute;left:0;top:0;width:20px;height:20px;margin:0; border:0;font-size:8px;letter-spacing:0;transform:none; } html[data-polish] .corrbar.contrib .pl-av .ini::before{content:attr(data-ini)} html[data-polish] .corrbar.contrib .pl-av{user-select:none;-webkit-user-select:none} html[data-polish] .corrbar.contrib .cbt{display:inline;font-size:inherit;font-weight:400;color:var(--ink-2)} html[data-polish] .corrbar.contrib .cbt::after{content:"";display:inline-block;width:.6em} html[data-polish] .corrbar.contrib .pl-strong{font-weight:600;color:var(--ink)} html[data-polish] .corrbar.contrib .pl-date{color:var(--ink-3);font-variant-numeric:tabular-nums} html[data-polish] .corrbar.contrib .cbl{ display:inline;white-space:nowrap;border:0;border-radius:4px; margin:0 -3px;padding:1px 3px; font-size:inherit;font-weight:600;color:var(--t3-ink); text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px; text-decoration-color:var(--t3-ln); transition:text-decoration-color var(--d-2) var(--e-out),color var(--d-2) var(--e-out); } html[data-polish] .corrbar.contrib .cbl:focus-visible{box-shadow:var(--focus);border-radius:4px} html[data-polish] .artmeta{ gap:var(--s3) var(--s10);padding:var(--s5) 0;margin-bottom:0; border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2); } html[data-polish] .amk{ font-size:var(--fs-3xs);font-weight:500;letter-spacing:.08em;line-height:14px; color:var(--ink-3);margin-bottom:4px; } html[data-polish] .amv{font-size:var(--fs-sm);line-height:22px;color:var(--ink-2)} html[data-polish] .amv.dstamp{ font-size:var(--fs-sm);font-weight:400;letter-spacing:0;text-transform:none; color:var(--ink-2);font-variant-numeric:tabular-nums; } html[data-polish] .amlink{ gap:10px;height:26px;margin:-2px -5px;padding:0 5px;border-radius:6px; font-size:var(--fs-sm);font-weight:600;line-height:22px;color:var(--ink); } html[data-polish] .amlink:hover{color:var(--ink)} html[data-polish] .amlink .pl-t{ text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px; text-decoration-color:var(--line); transition:text-decoration-color var(--d-2) var(--e-out); } html[data-polish] .amlink .pl-dot{color:var(--ink-3);font-weight:400} html[data-polish] .amlink:focus-visible{box-shadow:var(--focus);border-radius:6px} html[data-polish] .amlink .amb{padding-left:1px} html[data-polish] .amlink .srcbadge, html[data-polish] .amlink .srcbadge.sb24{ width:20px;height:20px;font-size:8px;border:0;margin-left:-5px; box-shadow:0 0 0 1px var(--app); transition:transform var(--d-3) var(--e-out); } html[data-polish] .amlink .srcbadge:first-child{margin-left:0} html[data-polish] .layerrow{border-top:0;padding:var(--s5) 0;gap:var(--s6)} html[data-polish] .layerrow .t .a{ font-size:var(--fs-sm);font-weight:500;line-height:1.35;color:var(--ink-2); transition:color var(--d-2) var(--e-out); } html[data-polish] .layerrow .t .b{font-size:var(--fs-xs);line-height:1.4;color:var(--ink-3);margin-top:2px} @media (hover:hover){ html[data-polish] .backlink:hover{color:var(--ink)} html[data-polish] .backlink:hover .pl-arr{transform:translateX(-2px)} html[data-polish] .artby .srclink:is([data-shareopen],[data-save-pill]):hover{ background:var(--card);border-color:var(--ink-4);filter:none} html[data-polish] .artby .srclink[data-shareopen]:hover svg path:nth-child(-n+2){transform:translateY(-1.5px)} html[data-polish] .sharemenu button:hover{background:var(--sunk)} html[data-polish] .sharemenu button:hover .si{color:var(--ink)} html[data-polish] .corrbar.contrib .cbl:hover{text-decoration-color:var(--t3-ink)} html[data-polish] .amlink:hover .pl-t{text-decoration-color:var(--accent)} html[data-polish] .amlink:hover .srcbadge:nth-child(2){transform:translateX(2px)} html[data-polish] .amlink:hover .srcbadge:nth-child(3){transform:translateX(4px)} html[data-polish] .amlink:hover .srcbadge:nth-child(n+4){transform:translateX(6px)} html[data-polish] .layerrow:hover .t .a{color:var(--ink)} } @media (prefers-reduced-motion:reduce){ html[data-polish] .sharemenu{transition-delay:0s} } @media (max-width:720px){ html[data-polish] .artto{margin-bottom:var(--s5)} html[data-polish] .backlink::before{inset:-12px -8px} html[data-polish] .art .dek{margin-bottom:var(--s4)} html[data-polish] .artby{margin-bottom:var(--s5);min-height:40px} html[data-polish] .artby .srclink:is([data-shareopen],[data-save-pill]){height:40px;padding:0 16px 0 14px;font-size:var(--fs-sm)} html[data-polish] .sharemenu{min-width:220px} html[data-polish] .sharemenu button{height:44px} html[data-polish] .corrbar.contrib{margin-top:var(--s4)} html[data-polish] .artmeta{gap:var(--s4) var(--s8);padding:var(--s4) 0} html[data-polish] .amk{font-size:var(--fs-3xs);letter-spacing:.08em} html[data-polish] .layerrow{padding:var(--s4) 0;min-height:44px} } /* ── css/polish/toggle.css ── */ /* Article polish: toggle The "Source mode" switch as a liquid toggle, after Bencho's "Liquid toggle" (MIT, bencho.dev/licence); the same switch in the pinned nav row; and reading mode: with reference links off, the rail steps away and the story centres. ── the droplet, and the air round it ────────────────────────────────── Bencho's proportions at the size this row needs: an 18px droplet in a 24px pill, so 3px of track shows all the way round, and the inset at the ends is the same 3px seen twice. The pill is twice as long as it is tall, as Bencho's is. js/polish/toggle.js reads these numbers for the travel, so the circle and the distance it crosses cannot disagree. ── black and white, and the track carries the state ──────────────────── Off is the light end of the ramp: a white pill (the slab) with a grey droplet mixed toward it. On is the inversion: an ink pill with a white droplet. No hue: a switch does not need one to say it is on. On cream a white pill needs an edge to read as an object, so the off track carries a hairline; the ink track does not need one. Mapping Bencho's tokens to this site's: --fill-slab is the white the page uses for raised controls (#fff by day, --raised by night), --fill-on is --ink, --pane-edge is --line. They are set on the switch itself, so nothing leaks out. */ html[data-polish] .layerrow .sw{ --liq-w:46px;--liq-h:24px;--liq-thumb:18px; --liq-slab:#fff;--liq-on:var(--ink);--liq-edge:var(--line); position:relative;flex:0 0 auto;display:block;width:var(--liq-w);height:var(--liq-h); border-radius:999px;background:var(--liq-slab);box-shadow:inset 0 0 0 1px var(--liq-edge); /* it is a rail you can push along, not only a button; a vertical swipe that starts on it is still the page's scroll */ touch-action:pan-y; transition:background-color 320ms ease,box-shadow 320ms ease} html[data-polish][data-theme="dark"] .layerrow .sw{--liq-slab:var(--raised)} @media (prefers-color-scheme:dark){ html[data-polish]:not([data-theme="light"]) .layerrow .sw{--liq-slab:var(--raised)} } /* the droplet. Its transform belongs to js/polish/toggle.js, which writes position, stretch and swell into one transform every frame; a CSS transition on the same property would re-ease what the spring writes. The colour is the only thing here that eases. left:0 matters: without it the static position is wherever the line box puts an inline element. */ html[data-polish] .layerrow .sw i{ position:absolute;left:0;top:50%;display:block; width:var(--liq-thumb);height:var(--liq-thumb);margin-top:calc(var(--liq-thumb) / -2); border-radius:999px;box-shadow:none; background:color-mix(in srgb,var(--liq-on) 19%,var(--liq-slab)); transform:translateX(3px);transform-origin:50% 50%; transition:background-color 320ms ease;will-change:transform} /* on: the inversion. data-liq is written by the script and follows the droplet across the middle while it is dragged; without the script the live .on class drives the same look */ html[data-polish] .layerrow .sw[data-liq="on"], html[data-polish] .layerrow.on .sw:not([data-liq]){background:var(--liq-on);box-shadow:inset 0 0 0 1px transparent} html[data-polish] .layerrow .sw[data-liq="on"] i, html[data-polish] .layerrow.on .sw:not([data-liq]) i{background:var(--liq-slab)} html[data-polish] .layerrow.on .sw:not([data-liq]) i{transform:translateX(25px)} @media (hover:hover){ html[data-polish] .layerrow:hover .sw:not([data-liq="on"]){box-shadow:inset 0 0 0 1px var(--ink-4)} } /* the row is the keyboard switch, but the focus ring belongs to its pill */ html[data-polish] .layerrow:focus-visible{outline:none;box-shadow:none} html[data-polish] .layerrow:focus-visible .sw, html[data-polish] .layerrow:focus-visible .sw[data-liq="on"], html[data-polish] .layerrow.on:focus-visible .sw:not([data-liq]){ box-shadow:var(--focus)} /* ── the same switch in the pinned nav row ─────────────────────────────── It sits just before the row's divider and shows only once the article's own switch has scrolled up under the row (js/polish/toggle.js sets .pl-navsw-on), so the two are never on screen together. It fades in on the running head's fade. The maroon row carries the same ramp turned round: off is a sunk track with a pale droplet, on is a white track with a maroon droplet. 36 by 20 with a 14px droplet keeps the article switch's 3px of track all the way round. Both controls are desktop-only; main.css hides them before scripts run at 720px and below. */ /* the look is on the base rule and the show rule only shows it, so the hover and on rules below outrank the look and take effect */ html[data-polish] .hd .pl-navsw{ display:none;align-items:center;gap:10px;flex:0 0 auto;height:47px;margin:0;padding:0 10px; border:0;border-radius:0;background:transparent;color:var(--mast-mute); font-family:var(--sans);font-size:14px;font-weight:500;line-height:20px;white-space:nowrap; cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none; transition:opacity var(--d-3) var(--e-out) var(--nx-lag,0s), color var(--d-2) var(--e-out),background-color var(--d-2) var(--e-out)} html[data-polish] .hd nav.desktopnav.pl-navsw-on .pl-navsw{display:inline-flex} @starting-style{ html[data-polish] .hd nav.desktopnav.pl-navsw-on .pl-navsw{opacity:0} } @media (hover:hover){ html[data-polish] .hd .pl-navsw:hover{color:var(--mast-ink);background:var(--mast-hover)} html[data-polish] .hd .pl-navsw:hover .pl-sw:not([data-liq="on"]){box-shadow:inset 0 0 0 1px var(--mast-mute)} } html[data-polish] .hd .pl-navsw[aria-checked="true"]{color:var(--mast-ink)} /* the masthead's ring sits 2px outside a control; this one fills the row, so its ring is drawn inside it, as the section tabs' is */ html[data-polish] .hd .pl-navsw:focus-visible{outline-offset:-6px;border-radius:8px} html[data-polish] .hd .pl-sw{ position:relative;display:block;flex:0 0 auto;width:36px;height:20px;border-radius:999px; background:color-mix(in srgb,#000 24%,var(--mast));box-shadow:inset 0 0 0 1px var(--mast-line); touch-action:pan-y;transition:background-color 320ms ease,box-shadow 320ms ease} html[data-polish] .hd .pl-sw i{ position:absolute;left:0;top:50%;display:block;width:14px;height:14px;margin-top:-7px; border-radius:999px;background:color-mix(in srgb,var(--mast-ink) 66%,var(--mast)); transform:translateX(3px);transform-origin:50% 50%;transition:background-color 320ms ease;will-change:transform} html[data-polish] .hd .pl-sw[data-liq="on"]{background:var(--mast-ink);box-shadow:inset 0 0 0 1px transparent} html[data-polish] .hd .pl-sw[data-liq="on"] i{background:var(--mast)} /* reduced motion: no lag and no glide, a short fade, as the running head does there (the site's global switch cuts transitions to .01ms, hence the !important) */ @media (prefers-reduced-motion:reduce){ html[data-polish] .hd .pl-navsw{transition:opacity var(--d-1) linear!important} } /* ── reading mode: links off, the rail steps away, the story centres ───── js/polish/toggle.js sequences it: the rail fades out, then the column centres; coming back, the column returns, then the rail fades in. The article keeps its width, so nothing reflows vertically. */ html[data-polish] .artgrid > .clrail{transition:opacity var(--d-3) var(--e-out)} html[data-polish] .artgrid > .clrail.pl-rail-out{opacity:0;pointer-events:none; transition:opacity var(--d-2) var(--e-in)} html[data-polish] .artgrid.pl-reading > .clrail{display:none} /* The contribution island normally anchors back-to-top in the evidence gutter. That gutter disappears as source mode turns off and the article centres. Use the viewport edge immediately, including both layout transitions; keep the supplied island assets unchanged. */ html[data-polish]:has(.art.plain, .clrail.pl-rail-out, .artgrid.pl-reading) .totop.article.gutter{ left:auto;right:16px } @media (min-width:721px) and (max-width:1080px){ /* No evidence gutter exists on tablets. Reserve the arrow's 44px plus clearance in both modes so switching sources never reflows the text. */ html[data-polish]:has(#contribfab) .artgrid > .art{ max-width:min(790px,calc(100% - 56px)) } html[data-polish]:has(#contribfab) .totop.article{ left:auto;right:16px } } @media (max-width:720px){ /* Breakpoint restoration is immediate, not a fade from desktop reading mode. */ html[data-polish] .artgrid > .clrail{transition:none} } @media (min-width:1081px){ /* Keep both grid tracks: shifting by half the rail and gap centres the unchanged article without changing its width or reflowing its text. */ html[data-polish] .artgrid.pl-reading > .art{ position:relative;left:calc((330px + var(--s14)) / 2);justify-self:center} } /* ── css/polish/body.css ── */ /* Article polish: body. Visual finish only. */ html[data-polish] .art{ --pb-rule:color-mix(in srgb,var(--ink-4) 50%,transparent); --pb-rule-c:color-mix(in srgb,var(--t3) 42%,transparent); --pb-wash:color-mix(in srgb,var(--accent-soft),var(--accent) 3%); --pb-lit:var(--accent-soft); --pb-hit:color-mix(in srgb,var(--accent-soft),var(--accent) 9%); --pb-wash-c:color-mix(in srgb,var(--t3-bg) 68%,transparent); --pb-lit-c:color-mix(in srgb,var(--t3-bg) 55%,transparent); --pb-hit-c:color-mix(in srgb,var(--t3-bg),var(--t3) 9%); --pb-chip:color-mix(in srgb,var(--accent-soft),var(--accent) 12%); --pb-chip-c:color-mix(in srgb,var(--t3-bg),var(--t3) 10%); --pb-ring:color-mix(in srgb,var(--ink) 8%,transparent); } html[data-polish][data-theme="dark"] .art{ --pb-rule:color-mix(in srgb,var(--ink-4) 78%,transparent); --pb-rule-c:color-mix(in srgb,var(--t3) 46%,transparent); --pb-ring:color-mix(in srgb,var(--ink) 7%,transparent); } html[data-polish] .art > p{font-kerning:normal;font-variant-ligatures:common-ligatures} html[data-polish] .art .bsub{margin:var(--s10) 0 var(--s4)} html[data-polish] .art .bsub:first-of-type{margin-top:var(--s10)} html[data-polish] .art .layerrow + .bsub, html[data-polish] .art .legend + .bsub{margin-top:var(--s6)} html[data-polish] .art .layerrow + p{margin-top:var(--s4)} html[data-polish] .art .cl{ border-radius:3px; text-decoration-line:underline;text-decoration-style:solid; text-decoration-thickness:1px;text-underline-offset:5px; text-decoration-skip-ink:auto; text-decoration-color:var(--pb-rule); background-color:transparent; -webkit-box-decoration-break:clone;box-decoration-break:clone; transition:background-color var(--d-2) var(--e-out), text-decoration-color var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out); } html[data-polish] .art .cl[data-t="1"]{text-decoration-style:dashed; text-decoration-color:color-mix(in srgb,var(--t1) 60%,transparent); background-color:color-mix(in srgb,var(--t1-bg) 55%,transparent)} html[data-polish] .art .cl[data-t="2"]{ text-decoration-color:color-mix(in srgb,var(--t2) 55%,transparent); background-color:color-mix(in srgb,var(--t2-bg) 55%,transparent)} html[data-polish] .art .cl[data-t="3"]{text-decoration-color:color-mix(in srgb,var(--t3) 45%,transparent)} html[data-polish] .art .cl[data-t="4"]{text-decoration-color:color-mix(in srgb,var(--t4) 45%,transparent)} html[data-polish] .art .cl.lit{color:inherit} html[data-polish] .art:not(.plain) .cl.lit{ background-color:var(--pb-lit); box-shadow:2px 0 0 var(--pb-lit),-2px 0 0 var(--pb-lit); text-decoration-color:var(--accent); } @media (hover:hover){ html[data-polish] .art:not(.plain) .cl:hover{ color:inherit; background-color:var(--pb-wash); box-shadow:2px 0 0 var(--pb-wash),-2px 0 0 var(--pb-wash); text-decoration-color:var(--accent); } } html[data-polish] .art:not(.plain) .cl:active{ color:inherit; background-color:var(--pb-wash); box-shadow:2px 0 0 var(--pb-wash),-2px 0 0 var(--pb-wash); text-decoration-color:var(--accent); } html[data-polish] .art .cl:focus-visible{border-radius:3px;box-shadow:var(--focus-tight)} html[data-polish] .art:not(.plain) .cl.contribution{color:inherit; background-color:transparent;text-decoration-color:var(--pb-rule-c)} html[data-polish] .art:not(.plain) .cl.contribution.lit{ background-color:var(--pb-lit-c); box-shadow:2px 0 0 var(--pb-lit-c),-2px 0 0 var(--pb-lit-c); text-decoration-color:var(--t3); } @media (hover:hover){ html[data-polish] .art:not(.plain) .cl.contribution:hover{ background-color:var(--pb-wash-c); box-shadow:2px 0 0 var(--pb-wash-c),-2px 0 0 var(--pb-wash-c); text-decoration-color:var(--t3); } } html[data-polish] .art:not(.plain) .cl.contribution:active{ background-color:var(--pb-wash-c); box-shadow:2px 0 0 var(--pb-wash-c),-2px 0 0 var(--pb-wash-c); text-decoration-color:var(--t3); } html[data-polish] .art .cl.mine{outline:1px solid var(--accent-line);outline-offset:3px} @keyframes pbHit{ 0%{box-shadow:inset 0 0 0 100em transparent,2px 0 0 transparent,-2px 0 0 transparent} 12%,62%{box-shadow:inset 0 0 0 100em var(--pb-hit),2px 0 0 var(--pb-hit),-2px 0 0 var(--pb-hit); text-decoration-color:var(--accent)} 100%{box-shadow:inset 0 0 0 100em transparent,2px 0 0 transparent,-2px 0 0 transparent} } @keyframes pbHitC{ 0%{box-shadow:inset 0 0 0 100em transparent,2px 0 0 transparent,-2px 0 0 transparent} 12%,62%{box-shadow:inset 0 0 0 100em var(--pb-hit-c),2px 0 0 var(--pb-hit-c),-2px 0 0 var(--pb-hit-c); text-decoration-color:var(--t3)} 100%{box-shadow:inset 0 0 0 100em transparent,2px 0 0 transparent,-2px 0 0 transparent} } html[data-polish] .art .cl.hit{animation:pbHit 1.8s var(--e-out)} html[data-polish] .art .cl.contribution.hit, html[data-polish] .art.plain .cl.contribution.hit{animation:pbHitC 1.8s var(--e-out)} @media (prefers-reduced-motion:reduce){ html[data-polish] .art .cl.hit, html[data-polish] .art .cl.contribution.hit, html[data-polish] .art.plain .cl.contribution.hit{animation-duration:1.8s!important} } html[data-polish] .art .cite{ display:inline-block;position:relative;top:-.62em; vertical-align:baseline;line-height:1.15; font-size:.6em;font-weight:600;letter-spacing:0; font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1; margin-left:2px;padding:1px 3px;border-radius:4px; color:var(--accent-ink);background-color:transparent; text-decoration:none;cursor:pointer; transition:background-color var(--d-2) var(--e-out),color var(--d-2) var(--e-out); } html[data-polish] .art.plain .cite{display:none} html[data-polish] .art .pb-keep{white-space:nowrap} html[data-polish] .art .cite + .cite{margin-left:0} html[data-polish] .art .cl:hover .cite, html[data-polish] .art .cite:hover{text-decoration:none} @media (hover:hover){ html[data-polish] .art .cite:hover{background-color:var(--pb-chip)} } html[data-polish] .art .cite:focus-visible{background-color:var(--pb-chip)} html[data-polish] .art .cite:active{background-color:var(--pb-chip);color:var(--accent)} html[data-polish] .art .cite:focus-visible{box-shadow:var(--focus-tight);border-radius:4px} html[data-polish] .art .cite.contrib{ display:inline-flex;top:0;vertical-align:middle;padding:0; font:700 10px/1 var(--sans);letter-spacing:0;text-transform:none; margin:0 4px 0 5px;border-radius:50%; } html[data-polish] .art .cite.contrib:focus-visible{border-radius:50%} html[data-polish] .art.plain .cite.contrib{display:none} @media (hover:hover){ html[data-polish] .art .cite.contrib:hover{background-color:var(--pb-chip-c);color:var(--t3-ink)} } html[data-polish] .art .cite.contrib:focus-visible, html[data-polish] .art .cite.contrib:active{background-color:var(--pb-chip-c);color:var(--t3-ink)} html[data-polish] .art .cite.corr{font-size:.6em;font-weight:600;margin-left:3px} @media (pointer:coarse){ html[data-polish] .art .cite::after{content:"";position:absolute;inset:-9px -3px} } html[data-polish] .art.plain .cl{ text-decoration-line:underline!important; text-decoration-color:transparent!important; background-color:transparent!important; box-shadow:none; } html[data-polish].pb-live .art .cite{ transition:background-color var(--d-2) var(--e-out),color var(--d-2) var(--e-out), opacity var(--d-3) var(--e-out); } @starting-style{ html[data-polish].pb-live .art:not(.plain) .cite{opacity:0} } html[data-polish] .art figure.hero .im, html[data-polish] .art figure.bimg .im{ border-radius:var(--r-sm);box-shadow:none; --im-foot:transparent; } html[data-polish] .art figure .im::after{ background:none;border-radius:inherit;z-index:1; box-shadow:inset 0 0 0 1px var(--pb-ring); } html[data-polish] .art figure .im.imtr::after{box-shadow:none} html[data-polish] .art figure .im img{ transition:opacity var(--d-4) var(--e-out),filter var(--d-3) var(--e-out); } html[data-polish] .art figure .im img.pb-wait{opacity:0;transition:none} @media (prefers-color-scheme:dark){ html[data-polish]:not([data-theme="light"]) .art figure .im img{filter:brightness(.88)} } html[data-polish][data-theme="dark"] .art figure .im img{filter:brightness(.88)} html[data-polish] .art .bimg{margin:var(--s10) 0} html[data-polish] .art .hero figcaption, html[data-polish] .art .bimg figcaption{ font-size:var(--fs-xs);line-height:1.5;color:var(--ink-3); margin-top:var(--s3); } html[data-polish] .art figcaption .imsrc{color:var(--ink-4)} html[data-polish] .art figcaption .imsrc a{ color:var(--ink-3);border-radius:3px;padding:0 2px;margin:0 -2px; text-decoration-line:underline;text-decoration-thickness:1px; text-underline-offset:3px;text-decoration-color:var(--line); transition:color var(--d-2) var(--e-out),text-decoration-color var(--d-2) var(--e-out); } @media (hover:hover){ html[data-polish] .art figcaption .imsrc a:hover{color:var(--ink-2);text-decoration-color:var(--accent)} } html[data-polish] .art figcaption .imsrc a:focus-visible{box-shadow:var(--focus);border-radius:3px} html[data-polish] .art > p a, html[data-polish] .art > ul a, html[data-polish] .art > ol a, html[data-polish] .art > blockquote a{ text-decoration-thickness:1px;text-underline-offset:3px; } @media (max-width:720px){ html[data-polish] .art .bsub{margin:var(--s8) 0 var(--s3)} html[data-polish] .art .bsub:first-of-type{margin-top:var(--s8)} html[data-polish] .art .layerrow + .bsub, html[data-polish] .art .legend + .bsub{margin-top:var(--s5)} html[data-polish] .art .layerrow + p{margin-top:var(--s3)} html[data-polish] .art .bimg{margin:var(--s8) 0} html[data-polish] .art .cl{text-underline-offset:4.5px} html[data-polish] .art .cite, html[data-polish] .art .cite.corr{font-size:.64em} } /* ── css/polish/rail.css ── */ /* Article polish: rail. Visual finish only. */ @property --rail-head{syntax:'';inherits:false;initial-value:1} @property --rail-tail{syntax:'';inherits:false;initial-value:1} html[data-polish] .clrail .rh{ align-items:baseline;gap:var(--s2) var(--s3);flex-wrap:wrap; margin-bottom:0;padding-bottom:var(--s3);border-bottom:1px solid var(--line); } html[data-polish] .clrail .rh .a{ font-size:var(--fs-3xs);font-weight:600;letter-spacing:.08em;line-height:1.2; color:var(--accent-ink);white-space:nowrap; } html[data-polish] .clrail .rh .b{ font-size:var(--fs-2xs);font-weight:400;line-height:1.2;color:var(--ink-3); font-variant-numeric:tabular-nums;white-space:nowrap; } html[data-polish] .clrail .clcard{ background:transparent;border:0!important;border-radius:0;margin:0; padding:var(--s5) 0;box-shadow:none!important;transform:none!important; transition:none; } html[data-polish] .clrail .clcard:last-child{margin-bottom:0} html[data-polish] .clrail .clcard + .clcard{border-top:1px solid var(--line-2)!important} html[data-polish] .clrail .clcard:focus-visible{box-shadow:var(--focus)!important;border-radius:var(--r-xs)} html[data-polish] .clrail .clcard::before{ content:"";position:absolute;left:-12px;top:var(--s5);bottom:var(--s5);width:2px; border-radius:1px;background:var(--accent);pointer-events:none; transform:scaleY(0);transform-origin:50% 50%; transition:transform var(--d-2) var(--e-in); } html[data-polish] .clrail .clcard.lit::before{ transform:scaleY(1);transition:transform var(--d-3) var(--e-out); } html[data-polish] .clrail .clcard.contribution::before{background:var(--t3)} html[data-polish] .clrail .clcard .chd{ display:flex;align-items:center;gap:10px;padding:0;margin:0 0 10px; } html[data-polish] .clrail .clcard .chd:has(.clstate){align-items:flex-start} html[data-polish] .clrail .clcard .chd .srcbadge{ width:24px;height:24px;flex:0 0 24px;margin:0;border:0; font-size:9px;letter-spacing:0; } html[data-polish] .clrail .clcard .chd:has(.clstate) .srcbadge{margin-top:-3px} html[data-polish] .clrail .clcard .clb{ display:block;-webkit-line-clamp:none;flex:1;min-width:0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-size:var(--fs-xs);line-height:18px;font-weight:600;letter-spacing:0; color:var(--ink-2); } html[data-polish] .clrail .clcard .clb:has(.clstate){ display:flex;flex-direction:column;white-space:normal;overflow:visible; } html[data-polish] .clrail .clcard .clidentity{ display:block;-webkit-line-clamp:none; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } html[data-polish] .clrail .clcard .ckl, html[data-polish] .clrail .clcard.contribution .ckl{color:var(--ink-3);font-weight:500} html[data-polish] .clrail .clcard .ckl + .clt::before{ content:"\00b7";margin:0 6px;color:var(--ink-4);font-weight:400; } html[data-polish] .clrail .clcard .clt{color:var(--ink-2);font-weight:600} html[data-polish] .clrail .clcard .pl-src{color:var(--ink-2);font-weight:600} html[data-polish] .clrail .clcard.pl-named .pl-src + .ckl::before{ content:"\00b7";margin:0 6px;color:var(--ink-4);font-weight:400; } html[data-polish] .clrail .clcard.pl-named .clt{display:none} html[data-polish] .clrail .clcard .clstate{ font-size:var(--fs-2xs);line-height:1.4;font-weight:400;color:var(--ink-3); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } html[data-polish] .clrail .clcard .cbd{padding:0} html[data-polish] .clrail .clcard .cqt{ font-size:var(--fs-sm);line-height:1.5;font-weight:400;letter-spacing:0; color:var(--ink-2);text-wrap:pretty; transition:color var(--d-2) var(--e-out); } html[data-polish] .clrail .clcard.lit .cqt, html[data-polish] .clrail .clcard.contribution.lit .cqt{color:var(--ink)} html[data-polish] .clrail .clcard .cdv{height:0;background:none;margin:10px 0 0} html[data-polish] .clrail .clcard .cat{display:none} html[data-polish] .clrail .clcard .csr, html[data-polish] .clrail .clcard .csr.contrib, html[data-polish] .clrail .clcard .csr.corr, html[data-polish] .clrail .clcard.contribution .csr.contrib{ display:flex;align-items:baseline;flex-wrap:wrap;gap:0 6px; margin:2px 0 0;padding:0;border:0; font-size:var(--fs-xs);line-height:1.45;font-weight:400;color:var(--ink-3); } html[data-polish] .clrail .clcard .cnum, html[data-polish] .clrail .clcard.contribution .cnum{ display:inline;min-width:0;height:auto;padding:0;border-radius:0;background:none; font-size:var(--fs-xs);font-weight:600;line-height:inherit; font-variant-numeric:tabular-nums;color:var(--accent-ink); } html[data-polish] .clrail .clcard.contribution .cnum{color:var(--t3-ink)} html[data-polish] .clrail .clcard .cnum:has(+ .dstamp)::after{ content:"\00b7";content:"\00b7" / "";margin-left:6px;color:var(--ink-4);font-weight:400; } html[data-polish] .clrail .clcard .csr.contrib, html[data-polish] .clrail .clcard.contribution .csr.contrib{column-gap:0} html[data-polish] .clrail .clcard .csr.contrib .cnum + .cnum{margin-left:6px} html[data-polish] .clrail .clcard .csr.contrib .cnum:has(+ .dstamp)::after{margin:0 6px} html[data-polish] .clrail .clcard .csr.contrib .dstamp::before{content:"\00a0";content:"\00a0" / ""} html[data-polish] .clrail .clcard .csr .dstamp{ font-size:var(--fs-xs);font-weight:400;letter-spacing:0;text-transform:none; color:var(--ink-3);font-variant-numeric:tabular-nums; } html[data-polish] .clrail .clwrap{border-bottom:1px solid var(--line)} html[data-polish] .clrail .viewall{ justify-content:flex-start;gap:5px;width:calc(100% + 16px);min-height:44px; margin:0 -8px;padding:0 10px 0 8px; background:transparent;border:0;border-radius:var(--r-xs); font-size:var(--fs-sm);font-weight:600;letter-spacing:0;color:var(--ink); transition:color var(--d-2) var(--e-out),transform var(--d-1) var(--e-out); } html[data-polish] .clrail .viewall .n{ color:var(--ink-3);font-weight:400;font-variant-numeric:tabular-nums; } html[data-polish] .clrail .viewall::after{ content:"";flex:0 0 auto;margin-left:auto;width:12px;height:12px; background-color:var(--ink-3); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 1.5v9M2.5 7 6 10.5 9.5 7'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 1.5v9M2.5 7 6 10.5 9.5 7'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform var(--d-2) var(--e-out),background-color var(--d-2) var(--e-out); } html[data-polish] .clrail .viewall:hover{background:transparent;color:var(--accent-ink)} html[data-polish] .clrail .viewall:hover::after{background-color:var(--accent);transform:translateY(2px)} html[data-polish] .clrail .viewall:active{transform:scale(.985)} html[data-polish] .clrail .viewall:focus-visible{box-shadow:var(--focus);border-radius:var(--r-xs)} @media (min-width:1081px){ html[data-polish] .clrail .clstack{ max-height:calc(100vh - 213px); margin:0 -4px 0 -16px;padding:4px 4px var(--s5) 16px; -webkit-mask-image:linear-gradient(180deg,rgb(0 0 0 / var(--rail-head)) 0,rgb(0 0 0 / var(--rail-head)) 16px,#000 40px,#000 calc(100% - 76px),rgb(0 0 0 / var(--rail-tail)) calc(100% - 16px)); mask-image:linear-gradient(180deg,rgb(0 0 0 / var(--rail-head)) 0,rgb(0 0 0 / var(--rail-head)) 16px,#000 40px,#000 calc(100% - 76px),rgb(0 0 0 / var(--rail-tail)) calc(100% - 16px)); transition:--rail-tail var(--d-3) var(--e-out); } html[data-polish] .clrail .clwrap.more .clstack{--rail-tail:0} html[data-polish] .clrail .clwrap.polish-edges .clstack{transition:none} html[data-polish] .clrail .clfade{ height:22px;background:none; opacity:0;transform:translateY(-3px); transition:opacity var(--d-2) var(--e-in),transform var(--d-2) var(--e-in); } html[data-polish] .clrail .clwrap.more .clfade{ opacity:1;transform:none; transition:opacity var(--d-3) var(--e-out),transform var(--d-3) var(--e-out); } html[data-polish] .clrail .clfade::after{ bottom:7px;width:6px;height:6px; border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3); border-radius:0 0 1px 0; } } @media (max-width:1080px){ html[data-polish] .clrail{margin-top:0} html[data-polish] .clrail .clcard .cqt{font-size:var(--fs-base);line-height:1.5;max-width:68ch} html[data-polish] .clrail .clcard .csr{grid-column:auto;margin-top:2px;padding:0;border-top:0} html[data-polish] .clrail .viewall{min-height:48px} html[data-polish] .clrail .viewall::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10.5v-9M2.5 5 6 1.5 9.5 5'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10.5v-9M2.5 5 6 1.5 9.5 5'/%3E%3C/svg%3E"); } html[data-polish] .clrail .viewall:hover::after{transform:translateY(-2px)} } @media (max-width:720px){ html[data-polish] .clrail{margin-top:var(--s12);padding-top:0;border-top:0} html[data-polish] .clrail .rh{margin-bottom:0} html[data-polish] .clrail .rh .a{font-size:var(--fs-2xs);letter-spacing:.08em} html[data-polish] .clrail .rh .b{font-size:var(--fs-xs)} html[data-polish] .clrail .clcard{padding:var(--s4) 0} html[data-polish] .clrail .clcard::before{top:var(--s4);bottom:var(--s4)} html[data-polish] .clrail .clcard .chd{margin-bottom:var(--s2)} html[data-polish] .clrail .clcard .cdv{margin-top:var(--s2)} } /* ── css/polish/refs.css ── */ /* Article polish: refs. Visual finish only. */ html[data-polish] .refs{ --rf-num:28px; --rf-badge:20px; --rf-meta:20px; --rf-rule:var(--line-2); --rf-sep:.4em; --rf-sep-sp:calc(var(--rf-sep) - .2675em); margin-top:var(--s16);padding-top:var(--s10); border-top:1px solid var(--line)} html[data-polish] .refhead{margin-bottom:0} html[data-polish] .refh{margin:0 0 var(--s3);line-height:var(--lh-head);color:var(--ink)} html[data-polish] .art .refl{margin:0;max-width:56ch;font-size:var(--fs-base); line-height:1.55;color:var(--ink-2);text-wrap:pretty} html[data-polish] .reffilters{--rf-gap-max:var(--s4);position:relative;display:flex; flex-wrap:wrap;gap:0 var(--rf-gap,var(--rf-gap-max)); margin:var(--s5) 0 0 calc(-1 * var(--s1));padding:0} html[data-polish] .reffilters::before{content:"";position:absolute;left:var(--s1);right:0; bottom:0;height:1px;background:var(--rf-track,var(--line-2));pointer-events:none} html[data-polish] .reffilters.polish-wrapped::before{position:static;flex:0 0 100%; height:0;background:none;order:1} html[data-polish] .reffilters.polish-wrapped > .reffilter:nth-child(n+4){order:2} html[data-polish] .reffilter{position:relative;display:inline-flex;align-items:center; gap:5px;height:40px;margin:0;padding:0 var(--s1);border:0;border-radius:6px; background:transparent;color:var(--ink-3);font-family:var(--sans); font-size:var(--fs-sm);font-weight:500;line-height:1;letter-spacing:0; cursor:pointer;-webkit-user-select:none;user-select:none; transition:color var(--d-2) var(--e-out),transform var(--d-1) var(--e-out)} html[data-polish] .reffilter span{color:var(--ink-4);font-weight:500; font-variant-numeric:tabular-nums;transition:color var(--d-2) var(--e-out)} html[data-polish] .reffilter:hover{border-color:transparent;color:var(--ink-2)} html[data-polish] .reffilter:hover span{color:var(--ink-3)} html[data-polish] .reffilter.on{border-color:transparent;background:transparent; color:var(--ink);font-weight:500} html[data-polish] .reffilter.on span{color:var(--ink-3)} html[data-polish] .reffilter.polish-zero:not(.on), html[data-polish] .reffilter.polish-zero:not(.on) span{color:var(--ink-4)} html[data-polish] .reffilter.polish-zero:not(.on):hover, html[data-polish] .reffilter.polish-zero:not(.on):hover span{color:var(--ink-3)} html[data-polish] .reffilter:active{transform:scale(.97)} html[data-polish] .reffilter:focus-visible{outline:none;box-shadow:var(--focus); border-radius:6px} html[data-polish] .reffilter.on::after{content:"";position:absolute; left:var(--s1);right:var(--s1);bottom:0;height:2px;border-radius:2px 2px 0 0; background:var(--accent)} html[data-polish] .reffilters.polish-bar .reffilter.on::after{content:none} html[data-polish] .polish-refbar{position:absolute;left:0;top:0;height:2px; width:var(--rb-w,0px);transform:translate3d(var(--rb-x,0px),var(--rb-y,0px),0); border-radius:2px 2px 0 0;background:var(--accent);pointer-events:none; opacity:0} html[data-polish] .reffilters.polish-bar .polish-refbar{opacity:1} html[data-polish] .reffilters.polish-anim .polish-refbar{ transition:transform var(--d-4) var(--e-glide),width var(--d-4) var(--e-glide), opacity var(--d-2) var(--e-out)} html[data-polish] .reflist{margin:0;padding:0} html[data-polish] .refitem{position:relative;isolation:isolate;gap:0; padding:var(--s6) 0;border-top:0;border-radius:0;background:transparent; transition:none;animation:polishRefIn var(--d-3) var(--e-out) both} html[data-polish] .refitem:not([hidden]) ~ .refitem:not([hidden]){ border-top:1px solid var(--rf-rule)} html[data-polish] .reflist:not(:has(> .refitem:not([hidden]))){min-height:var(--s8)} @keyframes polishRefIn{ from{opacity:0;transform:translateY(3px)} to{opacity:1;transform:none} } html[data-polish] .refn{flex:0 0 var(--rf-num);width:var(--rf-num);padding:0; font-size:var(--fs-sm);font-weight:500;line-height:var(--rf-meta); color:var(--ink-4);font-variant-numeric:tabular-nums;letter-spacing:0} html[data-polish] .refb{flex:1 1 auto;min-width:0} html[data-polish] .refmeta{display:block;position:relative; min-height:var(--rf-meta);margin:0 0 6px; padding-left:calc(var(--rf-badge) + var(--s2)); font-size:var(--fs-xs);line-height:var(--rf-meta);color:var(--ink-3)} html[data-polish] .refmeta .srcbadge{position:absolute;left:0;top:0; width:var(--rf-badge);height:var(--rf-badge);margin:0;border:0; font-size:8px;letter-spacing:.02em;box-shadow:inset 0 0 0 1px rgba(19,16,17,.06)} html[data-polish] .refmeta .srcbadge img{border-radius:50%} html[data-polish] .refo{font-size:var(--fs-sm);font-weight:600;color:var(--ink); letter-spacing:var(--tr-snug)} html[data-polish] .refkind, html[data-polish] .refkind.doc, html[data-polish] .refkind.reg, html[data-polish] .refkind.ann{display:inline;padding:0;border-radius:0; background:transparent;color:var(--ink-3);font-size:var(--fs-xs); font-weight:500;letter-spacing:0;text-transform:none;white-space:nowrap} html[data-polish] .refkind::before{content:"·";content:"·" / ""; margin:0 var(--rf-sep) 0 var(--rf-sep-sp);font-weight:400;color:var(--ink-4)} /* The contributor line names two dates ("interview … · in the article since …"), which does not fit a phone column on one line. The meta line wraps between its segments; each date stamp stays unbreakable. */ html[data-polish] .refd{font-size:var(--fs-xs);color:var(--ink-3);white-space:normal; font-variant-numeric:tabular-nums} html[data-polish] .refd .polish-sep{margin:0 var(--rf-sep-sp);color:var(--ink-4); font-weight:400} html[data-polish] .refd .dstamp{font-size:inherit;font-weight:400;letter-spacing:0; text-transform:none;color:inherit;white-space:nowrap} html[data-polish] .refd.contrib{font-weight:500;color:var(--t3-ink)} html[data-polish] .refkind.polish-lead::before{content:"\A";content:"\A" / ""; white-space:pre;margin:0} html[data-polish] .refd.polish-lead{display:block} html[data-polish] .refd.polish-lead > .polish-sep-lead{display:none} html[data-polish] .reft{margin:0;max-width:62ch;font-size:var(--fs-md); font-weight:400;line-height:1.45;letter-spacing:var(--tr-snug);color:var(--ink); text-wrap:pretty;overflow-wrap:anywhere} html[data-polish] .refstate{position:relative;display:block;margin:6px 0 0; padding-left:18px;font-size:var(--fs-xs);line-height:18px;color:var(--ink-3)} html[data-polish] .refstate::before{content:"";position:absolute;left:0;top:3px; width:12px;height:12px;background:var(--ink-4); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.4' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Cpath d='M8 7.3v3.9' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='4.95' r='.9'/%3E%3C/svg%3E") center/12px 12px no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.4' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Cpath d='M8 7.3v3.9' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='4.95' r='.9'/%3E%3C/svg%3E") center/12px 12px no-repeat} html[data-polish] .refnu{display:block;margin:6px 0 0;font-size:var(--fs-xs); font-style:normal;line-height:18px;color:var(--ink-3)} html[data-polish] .refu{position:relative;display:flex;align-items:center; width:fit-content;gap:5px;margin:var(--s3) 0 0 calc(-1 * var(--s1)); padding:2px var(--s1);border:0;border-radius:6px; font-size:var(--fs-xs);font-weight:600;line-height:18px;color:var(--ink-2); text-decoration:underline 1px var(--line);text-underline-offset:3px; text-decoration-skip-ink:auto; transition:color var(--d-2) var(--e-out),text-decoration-color var(--d-2) var(--e-out)} html[data-polish] .refu::after{content:"";position:absolute;inset:-8px -6px} html[data-polish] .refu:hover{color:var(--ink);text-decoration-color:var(--accent); border-color:transparent} html[data-polish] .refu svg{display:block;flex:0 0 auto;overflow:visible;color:var(--ink-3); transition:color var(--d-2) var(--e-out)} html[data-polish] .refu svg polyline, html[data-polish] .refu svg line{transition:transform var(--d-2) var(--e-out)} html[data-polish] .refu:hover svg{color:var(--accent)} html[data-polish] .refu:hover svg polyline, html[data-polish] .refu:hover svg line{transform:translate(3.5px,-3.5px)} html[data-polish] .refu:focus-visible{outline:none;box-shadow:var(--focus)} html[data-polish] .refitem::before{content:"";position:absolute;z-index:-1; inset:var(--s1) calc(-1 * var(--s3));border-radius:6px;background:var(--accent-soft); opacity:0;pointer-events:none} html[data-polish] .refitem:has(.sbk-contributor)::before{background:var(--t3-bg)} html[data-polish] .refitem.hit{animation:polishRefIn var(--d-3) var(--e-out) both} html[data-polish] .refitem.hit::before{animation:polishRefHit 1800ms both} html[data-polish] .reflist.polish-hitjs .refitem.hit::before{ animation:polishRefHitOn var(--d-3) var(--e-out) both} html[data-polish] .reflist.polish-hitjs .refitem.hit.polish-hit-out::before{ animation:polishRefHitOff var(--rf-hit-out) var(--e-out) both} html[data-polish] .refitem.hit.polish-hit-done::before, html[data-polish] .reflist.polish-hitjs .refitem.hit.polish-hit-done::before{animation:none} html[data-polish] .reflist{--rf-hit-out:680ms} @keyframes polishRefHit{ 0%{opacity:0;animation-timing-function:var(--e-out)} 12%{opacity:1;animation-timing-function:linear} 62%{opacity:1;animation-timing-function:var(--e-out)} 100%{opacity:0} } @keyframes polishRefHitOn{from{opacity:0}to{opacity:1}} @keyframes polishRefHitOff{from{opacity:1}to{opacity:0}} html[data-polish] .consulted{margin-top:var(--s4);padding-top:0; border-top:1px solid var(--line-2);interpolate-size:allow-keywords} html[data-polish] .consulted-toggle{width:calc(100% + 2 * var(--s2));min-height:52px; margin:0 calc(-1 * var(--s2));padding:var(--s3) var(--s2); border-radius:6px;color:var(--ink); transition:color var(--d-2) var(--e-out)} html[data-polish] .consulted-copy{font-size:var(--fs-sm);line-height:1.5;color:var(--ink-2); transition:color var(--d-2) var(--e-out)} html[data-polish] .consulted-copy b{font-weight:600;color:var(--ink)} html[data-polish] .consulted-toggle:hover .consulted-copy{color:var(--ink)} html[data-polish] .consulted-toggle:focus-visible{outline:none;box-shadow:var(--focus)} html[data-polish] .consulted-chevron{width:7px;height:7px;margin-right:4px; border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3); transform:translateY(-2px) rotate(45deg); transition:transform var(--d-3) var(--e-inout),border-color var(--d-2) var(--e-out)} html[data-polish] .consulted-toggle:hover .consulted-chevron{border-color:var(--ink)} html[data-polish] .consulted.on .consulted-chevron{transform:translateY(2px) rotate(225deg)} html[data-polish] .consulted-body{padding:0 0 var(--s4)} html[data-polish] .consulted.on .consulted-body{animation:polishConsultIn var(--d-3) var(--e-out) both} @keyframes polishConsultIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} @supports (interpolate-size:allow-keywords){ html[data-polish] .consulted-body{display:flow-root;height:auto;padding:0;opacity:1; overflow:visible;clip-path:inset(-8px -16px 0 -16px); transition:height var(--d-3) var(--e-out),opacity var(--d-3) var(--e-out), visibility 0s linear 0s} html[data-polish] .consulted-body[hidden]{display:flow-root;height:0;opacity:0; visibility:hidden; transition:height var(--d-2) var(--e-in),opacity var(--d-2) var(--e-in), visibility 0s linear var(--d-2)} html[data-polish] .consulted.on .consulted-body{animation:none} html[data-polish] .consulted-body > :last-child{margin-bottom:var(--s4)} } html[data-polish] .consulted-domain{border-top:1px solid var(--line-2)} html[data-polish] .consulted-domain:last-child{border-bottom:0} html[data-polish] .consulted-domain summary{align-items:center;min-height:44px; margin:0 calc(-1 * var(--s2));padding:var(--s2);border-radius:6px;font-size:var(--fs-sm);font-weight:500; line-height:1.4;color:var(--ink);transition:color var(--d-2) var(--e-out)} html[data-polish] .consulted-domain summary span:first-child{min-width:0; overflow-wrap:anywhere} html[data-polish] .consulted-domain summary span:last-child{flex:0 0 auto; font-size:var(--fs-xs);font-weight:400;color:var(--ink-3); font-variant-numeric:tabular-nums;transition:color var(--d-2) var(--e-out)} html[data-polish] .consulted-domain summary::after{width:6px;height:6px; margin:0 5px 0 var(--s1);border-right:1.25px solid var(--ink-3); border-bottom:1.25px solid var(--ink-3);transform:translateY(-2px) rotate(45deg); transition:transform var(--d-3) var(--e-inout),border-color var(--d-2) var(--e-out)} html[data-polish] .consulted-domain[open] summary::after{margin-top:0; transform:translateY(1px) rotate(225deg)} html[data-polish] .consulted-domain summary:hover span:last-child{color:var(--ink-2)} html[data-polish] .consulted-domain summary:hover::after{border-color:var(--ink)} html[data-polish] .consulted-domain summary:focus-visible{outline:none;box-shadow:var(--focus)} html[data-polish] .consulted-domain ul{margin:0;padding:0 0 var(--s3) var(--s4)} html[data-polish] .consulted-domain li{padding:var(--s1) 0;font-size:var(--fs-xs); line-height:1.5;color:var(--ink-2)} html[data-polish] .consulted-domain a{border-radius:3px;text-decoration:underline 1px; text-decoration-color:var(--line);text-underline-offset:3px; transition:color var(--d-2) var(--e-out),text-decoration-color var(--d-2) var(--e-out)} html[data-polish] .consulted-domain a:hover{color:var(--ink);text-decoration-color:var(--accent)} html[data-polish] .consulted-domain a:focus-visible{outline:none;box-shadow:var(--focus)} @supports selector(::details-content){ html[data-polish] .consulted-domain::details-content{block-size:0;opacity:0; overflow:clip;overflow-clip-margin:6px; transition:block-size var(--d-2) var(--e-in),opacity var(--d-2) var(--e-in), content-visibility var(--d-2) allow-discrete} html[data-polish] .consulted-domain[open]::details-content{block-size:auto;opacity:1; transition:block-size var(--d-3) var(--e-out),opacity var(--d-3) var(--e-out), content-visibility var(--d-3) allow-discrete} } html[data-polish][data-theme="dark"] .refs{--rf-rule:var(--line);--rf-track:var(--line)} html[data-polish][data-theme="dark"] .consulted, html[data-polish][data-theme="dark"] .consulted-domain{border-color:var(--line)} html[data-polish][data-theme="dark"] .refmeta .srcbadge{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)} @media (max-width:720px){ html[data-polish] .refs{--rf-num:24px;margin-top:var(--s12);padding-top:var(--s8)} html[data-polish] .refh{margin-bottom:var(--s2)} html[data-polish] .reffilters{--rf-gap-max:var(--s2);margin-top:var(--s4)} html[data-polish] .reffilter{height:44px;font-size:var(--fs-xs);gap:4px} html[data-polish] .refitem{padding:var(--s5) 0} html[data-polish] .reft{font-size:var(--fs-base)} html[data-polish] .refu{margin-top:var(--s2);padding:6px var(--s1)} html[data-polish] .refu::after{inset:-7px -6px} html[data-polish] .refitem::before{inset:var(--s1) calc(-1 * var(--s2))} } @media (max-width:380px){ html[data-polish] .reffilter{gap:3px} } @media (prefers-reduced-motion:reduce){ html[data-polish] .refitem,html[data-polish] .refitem.hit{animation:none} html[data-polish] .refitem.hit:not(.polish-hit-done)::before{animation-duration:1800ms!important} html[data-polish] .reflist.polish-hitjs .refitem.hit:not(.polish-hit-done)::before{ animation-duration:var(--d-3)!important} html[data-polish] .reflist.polish-hitjs .refitem.hit.polish-hit-out:not(.polish-hit-done)::before{ animation-duration:var(--rf-hit-out)!important} html[data-polish] .reffilter:active{transform:none} } /* ── css/polish/history.css ── */ /* Article polish: history. Visual finish only. */ html[data-polish] .arthist{ --ah-pad:34px; --ah-x:9px; --ah-dot:9px; --ah-cy:13.5px; --ah-gap:var(--s12); --ah-in:var(--s4); margin-top:var(--s12);padding-top:var(--s10); border-top:1px solid var(--line)} html[data-polish] .ahh{margin:0 0 var(--s8);line-height:var(--lh-head)} html[data-polish] .ahitem{padding:0 0 0 var(--ah-pad);border-bottom:0; font-size:var(--fs-sm);line-height:1.55} html[data-polish] .ahitem + .ahitem{margin-top:var(--ah-gap)} html[data-polish] .ahitem:last-child{padding-bottom:0} html[data-polish] .ahitem::before{left:var(--ah-x);width:1px;top:0;bottom:0;height:auto; background:var(--line)} html[data-polish] .ahitem + .ahitem::before{top:calc(-1 * var(--ah-gap))} html[data-polish] .ahitem:first-child::before{top:var(--ah-cy)} html[data-polish] .ahitem:last-child::before{bottom:auto; height:calc(var(--ah-gap) + var(--ah-cy))} html[data-polish] .ahitem:first-child:last-child::before{content:none} html[data-polish] .ahitem::after{left:calc(var(--ah-x) + .5px - var(--ah-dot) / 2); top:calc(var(--ah-cy) - var(--ah-dot) / 2);width:var(--ah-dot);height:var(--ah-dot); border:0;background:var(--ink-4);box-shadow:0 0 0 3px var(--app)} html[data-polish] .ahitem.contrib::after{background:var(--t3-ink)} html[data-polish] .ahitem.corr::after{background:var(--accent)} html[data-polish] .ahtop{gap:var(--s3);line-height:24px} html[data-polish] .ahk{font-size:var(--fs-md);font-weight:600;color:var(--ink); letter-spacing:var(--tr-snug)} html[data-polish] .ahk.corr{color:var(--accent-ink)} html[data-polish] .arthist .ahd.dstamp{font-size:var(--fs-xs);font-weight:400; letter-spacing:0;text-transform:none;color:var(--ink-3); font-variant-numeric:tabular-nums} html[data-polish] .arthist .ahn{margin-top:var(--s3);color:var(--ink-2)} html[data-polish] .ahchange{margin-top:var(--s5);padding:0;background:none;border-radius:0} html[data-polish] .ahitem .ahchange + .ahchange{margin-top:var(--s6)} html[data-polish] .arthist .ahcx{margin:0;padding-left:var(--ah-in);max-width:58ch; border-left:1px solid var(--line);font-family:var(--disp);font-weight:300; font-size:18px;line-height:1.55;color:var(--ink-2);text-wrap:pretty; transition:border-color var(--d-2) var(--e-out)} html[data-polish] .ahitem.contrib .ahcx{border-left-color:var(--t3-ln)} html[data-polish] .ahcx del{color:var(--ink-3);text-decoration:line-through 1px; text-decoration-color:var(--ink-3)} html[data-polish] .ahcx ins{border-bottom:0;text-decoration:underline 1px var(--accent); text-underline-offset:4px;text-decoration-skip-ink:auto} html[data-polish] .ahcs{display:flex;flex-wrap:wrap;align-items:baseline; margin-top:var(--s2);padding-left:calc(var(--ah-in) + 1px); font-size:var(--fs-xs);line-height:1.5;color:var(--ink-3); font-variant-numeric:tabular-nums} html[data-polish] .ahchange:has(.ahgoto:hover) .ahcx, html[data-polish] .ahchange:has(.ahgoto:focus-visible) .ahcx{border-left-color:var(--ink-4)} html[data-polish] .ahitem.contrib .ahchange:has(.ahgoto:hover) .ahcx, html[data-polish] .ahitem.contrib .ahchange:has(.ahgoto:focus-visible) .ahcx{ border-left-color:var(--t3)} html[data-polish] .ahwho{margin-top:var(--s8);gap:var(--s3)} html[data-polish] .arthist .pav3{width:28px;height:28px;font-size:10px;font-weight:600; letter-spacing:.02em;background:var(--ink-2);color:var(--app)} html[data-polish] .arthist .ahitem.contrib .ahwho .pav3:not(.ahpor){ background:#41503F;color:#fff;font-size:11px;font-weight:700} html[data-polish] .ahwn{font-size:var(--fs-sm);font-weight:600;line-height:1.4;color:var(--ink)} html[data-polish] .ahwn .ahwd{font-weight:400;color:var(--ink-3)} html[data-polish] .ahwr{margin-top:1px;font-size:var(--fs-xs);color:var(--ink-3)} html[data-polish] .ahline{margin-top:var(--s2);font-size:var(--fs-sm);color:var(--ink-2); font-variant-numeric:tabular-nums;text-wrap:pretty} html[data-polish] .ahline b{font-weight:600} @keyframes plhAhHit{ 0%{background-color:transparent;box-shadow:0 0 0 var(--s2) transparent} 22%,56%{background-color:var(--ah-hit);box-shadow:0 0 0 var(--s2) var(--ah-hit)} 100%{background-color:transparent;box-shadow:0 0 0 var(--s2) transparent} } @keyframes plhAhHitRing{ 0%,100%{box-shadow:0 0 0 3px transparent,0 0 0 3px var(--app)} 22%,56%{box-shadow:0 0 0 3px var(--ah-hit),0 0 0 3px var(--app)} } html[data-polish] .ahitem.hit{--ah-hit:var(--accent-soft);border-radius:6px; animation:plhAhHit 1.4s var(--e-inout) both} html[data-polish] .ahitem.hit::after{animation:plhAhHitRing 1.4s var(--e-inout) both} @media (prefers-reduced-motion:reduce){ html[data-polish] .ahitem.hit, html[data-polish] .ahitem.hit::after{animation-duration:1.4s!important} } @media (max-width:720px){ html[data-polish] .arthist{--ah-pad:28px;--ah-x:8px;--ah-gap:var(--s10);--ah-in:var(--s3); margin-top:var(--s10);padding-top:var(--s8)} html[data-polish] .ahh{margin-bottom:var(--s6)} html[data-polish] .arthist .ahcx{font-size:17px} } html[data-polish] .arthist.plh-rows{ --ah-pad:48px; --ah-x:13.5px; --ah-cy:14px; --ah-gap:var(--s8); } html[data-polish] .refs:has(> .consulted:last-child) + .arthist.plh-rows{ border-top:0;padding-top:0;margin-top:var(--s16)} html[data-polish] .arthist.plh-rows .ahitem.plh-entry::after{content:none} html[data-polish] .arthist.plh-rows .plh-pub .ahtop{padding-top:2px;line-height:24px} html[data-polish] .arthist.plh-rows .plh-pub::after{background:var(--ink-2)} html[data-polish] .arthist.plh-rows .plh-pub .ahline{margin-top:2px;font-size:var(--fs-xs); line-height:1.5;color:var(--ink-2)} html[data-polish] .arthist.plh-rows .plh-pub .ahd.dstamp{color:var(--ink-2)} html[data-polish] .plh-head{position:relative;display:block;width:100%;margin:0;padding:2px 0 0; border:0;border-radius:6px;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer; -webkit-tap-highlight-color:transparent} html[data-polish] .plh-head:disabled{cursor:default} html[data-polish] .plh-av{position:absolute;top:calc(var(--ah-cy) - 14px); left:calc(var(--ah-x) + .5px - 14px - var(--ah-pad))} html[data-polish] .arthist .plh-av .pav3{display:grid;place-items:center;width:28px;height:28px; border-radius:50%;box-shadow:0 0 0 4px var(--app);font-size:11px;font-weight:700;letter-spacing:.02em; background:#41503F;color:#fff} html[data-polish] .plh-ht{display:block;min-width:0} html[data-polish] .plh-who{display:block;font-size:var(--fs-md);line-height:24px;color:var(--ink-2); text-wrap:pretty;transition:color var(--d-2) var(--e-out)} html[data-polish] .plh-who b{font-weight:600;color:var(--ink)} html[data-polish] .plh-meta{display:flex;flex-wrap:wrap;margin:2px 0 0 -16px;clip-path:inset(0 0 0 16px); font-size:var(--fs-xs);line-height:1.5;color:var(--ink-2);font-variant-numeric:tabular-nums} html[data-polish] .plh-meta > *::before{content:"\00B7";content:"\00B7" / ", "; display:inline-block;width:16px;text-align:center;color:var(--ink-4)} html[data-polish] .plh-n{display:inline-flex;align-items:baseline;font-weight:600;color:var(--ink-2)} html[data-polish] .plh-chev{display:inline-block;width:6px;height:6px;margin:0 2px 0 7px; border:solid var(--ink-2);border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg); transition:transform var(--d-3) var(--e-inout),border-color var(--d-2) var(--e-out)} html[data-polish] .plh-open .plh-chev{transform:translateY(1px) rotate(-135deg)} @media (hover:hover){ html[data-polish] .plh-head:not(:disabled):hover .plh-who, html[data-polish] .plh-head:not(:disabled):hover .plh-n{color:var(--ink)} html[data-polish] .plh-head:not(:disabled):hover .plh-chev{border-color:var(--ink)} } html[data-polish] .plh-head:focus{outline:2px solid transparent;outline-offset:2px} html[data-polish] .plh-head:focus-visible{box-shadow:var(--focus)} html[data-polish] .plh-body{display:grid;grid-template-rows:0fr; transition:grid-template-rows var(--d-2) var(--e-in) var(--d-1)} html[data-polish] .plh-open .plh-body{grid-template-rows:1fr; transition:grid-template-rows var(--d-4) var(--e-out)} /* Position the clipping ancestor, not the page: absolute accessible labels otherwise escape the collapsed grid track and enlarge root scroll extent. */ html[data-polish] .plh-in{position:relative;min-height:0;overflow:hidden;margin-inline:-12px;padding-inline:12px; opacity:0;transition:opacity var(--d-1) var(--e-in)} html[data-polish] .plh-open .plh-in{opacity:1;transition:opacity var(--d-3) var(--e-out) 40ms} html[data-polish] .plh-sents{list-style:none;margin:var(--s3) 0 0;padding:0 0 6px;max-width:66ch} html[data-polish] .plh-sents li + li{border-top:1px solid var(--line-2)} html[data-polish] .plh-sent{display:grid;grid-template-columns:minmax(0,1fr) 14px;gap:var(--s3); align-items:start;width:calc(100% + 24px);margin:0 -12px;padding:12px;border:0;border-radius:6px; background:transparent;font:inherit;font-size:15px;line-height:1.55;color:var(--ink-2);text-align:left; cursor:pointer;-webkit-tap-highlight-color:transparent;text-wrap:pretty; transition:color var(--d-2) var(--e-out)} html[data-polish] .plh-st{display:block} html[data-polish] .plh-go{font-weight:600;line-height:inherit;color:var(--t3-ink);opacity:0; transform:translateY(3px);transition:opacity var(--d-2) var(--e-out),transform var(--d-2) var(--e-out)} @media (hover:hover){ html[data-polish] .plh-sent:hover{color:var(--ink)} html[data-polish] .plh-sent:hover .plh-go{opacity:1;transform:none} } html[data-polish] .plh-sent:active{color:var(--ink)} html[data-polish] .plh-sent:focus{outline:2px solid transparent;outline-offset:-2px} html[data-polish] .plh-sent:focus-visible{box-shadow:var(--focus);color:var(--ink)} html[data-polish] .plh-sent:focus-visible .plh-go{opacity:1;transform:none} html[data-polish] .plh-sr{position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap} html[data-polish] summary.plh-head{list-style:none} html[data-polish] summary.plh-head::-webkit-details-marker{display:none} /* Native details is the no-JS/failure fallback. Enhancement holds it open and uses the existing grid animation plus inert for its closed state. */ html[data-polish] .plh-disclosure:not([data-bound])[open] .plh-body{grid-template-rows:1fr} html[data-polish] .plh-disclosure:not([data-bound])[open] .plh-in{opacity:1} html[data-polish] .plh-disclosure:not([data-bound])[open] .plh-chev{transform:translateY(1px) rotate(-135deg)} @media (max-width:720px){ html[data-polish] .arthist.plh-rows{--ah-pad:42px;--ah-x:13.5px;--ah-gap:var(--s7)} html[data-polish] .refs:has(> .consulted:last-child) + .arthist.plh-rows{margin-top:var(--s12)} html[data-polish] .plh-who{font-size:var(--fs-base);line-height:24px} html[data-polish] .plh-head{min-height:44px} html[data-polish] .plh-sent{min-height:44px;font-size:14.5px} html[data-polish] .plh-go{opacity:1;transform:none;color:var(--ink-4)} } /* ── css/polish/chrome.css ── */ /* Article polish: chrome. Visual finish only. */ html[data-polish]{ --pc-cast:0 1px 0 rgba(19,16,17,.04),0 8px 24px -8px rgba(19,16,17,.18); --pc-ring:0 0 0 1px var(--line); --pc-ring-hi:0 0 0 1px color-mix(in srgb,var(--ink) 22%,var(--line)); --pc-sel:color-mix(in srgb,var(--accent) 20%,var(--app)); --pc-toast-bg:var(--ink); --pc-toast-ink:var(--app); --pc-toast-ring:0 0 0 1px var(--ink); } @media (prefers-color-scheme:dark){ html[data-polish]:not([data-theme="light"]){ --pc-cast:0 1px 0 rgba(0,0,0,.28),0 10px 28px -8px rgba(0,0,0,.62); --pc-ring:0 0 0 1px color-mix(in srgb,var(--ink) 7%,var(--line)); --pc-ring-hi:0 0 0 1px color-mix(in srgb,var(--ink) 18%,var(--line)); --pc-sel:color-mix(in srgb,var(--accent) 34%,var(--app)); --pc-toast-bg:color-mix(in srgb,var(--ink) 8%,var(--raised)); --pc-toast-ink:var(--ink); --pc-toast-ring:var(--pc-ring); } } html[data-polish][data-theme="dark"]{ --pc-cast:0 1px 0 rgba(0,0,0,.28),0 10px 28px -8px rgba(0,0,0,.62); --pc-ring:0 0 0 1px color-mix(in srgb,var(--ink) 7%,var(--line)); --pc-ring-hi:0 0 0 1px color-mix(in srgb,var(--ink) 18%,var(--line)); --pc-sel:color-mix(in srgb,var(--accent) 34%,var(--app)); --pc-toast-bg:color-mix(in srgb,var(--ink) 8%,var(--raised)); --pc-toast-ink:var(--ink); --pc-toast-ring:var(--pc-ring); } html[data-polish] ::selection{background:var(--pc-sel);color:var(--ink)} html[data-polish] .totop{ width:40px;height:40px;border:0;background:var(--raised);color:var(--ink-2); backdrop-filter:none;-webkit-backdrop-filter:none; box-shadow:var(--pc-cast),var(--pc-ring); transform:translateY(4px) scale(.97);transform-origin:50% 100%; transition:opacity var(--d-2) var(--e-in),transform var(--d-2) var(--e-in), color var(--d-2) var(--e-out),box-shadow var(--d-2) var(--e-out),visibility 0s linear var(--d-2); } html[data-polish] .totop.show{transform:none;visibility:visible; transition:opacity var(--d-3) var(--e-out),transform var(--d-3) var(--e-out), color var(--d-2) var(--e-out),box-shadow var(--d-2) var(--e-out),visibility 0s} html[data-polish] .totop svg{width:16px;height:16px; transition:transform var(--d-2) var(--e-out)} @media (hover:hover){ html[data-polish] .totop.show:hover{color:var(--ink);box-shadow:var(--pc-cast),var(--pc-ring-hi)} html[data-polish] .totop.show:hover svg{transform:translateY(-2px)} } html[data-polish] .totop.show:active{transform:scale(.97);transition-duration:var(--d-1)} html[data-polish] .totop:focus-visible{box-shadow:var(--focus),var(--pc-cast)} @media (min-width:721px){ html[data-polish] .totop{left:var(--s6);bottom:calc(var(--s6) + env(safe-area-inset-bottom,0px))} } @media (max-width:720px){ html[data-polish] .totop{width:44px;height:44px} } html[data-polish] .toast{ display:flex;align-items:center;gap:var(--s2); padding:10px var(--s4) 10px 13px;border-radius:10px; font-size:var(--fs-sm);font-weight:500;line-height:20px;letter-spacing:-.003em; background:var(--pc-toast-bg);color:var(--pc-toast-ink); box-shadow:var(--pc-cast),var(--pc-toast-ring); bottom:calc(var(--s6) + env(safe-area-inset-bottom,0px)); transform:translate(-50%,4px) scale(.97);transform-origin:50% 100%; transition:opacity var(--d-2) var(--e-in),transform var(--d-2) var(--e-in),visibility 0s linear var(--d-2); } html[data-polish] .toast.on{transform:translate(-50%,0) scale(1); transition:opacity var(--d-3) var(--e-out),transform var(--d-3) var(--e-out),visibility 0s} html[data-polish] .toast::before{content:"";flex:0 0 auto;width:15px;height:15px; background:currentColor;opacity:.62; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center/contain no-repeat} html[data-polish] .toast:empty::before{content:none} @media (max-width:720px){ html[data-polish] .toast{bottom:calc(18px + env(safe-area-inset-bottom,0px))} } html[data-polish] .hd .hprog{bottom:0;height:2px;z-index:-1} @media (max-width:720px){ html[data-polish] .hd .desktopnav a{height:42px} } html[data-polish] .hd :where(a,button):focus-visible{box-shadow:none; outline:2px solid var(--mast-ink);outline-offset:2px} html[data-polish] .hd .logo:focus-visible{border-radius:6px;outline-offset:4px} html[data-polish] .hd .navcats a:focus-visible{border-radius:6px;outline-offset:-6px} html[data-polish] .clstack:focus-visible{outline:none;box-shadow:none} html[data-polish] .railclaims:has(.clstack:focus-visible){border-radius:2px; outline:2px solid var(--accent);outline-offset:18px} html[data-polish] .ft .flogo:focus-visible{border-radius:6px} html[data-polish] .searchbar{border-bottom:1px solid var(--ink-4);padding-bottom:calc(var(--s3) + 1px); transition:border-color var(--d-2) var(--e-out),box-shadow var(--d-2) var(--e-out)} html[data-polish] .searchbar:focus-within{border-bottom-color:var(--accent);box-shadow:0 1px 0 var(--accent)} html[data-polish] .searchbar input:focus-visible{box-shadow:none} html[data-polish] .searchx{transition:color var(--d-2) var(--e-out)} html[data-polish] .searchx:focus-visible{border-radius:6px} @keyframes artin{ from{opacity:0;transform:translateX(-3px); -webkit-mask-image:linear-gradient(90deg,#000 44.44%,transparent 55.56%); mask-image:linear-gradient(90deg,#000 44.44%,transparent 55.56%); -webkit-mask-size:225% 100%;mask-size:225% 100%; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:100% 0;mask-position:100% 0; animation-timing-function:var(--e-out)} 45%{opacity:1} to{opacity:1;transform:none; -webkit-mask-image:linear-gradient(90deg,#000 44.44%,transparent 55.56%); mask-image:linear-gradient(90deg,#000 44.44%,transparent 55.56%); -webkit-mask-size:225% 100%;mask-size:225% 100%; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:0 0;mask-position:0 0} } html[data-polish] .art > .hero{ -webkit-mask-image:none!important;mask-image:none!important;transform:none!important} @keyframes pc-fadein{ from{opacity:0;animation-timing-function:var(--e-out)} 45%{opacity:1} to{opacity:1} } @media (prefers-reduced-motion:no-preference){ html[data-polish]:not([data-article-enter]) .art > .artby > .byline{animation:artin var(--d-5) var(--e-glide) 138ms backwards} html[data-polish]:not([data-article-enter]) .art > .artby > .sharewrap > [data-shareopen]{animation:pc-fadein var(--d-5) var(--e-glide) 138ms backwards} html[data-polish]:not([data-article-enter]) .art > .corrbar{animation:artin var(--d-5) var(--e-glide) 152ms backwards} } html[data-polish] .art > .artby > .sharewrap:has(.sharemenu.on) > [data-shareopen]{opacity:1!important} /* ── css/polish/runninghead.css ── */ /* Article polish: runninghead. Visual finish only. */ html[data-polish] .hd nav.desktopnav{position:relative;--nx-lag:calc(var(--d-1) / 2)} html[data-polish] .hd .hprog{pointer-events:none} html[data-polish] .hd nav.desktopnav .navcats{ transition:opacity var(--d-3) var(--e-out) var(--nx-lag),transform var(--d-3) var(--e-out) var(--nx-lag),visibility 0s} html[data-polish] .hd nav.desktopnav.nx-rh-on .navcats{opacity:0;visibility:hidden;pointer-events:none; transform:translateY(var(--nx-y,-6px)); transition:opacity var(--d-1) var(--e-out),transform var(--d-2) var(--e-in),visibility 0s linear var(--d-2)} html[data-polish] .hd .nx-rhwrap{position:absolute;top:0;bottom:0;left:var(--nx-rh-l,0px);width:var(--nx-rh-w,60%); display:flex;align-items:center;min-width:0; opacity:0;visibility:hidden;pointer-events:none;transform:translateY(var(--nx-y,6px)); transition:opacity var(--d-1) var(--e-out),transform var(--d-2) var(--e-in),visibility 0s linear var(--d-2)} html[data-polish] .hd nav.desktopnav.nx-rh-on .nx-rhwrap{opacity:1;visibility:visible;pointer-events:auto;transform:none; transition:opacity var(--d-3) var(--e-out) var(--nx-lag),transform var(--d-3) var(--e-out) var(--nx-lag),visibility 0s} html[data-polish] .hd .nx-rh{position:relative;display:inline-grid;grid-template-columns:minmax(0,max-content); align-items:center;max-width:100%;height:47px;margin:0;padding:0 10px;border:0;border-radius:0; background:transparent;color:var(--mast-ink);font-family:var(--sans);font-size:15px;font-weight:600; line-height:20px;letter-spacing:0;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent; -webkit-user-select:none;user-select:none; transition:background-color var(--d-2) var(--e-out)} @media (hover:hover){ html[data-polish] .hd button.nx-rh:hover{background:var(--mast-hover)} } html[data-polish] .hd button.nx-rh:active, html[data-polish] .hd .nx-rh[aria-expanded="true"]{background:var(--mast-hover)} html[data-polish] .hd .nx-rh:focus{outline:none} html[data-polish] .hd .nx-rh:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-xs);z-index:3} html[data-polish] .hd .nx-rh-static{cursor:default} html[data-polish] .hd .nx-rht{grid-area:1/1;justify-self:start;display:inline-flex;align-items:center;gap:6px; min-width:0;max-width:100%;opacity:1;transition:opacity var(--d-3) var(--e-out) var(--nx-lag)} html[data-polish] .hd .nx-rhtx{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; transform:none;transition:transform var(--d-3) var(--e-out) var(--nx-lag)} html[data-polish] .hd .nx-rht.nx-pre{opacity:0;transition:none} html[data-polish] .hd .nx-rht.nx-pre .nx-rhtx{transform:translateY(var(--nx-y,6px));transition:none} html[data-polish] .hd .nx-rht.nx-out{opacity:0;pointer-events:none;transition:opacity var(--d-1) var(--e-out)} html[data-polish] .hd .nx-rht.nx-out .nx-rhtx{transform:translateY(var(--nx-y,-6px)); transition:transform var(--d-2) var(--e-in)} html[data-polish] .hd .nx-rhchev{flex:0 0 auto;display:block;color:var(--mast-mute); transition:transform var(--d-3) var(--e-out)} html[data-polish] .hd .nx-rh[aria-expanded="true"] .nx-rhchev{transform:rotate(180deg)} html[data-polish] .nx-rh-snap,html[data-polish] .nx-rh-snap *{transition:none!important} @media (max-width:720px){ html[data-polish] .hd .nx-rh{height:44px;padding:0 8px;font-size:14px;line-height:17px} html[data-polish] .hd .nx-rhtx{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2; white-space:normal;overflow-wrap:break-word} } html[data-polish] .nx-toc{position:fixed;z-index:21;margin:0;visibility:hidden;pointer-events:none; background:var(--card);color:var(--ink);font-family:var(--sans)} html[data-polish] .nx-toc.nx-on{visibility:visible;pointer-events:auto} html[data-polish] .nx-tochd{flex:0 0 auto} html[data-polish] .nx-tocl{margin:0;font-size:var(--fs-3xs);font-weight:700;letter-spacing:var(--tr-caps); line-height:1.4;text-transform:uppercase;color:var(--accent-ink)} html[data-polish] .nx-tocgrab{display:none} html[data-polish] .nx-tocs{list-style:none;margin:0;padding:4px 8px 8px;flex:1 1 auto;min-height:0; overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin} html[data-polish] .nx-tocs li{margin:0;padding:0} html[data-polish] .nx-toci{position:relative;display:block;padding:7px 12px 7px 14px;border-radius:var(--r-xs); color:var(--ink-2);font-size:15px;line-height:1.4;font-weight:400;text-decoration:none; transition:color var(--d-2) var(--e-out)} html[data-polish] .nx-toci::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:2px; border-radius:1px;background:var(--accent);opacity:0;transition:opacity var(--d-2) var(--e-out)} html[data-polish] .nx-toci.nx-on{color:var(--ink);font-weight:600} html[data-polish] .nx-toci.nx-on::before{opacity:1} @media (hover:hover){ html[data-polish] .nx-toci:hover{color:var(--ink)} } html[data-polish] .nx-toci.nx-tocttl{margin-bottom:4px;font-family:var(--disp);font-size:17px;line-height:1.3; letter-spacing:var(--tr-snug);color:var(--ink)} html[data-polish] .nx-toci.nx-tocttl.nx-on{font-weight:500} html[data-polish] .nx-tocs .nx-toctail{margin-top:4px} html[data-polish] .nx-toc.nx-toc-drop{top:var(--nx-toc-top,56px);left:var(--nx-toc-left,16px); width:min(440px,calc(100vw - 32px));max-height:calc(100vh - var(--nx-toc-top,56px) - 24px); display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-4); opacity:0;transform:translateY(-6px); transition:opacity var(--d-2) var(--e-in),transform var(--d-2) var(--e-in),visibility 0s linear var(--d-2)} html[data-polish] .nx-toc.nx-toc-drop.nx-on{opacity:1;transform:none; transition:opacity var(--d-3) var(--e-out),transform var(--d-3) var(--e-out),visibility 0s} html[data-polish] .nx-toc-drop .nx-tocl{padding:14px 22px 6px} html[data-polish] .nx-toc.nx-toc-sheet{left:0;right:0;bottom:0;z-index:34;max-height:min(72vh,620px); max-height:min(72dvh,620px);display:flex;flex-direction:column;border-top:1px solid var(--line); border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:0 -14px 36px -18px rgba(19,16,17,.30); padding-bottom:env(safe-area-inset-bottom,0px);transform:translateY(100%); transition:transform var(--d-2) var(--e-in),visibility 0s linear var(--d-2)} html[data-polish] .nx-toc.nx-toc-sheet.nx-on{transform:none;transition:transform var(--d-4) var(--e-glide),visibility 0s} html[data-polish] .nx-toc.nx-toc-sheet.nx-drag{transition:none} html[data-polish] .nx-toc.nx-toc-sheet.nx-spring{transition:transform var(--d-4) var(--e-spring),visibility 0s} html[data-polish] .nx-toc-sheet .nx-tochd{touch-action:none;cursor:grab} html[data-polish] .nx-toc-sheet.nx-drag .nx-tochd{cursor:grabbing} html[data-polish] .nx-toc-sheet .nx-tocgrab{display:flex;justify-content:center;align-items:flex-start;width:100%; height:44px;margin:0 0 -16px;padding:12px 0 0;border:0;background:transparent;cursor:inherit} html[data-polish] .nx-toc-sheet .nx-tocgrab span{display:block;width:36px;height:4px;border-radius:2px; background:var(--line);transition:background-color var(--d-2) var(--e-out)} html[data-polish] .nx-toc-sheet .nx-tocgrab:focus-visible{box-shadow:none} html[data-polish] .nx-toc-sheet .nx-tocgrab:focus-visible span, html[data-polish] .nx-toc-sheet.nx-drag .nx-tocgrab span{background:var(--ink-4)} html[data-polish] .nx-toc-sheet .nx-tocgrab:focus-visible span{box-shadow:var(--focus)} html[data-polish] .nx-toc-sheet .nx-tocl{position:relative;padding:0 20px 8px;pointer-events:none} html[data-polish] .nx-toc-sheet .nx-tocs{padding:2px 4px 12px} html[data-polish] .nx-toc-sheet .nx-toci{display:flex;align-items:center;min-height:44px;padding:10px 12px 10px 16px; font-size:16px} html[data-polish] .nx-toc-sheet .nx-toci::before{top:10px;bottom:10px} html[data-polish] .nx-toc-sheet .nx-toci.nx-tocttl{font-size:18px} @media (prefers-reduced-motion:reduce){ html[data-polish] .hd nav.desktopnav .navcats, html[data-polish] .hd nav.desktopnav.nx-rh-on .nx-rhwrap, html[data-polish] .hd .nx-rht{transform:none;transition:opacity var(--d-1) linear,visibility 0s!important} html[data-polish] .hd nav.desktopnav.nx-rh-on .navcats, html[data-polish] .hd nav.desktopnav:not(.nx-rh-on) .nx-rhwrap, html[data-polish] .hd .nx-rht.nx-out,html[data-polish] .hd .nx-rht.nx-pre{transform:none;transition:none!important} html[data-polish] .hd .nx-rhtx{transform:none!important;transition:none!important} html[data-polish] .hd .nx-rhchev,html[data-polish] .hd .nx-rh,html[data-polish] .nx-toci, html[data-polish] .nx-toci::before{transition:none} html[data-polish] .nx-toc.nx-toc-drop,html[data-polish] .nx-toc.nx-toc-sheet{transform:none;opacity:0; transition:opacity var(--d-1) linear,visibility 0s linear var(--d-1)} html[data-polish] .nx-toc.nx-toc-drop.nx-on,html[data-polish] .nx-toc.nx-toc-sheet.nx-on, html[data-polish] .nx-toc.nx-toc-sheet.nx-spring{transform:none;opacity:1;transition:opacity var(--d-1) linear,visibility 0s} html[data-polish] .nx-toc.nx-toc-drop,html[data-polish] .nx-toc.nx-toc-sheet{transition-duration:var(--d-1)!important} } @media (forced-colors:active){ html[data-polish] .nx-toci.nx-on::before{forced-color-adjust:none;background:Highlight} html[data-polish] .nx-toc{border:1px solid CanvasText} } @media print{ html[data-polish] .nx-toc,html[data-polish] .hd .nx-rhwrap{display:none} }