/*
 * Research and Perspective: shared article system
 * Research and Perspective (rp) — draft, not yet on the release allowlist.
 * Generated from the reviewed design canvas; see docs/research-perspective.md.
 * Scoped to body.rp-page so shared pages are unaffected.
 */
html:has(> body.rp-page),body.rp-page{overflow-x:clip}
html:has(> body.rp-page):has(> body[data-rp-modal]){overflow:hidden}
body.rp-page{background:#f7f5f2;color:#121214;}
.rp-article:not([data-rp-ready]) :is(.xb,.citeb,[data-rp="copy-link"]){display:none}
.rp-article .fig[aria-modal="true"]{overscroll-behavior:contain}
.rp-main a{color:#3b42e6}
.rp-main a:hover{color:#121214}
.prose > p{margin:0 0 24px;font-size:18px;line-height:1.72;color:#2a2a30}
.prose strong{color:#121214}
.prose h2{margin:88px 0 24px;scroll-margin-top:104px;font-family:'Inter Tight',Inter,sans-serif;font-weight:600;font-size:clamp(28px,2.7vw,38px);letter-spacing:-.014em;line-height:1.12;color:#121214}
.prose h2 .n{display:block;font-size:11px;font-weight:600;letter-spacing:.18em;color:#3b42e6;margin-bottom:12px}
.prose h3{margin:48px 0 16px;scroll-margin-top:104px;font-family:'Inter Tight',Inter,sans-serif;font-weight:600;font-size:22px;letter-spacing:-.008em;line-height:1.25;color:#121214}
.lede{font-size:20px!important;line-height:1.6!important;color:#121214!important}
.tag{display:inline-block;margin:0 0 14px;padding:5px 10px;border-radius:4px;background:#ecebfd;color:#2f35c4;font:600 11px 'Inter Tight',Inter,sans-serif;letter-spacing:.16em}
.rp-main sup{line-height:0;font-size:.68em;vertical-align:super}
.fnw{position:relative;display:inline;scroll-margin-top:140px}
.fnb{appearance:none;background:none;border:0;margin:-6px -2px;padding:6px 4px;font:600 1em/1 Inter,sans-serif;color:#3b42e6;cursor:pointer;border-radius:4px;transition:background .2s,color .2s}
.fnb:hover,.fnb:focus-visible,.fnw[data-open="1"] .fnb{background:#4a52ff;color:#fff!important;outline:none}
.pop{--pop-start:translate(-50%,6px);--pop-end:translateX(-50%);position:absolute;left:calc(50% + var(--pop-shift,0px));bottom:calc(100% + 12px);z-index:70;width:min(360px,82vw);box-sizing:border-box;padding:14px 16px 12px;border-radius:8px;background:#121214;color:#e9e7e2;box-shadow:0 14px 40px rgba(11,11,12,.28);font:400 14px/1.55 Inter,sans-serif;letter-spacing:0;text-align:left;white-space:normal;opacity:0;visibility:hidden;transform:var(--pop-start);transition:opacity .22s cubic-bezier(.22,1,.36,1),transform .22s cubic-bezier(.22,1,.36,1),visibility 0s linear .22s;pointer-events:none}
.pop::before{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
.pop::after{content:"";position:absolute;left:clamp(12px,calc(50% - var(--pop-shift,0px)),calc(100% - 12px));top:100%;margin-left:-6px;border:6px solid transparent;border-top-color:#121214}
.pop .pk{display:block;margin-bottom:6px;font:600 11px 'Inter Tight',Inter,sans-serif;letter-spacing:.16em;color:#a9a2ff}
.pop .pt{display:block;color:#e9e7e2}
.pop .pt em{color:#fff}
.pop .pl{display:inline-block;margin-top:10px;font:600 11px 'Inter Tight',Inter,sans-serif;letter-spacing:.12em;color:#a9a2ff;text-decoration:none}
.pop .pl:hover{color:#fff}
@media (hover:hover){
  .fnw:hover:not([data-dismissed]) .pop{opacity:1;visibility:visible;transform:var(--pop-end);transition-delay:.08s,.08s,0s;pointer-events:auto}
}
.fnw:focus-within:not([data-dismissed]) .pop,.fnw[data-open="1"] .pop{opacity:1;visibility:visible;transform:var(--pop-end);transition-delay:0s;pointer-events:auto}
@media (min-width:721px){
  .pop[data-below]{--pop-start:translate(-50%,-6px);top:calc(100% + 12px);bottom:auto}
  .pop[data-below]::before,.pop[data-below]::after{top:auto;bottom:100%}
  .pop[data-below]::after{border-top-color:transparent;border-bottom-color:#121214}
  .pop .pt{max-height:var(--pop-text-height,none);overflow-y:auto}
}
@media (max-width:720px){
  .pop{--pop-start:translateY(12px);--pop-end:none;position:fixed;left:12px;right:12px;bottom:12px;width:auto;padding:18px 18px 14px;font-size:15px}
  .pop::after,.pop::before{display:none}
}
.pq{margin:56px 0;padding:6px 0 6px 32px;border-left:2px solid #4a52ff}
.pq p{margin:0!important;font-family:'Inter Tight',Inter,sans-serif!important;font-weight:600;font-size:clamp(23px,2.3vw,31px)!important;line-height:1.26!important;letter-spacing:-.01em;color:#121214!important}
.toc a{transition:color .3s cubic-bezier(.22,1,.36,1),padding .3s cubic-bezier(.22,1,.36,1)}
.notes li{font-size:15px;line-height:1.6;color:#43434a;margin-bottom:12px;padding:2px 6px;scroll-margin-top:120px;transition:background .6s}
.notes li:target{background:#ecebfd;border-radius:4px}
.notes li a{text-decoration:none}
.wc p{margin:0 0 16px!important;padding-left:28px;text-indent:-28px;font-size:15px!important;line-height:1.6!important;color:#2a2a30;overflow-wrap:anywhere}
.tocbody a:hover{color:#121214!important}
.mtog{display:none}
@media (max-width:999px){
  .rp-article[data-rp-ready] .mtog{display:flex}
  .rp-article[data-rp-ready] .hide-sm{display:none}
  /* Contents bar (phones and tablets): a quiet band flush with the top edge, not a floating card.
     The opening nav pill scrolls away, so nothing needs the old 84px offset; the persistent iris
     sits in the left gutter of this band. The bar steps aside while reading down and returns on
     any upward scroll, or while the list is open or focused (js/research.js sets data-away). */
  .rp-article[data-rp-ready] .side{position:sticky;top:0;z-index:40;background:transparent;padding-top:max(0px,env(safe-area-inset-top,0px));transition:transform .32s cubic-bezier(.22,1,.36,1)}
  .rp-article[data-rp-ready] .side::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:rgba(247,245,242,.94);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid rgba(18,18,20,.08);pointer-events:none}
  .side[data-away]{transform:translateY(calc(-100% - 2px))}
  .side .mtog{min-height:44px!important;margin-bottom:0!important;padding:0 2px!important;border:0!important;border-radius:0!important;background:transparent!important;color:#3a3a40!important;font-size:10.5px!important;letter-spacing:.14em!important}
  .side .mtog [data-rp="toc-cur"]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:12px}
  .side .tocbody{border-bottom:0}
  .rp-article[data-rp-ready] .tocbody{max-height:62vh;overflow-y:auto;padding:4px 4px 12px;background:#f7f5f2;border-bottom:1px solid rgba(18,18,20,.12)}
  .side > div,.side > a{display:none!important}
  .rp-article[data-rp-ready] .tocbody[data-open="0"]{display:none}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.refs{max-width:640px}
.prose .refh{margin:64px 0 6px;padding-top:22px;border-top:1px solid rgba(18,18,20,.18);font:600 13px 'Inter Tight',Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#121214}
.refs .refintro{margin:0 0 22px;font-size:14px;line-height:1.55;color:#68686f}
.refs .ngroup{margin:0 0 6px}
.refs .ngh{display:flex;gap:12px;align-items:baseline;margin:26px 0 10px;font:600 15px/1.35 'Inter Tight',Inter,sans-serif;color:#121214;scroll-margin-top:120px}
.refs .ngh a{display:flex;gap:12px;align-items:baseline;text-decoration:none;color:inherit}
.refs .ngh a:hover span:last-child{text-decoration:underline;text-underline-offset:3px}
.refs .ngn{flex:none;min-width:24px;font:600 11px 'Inter Tight',Inter,sans-serif;letter-spacing:.1em;color:#3b42e6}
.refs .notes{margin:0;padding:0 0 0 36px}
.refs .notes li{margin:0 0 10px;padding:2px 6px 2px 6px;font-size:15px;line-height:1.62;color:#43434a;scroll-margin-top:120px;border-radius:4px}
.refs .notes li::marker{font:600 13px 'Inter Tight',Inter,sans-serif;color:#3b42e6;font-variant-numeric:tabular-nums}
.refs .notes li em{color:#2a2a30}
.refs .notes li .bk{margin-left:4px;padding:0 3px;font-size:13px;text-decoration:none;color:#3b42e6;border-radius:3px}
.refs .notes li .bk:hover{background:#ecebfd}
.refs .wc p{margin:0 0 14px!important;padding-left:2em;text-indent:-2em;font-size:15px!important;line-height:1.62!important;color:#2a2a30}
.refs .wc a.url{font-size:13.5px;color:#3b42e6;text-decoration:none;overflow-wrap:anywhere}
.refs .wc a.url:hover{text-decoration:underline}
.citeme{margin-top:40px;padding:18px 20px;border-radius:6px;background:#f1efeb;border:1px solid rgba(18,18,20,.08)}
.citeme .citek{margin:0 0 8px;font:600 11px 'Inter Tight',Inter,sans-serif;letter-spacing:.16em;color:#68686f}
.citeme .citet{margin:0 0 14px;padding-left:2em;text-indent:-2em;font-size:15px;line-height:1.6;color:#2a2a30;overflow-wrap:anywhere}
.citeb{appearance:none;min-height:36px;padding:0 14px;border:1px solid rgba(18,18,20,.2);border-radius:4px;background:#fff;color:#121214;font:600 11px 'Inter Tight',Inter,sans-serif;letter-spacing:.14em;cursor:pointer;transition:background .2s,color .2s}
.citeb:hover{background:#121214;color:#fff}
@media (prefers-reduced-motion: reduce){
  .rp-page *{animation:none!important;transition:none!important}
}
@keyframes rv{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.in1{animation:rise .9s cubic-bezier(.22,1,.36,1) both .05s}
.in2{animation:rise .9s cubic-bezier(.22,1,.36,1) both .16s}
.in3{animation:rise .9s cubic-bezier(.22,1,.36,1) both .28s}
.prog{transform:scaleX(0);transform-origin:left}
@supports (animation-timeline: scroll()){
  .prog{animation:grow linear both;animation-timeline:scroll(root)}
  .rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% cover 22%}
}
@media (min-width:1000px){
  .side{position:sticky;top:104px;max-height:calc(100vh - 128px);overflow-y:auto}
}
@media (max-width:999px){
  .layout{display:block!important}
  .layout > article{margin-top:28px}
  .side{border-right:0!important;padding-right:0!important}
  .meta{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
.aphero{position:relative;margin:48px 0 0;height:clamp(180px,20vw,240px);display:flex;align-items:center;justify-content:center;border-radius:8px;overflow:hidden;background:#0b0b0c;border:1px solid rgba(255,255,255,.08)}
.aph{position:relative;display:block;width:min(120px,34%);height:auto;overflow:visible}
.apcard .aph{width:min(112px,40%)}
.aph g,.aph circle,.aph path{transform-box:view-box;transform-origin:0 0}
.ap-body,.ap-dot{fill:#f4f2ee}
.ap-hole{animation:apOpen 1.6s cubic-bezier(.22,1,.36,1) both .3s}
.ap-sl{animation:apTwist 1.6s cubic-bezier(.22,1,.36,1) both .3s}
.ap-body,.ap-dot{animation:apFadeIn .9s ease both}
@keyframes apFadeIn{from{opacity:0}to{opacity:1}}
@keyframes apOpen{from{r:3px}to{r:16.75px}}
@keyframes apTwist{from{transform:rotate(-50deg)}to{transform:rotate(0deg)}}
@keyframes apTurn{from{transform:rotate(0deg)}to{transform:rotate(60deg)}}
@keyframes apWiden{from{transform:scale(1)}to{transform:scale(1.55)}}
@keyframes apShrink{from{transform:scale(1)}to{transform:scale(.55)}}
@keyframes apTurnIn{from{transform:rotate(-45deg)}to{transform:rotate(0deg)}}
@keyframes apWidenIn{from{transform:scale(.45)}to{transform:scale(1)}}
@supports (animation-timeline: scroll()){
  .ap-scroll .ap-ss{animation:apTurn linear both;animation-timeline:scroll(root);animation-range:0 85vh}
  .ap-scroll .ap-hs{animation:apWiden linear both;animation-timeline:scroll(root);animation-range:0 85vh}
  .ap-scroll .ap-ds{animation:apShrink linear both;animation-timeline:scroll(root);animation-range:0 85vh}
  .ap-view .ap-ss{animation:apTurnIn linear both;animation-timeline:view();animation-range:cover 8% cover 50%}
  .ap-view .ap-hs{animation:apWidenIn linear both;animation-timeline:view();animation-range:cover 8% cover 50%}
}
@media (max-width:999px) and (prefers-reduced-motion:reduce){.side{transition:none}}