/* The approved S + StoriKix lockup lives in the site header. */
.brand-lockup{display:inline-flex;align-items:center;justify-content:flex-start;flex:0 0 auto;width:220px;min-width:0;min-height:44px;gap:0}
.topbar-main>.brand-lockup{flex-shrink:1}
.brand-lockup .brand-logo{display:block;width:100%;min-width:0;max-width:100%;height:auto;aspect-ratio:998/220;object-fit:contain}
.standalone-header .brand-lockup{flex-shrink:0}
.standalone-header .back-to-feed{flex-shrink:0;min-height:44px;display:inline-flex;align-items:center}

/* WordPress's fixed admin bar sits above the sticky public-site header. */
body.admin-bar .feed-topbar{top:32px}
body.admin-bar .skip-link:focus{top:44px}
@media(min-width:601px) and (max-width:782px){body.admin-bar .feed-topbar{top:46px}body.admin-bar .skip-link:focus{top:58px}}
/* On small screens WordPress scrolls its admin bar away with the document. */
@media(max-width:600px){body.admin-bar .feed-topbar{top:0}body.admin-bar .skip-link:focus{top:12px}}

/* The page number takes the old avatar position; topic and kicker sit beside it. */
.feed-card .slide-count{top:22px;left:22px;right:auto;display:flex;align-items:center;justify-content:center;gap:4px;width:50px;height:32px;padding:0;line-height:1;font-size:10px;letter-spacing:0;white-space:nowrap;font-variant-numeric:tabular-nums}
.feed-card .card-author{top:22px;left:84px;right:20px;min-height:32px;gap:0;align-items:center}
.feed-card .author-info{width:100%;min-width:0}
.feed-card .author-info strong{font-size:12px;line-height:1.35}
.feed-card .author-info>span{display:block;font-size:10px;line-height:1.35;margin-top:2px}
.story-stage .feed-card .slide-count{top:22px;left:24px;right:auto}
.story-stage .feed-card .card-author{top:22px;left:86px;right:24px}

@media(max-width:699px){
  .brand-lockup{width:220px}
  .standalone-header .brand-lockup{max-width:180px}
  .topbar-main{gap:10px}
  .topbar-actions{flex:0 0 auto;gap:8px}
  .topbar-action{width:52px;min-width:52px;min-height:44px;padding:10px}
  .topbar-action:before{inset:4px 4px}
}
@media(max-width:360px){
  .topbar-main{padding-left:12px;padding-right:12px}
  .brand-lockup{width:min(150px,calc(100vw - 166px))}
  .feed-card .slide-count{left:16px;width:48px}
  .feed-card .card-author{left:76px;right:16px}
  .feed-card .author-info strong{font-size:11px}
  .feed-card .author-info>span{font-size:9px}
}
@media(max-height:740px){
  .feed-card .slide-count,.feed-card .card-author{top:17px}
  .story-stage .feed-card .slide-count,.story-stage .feed-card .card-author{top:17px}
}
@media(max-height:520px){
  .feed-card .slide-count,.feed-card .card-author{top:12px;min-height:28px;height:28px}
  .story-stage .feed-card .slide-count,.story-stage .feed-card .card-author{top:12px}
  .feed-card .author-info strong{font-size:11px;line-height:1.25}
  .feed-card .author-info>span{font-size:9px;line-height:1.25;margin-top:1px}
}

/* Keep reading status beside the page number, above the story artwork. */
.feed-card>.card-reading-meta{position:absolute;z-index:8;top:16px;right:16px;width:142px;max-width:43%;margin:0}
.feed-card .card-author,.story-stage .feed-card .card-author{right:166px}
@media(max-width:360px){.feed-card>.card-reading-meta{right:10px;width:130px}.feed-card .card-author{right:145px}}
@media(max-height:740px){.feed-card>.card-reading-meta{top:11px}}
@media(max-height:520px){.feed-card>.card-reading-meta{top:6px}}

/* Footer actions share the site's angled surfaces without skewing their labels. */
.feed-end-actions :is(button,a){position:relative;isolation:isolate;border:0;border-radius:0;background:transparent;box-shadow:none;padding-inline:22px}
.feed-end-actions :is(button,a):before{content:'';position:absolute;inset:0 10px;z-index:-1;border:1px solid #ffffff45;background:#080808;transform:skewX(-24deg);transition:background .15s,border-color .15s,filter .15s}
.feed-end-actions .footer-feed-link{background:transparent;color:#000}
.feed-end-actions .footer-feed-link:before{border-color:transparent;background:var(--gradient)}
.feed-end-actions .footer-saved-link{background:transparent;color:var(--ivory)}
.feed-end-actions .footer-feed-link:hover,.feed-end-actions .footer-saved-link:hover{background:transparent}
.feed-end-actions .footer-feed-link:hover:before{filter:brightness(1.12)}
.feed-end-actions .footer-saved-link:hover:before{background:#171717;border-color:var(--teal)}
@media(prefers-reduced-motion:reduce){.feed-end-actions :is(button,a):before{transition:none}}
@media(forced-colors:active){.feed-end-actions :is(button,a):before{border:1px solid ButtonText;background:Canvas}.feed-end-actions .footer-feed-link{color:ButtonText}}