/* ============================ A STORY (NEW LOOK) ============================
   editorial/article2.php on the site shell. From the design 8cWf4RU85Fvv7izeZB2hGC.
   ========================================================================== */
.sar { --ink: #0a0a0a; --paper: #f5f5f3; --g: #00FF50; --mute: #4a4a46; background: var(--paper); color: var(--ink); font-family: 'Archivo', sans-serif; padding-top: 74px; }
.sar *, .sar *::before, .sar *::after { box-sizing: border-box; }
.sar h1, .sar h3, .sar p, .sar figure, .sar blockquote { margin: 0; }
.sar a { color: inherit; text-decoration: none; }
.sar button { font-family: 'Archivo', sans-serif; color: inherit; }
.sar ::selection { background: var(--g); color: var(--ink); }
.sar-prog { position: fixed; left: 0; top: 0; z-index: 60; height: 4px; width: 0; background: var(--g); transition: width .1s linear; }
.sar-admin { position: fixed; right: 18px; bottom: 96px; z-index: 50; display: flex; gap: 8px; align-items: center; }
.sar-admin b { padding: 9px 11px; background: #ffb020; border: 2px solid var(--ink); font: 900 11px 'Archivo', sans-serif; letter-spacing: .12em; }
.sar-admin a { padding: 9px 12px; background: var(--ink); color: var(--g) !important; border: 2px solid var(--ink); font: 800 11px 'Archivo', sans-serif; letter-spacing: .12em; }

/* ---------------- the top */
.sar-top { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); min-height: calc(100vh - 74px); }
.sar-top-t { min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 80px clamp(20px,4vw,64px) clamp(36px,6vh,60px); }
.sar-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; }
.sar-kind { padding: 5px 9px; background: var(--ink); color: var(--g); font: 800 10px 'Archivo', sans-serif; letter-spacing: .16em; }
.sar-topics { padding: 5px 9px; border: 1px solid var(--ink); font: 800 10px 'Archivo', sans-serif; letter-spacing: .16em; }
.sar-when { font: 700 12.5px 'Archivo', sans-serif; color: var(--mute); margin-left: 4px; }
.sar h1 { font: 900 clamp(46px,5.4vw,104px)/1 'Archivo', sans-serif; letter-spacing: -.055em; margin: 0 0 26px; text-wrap: balance; overflow-wrap: anywhere; }
.sar-hl { background: linear-gradient(transparent 52%, var(--g) 52%, var(--g) 92%, transparent 92%); padding: 0 .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sar-dek { font: 600 clamp(17px,1.35vw,21px)/1.5 'Archivo', sans-serif; max-width: 46ch; margin: 0 0 28px !important; color: #2a2a2a; }
.sar-by { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding-top: 18px; border-top: 2px solid var(--ink); }
.sar-av { width: 46px; height: 46px; flex: none; border-radius: 999px; background: #ccc center / cover no-repeat; border: 2px solid var(--ink); }
.sar-by-t { min-width: 0; flex: 1; }
.sar-by-t a, .sar-by-t b { display: block; font: 900 15px 'Archivo', sans-serif; }
.sar-by-t span { display: block; font: 600 12.5px 'Archivo', sans-serif; color: var(--mute); }
.sar-share { display: flex; gap: 6px; }
.sar-share a, .sar-share button { cursor: pointer; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 2px solid var(--ink); background: #fff; font: 900 12px 'Archivo', sans-serif; }
.sar-share a:hover, .sar-share button:hover { background: var(--g); }
.sar-share svg { width: 14px; height: 14px; }
.sar-top-i { position: relative; min-width: 0; overflow: hidden; background: var(--ink); }
.sar-top-px { position: absolute; left: 0; right: 0; top: -6%; height: 112%; }
.sar-top-px > div, .sar-top-px video { width: 100%; height: 100%; display: block; background: center 30% / cover no-repeat; object-fit: cover; }
.sar-credit { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 20px; background: linear-gradient(0deg, rgba(10,10,10,.85), transparent); color: var(--paper); font: 700 12px 'Archivo', sans-serif; }

/* hero: the picture across the page, the words over its foot */
.sar-hero .sar-top { grid-template-columns: minmax(0,1fr); position: relative; min-height: calc(100vh - 74px); background: var(--ink); color: var(--paper); }
.sar-hero .sar-top-i { position: absolute; inset: 0; }
.sar-hero .sar-top-i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.35) 55%, rgba(10,10,10,.1) 100%); }
.sar-hero .sar-credit { z-index: 2; left: auto; background: none; text-align: right; }
.sar-hero .sar-top-t { position: relative; z-index: 2; max-width: 1180px; }
.sar-hero .sar-kind { background: var(--g); color: var(--ink); }
.sar-hero .sar-topics { border-color: var(--paper); }
.sar-hero .sar-when, .sar-hero .sar-by-t span { color: #c8c8c4; }
.sar-hero .sar-dek { color: #e3e3df; }
.sar-hero .sar-hl { color: var(--ink); }
.sar-hero .sar-by { border-color: var(--paper); }
.sar-hero .sar-share a, .sar-hero .sar-share button { color: var(--ink); }
/* text: no picture */
.sar-text .sar-top { grid-template-columns: minmax(0,1fr); min-height: 0; }
.sar-text .sar-top-t { padding-top: clamp(60px, 9vw, 120px); max-width: 1180px; }

/* ---------------- the body */
.sar-body { border-top: 2px solid var(--ink); }
.sar-cols { max-width: 1760px; margin: 0 auto; display: grid; grid-template-columns: 200px minmax(0,1fr) 340px; gap: clamp(24px,3.4vw,56px); padding: clamp(40px,5vw,72px) clamp(20px,4vw,56px) 80px; }
.sar-cols.no-toc { grid-template-columns: minmax(0,1fr) 340px; }
.sar-toc { position: sticky; top: 110px; align-self: start; }
.sar-toc p { font: 800 9.5px 'Archivo', sans-serif; letter-spacing: .16em; margin-bottom: 12px !important; }
.sar-toc a { display: block; padding: 9px 0 9px 12px; border-left: 3px solid #cfcfca; font: 700 13.5px/1.3 'Archivo', sans-serif; color: var(--mute); }
.sar-toc a.on { border-left-color: var(--g); font-weight: 900; color: var(--ink); }
.sar-art { min-width: 0; max-width: 880px; width: 100%; justify-self: center; }
.sar-p { font: 500 clamp(17px,1.25vw,19.5px)/1.7 'Archivo', sans-serif; margin: 0 0 22px; overflow-wrap: break-word; }
.sar-p.is-first { font: 600 clamp(19px,1.55vw,24px)/1.55 'Archivo', sans-serif; margin-bottom: 30px; }
.sar-p.is-first::after { content: ''; display: table; clear: both; }
.sar-p.is-first::first-letter { float: left; font: 900 5.2em/.78 'Archivo', sans-serif; letter-spacing: -.05em; margin: .06em .1em 0 0; color: var(--ink); }
.sar-p a, .sar-legacy a { text-decoration: underline; text-decoration-color: var(--g); text-decoration-thickness: 3px; text-underline-offset: 2px; }
.sar-p a:hover, .sar-legacy a:hover { background: var(--g); }
.sar-p ul, .sar-p ol, .sar-legacy ul, .sar-legacy ol { margin: 8px 0; padding-left: 1.3em; }
.sar-p li, .sar-legacy li { margin: 4px 0; }
.sar-q { clear: both; font: 900 clamp(22px,1.9vw,28px)/1.2 'Archivo', sans-serif; letter-spacing: -.025em; margin: 44px 0 16px !important; padding-left: 18px; border-left: 6px solid var(--g); scroll-margin-top: 110px; }
.sar-quote { margin: 40px 0 !important; }
.sar-quote blockquote { position: relative; padding: clamp(24px,3vw,36px); background: var(--ink); color: var(--paper); font: 900 clamp(26px,2.6vw,40px)/1.12 'Archivo', sans-serif; letter-spacing: -.035em; }
.sar-quote blockquote span { position: absolute; left: clamp(24px,3vw,36px); top: -14px; padding: 4px 10px; background: var(--g); color: var(--ink); font: 800 10px 'Archivo', sans-serif; letter-spacing: .16em; }
.sar-video { position: relative; aspect-ratio: 16 / 9; margin: 34px 0 10px !important; border: 2px solid var(--ink); background: #111 center / cover no-repeat; cursor: pointer; overflow: hidden; }
.sar-video::before { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.7), transparent 55%); }
.sar-video iframe, .sar-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.sar-video.is-file { cursor: default; } .sar-video.is-file::before { display: none; }
.sar-video.is-on::before, .sar-video.is-on .sar-play, .sar-video.is-on .sar-video-t { display: none; }
.sar-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 86px; height: 86px; border-radius: 999px; display: grid; place-items: center; padding-left: 6px; background: var(--g); color: var(--ink); font: 900 26px 'Archivo', sans-serif; box-shadow: 0 0 0 12px rgba(0,255,80,.2); transition: transform .2s; }
.sar-video:hover .sar-play { transform: translate(-50%, -50%) scale(1.06); }
.sar-video-t { position: absolute; left: 16px; bottom: 14px; right: 16px; color: var(--paper); }
.sar-video-t small { display: block; font: 800 9.5px 'Archivo', sans-serif; letter-spacing: .16em; color: var(--g); }
.sar-video-t b { display: block; font: 900 18px 'Archivo', sans-serif; margin-top: 3px; }
.sar-cap { font: 600 12.5px 'Archivo', sans-serif; color: var(--mute); margin: 0 0 8px !important; }
.sar-gal { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin: 34px 0 10px; }
.sar-gal.n1 { grid-template-columns: minmax(0,1fr); } .sar-gal.n2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.sar-gal button { position: relative; cursor: zoom-in; aspect-ratio: 3 / 4; padding: 0; overflow: hidden; background: #141414; border: 2px solid var(--ink); }
.sar-gal.n1 button { aspect-ratio: 16 / 10; }
.sar-gal button span { position: absolute; inset: 0; background: center / cover no-repeat; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.sar-gal button:hover { outline: 3px solid var(--g); outline-offset: -3px; }
.sar-gal button:hover span { transform: scale(1.04); }
.sar-img { margin: 34px 0 10px !important; }
.sar-img button { display: block; width: 100%; padding: 0; border: 2px solid var(--ink); background: #141414; cursor: zoom-in; }
.sar-img img { display: block; width: 100%; height: auto; }
.sar-img figcaption { margin-top: 10px !important; }
.sar-legacy { font: 500 clamp(17px,1.25vw,19.5px)/1.7 'Archivo', sans-serif; }
.sar-legacy p { margin: 0 0 22px !important; }
.sar-legacy h1, .sar-legacy h2, .sar-legacy h3, .sar-legacy h4 { font: 900 clamp(22px,1.9vw,28px)/1.2 'Archivo', sans-serif; letter-spacing: -.025em; margin: 44px 0 16px; padding-left: 18px; border-left: 6px solid var(--g); }
.sar-legacy img { max-width: 100%; height: auto; }
.sar-legacy iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 2px solid var(--ink); }
.sar-tags { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 24px; margin-top: 34px; border-top: 2px solid var(--ink); }
.sar-tags span { padding: 7px 11px; border: 1px solid var(--ink); font: 800 12px 'Archivo', sans-serif; }
.sar-react { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; padding: 18px; background: #fff; border: 2px solid var(--ink); }
.sar-react button { cursor: pointer; padding: 11px 15px; border: 2px solid var(--ink); background: #fff; font: 800 12.5px 'Archivo', sans-serif; }
.sar-like.on { background: var(--g); }
.sar-save { letter-spacing: .12em; font-size: 11.5px !important; }
.sar-save.on { background: var(--ink); color: var(--g) !important; }
.sar-cmt { margin-left: auto; font: 700 13px 'Archivo', sans-serif; color: var(--mute); }
.sar-cmt:hover { color: var(--ink); text-decoration: underline; }

/* the side */
.sar-side { min-width: 0; position: sticky; top: 110px; align-self: start; display: flex; flex-direction: column; gap: 14px; }
.sar-person { display: block; background: var(--ink); color: var(--paper) !important; transition: box-shadow .2s; }
.sar-person:hover { box-shadow: 6px 6px 0 var(--g); }
.sar-person-i { position: relative; aspect-ratio: 4 / 3; background: #222 center 20% / cover no-repeat; display: grid; place-items: center; }
.sar-person-i b { font: 900 64px 'Archivo', sans-serif; color: var(--g); }
.sar-person-t { padding: 16px; }
.sar-person-t small { display: block; font: 800 9.5px 'Archivo', sans-serif; letter-spacing: .16em; color: var(--g); }
.sar-person-t b { display: block; font: 900 22px 'Archivo', sans-serif; letter-spacing: -.025em; margin-top: 6px; }
.sar-person-t span { display: block; font: 600 13px/1.45 'Archivo', sans-serif; color: #bdbdb8; margin-top: 4px; }
.sar-person-t em { display: block; font: 800 11px 'Archivo', sans-serif; font-style: normal; letter-spacing: .14em; color: var(--g); margin-top: 12px; }
.sar-more { background: #fff; border: 2px solid var(--ink); }
.sar-more p { padding: 13px 15px; border-bottom: 2px solid var(--ink); font: 800 9.5px 'Archivo', sans-serif; letter-spacing: .16em; }
.sar-more a { display: flex; gap: 12px; padding: 12px 15px; border-bottom: 1px solid #deded9; }
.sar-more a:last-child { border-bottom: 0; }
.sar-more a:hover { background: #f4fff7; }
.sar-more a > span { width: 64px; height: 64px; flex: none; background: #ddd center / cover no-repeat; border: 1px solid var(--ink); }
.sar-more a > div { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.sar-more b { display: block; font: 900 14px/1.25 'Archivo', sans-serif; }
.sar-more em { display: block; font: 600 11.5px 'Archivo', sans-serif; font-style: normal; color: var(--mute); margin-top: 4px; }
.sar-news { padding: 16px; background: var(--g); border: 2px solid var(--ink); }
.sar-news b { display: block; font: 900 19px/1.15 'Archivo', sans-serif; letter-spacing: -.02em; margin-bottom: 10px; }
.sar-news div { display: flex; border: 2px solid var(--ink); background: #fff; }
.sar-news input { flex: 1; min-width: 0; height: 42px; border: 0; padding: 0 10px; outline: none; font: 600 13.5px 'Archivo', sans-serif; background: transparent; color: var(--ink); }
.sar-news button { cursor: pointer; padding: 0 14px; border: 0; background: var(--ink); color: var(--g) !important; font: 800 11px 'Archivo', sans-serif; letter-spacing: .12em; }
.sar-news.is-done div { display: none; }

/* the next story */
.sar-next { display: block; position: relative; overflow: hidden; background: var(--ink); color: var(--paper) !important; }
.sar-next:hover { color: var(--g) !important; }
.sar-next-px { position: absolute; left: 0; right: 0; top: -14%; height: 128%; opacity: .45; }
.sar-next-px div { width: 100%; height: 100%; background: center / cover no-repeat; }
.sar-next-shade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink) 15%, rgba(10,10,10,.4) 100%); }
.sar-next-t { position: relative; max-width: 1320px; margin: 0 auto; padding: clamp(60px,8vw,110px) clamp(20px,4vw,56px); }
.sar-next-t small { display: block; font: 800 10.5px 'Archivo', sans-serif; letter-spacing: .16em; color: var(--g); margin-bottom: 14px; }
.sar-next-t b { display: block; font: 900 clamp(40px,5.4vw,92px)/.88 'Archivo', sans-serif; letter-spacing: -.055em; max-width: 16ch; }

/* the lightbox */
.sar-lb { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: clamp(16px,4vw,60px); background: rgba(5,5,5,.94); cursor: zoom-out; }
.sar-lb[hidden] { display: none; }
.sar-lb-i { width: 100%; height: 100%; background: center / contain no-repeat; }
.sar-lb button { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #3a3a3a; background: none; color: var(--paper); font: 400 22px/1 'Archivo', sans-serif; cursor: pointer; }

@media (min-width: 1700px){ .sar-p { font-size: 20.5px; } }
@media (max-width: 1320px){ .sar-cols, .sar-cols.no-toc { grid-template-columns: minmax(0,1fr) 280px; } .sar-toc { display: none; } }
@media (max-width: 960px){
    .sar-top { grid-template-columns: minmax(0,1fr); }
    .sar-split .sar-top-i { min-height: 60vh; order: -1; }
    .sar-top-t { padding-top: 40px; }
    .sar-cols, .sar-cols.no-toc { grid-template-columns: minmax(0,1fr); }
    .sar-side { position: static; }
}
@media (max-width: 560px){ .sar-gal { grid-template-columns: repeat(2, minmax(0,1fr)); } .sar-cmt { margin-left: 0; } }
@media (prefers-reduced-motion: reduce){ .sar-prog { transition: none; } }