/* Witness motion layer. Everything here is an enhancement: without JS or with reduced motion,
   the logo and every section render complete and static. */
.wi-logo{display:block;width:100%;height:auto;overflow:visible}
.wi-rule,.wi-mark-base,.wi-bar,.wi-word,.wi-glyph{transform-box:fill-box}
.wi-rule{transform-origin:50% 0}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@keyframes wi-draw{from{transform:scaleY(0)}}
@keyframes wi-mark-rise{from{transform:translateY(102%)}}
@keyframes wi-bar-in{from{transform:translate(51.4%,-101%)}}
@keyframes wi-word-in{from{transform:translateX(-118%)}}
@keyframes wi-glyph-in{from{opacity:0;transform:translateY(90%)}}
@keyframes wi-fade{from{opacity:0}}
@keyframes wi-fade-up{from{opacity:0;translate:0 26px}}
@keyframes wi-rise{from{opacity:0;translate:0 34px}}
@keyframes wi-meta-l{from{opacity:0;translate:-18px 0}}
@keyframes wi-meta-r{from{opacity:0;translate:18px 0}}
@keyframes wi-aperture{from{clip-path:inset(6% 3.5% 0 3.5% round 12px)}to{clip-path:inset(0 0 0 0 round 12px)}}
@keyframes wi-photo{from{scale:1.14}}
@keyframes wi-line{from{opacity:0;translate:0 .42em}}
@keyframes wi-title{from{opacity:0;translate:0 .2em;clip-path:inset(-20% -6% 100% -6%)}to{clip-path:inset(-20% -6% -30% -6%)}}
@keyframes wi-flag{from{opacity:0;translate:-22px 0;scale:.94}}
@keyframes wi-backdrop{from{opacity:0;scale:1.07}}
@keyframes wi-settle{from{scale:1.07}}

@media (prefers-reduced-motion:no-preference){
 /* Full-logo reveal: the rule draws, the W assembles stroke by stroke, the wordmark slides out from behind the rule. */
 .wi-logo--hero{--t:1}
 .wi-logo--brand{--t:.72}
 .wi-intro :is(.wi-logo--hero,body:not(.home-page) .wi-logo--brand) .wi-rule{animation:wi-draw calc(var(--t)*.9s) cubic-bezier(.7,0,.2,1) calc(var(--t)*.05s) backwards}
 .wi-intro :is(.wi-logo--hero,body:not(.home-page) .wi-logo--brand) .wi-mark-base{animation:wi-mark-rise calc(var(--t)*.95s) cubic-bezier(.16,1,.3,1) calc(var(--t)*.2s) backwards}
 .wi-intro :is(.wi-logo--hero,body:not(.home-page) .wi-logo--brand) .wi-bar-ink{animation:wi-bar-in calc(var(--t)*.9s) cubic-bezier(.16,1,.3,1) calc(var(--t)*.38s) backwards}
 .wi-intro :is(.wi-logo--hero,body:not(.home-page) .wi-logo--brand) .wi-bar-red{animation:wi-bar-in calc(var(--t)*1s) cubic-bezier(.16,1,.3,1) calc(var(--t)*.52s) backwards}
 .wi-intro :is(.wi-logo--hero,body:not(.home-page) .wi-logo--brand) .wi-word{animation:wi-word-in calc(var(--t)*1.2s) cubic-bezier(.16,1,.3,1) calc(var(--t)*.5s) backwards}
 .wi-intro :is(.wi-logo--hero,body:not(.home-page) .wi-logo--brand) .wi-sub .wi-glyph{animation:wi-glyph-in calc(var(--t)*.7s) cubic-bezier(.16,1,.3,1) calc(var(--t)*(.9s + var(--i)*28ms)) backwards}
 .wi-intro .home-page .brand .wi-logo{animation:wi-fade .9s ease 1.25s backwards}

 /* Homepage opening: the masthead lines, then the photograph opens like an aperture. */
 .wi-intro .home-page .masthead-meta p:first-child{animation:wi-meta-l 1s cubic-bezier(.16,1,.3,1) .85s backwards}
 .wi-intro .home-page .masthead-meta p:last-child{animation:wi-meta-r 1s cubic-bezier(.16,1,.3,1) .95s backwards}
 .wi-intro .home-page .hero{animation:wi-aperture 1.5s cubic-bezier(.16,1,.3,1) .3s backwards}
 .wi-intro .home-page .hero-image{animation:wi-photo 2.6s cubic-bezier(.16,1,.3,1) .3s backwards}
 .wi-intro .home-page .headline-line{animation:wi-line 1.1s cubic-bezier(.16,1,.3,1) .7s backwards}
 .wi-intro .home-page .headline-line+.headline-line{animation-delay:.84s}
 .wi-intro .home-page :is(.hero-top,.hero-bottom){animation:wi-fade-up 1s cubic-bezier(.16,1,.3,1) 1.05s backwards}

 /* Country and region pages: every entry staggers breadcrumb, flag, title and introduction. */
 .wi-motion .immersive-country:before{animation:wi-backdrop 2.6s cubic-bezier(.16,1,.3,1) backwards}
 .wi-motion .country-breadcrumb{animation:wi-fade-up .9s cubic-bezier(.16,1,.3,1) .05s backwards}
 .wi-motion .country-flag{animation:wi-flag 1.2s cubic-bezier(.16,1,.3,1) .15s backwards}
 .wi-motion .country-identity .eyebrow{animation:wi-fade-up .9s cubic-bezier(.16,1,.3,1) .24s backwards}
 .wi-motion .country-hero h1{animation:wi-title 1.25s cubic-bezier(.16,1,.3,1) .3s backwards}
 .wi-motion .country-hero .photo-gallery{animation:wi-rise 1.1s cubic-bezier(.16,1,.3,1) .48s backwards}
 .wi-motion .country-hero .country-intro{animation:wi-rise 1.1s cubic-bezier(.16,1,.3,1) .56s backwards}
 .wi-motion body:not(.home-page) .header nav{animation:wi-fade .9s ease .2s backwards}

 /* Scroll reveals (motion.js marks only content that starts below the fold). */
 .js-motion [data-motion]:not(.is-in){opacity:0}
 .js-motion [data-motion]:not(.is-in):focus-within{opacity:1}
 .js-motion [data-motion].is-in{animation:wi-rise 1s cubic-bezier(.16,1,.3,1) backwards}
 .js-motion [data-motion="image"].is-in :is(img,video){animation:wi-settle 1.8s cubic-bezier(.16,1,.3,1) backwards}
 [data-drift]{will-change:translate}
 .country-page{overflow-x:clip}

 /* Considered hover and focus: arrows lean in the direction they point, links underline from the left. */
 :is(.pill,.text-link,.country-switch>a,.round-arrow,.country-breadcrumb>a,.footer-top a,.footer-bottom a) .icon-arrow{transition:translate .45s cubic-bezier(.16,1,.3,1)}
 :is(.pill,.text-link,.country-switch>a,.footer-top a):is(:hover,:focus-visible) .icon-arrow,.region-link:is(:hover,:focus-visible) .round-arrow .icon-arrow{translate:3px -3px}
 .hero .pill:is(:hover,:focus-visible) .icon-arrow{translate:3px 3px}
 .country-breadcrumb>a:is(:hover,:focus-visible) .icon-arrow{translate:-4px 0}
 .footer-bottom a:is(:hover,:focus-visible) .icon-arrow{translate:0 -3px}
 .region-link .number{transition:color .3s}
 .region-link:is(:hover,:focus-visible) .number{color:#c12b25}
 .map-city-controls button,.podcast-social-links a,.gallery-controls button{transition:background-color .3s,border-color .3s,color .3s}
 @media (hover:hover) and (min-width:701px){
  .header nav>a:not(.pill){background:linear-gradient(currentColor,currentColor) no-repeat 0 calc(100% - 15px)/0 1px;transition:background-size .5s cubic-bezier(.16,1,.3,1),color .2s}
  .header nav>a:not(.pill):is(:hover,:focus-visible){background-size:100% 1px}
 }
}
@media print{.js-motion [data-motion]{opacity:1!important;animation:none!important}}

/* ---------- Afghanistan series trailer ---------- */
.trailer{display:grid;grid-template-columns:max(260px,min(430px,calc((88svh - 96px)*9/16))) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.trailer-player{width:100%;min-width:0}
.trailer-stage{position:relative;aspect-ratio:9/16;background:#050607;border-radius:10px;overflow:hidden;box-shadow:0 30px 70px -30px #000c,0 0 0 1px #ffffff1f}
.trailer-video{display:block;width:100%;height:100%;object-fit:cover;background:#050607}
.trailer.is-enhanced .trailer-video{cursor:pointer}
.trailer-bigplay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;width:100%;border:0;padding:0;background:linear-gradient(0deg,#0009,#0000 45%,#0000 70%,#0006);color:#fff;cursor:pointer;font-size:16px;font-weight:600}
.trailer-bigplay[hidden],.trailer-cue[hidden],.trailer-bar[hidden]{display:none}
.trailer-bigplay-ring{display:grid;place-items:center;width:82px;height:82px;border-radius:50%;background:#8b0101;box-shadow:0 10px 40px #0008,0 0 0 1px #ffffff40;transition:scale .4s cubic-bezier(.16,1,.3,1),background-color .25s}
.trailer-bigplay-ring .trailer-icon{width:34px;height:34px;margin-left:4px}
.trailer-bigplay-label{padding:6px 12px;border-radius:4px;background:#0c0f12b3;letter-spacing:-.01em}
.trailer-bigplay:hover .trailer-bigplay-ring,.trailer-bigplay:focus-visible .trailer-bigplay-ring{scale:1.07;background:#a40d0d}
.trailer-bigplay:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.trailer-cue{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px 10px 12px;border:1px solid #ffffff59;border-radius:30px;background:#0c0f12bf;color:#fff;font-size:15px;font-weight:600;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background-color .25s,border-color .25s}
.trailer-cue:hover{background:#8b0101;border-color:#8b0101}
.trailer-cue:focus-visible{outline:3px solid #fff;outline-offset:3px}
.trailer-icon{display:block;width:22px;height:22px;flex-shrink:0}
.trailer-bar{margin-top:12px;padding:10px 12px 12px;border:1px solid #ffffff26;border-radius:8px;background:#0c0f12d9}
.trailer-timeline{display:flex;align-items:center;gap:12px}
.trailer-seek{flex:1;min-width:0}
.trailer-time{flex-shrink:0;font-size:13px;font-variant-numeric:tabular-nums;color:#dedede}
.trailer-buttons{display:flex;align-items:center;gap:8px;margin-top:8px}
.trailer-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 10px;border:1px solid #ffffff40;border-radius:30px;background:transparent;color:#fff;cursor:pointer;transition:background-color .25s,border-color .25s}
.trailer-btn:hover{background:#ffffff1a;border-color:#ffffffa0}
.trailer-btn:focus-visible,.trailer-seek:focus-visible,.trailer-volume:focus-visible{outline:3px solid #fff;outline-offset:3px}
.trailer-mute{padding:0 16px 0 12px;font-size:15px;font-weight:600}
.trailer.is-muted .trailer-mute{background:#f4f4f4;border-color:#f4f4f4;color:#151719}
.trailer.is-muted .trailer-mute:hover{background:#fff}
.trailer-full{margin-left:auto}
.trailer-volume-wrap{display:flex;align-items:center;flex:1;min-width:0;max-width:130px}
.trailer-volume-wrap[hidden]{display:none}
.trailer-volume{width:100%}
.trailer-seek,.trailer-volume{accent-color:#c12b25;height:24px;cursor:pointer}
.trailer .when-playing,.trailer.is-playing .when-paused,.trailer .when-sound,.trailer:not(.is-muted) .when-muted{display:none}
.trailer.is-playing .when-playing,.trailer:not(.is-muted) .when-sound{display:block}
.trailer-notes{padding-top:6px;max-width:560px}
.trailer-kicker{display:inline-block;border-left:3px solid #8b0101;padding-left:12px;font-size:14px;font-weight:600;line-height:1.5;color:#dedede}
.trailer-notes h3{margin:16px 0 14px;font-size:clamp(28px,3vw,44px);line-height:1.08;letter-spacing:-.045em;font-weight:500}
.trailer-notes>p{margin:0;font-size:17px;line-height:1.65;color:#dedede}
.trailer-notes .trailer-list-title{margin:32px 0 6px;font-size:14px;font-weight:600;color:#bcbcbc}
.trailer-guests{list-style:none;margin:0;padding:0;border-top:1px solid #ffffff26}
.trailer-guests li{display:flex;flex-direction:column;gap:4px;padding:14px 0;border-bottom:1px solid #ffffff26}
.trailer-guest{font-size:18px;font-weight:600;line-height:1.4}
.trailer-bio{font-size:15px;line-height:1.55;color:#cfcfcf}
.trailer-transcript{margin-top:22px;font-size:15px}
.trailer-transcript summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.trailer-transcript summary:focus-visible{outline:3px solid #fff;outline-offset:4px}
.trailer-transcript ol{list-style:none;margin:8px 0 0;padding:0}
.trailer-transcript li{display:grid;grid-template-columns:44px 1fr;gap:10px;padding:6px 0;line-height:1.55;color:#dedede}
.trailer-transcript time{font-variant-numeric:tabular-nums;color:#9a9a9a}
.trailer-player:fullscreen{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:none;padding:16px;background:#000}
.trailer-player:fullscreen .trailer-stage{height:calc(100vh - 150px);width:auto;max-width:100%;border-radius:0}
.trailer-player:fullscreen .trailer-bar{width:min(100%,560px)}
.trailer-player:-webkit-full-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:none;padding:16px;background:#000}
.trailer-player:-webkit-full-screen .trailer-stage{height:calc(100vh - 150px);width:auto;max-width:100%;border-radius:0}
.trailer-player:-webkit-full-screen .trailer-bar{width:min(100%,560px)}
@media(max-width:860px){
 .trailer{grid-template-columns:1fr;gap:28px}
 .trailer-player{justify-self:center;width:min(100%,max(240px,calc((86svh - 110px)*9/16)))}
}
@media(max-width:700px){
 .trailer-bigplay-ring{width:70px;height:70px}
 .trailer-cue{top:10px;right:10px;padding:8px 14px 8px 10px;font-size:14px}
 .trailer-bar{padding:8px 8px 10px}
 .trailer-buttons{gap:6px}
 .trailer-mute{padding:0 12px 0 10px}
 .trailer-notes h3{font-size:clamp(28px,8vw,36px)}
 .trailer-notes>p{font-size:16px}
}
@media(prefers-reduced-motion:reduce){.trailer-bigplay-ring{transition:none}}