/* Rooted U feed. Loaded after site.css, which owns the carousel itself (.post, .car, .sl).
   Below 1024px this is the single phone column, unchanged. From 1024px the posts lay out as
   a magazine wall inside the page's content width: two columns, three from 1280px. The topic
   chip row sticks under the site header on every width; the page sets --hd-h and --unav-h
   from the header's and the chip row's measured heights. */
body{background:var(--bg2)}
.u-hd{background:#fff}
.u-hd .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:14px 0;flex-wrap:wrap}
.u-hd h1{font-size:22px}
.u-hd p{font-size:14px;color:var(--ink3);max-width:72ch}
.u-nav{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--hd-h,0px));z-index:40;background:#fff;border-bottom:1px solid var(--line)}
.topics{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-block:12px}
.topics::-webkit-scrollbar{display:none}
.topics a{flex:none;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:13px;font-weight:600;color:var(--ink2);white-space:nowrap}
.topics a.on{background:var(--ink);color:#fff;border-color:var(--ink)}
@media (max-width:600px){.marquee{display:none}.u-hd .wrap{padding-block:10px 0}.u-hd p{font-size:13px;line-height:1.45;padding-bottom:4px}.topics{padding-block:8px 10px}}

.feed{max-width:520px;margin:0 auto;padding:12px 0 60px;display:flex;flex-direction:column;gap:34px}
.feed .post{padding:0 12px}
.feed .car{border-radius:16px}
@media (max-width:520px){.feed .post{padding:0}.feed .car{border-radius:0}.feed .post-hd,.feed .cap{padding:0 14px}}
.tsep{display:flex;align-items:center;gap:12px;padding:8px 12px 0;color:var(--ink3);font-family:var(--font-m);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.tsep::before,.tsep::after{content:"";flex:1;height:1px;background:var(--line)}
.endnote{text-align:center;color:var(--ink3);font-size:14px;padding:20px}
.feed-more{height:1px}

/* A topic or a post scrolled to by a chip or a deep link lands under the sticky rows, not behind them. */
.feed .tsep,.feed .post{scroll-margin-top:calc(env(safe-area-inset-top,0px) + var(--hd-h,0px) + var(--unav-h,0px) + 12px)}

/* The smallest type on a card. site.css sizes these in container units with no floor, which
   is 8.6px on a phone and smaller in a three column grid. Floors only; nothing else changes. */
.feed .sl .rule span{font-size:max(11px,2.5cqw)}
.feed .sl .sub{font-size:max(12px,2.9cqw)}
.feed .sl .badge{font-size:max(11px,2.2cqw)}
.feed .sl .badge .mark,.feed .sl .foot .mark{width:max(18px,3.6cqw);height:max(18px,3.6cqw)}
.feed .sl.closer .foot{font-size:max(11px,2.6cqw)}

/* Desktop: the grid. Column width follows the content width (1200px .wrap), and the carousel's
   container query scales the card type to it. */
@media (min-width:1024px){
  .feed{max-width:var(--wrap);padding:16px max(16px,env(safe-area-inset-right,0px)) 72px max(16px,env(safe-area-inset-left,0px));display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 28px;align-items:start}
  .feed .post{padding:0}
  .feed .tsep,.feed .endnote,.feed-more{grid-column:1/-1}
  .tsep{padding:14px 0 0;font-size:12px}
  .u-hd h1{font-size:26px}
  .u-hd p{font-size:15px}
}
@media (min-width:1280px){
  .feed{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* The shared footer's email address overflows its 176px column at 1024px and widens the page by
   5px on every page (site.css .ft-cols). Wrapped here so this page measures clean; the fix belongs
   in site.css. */
.ft-cols p{overflow-wrap:anywhere}