/* Phone-only refinements (knowledge). Every rule must sit inside @media (max-width:760px): desktop and tablet never load these rules. */
@media (max-width:760px){

  /* ---------- toolbars: topic filters become one swipeable row, search sits beneath ---------- */
  .kh-tools{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:12px;margin-bottom:12px;min-width:0}
  .kh-tools>*{min-width:0;max-width:none}
  .res-layout{grid-template-columns:minmax(0,1fr)}
  .res-side,.res-side>*{min-width:0}
  .kh-sec .chips,.cats{flex-wrap:nowrap;flex-direction:row;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
    margin:0 calc(-1 * var(--gut));padding:2px var(--gut) 4px;scroll-padding-inline:var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--gut),#000 calc(100% - 36px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--gut),#000 calc(100% - 36px),transparent 100%)}
  .kh-sec .chips::-webkit-scrollbar,.cats::-webkit-scrollbar{display:none}
  .kh-sec .chip{flex:none;white-space:nowrap;scroll-snap-align:start;min-height:44px}
  .cats .chip{width:auto;padding:10px 16px}
  .kh-sec .search{width:100%;min-height:48px}
  .kh-status{gap:8px;margin-bottom:16px}

  /* ---------- featured issue: solid glass (no live blur on phones), tidy overlap ---------- */
  .feat{border-radius:22px;margin-bottom:36px}
  .feat-ph{height:240px}
  .feat-copy{margin:-48px 12px 12px;padding:24px 22px 24px;gap:14px;border-radius:18px;-webkit-backdrop-filter:none;backdrop-filter:none;
    background:linear-gradient(160deg,rgba(14,30,48,.94),rgba(0,62,99,.9))}
  .feat h3{font-size:26px;line-height:1.14}
  .feat-copy>p{font-size:15.5px;line-height:1.55}
  .feat .btn{align-self:stretch;justify-content:center;text-align:center}

  /* ---------- article list: compact editorial rows instead of nine tall cards ---------- */
  #list-articles{gap:12px}
  #articles .mcard{flex-direction:row;align-items:stretch;border-radius:18px;min-height:128px}
  #articles .mcard .ph{flex:0 0 112px;aspect-ratio:auto;min-height:100%}
  #articles .mcard .ph img{position:absolute;inset:0}
  #articles .mcard .bd{padding:14px 16px 14px;gap:6px;min-width:0}
  #articles .mcard .topic{font-size:12.5px}
  #articles .mcard h3{font-size:17px;line-height:1.28;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  #articles .mcard .bd>p{display:none}
  #articles .mcard .meta{padding-top:6px;font-size:12.5px;align-items:baseline}
  #articles .mcard .meta b{display:none}
  .js #articles .mcard.rise{transform:translateY(14px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
  .js #articles .mcard.rise.in{transform:none}

  /* ---------- thought leadership: portrait, then the quote; essays swipe sideways ---------- */
  .tl-lead{margin-bottom:36px;border-radius:22px}
  .tl-port{aspect-ratio:5/4}
  .tl-port figcaption{left:12px;bottom:12px;right:auto;max-width:calc(100% - 24px);padding:10px 14px}
  .tl-copy{padding:26px 22px 26px;gap:16px}
  .tl-copy::before{display:none}
  .tl-quote .mark{font-size:80px;height:34px}
  .tl-quote p{font-size:23px;line-height:1.25}
  .tl-foot{padding-top:18px}
  .tl-foot h3{font-size:19px}
  .tl-foot .btn{align-self:stretch;justify-content:center;text-align:center}
  #list-insights{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin:0 calc(-1 * var(--gut));padding:4px var(--gut) 24px;scroll-padding-inline:var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #list-insights::-webkit-scrollbar{display:none}
  #list-insights>.mcard{flex:0 0 min(82vw,330px);scroll-snap-align:start}
  #list-insights>:not(.mcard){flex:1 0 100%}
  .tcard .bd{padding:22px 20px 18px;gap:10px}
  .tcard h3{font-size:21px}
  .tcard .bd>p{font-size:15px;line-height:1.55}
  .tby{padding-top:14px;gap:12px;font-size:14px}
  .tby .tgo{display:none}

  /* ---------- videos: lighter glass, a swipeable screening row ---------- */
  .vids .chip,.vids .search{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(14,39,71,.55)}
  .vids .chip[aria-pressed=true]{background:#fff}
  .vids-bg{height:min(620px,100%)}
  .vids-bg img{object-position:58% 94%}
  #list-videos{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin:0 calc(-1 * var(--gut));padding:4px var(--gut) 24px;scroll-padding-inline:var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #list-videos::-webkit-scrollbar{display:none}
  #list-videos>.mcard{flex:0 0 min(80vw,320px);scroll-snap-align:start}
  #list-videos>:not(.mcard){flex:1 0 100%}
  .vcard{-webkit-backdrop-filter:none;backdrop-filter:none}
  .vcard .bd{padding:18px 18px 18px;gap:8px}
  .vcard h3{font-size:18.5px}
  .vcard .bd p{font-size:14.5px}
  .vcard .meta{font-size:13px}
  .vcard .vlink{min-height:44px;align-items:center;border-bottom:0;text-decoration:underline;text-underline-offset:4px}
  .vsoon span{margin-top:52px}
  .js #list-insights .rise,.js #list-videos .rise{transform:translateX(14px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
  .js #list-insights .rise.in,.js #list-videos .rise.in{transform:none}

  /* ---------- resources: compact rows, the action tucked under the text ---------- */
  .res-side{gap:14px}
  .res-side-h{margin-bottom:-4px}
  .res-list{gap:10px}
  .res{grid-template-columns:44px minmax(0,1fr);gap:4px 14px;padding:16px 16px 14px;align-items:start}
  .res .ft{grid-row:1/3}
  .res h3{font-size:16.5px}
  .res-t p{font-size:14px}
  .res-t .res-m{font-size:12.5px;margin-top:6px}
  .res-btn{grid-column:2;justify-self:start;min-height:44px;padding:10px 18px;font-size:14px;margin-top:6px}
  .js .res.rise{transform:translateY(12px);transition:opacity .55s var(--ease),transform .65s var(--ease)}
  .js .res.rise.in{transform:none}

  /* ---------- pagination ---------- */
  .pager{margin-top:24px;padding-top:20px;gap:12px}
  .pager form{width:100%;justify-content:center}

  /* ---------- the reader (inside the shared sheet) ---------- */
  .kh-reader .rd-ph{aspect-ratio:16/10}
  .rd-k{font-size:13px;gap:8px;margin-bottom:8px}
  .rd .lede{font-size:17.5px;line-height:1.5;margin-top:16px}
  .rd-by{gap:12px;margin-top:16px}
  .rd-by .rd-av{width:48px;height:48px}
  .rd-by p{font-size:14.5px;line-height:1.4}
  .rd-pull{margin-top:22px;padding:18px 0}
  .rd-pull p{font-size:20px}
  .rd-body{margin-top:22px;padding-top:22px}
  .prose h2{font-size:24px;line-height:1.2}
  .prose img,.prose table,.prose pre{max-width:100%}
  .prose table{display:block;overflow-x:auto}
  .rd-sub{margin-top:32px;padding:22px 18px;border-radius:16px}
  .rd-sub h3{font-size:22px}
  .rd-step{min-height:44px;padding:8px 0}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .js #articles .mcard.rise,.js #list-insights .rise,.js #list-videos .rise,.js .res.rise{transition:none;transform:none}
}

@media (max-width:760px){
  .tl-nav{flex-direction:column;align-items:stretch;gap:12px;margin-top:14px}
  .tl-who{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:0 20px}
  .tl-who::-webkit-scrollbar{display:none}
  .tl-who button{flex:none;min-height:44px}
  .tl-arrows{display:none}
}