/* 17 Great Finds, phone and tablet menu (2026-09-15). Behavior in mobile-menu.js. Opacity, translate and one clip-path only. */
.mm{position:fixed;inset:0;z-index:2147482000;color:#fff;overflow:hidden;-webkit-tap-highlight-color:transparent}
.mm[hidden]{display:none}
@media(min-width:961px){.mm{display:none!important}}
html.mm-open,html.mm-open body{overflow:hidden}

/* the color grows out of the Menu button */
.mm-bg{position:absolute;inset:0;background:linear-gradient(160deg,#2A8FD4 0%,#0E76BC 32%,#0B5C99 70%,#1D3F7A 100%);
  -webkit-clip-path:circle(0px at var(--mx,90%) var(--my,40px));clip-path:circle(0px at var(--mx,90%) var(--my,40px));
  transition:clip-path .62s cubic-bezier(.7,0,.25,1) .08s,-webkit-clip-path .62s cubic-bezier(.7,0,.25,1) .08s}
.mm.is-open .mm-bg{-webkit-clip-path:circle(var(--mr,150vmax) at var(--mx,90%) var(--my,40px));clip-path:circle(var(--mr,150vmax) at var(--mx,90%) var(--my,40px));
  transition:clip-path .7s cubic-bezier(.65,0,.2,1),-webkit-clip-path .7s cubic-bezier(.65,0,.2,1)}
.mm-bg::after{content:'';position:absolute;right:-30%;top:-20%;width:90%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,#ffffff26,#fff0)}

.mm-inner{position:relative;height:100%;max-width:760px;margin:0 auto;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;
  padding:calc(var(--nav-gap,10px) + 6px) 22px calc(26px + env(safe-area-inset-bottom))}

/* everything rises in after the color, one after another, and leaves together before the color closes */
.mm-top,.mm-links a,.mm-live,.mm-actions,.mm-foot{opacity:0;translate:0 22px;transition:opacity .2s ease,translate .25s ease}
.mm.is-open :is(.mm-top,.mm-links a,.mm-live,.mm-actions,.mm-foot){opacity:1;translate:0 0;
  transition:opacity .5s ease calc(.26s + var(--k,0) * 45ms),translate .8s cubic-bezier(.16,1,.3,1) calc(.26s + var(--k,0) * 45ms)}

.mm-top{display:flex;align-items:center;justify-content:space-between;min-height:var(--nav-h,64px);padding:0 2px 0 12px}
.mm-brand{display:flex;align-items:center}
.mm-brand img{display:block;width:auto;height:40px}
.mm-close{position:relative;flex:none;width:50px;height:50px;border-radius:50%;border:1px solid #ffffff5c;background:#ffffff17;cursor:pointer;transition:background-color .3s,transform .5s cubic-bezier(.34,1.4,.64,1)}
.mm-close span{position:absolute;left:50%;top:50%;width:18px;height:2px;margin:-1px 0 0 -9px;border-radius:2px;background:#fff;transform:rotate(0);transition:transform .55s cubic-bezier(.34,1.4,.64,1) .25s}
.mm.is-open .mm-close span:first-child{transform:rotate(45deg)}
.mm.is-open .mm-close span:last-child{transform:rotate(-45deg)}
.mm-close:active{transform:scale(.92);background:#ffffff2e}

.mm-links{display:grid;margin-top:18px}
.mm-links a{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:4px;padding:13px 4px 13px 2px;border-bottom:1px solid #ffffff29;
  font-size:clamp(30px,8.6vw,48px);font-weight:750;letter-spacing:-.04em;line-height:1.05;color:#fff}
.mm-links small{align-self:start;margin-top:.45em;font-size:12px;font-weight:700;letter-spacing:.08em;color:#BFE0F7;font-variant-numeric:tabular-nums}
.mm-links svg{width:24px;height:24px;opacity:.5;transition:transform .5s cubic-bezier(.34,1.4,.64,1),opacity .25s}
.mm-links a:active svg{transform:translate(4px,-4px);opacity:1}
.mm-links a:active span{opacity:.8}
.mm-links a.is-current small{color:#8EE3A8}
.mm-links a.is-current span::after{content:'';display:inline-block;width:9px;height:9px;margin-left:12px;border-radius:50%;background:#8EE3A8;vertical-align:.18em}

.mm-live{display:flex;align-items:center;gap:12px;margin-top:22px;padding:14px 14px 14px 18px;border-radius:22px;background:#ffffff1c;border:1px solid #ffffff38;color:#fff}
.mm-dot{flex:none;width:10px;height:10px;border-radius:50%;background:#8EE3A8;box-shadow:0 0 0 5px #8EE3A833}
.mm-live.is-urgent .mm-dot{background:#FF9466;box-shadow:0 0 0 5px #FF946640}
.mm-live-copy{display:grid;flex:1;min-width:0;gap:2px}
.mm-live small{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#D3E8F7}
.mm-live.is-urgent small{color:#FFD2BF}
.mm-live strong{font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-live b{flex:none;padding:9px 13px;border-radius:99px;background:#fff;color:var(--deep,#262262);font:750 15px/1 var(--font,'DM Sans',sans-serif);font-variant-numeric:tabular-nums}
.mm-live.is-urgent b{background:#FFE9E0;color:#A82C08}
.mm-live:active{background:#ffffff2b}

.mm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.mm-btn{display:flex;align-items:center;justify-content:center;gap:9px;min-height:56px;padding:0 14px;border-radius:99px;border:1px solid #ffffff70;color:#fff;font-size:15px;font-weight:700;text-align:center;transition:transform .4s cubic-bezier(.34,1.4,.64,1),background-color .25s}
.mm-btn.solid{background:#fff;border-color:#fff;color:var(--deep,#262262)}
.mm-btn svg{flex:none;width:16px;height:16px}
.mm-btn:active{transform:scale(.97)}

.mm-foot{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:auto;padding-top:26px;font-size:13.5px;color:#D3E8F7}
.mm-foot a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#ffffff66}

.mm a:focus-visible,.mm button:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:12px}
.mm .mm-close:focus-visible{border-radius:50%}

@media(max-width:400px){.mm-actions{grid-template-columns:1fr}.mm-links a{padding:11px 2px}}
@media(min-width:700px){.mm-inner{padding-left:44px;padding-right:44px}.mm-top{padding-left:0}.mm-links a{padding:16px 4px 16px 2px}}
@media(hover:hover) and (pointer:fine){.mm-links a:hover svg{transform:translate(4px,-4px);opacity:1}.mm-btn:hover{background-color:#ffffff1f}.mm-btn.solid:hover{background:#F2F8FD}}
@media(prefers-reduced-motion:reduce){
  .mm-bg{-webkit-clip-path:none;clip-path:none;opacity:0;transition:opacity .2s}
  .mm.is-open .mm-bg{opacity:1;transition:opacity .2s}
  .mm :is(.mm-top,.mm-links a,.mm-live,.mm-actions,.mm-foot){translate:none!important;transition:opacity .2s!important}
}