/* D'leaps r100 - the magazine (/blog)
 * 1. Hero: the five most recent stories, one feature + four tiles (Gridlove-style)
 * 2. Topics as Instagram highlights (gradient ring = a story in the last 3 weeks)
 * 3. The feed as Pinterest cards, with CTA cards and Amazon ad cards between stories
 * 4. Admin "Amazon Ads" tab
 * Markup: DMag / DMAds in main.*.js (tools/mag-r100.js, tools/patch-r100.py).
 */
.dm{--m-ink:#13223A;--m-ink2:#4a5568;--m-mut:#6b7684;--m-tq:#4DD9E8;--m-tqd:#0d8797;--m-mg:#E8407F;--m-bg:#EEF2F6;--m-r:22px}

/* ---- page head --------------------------------------------------------- */
.dm-head{max-width:760px;margin-bottom:clamp(22px,3vw,36px)}
.dm-k{margin:0 0 10px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--m-tqd)}
.dm-h1{margin:0;font-family:"Poiret One",Lato,sans-serif!important;font-weight:400!important;font-size:clamp(34px,1.6rem + 2.6vw,58px)!important;line-height:1.04;color:var(--m-ink);-webkit-text-stroke:.4px var(--m-ink)}
.dm-sub{margin:12px 0 0;font-size:clamp(15px,1.1vw,17px);line-height:1.6;color:var(--m-ink2);max-width:600px}

/* ---- 1. hero ----------------------------------------------------------- */
.dm-hero{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.dm-feat,.dm-tile{position:relative;display:block;overflow:hidden;border-radius:var(--m-r);background:#1d2a33;color:#fff;text-decoration:none;isolation:isolate;
  box-shadow:0 2px 4px rgba(19,34,58,.08),0 30px 60px -36px rgba(13,135,151,.6)}
.dm-feat img,.dm-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.dm-feat:hover img,.dm-tile:hover img{transform:scale(1.05)}
.dm-feat:focus-visible,.dm-tile:focus-visible,.dm-pin:focus-visible,.dm-hi:focus-visible{outline:3px solid var(--m-tq);outline-offset:3px}
.dm-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,12,18,.86) 0,rgba(6,12,18,.5) 34%,rgba(6,12,18,.08) 64%,rgba(6,12,18,.18))}
.dm-feat{min-height:460px}
.dm-feat-body,.dm-tile-body{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.dm-feat-body{padding:clamp(22px,3vw,38px)}
.dm-tile-body{padding:16px 18px 18px;gap:8px}
.dm-chip{display:inline-block;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;background:var(--m-tq);color:var(--m-ink);line-height:1.2}
.dm-feat-t{margin:0;font-family:"Poiret One",Lato,sans-serif!important;font-weight:400!important;font-size:clamp(28px,1.2rem + 2.2vw,48px)!important;line-height:1.06;
  color:#fff;-webkit-text-stroke:.45px #fff;text-shadow:0 2px 24px rgba(0,0,0,.4);max-width:820px}
.dm-feat-x{font-size:15px;line-height:1.55;color:rgba(255,255,255,.86);max-width:620px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dm-tile-t{margin:0;font-family:"Poiret One",Lato,sans-serif!important;font-weight:400!important;font-size:clamp(19px,1.35vw,23px)!important;line-height:1.16;color:#fff;
  -webkit-text-stroke:.35px #fff;text-shadow:0 1px 14px rgba(0,0,0,.45);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dm-meta{display:flex;align-items:center;gap:12px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.78)}
.dm-read{font-family:Lato,sans-serif;font-size:13px;letter-spacing:0;font-weight:700;color:var(--m-tq)}
.dm-read::after{content:" \2192";display:inline-block;transition:transform .3s}
a:hover .dm-read::after{transform:translateX(3px)}
/* phones: feature, then the four tiles as a swipe row */
.dm-side{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -16px;padding:2px 16px 6px}
.dm-side::-webkit-scrollbar{display:none}
.dm-side .dm-tile{flex:0 0 74%;height:280px;scroll-snap-align:start}
@media (min-width:640px){.dm-side .dm-tile{flex-basis:46%}}
@media (min-width:768px){
  .dm-side{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:260px 260px;gap:16px;overflow:visible;margin:0;padding:0}
  .dm-side .dm-tile{height:auto}
}
@media (min-width:1024px){
  .dm-hero{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);height:clamp(520px,42vw,640px)}
  .dm-feat{min-height:0}
  .dm-side{grid-template-rows:1fr 1fr}
}
@media (max-width:767px){.dm-feat{min-height:0;aspect-ratio:4/5;max-height:560px}}

/* skeleton */
.dm-sk{display:block;border-radius:var(--m-r);background:linear-gradient(100deg,#e3eaee 30%,#f1f5f7 50%,#e3eaee 70%) 0 0/300% 100%;animation:dm-sh 1.4s linear infinite;box-shadow:none}
.dm-hero--skel .dm-feat{min-height:460px}.dm-hero--skel .dm-tile{min-height:220px}
@keyframes dm-sh{to{background-position:-100% 0}}

/* ---- 2. highlights ----------------------------------------------------- */
.dm-his{display:flex;gap:clamp(14px,2.4vw,30px);overflow-x:auto;scrollbar-width:none;margin:clamp(28px,4vw,48px) -16px 0;padding:6px 16px 10px;scroll-snap-type:x proximity}
.dm-his::-webkit-scrollbar{display:none}
@media (min-width:1024px){.dm-his{margin-left:0;margin-right:0;padding-left:0;padding-right:0}}
.dm-hi{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;width:clamp(82px,9vw,104px);padding:0;border:0;background:none;cursor:pointer;scroll-snap-align:start;color:var(--m-ink);font:inherit}
.dm-hi-ring{display:block;width:100%;aspect-ratio:1/1;border-radius:50%;padding:3px;background:#cfdbe0;transition:transform .35s cubic-bezier(.175,.885,.32,1.4),background .3s}
.dm-hi.is-new .dm-hi-ring{background:conic-gradient(from 210deg,var(--m-tq),#7fe3c9,var(--m-mg),#f7a8c5,var(--m-tq))}
.dm-hi-in{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;border:3px solid var(--m-bg);background:#fff}
.dm-hi-in img{width:100%;height:100%;object-fit:cover;display:block}
.dm-hi-in img.dm-hi-logo{object-fit:contain;padding:22%}
.dm-hi-l{font-size:12.5px;font-weight:700;line-height:1.25;text-align:center}
.dm-hi-n{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.06em;color:var(--m-mut);margin-top:-3px}
.dm-hi:hover .dm-hi-ring{transform:scale(1.05)}
.dm-hi.is-on .dm-hi-ring{padding:4px;background:linear-gradient(135deg,var(--m-tqd),var(--m-tq));transform:scale(1.06)}
.dm-hi.is-on .dm-hi-l{color:var(--m-tqd)}

/* ---- 3. feed ----------------------------------------------------------- */
.dm-feed{margin-top:clamp(28px,4vw,48px);scroll-margin-top:110px}
.dm-feed-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin-bottom:clamp(16px,2vw,24px)}
.dm-h2{margin:0;font-family:"Poiret One",Lato,sans-serif!important;font-weight:400!important;font-size:clamp(28px,1.3rem + 1.4vw,40px)!important;line-height:1.1;color:var(--m-ink);-webkit-text-stroke:.35px var(--m-ink)}
.dm-count{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--m-mut)}
.dm-clear{margin-left:auto;border:0;background:none;padding:6px 0;font:inherit;font-size:13px;font-weight:700;color:var(--m-tqd);cursor:pointer}
.dm-empty{padding:40px 0;color:var(--m-mut);text-align:center}
.dm-grid{columns:1;column-gap:18px}
@media (min-width:560px){.dm-grid{columns:2}}
@media (min-width:900px){.dm-grid{columns:3}}
@media (min-width:1280px){.dm-grid{columns:4}}
.dm-pin{position:relative;display:flex;flex-direction:column;margin:0 0 18px;break-inside:avoid;-webkit-column-break-inside:avoid;border-radius:var(--m-r);overflow:hidden;
  background:#fff;color:var(--m-ink);text-decoration:none;isolation:isolate;box-shadow:0 1px 2px rgba(19,34,58,.06),0 22px 44px -32px rgba(13,135,151,.6);
  transition:transform .5s cubic-bezier(.175,.885,.32,1.4),box-shadow .4s}
.dm-pin:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(19,34,58,.06),0 30px 54px -30px rgba(13,135,151,.7)}
.dm-pin-ph{display:block;overflow:hidden;background:#e3ebee}
.dm-pin-ph img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.dm-pin:hover .dm-pin-ph img{transform:scale(1.04)}
/* Pinterest rhythm */
.dm-grid>:nth-child(6n+2) .dm-pin-ph img{aspect-ratio:1/1}
.dm-grid>:nth-child(6n+3) .dm-pin-ph img{aspect-ratio:3/4}
.dm-grid>:nth-child(6n+4) .dm-pin-ph img{aspect-ratio:4/3}
.dm-grid>:nth-child(6n+5) .dm-pin-ph img{aspect-ratio:2/3}
.dm-grid>:nth-child(6n) .dm-pin-ph img{aspect-ratio:5/4}
.dm-pin-body{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:16px 20px 18px}
.dm-pin .dm-chip{background:rgba(77,217,232,.18);color:#0b5f6b}
.dm-pin-t{margin:0;font-family:"Poiret One",Lato,sans-serif!important;font-weight:400!important;font-size:clamp(20px,1.4vw,23px)!important;line-height:1.18;color:var(--m-ink);-webkit-text-stroke:.35px var(--m-ink)}
.dm-pin-x{font-size:13.5px;line-height:1.55;color:var(--m-ink2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dm-pin .dm-meta{width:100%;justify-content:space-between;color:var(--m-mut);margin-top:2px}
.dm-pin .dm-read{color:var(--m-tqd)}

/* CTA cards */
.dm-cta{padding:26px 24px 24px;gap:10px}
.dm-cta-k{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.8}
.dm-cta-t{font-family:"Poiret One",Lato,sans-serif;font-size:clamp(25px,1.8vw,30px);line-height:1.12;-webkit-text-stroke:.4px currentColor}
.dm-cta-s{font-size:14px;line-height:1.55;opacity:.88}
.dm-cta-b{align-self:flex-start;margin-top:8px;padding:12px 18px;border-radius:999px;font-size:13.5px;font-weight:700;transition:transform .3s}
.dm-cta-b::after{content:" \2192"}
.dm-cta:hover .dm-cta-b{transform:translateY(-2px)}
.dm-cta--tq{background:radial-gradient(120% 90% at 100% 0%,rgba(232,64,127,.2),rgba(232,64,127,0) 55%),linear-gradient(160deg,#c4f4f9,#4DD9E8);color:var(--m-ink)}
.dm-cta--tq .dm-cta-b{background:#fff;color:var(--m-ink);box-shadow:0 10px 22px -12px rgba(13,135,151,.9)}
.dm-cta--ink{background:radial-gradient(120% 80% at 0% 100%,rgba(77,217,232,.28),rgba(77,217,232,0) 60%),#13223A;color:#fff}
.dm-cta--ink .dm-cta-b{background:var(--m-tq);color:var(--m-ink)}
.dm-cta--mg{background:linear-gradient(160deg,#ffe3ee,#f7a8c5 70%,#ef7fa9);color:#3b0d22}
.dm-cta--mg .dm-cta-b{background:#fff;color:#8f1d4d}
.dm-cta--wa{background:#fff;color:var(--m-ink);box-shadow:inset 0 0 0 1.5px rgba(37,211,102,.45),0 22px 44px -32px rgba(13,135,151,.6)}
.dm-cta--wa .dm-cta-b{background:#1d9d55;color:#fff}

/* Amazon ad cards */
.dm-ad{background:#fff;box-shadow:inset 0 0 0 1px rgba(19,34,58,.08),0 22px 44px -32px rgba(13,135,151,.5)}
.dm-ad-k{display:flex;align-items:center;gap:7px;padding:12px 16px 0;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--m-mut)}
.dm-ad-k i{width:7px;height:7px;border-radius:50%;background:#ff9900;display:block}
.dm-ad-ph{display:block;margin:10px 14px 0;border-radius:16px;background:#f5f7f8;overflow:hidden}
.dm-ad-ph img{display:block;width:100%;aspect-ratio:1/1;object-fit:contain;padding:14px;mix-blend-mode:multiply;transition:transform .8s}
.dm-ad:hover .dm-ad-ph img{transform:scale(1.04)}
.dm-ad-body{display:flex;flex-direction:column;gap:7px;padding:14px 18px 18px}
.dm-ad-t{font-size:15px;font-weight:700;line-height:1.35;color:var(--m-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dm-ad-x{font-size:13px;line-height:1.5;color:var(--m-ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dm-ad-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px}
.dm-ad-p{font-size:16px;color:var(--m-ink)}
.dm-ad-b{padding:9px 14px;border-radius:999px;background:var(--m-ink);color:#fff;font-size:12.5px;font-weight:700;white-space:nowrap}
.dm-disc{margin:10px 0 0;text-align:center;font-size:12px;color:var(--m-mut)}

/* entrance */
@media (prefers-reduced-motion:no-preference){
  .dm-grid>.dm-pin{animation:dm-in .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(min(var(--i,0),10) * 50ms)}
  .dm-hero>*{animation:dm-in .8s cubic-bezier(.2,.7,.2,1) both}.dm-side>*:nth-child(2){animation-delay:.06s}.dm-side>*:nth-child(3){animation-delay:.12s}.dm-side>*:nth-child(4){animation-delay:.18s}
  @keyframes dm-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){.dm *{transition:none!important}.dm-pin:hover,.dm-pin:hover img,.dm-feat:hover img,.dm-tile:hover img{transform:none!important}}

/* ---- 4. admin tab ------------------------------------------------------ */
.dma{padding:8px 0 40px;color:#13223A}
.dma-intro h2{margin:0;font-size:22px;font-weight:700}
.dma-intro p{margin:6px 0 0;max-width:760px;font-size:14px;line-height:1.55;color:#4a5568}
.dma-cols{display:grid;gap:24px;margin-top:20px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.dma-cols{grid-template-columns:minmax(0,1.4fr) minmax(260px,320px)}}
.dma-form{background:#fff;border:1px solid hsl(var(--line,200 20% 90%));border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:12px}
.dma-form h3,.dma-h{margin:0;font-size:16px;font-weight:700}
.dma-h{margin-top:28px}
.dma-f{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:700;color:#4a5568}
.dma-f input,.dma-f select{font:inherit;font-weight:400;font-size:14px;color:#13223A;padding:10px 12px;border:1px solid #d5dde2;border-radius:10px;background:#fff;min-width:0}
.dma-f input:focus,.dma-f select:focus{outline:2px solid #4DD9E8;outline-offset:1px}
.dma-img{display:flex;flex-direction:column;gap:6px}
.dma-img input[type=file]{padding:8px;font-size:13px}
.dma-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dma-chk{display:flex;align-items:center;gap:8px;font-size:14px}
.dma-act{display:flex;gap:10px;flex-wrap:wrap}
.dma-prev{display:flex;flex-direction:column;gap:8px}
.dma-lbl{font-size:12px;font-weight:700;color:#6b7684;text-transform:uppercase;letter-spacing:.08em}
.dma-prev .dm-pin{margin:0}
.dma-muted{color:#6b7684;font-size:14px}
.dma-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.dma-list li{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #e1e8ec;border-radius:14px;padding:10px 12px}
.dma-list li.is-off{opacity:.6}
.dma-list img{width:52px;height:52px;object-fit:contain;border-radius:10px;background:#f5f7f8;flex:none}
.dma-li-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dma-li-t b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dma-li-t small{font-size:12px;color:#6b7684}
.dma-li-a{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.dma-li-a button{font:inherit;font-size:12.5px;font-weight:700;padding:7px 10px;border-radius:9px;border:1px solid #d5dde2;background:#fff;color:#13223A;cursor:pointer}
.dma-li-a button:disabled{opacity:.4;cursor:default}
.dma-li-a .dma-del{color:#b4234f;border-color:#f1c2d2}
@media (max-width:560px){.dma-list li{flex-wrap:wrap}.dma-li-a{width:100%;justify-content:flex-start}}

/* ---- phones: Pinterest is two columns, and swipe rows keep their edge ---- */
.dm-side,.dm-his{scroll-padding-inline:16px}
@media (max-width:559px){
  .dm-grid{columns:2;column-gap:10px}
  .dm-pin{margin-bottom:10px;border-radius:16px}
  .dm-pin-body{padding:11px 12px 13px;gap:6px}
  .dm-pin .dm-chip{font-size:9px;padding:4px 7px;letter-spacing:.06em}
  .dm-pin-t{font-size:16.5px!important;line-height:1.2}
  .dm-pin-x{display:none}
  .dm-pin .dm-meta{font-size:10px;gap:6px}
  .dm-pin .dm-read{font-size:12px}
  .dm-cta{padding:16px 14px;gap:7px}
  .dm-cta-t{font-size:20px}
  .dm-cta-s{font-size:12.5px}
  .dm-cta-b{padding:9px 12px;font-size:12px}
  .dm-ad-k{padding:10px 12px 0;font-size:8.5px;letter-spacing:.06em}
  .dm-ad-ph{margin:8px 10px 0;border-radius:12px}
  .dm-ad-body{padding:10px 12px 13px}
  .dm-ad-t{font-size:13.5px}
  .dm-ad-x{display:none}
  .dm-ad-row{flex-wrap:wrap;gap:6px}
  .dm-ad-b{padding:8px 11px;font-size:11.5px}
}

/* ---- r101: hero slider (replaces the feature + tiles hero) ------------- */
.dms{position:relative;overflow:hidden;border-radius:26px;background:#1d2a33;isolation:isolate;touch-action:pan-y;-webkit-user-select:none;user-select:none;
  aspect-ratio:21/9;min-height:440px;max-height:660px;box-shadow:0 2px 4px rgba(19,34,58,.08),0 34px 70px -40px rgba(13,135,151,.7)}
@media (max-width:1023px){.dms{aspect-ratio:16/10;min-height:380px}}
@media (max-width:639px){.dms{aspect-ratio:4/5;min-height:0;max-height:76vh;border-radius:22px}}
.dms-track{position:absolute;inset:0}
.dms-slide{position:absolute;inset:0;display:block;color:#fff;text-decoration:none;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s linear .9s}
.dms-slide.is-on{opacity:1;visibility:visible;z-index:1;transition:opacity .9s ease}
.dms-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.dms-slide:focus-visible{outline:3px solid #4DD9E8;outline-offset:-6px;border-radius:26px}
.dms .dm-scrim{background:linear-gradient(0deg,rgba(6,12,18,.88) 0,rgba(6,12,18,.5) 30%,rgba(6,12,18,.06) 62%,rgba(6,12,18,.22))}
.dms-body{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  padding:clamp(22px,4vw,56px);padding-bottom:calc(clamp(22px,3vw,40px) + 56px);max-width:min(980px,100%)}
@media (min-width:640px){.dms-body{padding-right:180px}}
.dms-t{margin:0;font-family:"Poiret One",Lato,sans-serif!important;font-weight:400!important;font-size:clamp(30px,1.1rem + 3.2vw,64px)!important;line-height:1.04;
  color:#fff;-webkit-text-stroke:.5px #fff;text-shadow:0 2px 28px rgba(0,0,0,.45);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dms .dm-meta{font-size:11.5px}
.dms .dm-read{font-size:14px}

/* arrows */
.dms-nav{position:absolute;z-index:3;bottom:clamp(20px,3vw,34px);width:48px;height:48px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  font:700 19px/1 Lato,sans-serif;color:#fff;border:1px solid rgba(255,255,255,.5);
  background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.10));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 1px 1px 1px rgba(255,255,255,.4),0 8px 20px rgba(0,0,0,.25);transition:transform .25s,background .25s}
.dms-nav:hover{transform:scale(1.07);background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,.16))}
.dms-nav:focus-visible{outline:3px solid #4DD9E8;outline-offset:3px}
.dms-next{right:clamp(20px,3vw,34px)}
.dms-prev{right:calc(clamp(20px,3vw,34px) + 60px)}
@media (max-width:639px){.dms-nav{display:none}}

/* story bars: one per slide, the live one fills over 6.5 s */
.dms-bars{position:absolute;z-index:3;left:clamp(22px,4vw,56px);right:calc(clamp(20px,3vw,34px) + 140px);bottom:clamp(26px,3vw,40px);display:flex;gap:10px}
@media (max-width:639px){.dms-bars{left:18px;right:18px;bottom:18px;gap:6px}}
.dms-bar{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px;padding:6px 0;border:0;background:none;cursor:pointer;text-align:left;color:rgba(255,255,255,.62)}
.dms-bar.is-on{color:#fff}
.dms-num{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.14em}
@media (max-width:639px){.dms-num{display:none}}
.dms-fill{display:block;height:3px;border-radius:3px;background:rgba(255,255,255,.28);overflow:hidden}
.dms-fill i{display:block;height:100%;width:0;border-radius:3px;background:#4DD9E8}
.dms-bar.is-done .dms-fill i{width:100%;background:rgba(255,255,255,.85)}
.dms-bar.is-on .dms-fill i{animation:dms-fill 6.5s linear forwards}
.dms.is-paused .dms-bar.is-on .dms-fill i{animation-play-state:paused}
.dms-bar:focus-visible{outline:2px solid #4DD9E8;outline-offset:2px;border-radius:4px}
@keyframes dms-fill{from{width:0}to{width:100%}}

/* motion: slow zoom on the live photo, title rises in */
@media (prefers-reduced-motion:no-preference){
  .dms-slide.is-on img{animation:dms-kb 9s ease-out both}
  .dms-slide.is-on .dms-body>*{animation:dms-up .8s cubic-bezier(.2,.7,.2,1) both}
  .dms-slide.is-on .dms-t{animation-delay:.08s}.dms-slide.is-on .dm-meta{animation-delay:.16s}
  @keyframes dms-kb{from{transform:scale(1.08)}to{transform:scale(1)}}
  @keyframes dms-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){.dms-bar.is-on .dms-fill i{animation:none;width:100%}.dms-slide{transition:none}}
.dms--skel{background:none;box-shadow:none}.dms-sk{position:absolute;inset:0;border-radius:inherit}
/* only the photos crossfade - the outgoing title leaves fast so two titles never overlap */
.dms-slide .dms-body{transition:opacity .22s ease}
.dms-slide:not(.is-on) .dms-body{opacity:0}
@media (prefers-reduced-motion:no-preference){.dms-slide.is-on .dms-body>*{animation-delay:.32s}.dms-slide.is-on .dms-t{animation-delay:.4s}.dms-slide.is-on .dm-meta{animation-delay:.48s}}
/* aspect-ratio + min-height let the box grow sideways at 1024px; width wins */
.dms{width:100%;max-width:100%}

/* ======================================================================
   r102 - full magazine layout (after the Pixwell reference)
   full-bleed hero slider > "up next" band > topics > feed + sidebar
   ====================================================================== */
.dm-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.dm-mag{padding-top:0!important}

/* ---- full-bleed hero: edge to edge, under the header ------------------ */
.dms.dms--bleed{width:100%;max-width:none;aspect-ratio:auto;height:clamp(560px,88vh,880px);min-height:0;max-height:none;border-radius:0;box-shadow:none}
@media (max-width:639px){.dms.dms--bleed{height:min(86svh,720px);min-height:520px}}
.dms--bleed .dm-scrim{background:
  linear-gradient(180deg,rgba(6,12,18,.55) 0,rgba(6,12,18,.12) 26%,rgba(6,12,18,0) 42%),
  radial-gradient(70% 60% at 50% 62%,rgba(6,12,18,.42),rgba(6,12,18,0) 75%),
  linear-gradient(0deg,rgba(6,12,18,.72) 0,rgba(6,12,18,.18) 36%,rgba(6,12,18,0) 58%)}
.dms--bleed .dms-slide:focus-visible{border-radius:0;outline-offset:-10px}
.dms--bleed .dms-body{left:50%;right:auto;bottom:clamp(96px,14vh,150px);transform:translateX(-50%);width:min(1040px,calc(100% - 48px));max-width:none;
  padding:0!important;align-items:center;text-align:center;gap:16px}
.dms--bleed .dms-t{font-size:clamp(34px,1rem + 4.2vw,80px)!important;line-height:1.02;-webkit-line-clamp:3;text-wrap:balance}
.dms--bleed .dm-meta{justify-content:center;flex-wrap:wrap;font-size:12px}
.dms--bleed .dm-chip{font-size:11px;padding:6px 12px}
/* arrows at the sides, bars centred at the foot */
.dms--bleed .dms-nav{top:50%;bottom:auto;margin-top:-26px;width:52px;height:52px}
.dms--bleed .dms-prev{left:clamp(14px,2.4vw,32px);right:auto}
.dms--bleed .dms-next{right:clamp(14px,2.4vw,32px)}
.dms--bleed .dms-bars{left:50%;right:auto;transform:translateX(-50%);width:min(560px,calc(100% - 40px));bottom:clamp(30px,5vh,52px)}
@media (max-width:639px){.dms--bleed .dms-body{width:calc(100% - 36px);bottom:84px}.dms--bleed .dms-bars{bottom:28px}}

/* ---- up next: four stories with round thumbnails ----------------------- */
.dm-next{background:#fff;border-bottom:1px solid rgba(19,34,58,.08);box-shadow:0 18px 40px -36px rgba(13,135,151,.6)}
.dm-next-l{list-style:none;margin:0;padding:clamp(18px,2.4vw,28px) 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,36px)}
.dm-next-a{display:flex;align-items:center;gap:14px;color:#13223A;text-decoration:none}
.dm-next-ph{flex:none;width:68px;height:68px;border-radius:50%;overflow:hidden;background:#e3ebee;box-shadow:0 0 0 2px #fff,0 0 0 3.5px rgba(77,217,232,.55)}
.dm-next-ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.dm-next-a:hover .dm-next-ph img{transform:scale(1.08)}
.dm-next-b{min-width:0;display:flex;flex-direction:column;gap:5px}
.dm-next-t{font-size:14px;font-weight:700;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s}
.dm-next-a:hover .dm-next-t{color:#0d8797}
.dm-next-a:focus-visible{outline:3px solid #4DD9E8;outline-offset:4px;border-radius:12px}
.dm-next-d{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.06em;color:#6b7684}
@media (max-width:1023px){
  .dm-next-l{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-padding-inline:16px;margin:0 -16px;padding-left:16px;padding-right:16px}
  .dm-next-l::-webkit-scrollbar{display:none}
  .dm-next-l>li{flex:0 0 min(300px,78%);scroll-snap-align:start}
}

/* ---- magazine section headings: title, then a hairline rule ----------- */
.dm-sec{display:flex;align-items:center;gap:16px;margin:0 0 clamp(16px,2vw,24px)}
.dm-sec-t{position:relative;margin:0;padding-bottom:8px;flex:none;font-family:"Poiret One",Lato,sans-serif!important;font-weight:400!important;
  font-size:clamp(26px,1.1rem + 1.2vw,36px)!important;line-height:1.1;color:#13223A;-webkit-text-stroke:.35px #13223A}
.dm-sec-t::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:3px;border-radius:3px;background:linear-gradient(90deg,#4DD9E8,#E8407F)}
.dm-sec-rule{flex:1;height:1px;background:rgba(19,34,58,.14);min-width:24px}
.dm-sec-x{flex:none;display:flex;align-items:center;gap:14px}
.dm-sec-x .dm-clear{margin:0}

/* ---- topics + body ----------------------------------------------------- */
.dm-topics{margin-top:clamp(36px,5vw,60px)}
.dm-topics .dm-his{margin-top:0}
.dm-body{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(36px,4vw,48px);margin-top:clamp(36px,5vw,56px);align-items:start}
.dm-body .dm-feed{margin-top:0}
@media (min-width:1024px){
  .dm-body{grid-template-columns:minmax(0,1fr) 320px}
  .dm-body .dm-grid{columns:2}
  .dm-aside{position:sticky;top:104px}
}
@media (min-width:1280px){.dm-body{grid-template-columns:minmax(0,1fr) 340px}.dm-body .dm-grid{columns:3}}

/* ---- sidebar ----------------------------------------------------------- */
.dm-aside{display:flex;flex-direction:column;gap:30px;min-width:0}
@media (min-width:640px) and (max-width:1023px){.dm-aside{display:grid;grid-template-columns:1fr 1fr;gap:24px}.dm-aside>.dm-promo{grid-row:span 2}}
.dm-promo{position:relative;display:block;min-height:400px;border-radius:22px;overflow:hidden;color:#fff;text-decoration:none;isolation:isolate;background:#1d2a33;
  box-shadow:0 30px 60px -36px rgba(13,135,151,.7)}
.dm-promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.35);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.dm-promo:hover img{transform:scale(1.05)}
.dm-promo-s{position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,12,18,.88),rgba(6,12,18,.35) 55%,rgba(6,12,18,.15))}
.dm-promo-b{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:28px 24px}
.dm-promo-k{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#bff3f8}
.dm-promo-t{font-family:"Poiret One",Lato,sans-serif;font-size:clamp(27px,2vw,32px);line-height:1.1;-webkit-text-stroke:.45px #fff}
.dm-promo-p{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.85)}
.dm-promo-btn{margin-top:6px;padding:12px 20px;border-radius:999px;background:#4DD9E8;color:#13223A;font-size:13.5px;font-weight:700;box-shadow:0 10px 24px -12px rgba(77,217,232,.9);transition:transform .3s}
.dm-promo:hover .dm-promo-btn{transform:translateY(-2px)}
.dm-promo:focus-visible{outline:3px solid #4DD9E8;outline-offset:3px}
.dm-side-box .dm-sec{margin-bottom:14px}
.dm-side-box .dm-sec-t{font-size:22px!important}
.dm-soc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dm-soc-a{display:grid;grid-template-columns:22px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:12px 12px;border-radius:14px;background:#fff;
  color:#13223A;text-decoration:none;box-shadow:inset 0 0 0 1px rgba(19,34,58,.08);transition:transform .25s,box-shadow .25s}
.dm-soc-a:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(19,34,58,.08),0 14px 26px -18px rgba(13,135,151,.7)}
.dm-soc-a:focus-visible{outline:3px solid #4DD9E8;outline-offset:2px}
.dm-soc-a svg{grid-row:span 2;width:22px;height:22px}
.dm-soc--ig svg{color:#d62976}.dm-soc--yt svg{color:#e62117}.dm-soc--fb svg{color:#1877f2}.dm-soc--wa svg{color:#1d9d55}
.dm-soc-t{font-size:13px;font-weight:700;line-height:1.2}
.dm-soc-h{font-size:11px;color:#6b7684;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-picks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.dm-pick{display:flex;align-items:center;gap:12px;color:#13223A;text-decoration:none}
.dm-pick-ph{flex:none;width:68px;height:68px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px rgba(19,34,58,.08);overflow:hidden}
.dm-pick-ph img{width:100%;height:100%;object-fit:contain;padding:6px;box-sizing:border-box}
.dm-pick-b{min-width:0;display:flex;flex-direction:column;gap:3px}
.dm-pick-k{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#6b7684}
.dm-pick-t{font-size:13.5px;font-weight:700;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dm-pick:hover .dm-pick-t{color:#0d8797}
.dm-pick-p{font-size:13.5px}
.dm-pick-disc{margin:12px 0 0;font-size:11.5px;color:#6b7684}
/* the site's "questions -> answers" doodle attaches after every h1; the
   magazine's h1 is screen-reader only, so its doodle has nowhere to sit */
.dm-mag>.pl-slot,.dm-mag>.dm-sr+.pl-slot{display:none!important}
/* small phones: long single words ("Waterproofing") must fit the width */
@media (max-width:420px){.dms--bleed .dms-t{font-size:clamp(26px,8.2vw,36px)!important;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}}