/* Spectra: Media. Reads css/site.css for tokens, fonts, header, focus ring and the shared .cta button.
   One signature element: the ledger. Eleven newsrooms, one ruled row each, dated, headline in its own
   script with the English underneath. A spectrum line draws across the top of a row as you hover or
   tab into it. Video rows carry a click-to-play still in place; nothing third-party loads until you press play. */

#main{padding-top:calc(var(--head) + var(--sat) + 8px)}

.md-hero{max-width:1200px;margin:0 auto;padding:clamp(28px,6vh,72px) calc(var(--gut) + var(--sar)) clamp(20px,4vh,36px) calc(var(--gut) + var(--sal))}
.md-h1{margin:0;color:var(--ink);font-family:var(--serif);font-stretch:118%;font-weight:800;
  font-size:clamp(32px,6vw,84px);line-height:1.06;letter-spacing:-.01em;max-width:19ch}
.md-when-line{margin:clamp(14px,2.4vh,22px) 0 0;color:var(--soft);font-size:clamp(17px,1.6vw,20px)}

.md-pitch{max-width:1200px;margin:0 auto;padding:clamp(28px,7vh,72px) calc(var(--gut) + var(--sar)) clamp(20px,4vh,36px) calc(var(--gut) + var(--sal));
  font-family:var(--sans);font-weight:300;font-size:clamp(34px,7.2vw,72px);line-height:1.04;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}

.md-list{max-width:1200px;margin:0 auto;padding:0 calc(var(--gut) + var(--sar)) clamp(40px,7vh,80px) calc(var(--gut) + var(--sal))}
.md-fine{margin:0 0 clamp(14px,2.4vh,22px);font-size:14px;color:var(--soft)}
.md-rows{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}

/* a row: when | the story | (video). Ruled, no card, no number. */
.md-row{position:relative;display:grid;gap:14px 32px;padding:clamp(22px,3.5vh,34px) 0;border-top:1px solid var(--line);scroll-margin-top:calc(var(--head) + 16px)}
@media (min-width:900px){
  .md-row{grid-template-columns:150px minmax(0,1fr)}
  .md-row.md-has-vid{grid-template-columns:150px minmax(0,1fr) minmax(0,.9fr);align-items:start}
}
.md-row::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--spectrum);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);pointer-events:none}
.md-row:focus-within::before{transform:scaleX(1)}@media (hover:hover){.md-row:hover::before{transform:scaleX(1)}}

.md-date{display:block;color:var(--soft);font-size:15px;line-height:1.4}
.md-text{display:grid;gap:8px;min-width:0;align-content:start}
.md-out{margin:0;color:var(--ink);font-family:var(--serif);font-stretch:125%;text-transform:uppercase;font-weight:800;
  font-size:clamp(18px,1.9vw,24px);letter-spacing:.005em;line-height:1.1}
.md-brand{display:flex;align-items:center;gap:6px 16px;flex-wrap:wrap;min-width:0}
.md-logo{display:block;height:32px;width:auto;max-width:150px;object-fit:contain;object-position:left center;opacity:.82;flex:none}
@media (hover:hover){.md-logo{transition:opacity .25s ease}.md-row:hover .md-logo{opacity:1}}
@media (prefers-reduced-motion:reduce){.md-logo{transition:none}}
.md-head{margin:0;color:var(--ink);font-size:clamp(19px,1.9vw,24px);line-height:1.4;max-width:40ch;overflow-wrap:anywhere;text-wrap:pretty}
.md-head:lang(gu){font-family:var(--sans),'Gujarati Sangam MN','Shruti','Noto Sans Gujarati',sans-serif}
.md-head:lang(hi){font-family:var(--sans),'Kohinoor Devanagari','Devanagari Sangam MN','Mangal','Noto Sans Devanagari',sans-serif}
.md-none{color:var(--soft);font-size:19px}
.md-en{margin:0;color:var(--soft);max-width:52ch;overflow-wrap:anywhere}
.md-go{margin:0}
.md-a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:underline;text-decoration-color:rgba(252,252,252,.4);text-underline-offset:3px}
@media (hover:hover){.md-a:hover{text-decoration-color:currentColor}}

@media (max-width:899px){ .md-date{font-size:14px} .md-vid{order:2} }

/* ---------- the click-to-play still ---------- */
.md-vid{min-width:0}
.vf{position:relative;aspect-ratio:16/9;width:100%;background:var(--raise)}
.vf iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.vf-btn{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:none;cursor:pointer;overflow:hidden;display:block}
.vf-img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.85) brightness(.82);transition:filter .3s var(--ease),transform .6s var(--ease)}
.vf-play{position:absolute;left:16px;bottom:16px;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--ink);color:#000;transition:transform .16s var(--ease)}
.vf-play svg{margin-left:2px}
.vf-btn:focus-visible .vf-img{filter:none;transform:scale(1.02)}@media (hover:hover){.vf-btn:hover .vf-img{filter:none;transform:scale(1.02)}}
@media (hover:hover){.vf-btn:hover .vf-play{transform:scale(1.06)}}
.vf-btn:active .vf-play{transform:scale(.97)}

/* ---------- an article's thumbnail (its own og:image), in the video's slot ---------- */
.md-shot{display:block;position:relative;aspect-ratio:16/9;width:100%;background:var(--raise);overflow:hidden}
.md-shot-img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.85) brightness(.82);transition:filter .3s var(--ease),transform .6s var(--ease)}
@media (hover:hover){.md-row:hover .md-shot-img{filter:none;transform:scale(1.02)}}
@media (min-width:900px){.md-has-shot .md-vid{max-width:420px}}

/* ---------- As seen in: the logos, white, one quiet line ---------- */
.md-seen{display:grid;gap:14px;margin:0 0 clamp(22px,4vh,40px)}
.md-seen-k{margin:0;color:var(--soft);font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.md-seen-l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.md-seen-img{display:block;height:26px;width:auto;max-width:120px;object-fit:contain;opacity:.7}

/* ---------- press desk ---------- */
.md-press{max-width:1200px;margin:0 auto;padding:clamp(36px,7vh,72px) calc(var(--gut) + var(--sar)) clamp(56px,9vh,96px) calc(var(--gut) + var(--sal));display:grid;gap:14px;justify-items:start}
.md-press-h{margin:0;font-family:var(--serif);font-stretch:118%;font-weight:800;font-size:clamp(24px,3.4vw,40px);line-height:1.15;color:var(--ink)}
.md-press-p{margin:0;color:var(--soft);max-width:44ch;font-size:18px}
.md-press-links{margin:8px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px}
.md-cta{min-height:52px;padding:0 28px;font-size:16px}

.sfoot .sf-nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(252,252,252,.4);text-underline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .md-row::before,.vf-img,.vf-play,.md-shot-img{transition:none}
  @media (hover:hover){.md-row:hover .md-shot-img{transform:none}}
  .vf-btn:focus-visible .vf-img{transform:none}@media (hover:hover){.vf-btn:hover .vf-img{transform:none}}
}

/* Background options (?bg=a|b|c), drawn by js/media-bg.js. Full-bleed canvas behind the hero text, screen-blended so black adds nothing. */
.mbg-canvas{position:absolute;left:0;top:0;z-index:0;display:block;pointer-events:none;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(#000 0,#000 62%,transparent 100%);mask-image:linear-gradient(#000 0,#000 62%,transparent 100%)}
html[data-mbg] .md-h1,html[data-mbg] .md-when-line,html[data-mbg] .md-pitch{position:relative;z-index:1}