/* =====================================================================
   The ad-slot mockups (partials/advertise-mock.php) — /advertise and
   /advertise/print. A light browser window or phone, the page in pale
   bars, the slot in amber.

   Everything inside scales with the frame: the frame is an inline-size
   container and `--u` is 1% of its width (3.6% in the phone, so a phone
   reads at roughly the same scale beside a desktop window). The slot is
   its own size container, so its label fits whatever the slot's shape —
   and its aspect ratio is the banner's, so 728 × 90 stays wide and thin.
   ===================================================================== */
.mk{--mk-frame:#E6EAF2;--mk-bar:#EEF1F6;--mk-bar2:#E3E8F1;--mk-band:#EAF0FB;--mk-blue:#D3DEF3;
  --mk-ad:#FFF6E5;--mk-ad-line:#EDB04B;--mk-ad-ink:#8F5B05;
  container-type:inline-size;position:relative;margin:0;background:#fff;
  border:1px solid var(--mk-frame);border-radius:12px;overflow:hidden;
  box-shadow:0 8px 24px rgba(15,31,74,.08);min-width:0}
.mk-top,.mk-page{--u:1cqw}
.mk.phone .mk-top,.mk.phone .mk-page{--u:3.6cqw}

/* The window's top bar: three pastel dots and the address. */
.mk-top{display:flex;align-items:center;gap:calc(var(--u)*.9);padding:calc(var(--u)*1.2) calc(var(--u)*1.6);
  background:#F7F9FC;border-bottom:1px solid var(--mk-frame)}
.mk-top > i{flex:none;width:calc(var(--u)*1.1);height:calc(var(--u)*1.1);min-width:5px;min-height:5px;border-radius:50%;background:#F4C3BE}
.mk-top > i:nth-child(2){background:#F6DFA4}
.mk-top > i:nth-child(3){background:#BFE3CB}
.mk-url{flex:1;min-width:0;max-width:62%;margin-inline-start:calc(var(--u)*1.2);padding:.3em 1em;
  background:#fff;border:1px solid var(--mk-frame);border-radius:999px;color:#64748B;
  font:600 max(7px,calc(var(--u)*1.35))/1.2 Manrope,system-ui,sans-serif;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk.phone .mk-url{max-width:none;margin:0;text-align:center}

/* The page. */
.mk-page{display:flex;flex-direction:column;gap:calc(var(--u)*1.5);padding:calc(var(--u)*1.8)}
.mk-l{display:block;flex:none;height:calc(var(--u)*1);border-radius:999px;background:var(--mk-bar)}
.mk-l.t{height:calc(var(--u)*1.5);background:var(--mk-bar2)}
.mk-l.k{height:calc(var(--u)*.8);background:var(--mk-blue)}
.mk-sp{flex:1}
.mk-nav{display:flex;align-items:center;gap:calc(var(--u)*1.3)}
.mk-nav .mk-l{width:calc(var(--u)*5)!important}
.mk-logo{flex:none;width:calc(var(--u)*7);height:calc(var(--u)*2.2);border-radius:calc(var(--u)*.5);background:var(--mk-blue)}
.mk-logo.big{width:calc(var(--u)*5.5);height:calc(var(--u)*5.5);border-radius:calc(var(--u)*1.2);background:#fff;border:1px solid var(--mk-frame)}
.mk-btn{flex:none;margin-inline-start:auto;width:calc(var(--u)*5.5);height:calc(var(--u)*2.2);border-radius:999px;background:var(--mk-blue)}
.mk-dot{flex:none;width:calc(var(--u)*2.4);height:calc(var(--u)*2.4);border-radius:50%;background:var(--mk-bar2)}

.mk-band{display:flex;flex-direction:column;gap:calc(var(--u)*.9);padding:calc(var(--u)*2) calc(var(--u)*2.2);
  background:var(--mk-band);border-radius:calc(var(--u)*1.2)}
.mk-band.tall{padding-block:calc(var(--u)*3)}
.mk-band.thin{padding-block:calc(var(--u)*1.4)}
.mk-search{display:flex;gap:calc(var(--u)*.7);margin-top:calc(var(--u)*.5)}
.mk-search i{flex:1;height:calc(var(--u)*3);border-radius:calc(var(--u)*.7);background:#fff}
.mk-search i.go{flex:0 0 calc(var(--u)*7);background:var(--mk-blue)}
.mk-search.col{flex-direction:column}
.mk-search.col i,.mk-search.col i.go{flex:none}

.mk-card{display:flex;flex-direction:column;gap:calc(var(--u)*.8);padding:calc(var(--u)*1.3);
  background:#fff;border:1px solid var(--mk-bar);border-radius:calc(var(--u)*1)}
.mk-cols{display:grid;grid-template-columns:minmax(0,1fr) 30%;gap:calc(var(--u)*1.6);align-items:start}
.mk-main,.mk-side{display:flex;flex-direction:column;gap:calc(var(--u)*1.3);min-width:0}
.mk-row{display:flex;align-items:center;gap:calc(var(--u)*1)}
.mk-stack{flex:1;display:flex;flex-direction:column;gap:calc(var(--u)*.8)}
.mk-center{display:flex;justify-content:center}
.mk-center .mk-adwrap{width:56%}
.mk-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--u)*1.1)}
.mk-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--u)*1.1)}
.mk-ico{flex:none;width:calc(var(--u)*3);height:calc(var(--u)*3);border-radius:calc(var(--u)*.7);background:var(--mk-bar2)}
.mk-ico.sm{width:calc(var(--u)*2.2);height:calc(var(--u)*2.2)}
.mk-chart{height:calc(var(--u)*6);border-radius:calc(var(--u)*.8);
  background:linear-gradient(180deg,#F4F7FD,#EEF3FC)}
.mk-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--u)*.7)}
.mk-facts i{height:calc(var(--u)*3.2);border-radius:calc(var(--u)*.7);background:#F5F7FB}
.mk-pills{display:flex;flex-wrap:wrap;gap:calc(var(--u)*.6)}
.mk-pills i{width:calc(var(--u)*6.5);height:calc(var(--u)*1.9);border-radius:999px;background:var(--mk-band)}
.mk-item{display:flex;flex-direction:column;gap:calc(var(--u)*.6);padding-bottom:calc(var(--u)*1);border-bottom:1px solid #F2F4F8}
.mk-item:last-child{border-bottom:0;padding-bottom:0}
.mk-gap{height:calc(var(--u)*.6)}
.mk-foot{display:flex;flex-direction:column;gap:calc(var(--u)*.8);padding:calc(var(--u)*2);
  background:var(--mk-band);border-radius:calc(var(--u)*1)}

/* ── The slot ── */
.mk-adwrap{position:relative;margin-top:calc(var(--u)*2.6);min-width:0}
.mk-badge{position:absolute;z-index:var(--z-deco);top:calc(var(--u)*-.5);left:0;transform:translateY(-100%);
  padding:.2em .75em;border-radius:999px;background:#fff;border:1px solid var(--mk-ad-line);color:var(--mk-ad-ink);
  font:700 max(7px,calc(var(--u)*1.3))/1.2 Manrope,system-ui,sans-serif;white-space:nowrap;
  max-width:calc(100% - var(--u)*2.4);overflow:hidden;text-overflow:ellipsis}
.mk-slot{container-type:size;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2cqh;
  background:var(--mk-ad);border:2px dashed var(--mk-ad-line);border-radius:calc(var(--u)*.8);
  color:var(--mk-ad-ink);text-align:center;font-family:Manrope,system-ui,sans-serif}
.mk-slot b{font-size:min(15cqw,26cqh);font-weight:800;line-height:1.05;letter-spacing:-.01em;white-space:nowrap}
.mk-slot small{font-size:min(6.5cqw,11cqh);font-weight:700;opacity:.85;white-space:nowrap}
.mk-adwrap.wide .mk-slot{flex-direction:row;gap:3cqw}
.mk-adwrap.wide .mk-slot b{font-size:min(6cqw,46cqh)}
.mk-adwrap.wide .mk-slot small{font-size:min(3cqw,24cqh)}

/* A gentle pulse, on hover only, and never for somebody who asked for
   less motion. Screen only: the print layout loads this sheet too. */
@media screen and (prefers-reduced-motion:no-preference){
  @keyframes mk-pulse{0%,100%{box-shadow:0 0 0 0 rgba(237,176,75,.45)}50%{box-shadow:0 0 0 7px rgba(237,176,75,0)}}
  .adv-slot:hover .mk-slot,.adv-slot:focus-within .mk-slot{animation:mk-pulse 1.8s ease-in-out infinite}
}