/* Feature articles (worker.js featureLayoutHtml): a full-screen photo with the headline in a frosted panel, a frosted bar
   on top, and the story on a sheet that slides up over the photo. feature.js adds the scroll-linked motion. */
:root{--ft-glass:rgba(248,245,236,.74);--ft-line:rgba(21,21,21,.09);--ft-shadow:0 18px 50px rgba(20,24,20,.14);--ft-ease:cubic-bezier(.2,.7,.15,1);--ft-fs:clamp(18px,17.2px + .25vw,19.5px)}
html[data-theme="dark"]{--ft-glass:rgba(17,18,17,.66);--ft-line:rgba(255,255,255,.08);--ft-shadow:0 18px 50px rgba(0,0,0,.45)}
html[data-ft-size="s"]{--ft-fs:16.5px}
html[data-ft-size="l"]{--ft-fs:clamp(21px,20px + .3vw,22.5px)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- page frame: no masthead; the nav becomes a frosted bar over the photo ---- */
body.feature-page{overflow-x:clip}
body.feature-page .page>.mast,body.feature-page .page>.top{display:none!important}
body.feature-page .page>main.content{max-width:none!important;margin:0!important;padding:0!important}
body.feature-page .page>.nav{position:fixed!important;top:0;left:0;right:0;margin:0;z-index:60;background:var(--ft-glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--ft-line)!important;box-shadow:none!important;transition:background-color .45s var(--ft-ease),border-color .45s var(--ft-ease),height .4s var(--ft-ease),transform .45s var(--ft-ease),box-shadow .4s ease}
body.feature-page .nav a.nav-search:not(.nav-brand):not(.nav-subscribe){background:transparent;border-left-color:var(--ft-line)}
/* over the photo the search icon stays white on hover too (style.css turns hovered links var(--paper), dark in dark theme) */
html body.ft-over .nav a.nav-search.nav-search.nav-search{color:#fff}
body.feature-page.nav-collapsed .nav-brand{border-right-color:var(--ft-line)}
html body.ft-over.ft-over .page>.nav{background:rgba(8,10,9,.26);border-bottom-color:rgba(255,255,255,.12)!important;box-shadow:none}
body.ft-over .nav a:not(.nav-subscribe):not(.nav-pulse-btn):not(:hover):not([aria-current="page"]):not(.ui-lit),body.ft-over .nav .nav-brand,body.ft-over .nav .nav-menu-btn,body.ft-over .nav .ft-aa,body.ft-over .nav .ft-navtitle{color:#fff}
body.ft-over .nav .nav-signin,body.ft-over .nav .nav-member{color:#fff;border-color:rgba(255,255,255,.6);background:transparent}
body.ft-over .nav .ui-nprefs{color:#fff}
body.ft-over .nav .ui-nprog{opacity:0}

/* the text size button and its menu (feature.js) */
.ft-aa{flex:none;align-self:center;display:inline-grid;place-items:center;width:40px;height:40px;margin:0 2px 0 6px;padding:0;border:0;border-radius:10px;background:transparent;color:var(--ink);font:700 17px/1 var(--f-head);letter-spacing:-.02em;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ft-aa:hover{background:color-mix(in srgb,currentColor 10%,transparent)}
.ft-aa:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ft .article-share .ft-aa{margin:0 0 0 auto;width:auto;height:38px;padding:0 16px;font-size:16px;border:1px solid var(--line);border-radius:999px;color:var(--ink)}
.ft-sizes{position:fixed;z-index:70;right:12px;top:62px;width:216px;padding:14px;border-radius:16px;background:var(--ft-glass);-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);border:1px solid var(--ft-line);box-shadow:var(--ft-shadow);color:var(--ink);font-family:var(--f-ui)}
.ft-sizes p{margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ft-sizes div{display:flex;gap:6px}
.ft-sizes button{flex:1;height:44px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;font-family:var(--f-head);font-weight:700;line-height:1}
.ft-sizes button[aria-pressed="true"]{background:var(--ink);color:var(--page);border-color:var(--ink)}
/* the story's name in the bar once reading starts */
.nav .ft-navtitle{position:absolute;left:50%;top:50%;transform:translate(-50%,-30%);max-width:52%;opacity:0;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:600 14px/1.2 var(--f-ui);color:var(--ink);transition:opacity .45s var(--ft-ease),transform .45s var(--ft-ease)}
.nav .ft-navtitle b{color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-right:8px}
@media(min-width:651px){
  body.ft-reading .nav>a:not(.nav-brand):not(.nav-subscribe):not(.nav-search):not(.nav-pulse-btn),body.ft-reading .nav>.ui-nmark{opacity:0;pointer-events:none;transition:opacity .35s var(--ft-ease)}
  body.feature-page .nav>a:not(.nav-brand):not(.nav-subscribe):not(.nav-search):not(.nav-pulse-btn){transition:opacity .35s var(--ft-ease)}
}
@media(min-width:900px){body.ft-reading .nav .ft-navtitle{opacity:1;transform:translate(-50%,-50%)}}
/* tablets: the drawer bar is a grid here too (article-enhancements.css forces flex above 650px), with a column for the Aa button */
@media(min-width:651px) and (max-width:899px){
  body.feature-page .page>.nav.has-drawer{display:grid!important;grid-template-columns:56px minmax(0,1fr) auto auto auto}
  .nav.has-drawer>.ft-aa{grid-column:3;grid-row:1}
  .nav.has-drawer>.ui-nprefs{grid-column:4}
  .nav.has-drawer>a.nav-pulse-btn.nav-pulse-btn{grid-column:5}
}
/* phones and tablets use the drawer bar: the title takes the brand's column, between the menu button and the Aa, theme and Pulse controls */
@media(max-width:899px){
  .nav.has-drawer>.ft-navtitle{position:static;grid-row:1;grid-column:2;align-self:center;justify-self:center;max-width:100%;transform:translateY(30%)}
  body.ft-reading .nav.has-drawer>.ft-navtitle{opacity:1;transform:none}
  body.ft-reading .nav.has-drawer>.nav-brand{opacity:0!important}
  .nav .ft-navtitle b{display:none}
}

/* ---- the opening ---- */
.ft{margin:0 -24px}
@media(max-width:650px){.ft{margin:0 -14px}}
.ft-hero{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#0b0c0b;color:#fff;z-index:0}
.ft-fill{position:absolute;inset:-60px;width:calc(100% + 120px);height:calc(100% + 120px);max-width:none;object-fit:cover;filter:blur(38px) brightness(.55) saturate(1.15)}
.ft-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--ft-focus,50% 50%);transform-origin:50% 60%;will-change:transform}
.ft-wide .ft-img{object-fit:contain;object-position:50% 34%}
.ft-noimg .ft-img,.ft-noimg .ft-fill{display:none}
.ft-dim{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
.ft-shade{position:absolute;inset:0;pointer-events:none;opacity:.7;background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.5) 30%,rgba(0,0,0,0) 56%),linear-gradient(to bottom,rgba(0,0,0,.42),rgba(0,0,0,0) 18%)}
.ft-copy{position:absolute;left:0;right:0;bottom:0;padding:0 12px calc(30px + env(safe-area-inset-bottom,0px));will-change:transform,opacity}
.ft-card{max-width:640px;padding:22px 22px 20px;border-radius:20px;background:rgba(14,16,15,.34);-webkit-backdrop-filter:saturate(150%) blur(22px);backdrop-filter:saturate(150%) blur(22px);border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 60px rgba(0,0,0,.25)}
.ft-kicker{margin:0 0 12px;font:700 11px/1 var(--f-ui);letter-spacing:.2em;text-transform:uppercase}
.ft-kicker a{color:#bfe3cc;text-decoration:none}
.ft-kicker a:hover{text-decoration:underline}
.ft .ft-hl{margin:0;color:#fff;font-family:var(--f-head);font-weight:700;letter-spacing:-.012em;text-wrap:balance}
.ft-hl-a{display:block;font-size:clamp(40px,6vw + 12px,92px);line-height:.98}
.ft-hl-solo{font-size:clamp(30px,3.2vw + 14px,62px);line-height:1.06}
.ft-hl-b{display:block;font-size:clamp(21px,1.5vw + 14px,32px);line-height:1.16;font-weight:400;margin-top:12px;text-wrap:balance}
.content .ft .ft-dek{font-family:var(--f-deck);font-style:italic;font-size:clamp(15.5px,.5vw + 13.5px,19px);line-height:1.5;margin:16px 0 0;max-width:36em;color:rgba(255,255,255,.92);text-wrap:pretty}
.content .ft .ft-byline{display:flex;flex-wrap:wrap;gap:4px 10px;margin:18px 0 0;font:600 11.5px/1.4 var(--f-ui);letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.ft-byline span:not(:last-child)::after{content:"\00b7";margin-left:10px;opacity:.6}
@media(max-width:420px){.content .ft .ft-byline{font-size:10.5px;letter-spacing:.09em;gap:4px 8px}.ft-byline span:not(:last-child)::after{margin-left:8px}}
.ft-credit{position:absolute;right:16px;top:calc(70px + env(safe-area-inset-top,0px));max-width:min(360px,calc(100% - 32px));padding:8px 13px;border-radius:999px;background:rgba(14,16,15,.34);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.92);font:500 11.5px/1.45 var(--f-ui);text-align:left;cursor:pointer}
.ft-credit-full{display:none}
.ft-credit.open{border-radius:14px}.ft-credit.open .ft-credit-full{display:inline}.ft-credit.open .ft-credit-short{display:none}
.ft-cue{display:none}
@media(min-aspect-ratio:9/10){
  .ft-tall .ft-img{object-fit:contain;object-position:100% 50%;-webkit-mask-image:linear-gradient(to right,transparent calc(100% - var(--ft-r) * 100svh),#000 calc(100% - var(--ft-r) * 100svh + 22vw));mask-image:linear-gradient(to right,transparent calc(100% - var(--ft-r) * 100svh),#000 calc(100% - var(--ft-r) * 100svh + 22vw))}
  .ft-wide .ft-img{object-fit:cover;object-position:var(--ft-focus,50% 40%)}
  .ft-shade{opacity:.75;background:linear-gradient(to right,rgba(0,0,0,.72) 0%,rgba(0,0,0,.35) 42%,rgba(0,0,0,0) 62%),linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0) 40%),linear-gradient(to bottom,rgba(0,0,0,.4),rgba(0,0,0,0) 16%)}
  .ft-copy{left:clamp(24px,6vw,104px);right:auto;bottom:clamp(56px,12vh,130px);padding:0;width:min(640px,50vw)}
  .ft-card{padding:30px 32px 28px}
  .ft-credit{top:auto;bottom:22px;right:auto;left:clamp(24px,6vw,104px)}
  .ft-cue{display:grid;place-items:center;position:absolute;left:50%;bottom:20px;width:44px;height:44px;margin-left:-22px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:none;color:#fff;cursor:pointer}
  .ft-cue svg{width:18px;height:18px;animation:ft-cue 2.4s var(--ft-ease) infinite}
}
@media(min-aspect-ratio:9/10){
  .ft-right .ft-copy{left:auto;right:clamp(24px,6vw,104px)}
  .ft-right .ft-shade{background:linear-gradient(to left,rgba(0,0,0,.72) 0%,rgba(0,0,0,.35) 42%,rgba(0,0,0,0) 62%),linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0) 40%),linear-gradient(to bottom,rgba(0,0,0,.4),rgba(0,0,0,0) 16%)}
  .ft-right .ft-credit{left:auto;right:clamp(24px,6vw,104px)}
}
@keyframes ft-cue{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}

/* ---- the sheet with the story ---- */
.ft-sheet{position:relative;z-index:2;background:var(--page);border-radius:26px 26px 0 0;margin-top:-26px;box-shadow:0 -24px 60px rgba(0,0,0,.28)}
.ft-art{max-width:680px;margin:0 auto;padding:clamp(30px,5vw,56px) 20px 0}
.ft .article-share{gap:8px;margin:0 0 30px;padding:0;border:0}
.ft .article-share-label{display:none}
.ft .article-share .share-btn{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);font:600 13px var(--f-ui);text-decoration:none;cursor:pointer;transition:background-color .2s,border-color .2s}
.ft .article-share .share-btn:hover{background:var(--paper);border-color:color-mix(in srgb,var(--ink) 30%,var(--line))}
.ft .article-orig,.ft .article-stale{margin:0 0 22px}
.content .ft-body p{font-family:var(--f-body);color:var(--ink);font-size:var(--ft-fs);line-height:1.7;margin:0 0 1.12em;text-wrap:pretty;hanging-punctuation:first}
.ft-body>p.ft-first{margin-top:0}
.ft-dc{float:left;font-family:var(--f-head);font-weight:700;color:var(--ink);font-size:calc(var(--ft-fs) * 5.05);line-height:.74;margin:.075em .085em 0 -.02em}
.ft-lw{font-variant-caps:all-small-caps;letter-spacing:.06em;font-weight:600;font-size:1.06em}
.ft-body h3{font-family:var(--f-head);font-weight:700;font-size:clamp(25px,1.2vw + 19px,31px);line-height:1.15;margin:2.1em 0 .75em;letter-spacing:-.005em}
.ft-body h3::before{content:"";display:block;width:38px;height:2px;background:var(--accent);margin-bottom:16px}
.ft-body .article-figure{width:min(900px,calc(100vw - 40px));margin:2.2em 0 2em 50%;transform:translateX(-50%)}
.ft-body .article-figure-img{width:auto;max-width:100%;max-height:min(80vh,780px);margin:0 auto;border-radius:14px}
.content .ft-body .article-figure .article-figure-caption{max-width:680px;margin:12px auto 0;font-family:var(--f-ui)}
.ft-pq{width:min(940px,calc(100vw - 40px));margin:2.6em 0 2.6em 50%;padding:0;text-align:center;transform:translateX(-50%)}
.ft-pq-in{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(30px,4vw,48px) 0}
.ft-pq-mark{display:block;height:.42em;font:700 clamp(70px,6vw + 30px,120px)/.6 var(--f-head);color:var(--accent)}
.ft-pq blockquote{margin:0;padding:0;border:0;font-family:var(--f-head);font-weight:700;font-style:normal;font-size:clamp(30px,3.4vw + 14px,58px);line-height:1.1;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.content .ft-pq figcaption{margin-top:20px;font:600 12px/1.4 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-wrap:balance}
.ft-pq .w{transition:opacity .35s linear}
.ft-fx .ft-pq .w{opacity:.18}
.ft-fx .ft-pq .w.lit{opacity:1}

/* related stories as photo cards: a swipe row on phones, three columns on wide screens */
.ft-rel{max-width:1180px;margin:clamp(50px,7vw,90px) auto 0;padding:clamp(34px,5vw,54px) 0 clamp(50px,7vw,80px);border-top:1px solid var(--line)}
.content .ft-rel-h{margin:0 0 22px;padding:0 20px;font:700 12px/1.2 var(--f-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.ft-rcs{display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,340px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 20px 14px;scrollbar-width:none;overscroll-behavior-x:contain}
.ft-rcs::-webkit-scrollbar{display:none}
.ft-rc{display:block;min-width:0;scroll-snap-align:start;color:inherit;text-decoration:none}
.ft-rc-img{display:block;aspect-ratio:3/2;border-radius:14px;overflow:hidden;background:var(--line)}
.ft-rc-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ft-ease)}
.ft-rc:hover .ft-rc-img img{transform:scale(1.045)}
.ft-rc-kick{display:block;margin:14px 0 6px;font:700 10.5px/1.2 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.ft-rc-h{display:block;font:700 20px/1.22 var(--f-head);text-wrap:balance}
.ft-rc:hover .ft-rc-h{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.content .ft-rc-p{display:block;margin-top:8px;font:15.5px/1.5 var(--f-body);color:var(--muted)}
@media(min-width:900px){.ft-rcs{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible;padding:0 28px;gap:28px}.content .ft-rel-h{padding:0 28px}}

/* blocks ease in as they reach the screen (feature.js adds .ft-fx; without it everything simply shows) */
.ft-fx .ft-rv{opacity:0;transform:translateY(34px);transition:opacity 1.1s var(--ft-ease),transform 1.1s var(--ft-ease)}
.ft-fx .ft-rv.in{opacity:1;transform:none}
.ft-fx .ft-pq.ft-rv,.ft-fx .article-figure.ft-rv{transform:translateX(-50%) translateY(34px)}
.ft-fx .ft-pq.ft-rv.in,.ft-fx .article-figure.ft-rv.in{transform:translateX(-50%)}
@media(prefers-reduced-motion:reduce){.ft-cue svg{animation:none}.ft-fx .ft-rv{opacity:1;transform:none;transition:none}}

/* ---- framed opening: big news stories whose photo is too small or tall for full screen (worker.js featureMode) ----
   The headline sits on the page under the frosted bar, then the whole photo large in a rounded frame with its caption. */
.ft-framed .ft-top{max-width:860px;margin:0 auto;padding:calc(48px + clamp(36px,6vw,76px)) 20px clamp(26px,3.5vw,40px);text-align:center}
.ft-framed .ft-kicker a{color:var(--accent)}
.ft-framed .ft-hl{color:var(--ink)}
.ft-framed .ft-hl-a{font-size:clamp(34px,3.6vw + 16px,70px);line-height:1.02}
.ft-framed .ft-hl-solo{font-size:clamp(30px,2.6vw + 16px,58px);line-height:1.06}
.ft-framed .ft-hl-b{font-size:clamp(20px,1.1vw + 14px,28px)}
.content .ft-framed .ft-dek{margin:18px auto 0;color:color-mix(in srgb,var(--ink) 78%,var(--page))}
.content .ft-framed .ft-byline{justify-content:center;color:var(--muted)}
.ft-lead{max-width:min(1180px,calc(var(--ft-w,1180px) + 56px));margin:0 auto;padding:0 clamp(0px,2vw,28px)} /* never wider than the photo itself */
.ft-lead-frame{position:relative;overflow:hidden;max-width:calc(min(82vh,820px) * var(--ft-r,100));margin:0 auto;border-radius:clamp(0px,1.4vw,18px);background:#0b0c0b}
.ft-lead-img{display:block;width:100%;height:auto;max-width:none;max-height:min(82vh,820px);object-fit:cover;object-position:var(--ft-focus,50% 40%)}
/* a tall or square photo shows whole over a blurred, darkened copy of itself (photo policy) */
.ft-lead-tall{aspect-ratio:3/2;max-height:min(82vh,820px)}
.ft-lead-tall .ft-fill{position:absolute;inset:-60px;width:calc(100% + 120px);height:calc(100% + 120px);max-width:none;object-fit:cover;filter:blur(38px) brightness(.55) saturate(1.15)}
.ft-lead-tall .ft-lead-img{position:relative;height:100%;max-height:none;object-fit:contain}
.content .ft-lead-cap{max-width:680px;margin:12px auto 0;padding:0 20px;font-family:var(--f-ui);text-align:left}
.ft-framed .ft-sheet{margin-top:0;border-radius:0;box-shadow:none;background:transparent}
@media(max-width:650px){.ft-framed .ft-top{text-align:left;padding-top:calc(48px + 30px)}.content .ft-framed .ft-byline{justify-content:flex-start}.ft-lead-tall{aspect-ratio:4/5}}