/* r72.7.5d magfeed (test build). See js/magfeed.js. */
/* A) header gap: the chips bar sticks at the measured bottom of the top bar and is fully opaque (no see-through blur) */
html.hgap #chipsX,html.hgap #chips{top:calc(var(--hdr-b0,66px) + var(--vbar-h,0px) * var(--hdr-k,1))!important;background:var(--bg,#0b0b0c)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;z-index:20}
html.hgap #chipsX::before,html.hgap #chips::before{content:"";position:absolute;z-index:-1;top:-4px;bottom:0;left:calc(-1 * var(--hg-sx,0px));right:calc(-1 * var(--hg-sx,0px));background:var(--bg,#0b0b0c);pointer-events:none}
html.hgap .mx-explore{--hg-sx:clamp(12px,2.4vw,32px)}

/* B) magazine feed */
#gridX.mag{columns:auto;display:block;margin-top:10px}
#gridX.mag:not(.df),#gridX.mag .df-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 10px;grid-auto-flow:row;columns:auto;margin-top:0}
#gridX.mag .df-g+.df-g{margin-top:26px}
#gridX.mag .df-h{top:calc(var(--hdr-b0,66px) + var(--vbar-h,0px) * var(--hdr-k,1) + var(--chips-h,64px) - 1px);z-index:15;margin:0 0 10px;padding:12px 0 10px;min-height:0;
  font:600 11px/1.2 Inter,system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#d9b26f;
  background:var(--bg,#0b0b0c);-webkit-backdrop-filter:none;backdrop-filter:none}
#gridX.mag .df-h::before{content:"";position:absolute;z-index:-1;top:-3px;bottom:0;left:calc(-1 * var(--hg-sx,0px));right:calc(-1 * var(--hg-sx,0px));background:var(--bg,#0b0b0c);pointer-events:none}
#gridX.mag .df-h .df-s{font:500 11px/1.2 Inter,system-ui,sans-serif;letter-spacing:.12em;color:var(--muted)}
#gridX.mag .df-h .df-n{display:none}
.mg-c{display:flex;flex-direction:column;min-width:0;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.mg-art{position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:#141416;isolation:isolate;contain:paint}
/* the soft backdrop is the card's own small cover from --bd; memguard removes --bd (and the layer) when the card is 3+ screens away */
.mg-art::before{content:"";position:absolute;inset:-14%;background:var(--bd,none) center/cover no-repeat;filter:blur(22px) saturate(1.15) brightness(.5)}
.mg-art[data-mgbd]::before{display:none}
.mg-art picture{display:contents}
.mg-art img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:contain!important;object-position:50% 50%!important;z-index:1;border-radius:0}
.mg-f{grid-column:1/-1}
.mg-f .mg-art{aspect-ratio:16/9;border-radius:12px}
.mg-b{display:flex;align-items:flex-start;gap:2px;padding-top:8px;min-width:0}
.mg-tx{flex:1;min-width:0}
.mg-tags{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;margin:0 0 5px;min-height:0}
.mg-tags .pill{font-size:11px;padding:3.5px 6px;letter-spacing:.07em;background:transparent;border:1px solid color-mix(in srgb,currentColor 35%,transparent);color:var(--muted)}
.mg-tags .pill.reme{color:#e8c98c;border-color:color-mix(in srgb,#d9b26f 55%,transparent)}
.mg-tags .pill.new{color:#9fded4}.mg-tags .pill.hot{color:#f39a88}
.mg-tags .pill .pn-l{display:none}.mg-tags .pill .pn-s{display:inline}
.mg-tags .mg-l{font:600 11px/1 Inter,system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.mg-tags .kid-mark{position:static;font-size:12px}
.mg-c h3{margin:0 0 3px;font:600 15px/1.25 var(--f-body);letter-spacing:-.005em;color:var(--fg);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.mg-c .meta{margin:0;font:400 12.5px/1.35 var(--f-body);color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mg-c .meta .dist{color:var(--fg)}
/* the heart sits beside the text, off the art, so it shows quietly on every card (the site-wide quiet hearts hide it until long-press) */
html #gridX.mag a.mg-c .save{position:relative;flex:none;width:44px;height:44px;margin:-6px -10px 0 0;padding:0;border:0;border-radius:50%;display:grid;place-items:center;
  background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none;color:var(--muted);opacity:1!important;pointer-events:auto!important}
html #gridX.mag a.mg-c .save svg{width:18px;height:18px;filter:none}
html #gridX.mag a.mg-c .save::before{display:none}
html #gridX.mag a.mg-c .save.on{color:var(--hot,#e8553d);background:transparent!important;border:0}
.mg-f .mg-b{padding-top:10px}
.mg-f h3{font:700 19px/1.2 var(--f-display);letter-spacing:-.015em;-webkit-line-clamp:2}
.mg-f .meta{font-size:13.5px}
.mg-c .vc-tag{display:none}
.mg-c:focus-visible{outline:2px solid var(--reme,#d9b26f);outline-offset:3px;border-radius:12px}
@media (hover:hover){.mg-c:hover h3{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}}
/* r72.7.5c: rails are deduped before they render (home.js magRail), nothing is hidden after paint */
/* the last card of a day group spans to the end of its row at the width where the row would have empty cells (mg-e<cols>-<span>) */
@media (max-width:760px){.mg-art::before{inset:-8%;filter:blur(10px) saturate(1.1) brightness(.5)}
  .mg-e2-2{grid-column:1/-1}.mg-e2-2 .mg-art{aspect-ratio:16/9;border-radius:12px}.mg-e2-2 h3{font:700 19px/1.2 var(--f-display);letter-spacing:-.015em;-webkit-line-clamp:2}.mg-e2-2 .meta{font-size:13.5px}}
@media (min-width:761px) and (max-width:1179px){#gridX.mag .mg-e3-2{grid-column:span 2}#gridX.mag .mg-e3-3{grid-column:span 3}
  .mg-e3-2 .mg-art,.mg-e3-3 .mg-art{aspect-ratio:16/9;border-radius:12px}.mg-e3-3 .mg-art{aspect-ratio:21/9}
  .mg-e3-2 h3,.mg-e3-3 h3{font:700 19px/1.2 var(--f-display);-webkit-line-clamp:2}}
@media (min-width:1180px){#gridX.mag .mg-e4-2{grid-column:span 2}#gridX.mag .mg-e4-3{grid-column:span 3}#gridX.mag .mg-e4-4{grid-column:span 4}
  .mg-e4-2 .mg-art,.mg-e4-3 .mg-art,.mg-e4-4 .mg-art{aspect-ratio:16/9;border-radius:12px}.mg-e4-3 .mg-art{aspect-ratio:2/1}.mg-e4-4 .mg-art{aspect-ratio:21/9}
  .mg-e4-2 h3,.mg-e4-3 h3,.mg-e4-4 h3{font:700 19px/1.2 var(--f-display);-webkit-line-clamp:2}}
/* r72.7.5c: the stars fade out while the feed is in view (home.js magStars), so none shows through in WebKit */
html.magfeed .sky-stars{transition:opacity .4s ease}html.magfeed.mg-inv .sky-stars{opacity:0!important}
@media (prefers-reduced-motion:reduce){html.magfeed .sky-stars{transition:none}}
/* the night sky stars (magic.js .sky-stars) showed through the feed gaps as specks next to cards and hearts: the feed sits on solid page colour */
html.magfeed #explore{position:relative;z-index:0}
html.magfeed #explore::before{content:"";position:absolute;z-index:-1;inset:0;background:var(--bg,#0b0b0c);box-shadow:0 0 0 100vmax var(--bg,#0b0b0c);clip-path:inset(0 -100vmax);pointer-events:none}
@media (max-width:359px){#gridX.mag:not(.df),#gridX.mag .df-grid{gap:18px 8px}.mg-c h3{font-size:14px}.mg-c .meta{font-size:12px}}
@media (min-width:761px){#gridX.mag:not(.df),#gridX.mag .df-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 18px}.mg-f{grid-column:span 2}
  .mg-c h3{font-size:16px}#gridX.mag .df-h{font-size:12px;padding:16px 0 12px}}
@media (min-width:1180px){#gridX.mag:not(.df),#gridX.mag .df-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){#gridX.mag .mg-c,#gridX.mag .rv{transition:none!important;animation:none!important}.mg-c .save.on svg{animation:none}}
/* r72.7.5d (Hater 5c Sev3) at 4 columns: 2+2 splits (mg-p4-2 + mg-e4-2, home.js magTidy4); a card spanning 3 or 4 columns keeps its art
   at a 2 column 16:9 size (340px tall at most) with the words beside it, so no wide art with big side bars */
@media (min-width:1180px){#gridX.mag .mg-p4-2{grid-column:span 2}.mg-p4-2 .mg-art{aspect-ratio:16/9;border-radius:12px}
  .mg-p4-2 h3{font:700 19px/1.2 var(--f-display);-webkit-line-clamp:2}
  #gridX.mag .mg-e4-3,#gridX.mag .mg-e4-4{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:18px;align-items:center}
  #gridX.mag .mg-e4-3{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
  .mg-e4-3 .mg-art,.mg-e4-4 .mg-art{aspect-ratio:16/9;max-height:340px}.mg-e4-3 .mg-b,.mg-e4-4 .mg-b{padding-top:0}}
@media (min-width:761px) and (max-width:1179px){#gridX.mag .mg-e3-3{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);column-gap:18px;align-items:center}
  .mg-e3-3 .mg-art{aspect-ratio:16/9;max-height:340px}.mg-e3-3 .mg-b{padding-top:0}}
/* r72.7.5d (Hater 5c Sev4): Photo credits (boatwall footer) is a 44px tap target, same box height as before */
.bw-cred summary{min-height:44px;padding:0 12px 0 0;margin:-6px 0}
/* the brunch row cards sit on a solid fill, so nothing behind shows through */
#brRow .hh-card,.br-row .hh-card{background:#131315}
/* r72.7.5d: home footer links (Photo credits, Neighborhoods, guides) are each a 44px tall row, no overlapping hit areas */
footer .foot-links{gap:0}footer .foot-links>a{min-height:44px;display:flex;align-items:center;justify-content:flex-end}
@media (max-width:760px){footer .foot-links>a{justify-content:flex-start}}