/* ==========================================================================
   Research article (research-*.html): a template for one essay.
   A grey title band (breadcrumb, tag, title, lead, byline and status), then the
   figure in a wide frame, the text beside a sticky side column (contents and a
   subscribe box), then two related essays on grey. Figures reuse research.css.
   ========================================================================== */
.ar-hero{padding:56px 0 300px;background:#fafafa}
.ar-hero .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.ar-crumb{display:flex;align-items:center;gap:8px;font:500 14px var(--web);color:var(--mute)}
.ar-crumb a{color:var(--btn);text-decoration:none}
.ar-crumb a:hover{color:var(--navy)}
.ar-crumb span:before{content:"";display:inline-block;width:5px;height:5px;margin:0 10px 2px 0;border:solid var(--t4);border-width:1.5px 1.5px 0 0;transform:rotate(45deg)}
.ar-hero h1{margin:0;max-width:880px;font:500 clamp(32px,4vw,52px)/1.12 var(--display);letter-spacing:-.02em;color:var(--navy)}
.ar-hero .lead{max-width:720px;margin:0;text-wrap:pretty}
.ar-meta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:8px}
.ar-meta .rs-by{padding:0}
.ar-status{padding:6px 12px;border-radius:6px;background:#fff;border:1px solid var(--line);font-size:13.5px;color:var(--mute)}

.ar-main{padding:0 0 88px}
.ar-fig{margin-top:-268px;border-radius:8px;overflow:hidden;box-shadow:0 30px 60px -28px rgba(2,37,79,.3)}
.ar-fig .rz-img{aspect-ratio:21/9}
.ar-fig .rz-img .rs-fig>*{zoom:1}
.ar-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:72px;margin-top:56px}
.ar-body{max-width:680px}
.ar-body h2{margin:44px 0 12px;font:600 26px/1.3 var(--display);letter-spacing:-.01em;color:var(--navy);scroll-margin-top:96px}
.ar-body p{margin:0;font-size:18px;line-height:1.7;color:var(--ink)}
.ar-cover{padding:24px 26px;border:1px solid var(--line);border-radius:8px;background:#fafafa}
.ar-cover h3{margin:0 0 12px;font:600 15px var(--web);color:var(--navy)}
.ar-cover ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.ar-cover li{position:relative;padding-left:28px;font-size:15.5px;line-height:1.5;color:var(--ink)}
.ar-cover li:before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;background:var(--sky) url(../assets/icons/gt-check.svg) center/12px no-repeat}
.ar-side{display:flex;flex-direction:column;gap:16px;align-self:start;position:sticky;top:96px}
.ar-box{padding:20px 22px;border:1px solid var(--line);border-radius:8px;background:#fff}
.ar-box h3{margin:0 0 10px;font:600 15px var(--web);color:var(--navy)}
.ar-toc{display:flex;flex-direction:column;gap:8px}
.ar-toc a{font-size:14px;line-height:1.4;color:var(--mute);text-decoration:none}
.ar-toc a:hover{color:var(--btn)}
.ar-sub p{margin:0 0 14px;font-size:14px;color:var(--mute)}

.ar-rel{padding:88px 0 104px;background:#fafafa}
.ar-relh{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:32px}
.ar-relh h2{margin:0;font:500 28px var(--display);color:var(--navy)}
.ar-relgrid{grid-template-columns:repeat(2,minmax(0,1fr))}

/* the figure sits half on the grey title band, so the white reading area below stays
   under about 1,200px (page rhythm) */
@media (max-width:991px){
  .ar-hero{padding-bottom:220px}
  .ar-fig{margin-top:-190px}
  .ar-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .ar-side{position:static}
  .ar-fig .rz-img{aspect-ratio:16/9}
}
@media (max-width:767px){
  .ar-hero{padding:40px 0 160px}
  .ar-fig{margin-top:-136px}
  .ar-fig .rz-img{aspect-ratio:4/3}
  .ar-fig .rz-img .rs-fig>*{zoom:.72}
  .ar-body p{font-size:17px}
  .ar-relgrid{grid-template-columns:minmax(0,1fr)}
  .ar-main{padding-bottom:72px}
}