/* Logos are baked into these image files. No logo overlay is added by the site. */
.baked-watermark>img{object-position:right bottom}
.baked-watermark.watermark-left>img{object-position:left bottom}
/* All twelve hero marks fit within the lower 12% of their 1122x1402 source.
   Cover crops can scale from either axis: 15cqw covers 12% of a 1.25:1 height. */
.feed-card:has(.baked-watermark){--photo-footer-space:110px;--watermark-clear-band:max(56px,12cqh,15cqw);--photo-shade-fade:20px;--photo-content-bottom:calc(var(--photo-footer-space) + var(--watermark-clear-band) + var(--photo-shade-fade) + 8px)}
.carousel-slide:has(>.baked-watermark){background:#000}
.carousel-slide>.baked-watermark{bottom:var(--photo-footer-space);opacity:1;filter:none}
.carousel-slide:has(>.baked-watermark)>.slide-shade{bottom:var(--photo-footer-space);-webkit-mask-image:linear-gradient(to bottom,#000 0 calc(100% - var(--watermark-clear-band) - var(--photo-shade-fade)),transparent calc(100% - var(--watermark-clear-band)));mask-image:linear-gradient(to bottom,#000 0 calc(100% - var(--watermark-clear-band) - var(--photo-shade-fade)),transparent calc(100% - var(--watermark-clear-band)))}
.cover-slide:has(>.baked-watermark)>.slide-shade{background:linear-gradient(180deg,#000b 0 64px,#0000 max(26%,88px),#0002 44%,#000a 74%,#000e 100%)}
/* Keep the reading contrast while allowing the actual mark pixels to stay clear. */
.reading-slide:has(>.baked-watermark)>.slide-shade{background:linear-gradient(135deg,#000b 0%,#000c 56%,#000d 100%)}
.feed-card:has(.baked-watermark) :is(.cover-content,.reading-content){bottom:var(--photo-content-bottom)}
.reading-slide:has(>.baked-watermark):before{bottom:calc(var(--photo-footer-space) + var(--watermark-clear-band) + var(--photo-shade-fade))}
.carousel-slide:has(>.baked-watermark)>.card-geometry{display:none}
.feed-card:has(.baked-watermark) .carousel-arrow{top:min(50%,calc(100% - var(--photo-footer-space) - var(--watermark-clear-band) - 52px))}
@media(min-width:700px) and (max-height:520px){.feed-card:has(.baked-watermark){--photo-footer-space:92px}}
@media(max-width:699px){
  .feed-card:has(.baked-watermark){--photo-footer-space:calc(150px + env(safe-area-inset-bottom))}
  .feed-card:has(.baked-watermark)>.card-footer{bottom:calc(68px + env(safe-area-inset-bottom))}
  .feed-card:has(.baked-watermark) .carousel-progress{bottom:calc(124px + env(safe-area-inset-bottom))}
}
/* A short, wide phone has room for all footer controls on one horizontal row. */
@media(min-width:480px) and (max-width:699px) and (max-height:520px){
  .feed-card:has(.baked-watermark){--photo-footer-space:calc(92px + env(safe-area-inset-bottom))}
  .feed-card:has(.baked-watermark)>.card-footer{bottom:calc(12px + env(safe-area-inset-bottom))}
  .feed-card:has(.baked-watermark) .carousel-progress{bottom:calc(62px + env(safe-area-inset-bottom))}
  .feed-navigation{left:50%;right:auto;bottom:calc(var(--feed-card-inset) + 12px + env(safe-area-inset-bottom));height:46px;padding:0;transform:translateX(-50%)}
}
/* Five clear destinations, with labels that fit before scrolling is needed. */
.topbar-browse{height:52px;min-height:52px;gap:18px;background:#000}
.category-bar{width:auto;min-width:0;min-height:0;height:100%;gap:28px;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-padding:8px}
.category-bar::-webkit-scrollbar{display:none}
.category-tab{min-width:0;min-height:44px;height:100%;padding:0 2px;font-size:14px;line-height:1.2;letter-spacing:0;white-space:nowrap;text-overflow:clip;transform:none}
.feed-context{flex:0 0 auto;gap:0;font-size:11px}
.feed-context .post-count{padding-left:16px;line-height:1.4;white-space:nowrap}
@media(max-width:899px){.topbar-tagline{display:none}}
@media(max-width:699px){.topbar-main{gap:10px}.topbar-actions{flex:0 0 auto;gap:0}.topbar-action{min-width:44px;min-height:44px;padding:10px}.topbar-browse{height:44px;min-height:44px;padding:0 12px;gap:0}.category-bar{display:grid;grid-template-columns:repeat(5,minmax(min-content,1fr));width:100%;height:44px;gap:0;justify-content:stretch}.category-tab{height:44px;min-height:44px;padding:0 3px;font-size:clamp(12px,3.4vw,14px);line-height:1.2}.category-tab.active:after{left:8px;right:8px}.feed-context{display:none}}

/* Let the photo reach the bottom edge; reserve the mark's corner for its pixels. */
.feed-card:has(.baked-watermark){--photo-footer-space:0px;--photo-content-bottom:max(150px,calc(var(--watermark-clear-band) + 32px))}
.feed-card:has(.baked-watermark) .carousel-progress{right:max(30%,120px)}
.feed-card:has(.watermark-left) .carousel-progress{left:max(30%,120px);right:24px}
.feed-card:has(.watermark-left) .card-actions{margin-left:auto}
@media(max-width:699px){
  .feed-card:has(.baked-watermark){--photo-footer-space:0px;--photo-content-bottom:max(190px,calc(var(--watermark-clear-band) + 32px))}
  .feed-navigation{left:50%;right:auto;transform:translateX(-50%)}
}
@media(max-height:520px){.feed-card:has(.baked-watermark){--photo-footer-space:0px;--photo-content-bottom:max(100px,calc(var(--watermark-clear-band) + 20px))}}

/* Every photo uses the same soft, clear lower band, with contrast retained
   behind the story copy. Keep image pixels and any baked-in mark visible. */
.feed-card,.feed-card:has(.baked-watermark){--watermark-clear-band:max(72px,12cqh,15cqw);--photo-shade-fade:32px}
@media(max-width:699px) and (min-height:521px){.feed-card,.feed-card:has(.baked-watermark){--watermark-clear-band:max(118px,12cqh,15cqw)}}
.feed-card .carousel-slide>.slide-shade{
  bottom:0;
  -webkit-mask-image:linear-gradient(to bottom,#000 0 calc(100% - var(--watermark-clear-band) - var(--photo-shade-fade)),transparent calc(100% - var(--watermark-clear-band)));
  mask-image:linear-gradient(to bottom,#000 0 calc(100% - var(--watermark-clear-band) - var(--photo-shade-fade)),transparent calc(100% - var(--watermark-clear-band)));
}
.feed-card .cover-slide>.slide-shade{background:linear-gradient(180deg,#000b 0 64px,#0000 max(26%,88px),#0002 44%,#000a 74%,#000e 100%)}
/* A small contrasting outline protects the icons over mixed imagery, including
   images that cannot be sampled because of browser security restrictions. */
.card-actions .action-button .icon{filter:drop-shadow(0 1px 1px #000) drop-shadow(0 -1px 1px #000)}
.card-actions .action-button.action-on-light:not(.is-active){color:#101313}
.card-actions .action-button.action-on-light .icon{filter:drop-shadow(0 1px 1px #fff) drop-shadow(0 -1px 1px #fff)}
.card-actions .action-button.action-on-light:hover{background:#00000018}