:root{
  --bg:#fff; --soft:#f4f5f8; --card:#fff; --ink:#0f172a; --mute:#64708a; --line:#e6e9f0;
  --acc:#e11d48; --acc-d:#be123c; --navy:#0b1220; --hbg:rgba(255,255,255,.86);
  --r:16px; --sh:0 1px 2px rgba(15,23,42,.05),0 12px 32px rgba(15,23,42,.08);
  --fs-body:clamp(.95rem,.9rem + .2vw,1.05rem);
}
:root[data-theme=dark]{--bg:#0a0f1d;--soft:#111829;--card:#111829;--ink:#e9edf7;--mute:#97a3c0;--line:#222c45;--hbg:rgba(10,15,29,.86);--sh:0 12px 32px rgba(0,0,0,.4)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%}
body{font-family:Inter,system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;font-size:var(--fs-body);transition:background .3s,color .3s}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit}
.wrap{width:min(1280px,100% - clamp(28px,5vw,64px));margin-inline:auto}
.serif{font-family:'Newsreader',Georgia,serif}

/* ===== category colours ===== */
.kicker{--cc:var(--acc);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cc);display:inline-flex;align-items:center;gap:7px}
.kicker::before{content:"";width:18px;height:3px;border-radius:3px;background:var(--cc)}
.meta{font-size:.8rem;color:var(--mute);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.meta i{width:3px;height:3px;background:currentColor;opacity:.5;border-radius:50%}

/* ===== util bar / header ===== */
.util{background:var(--navy);color:#b7c0d4;font-size:.78rem}
.util .wrap{display:flex;justify-content:space-between;align-items:center;height:36px;gap:12px}
.util b{color:#fff;font-weight:600}
.util .r{display:flex;gap:18px}.util a:hover{color:#fff}
.wx{display:flex;gap:6px;align-items:center}
header.site{position:sticky;top:0;z-index:60;background:var(--hbg);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid var(--line)}
.hrow{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.logo{font-family:'Newsreader',serif;font-weight:700;font-size:clamp(1.55rem,1.2rem + 1vw,2rem);letter-spacing:-.02em;display:flex;align-items:center;white-space:nowrap}
.logo span{color:var(--acc)}.logo i{width:9px;height:9px;background:var(--acc);border-radius:50%;margin:10px 0 0 3px}
.hact{display:flex;gap:8px;align-items:center}
.sbox{display:flex;align-items:center;background:var(--soft);border:1px solid transparent;border-radius:999px;padding:0 6px 0 16px;transition:.2s}
.sbox:focus-within{background:var(--bg);border-color:var(--acc);box-shadow:0 0 0 4px rgba(225,29,72,.14)}
.sbox input{border:0;background:none;outline:0;font:inherit;font-size:.9rem;width:150px;height:40px;color:var(--ink)}
.sbox button{border:0;background:none;cursor:pointer;width:34px;height:34px;color:var(--mute);font-size:1.05rem}
.ib{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer;font-size:1rem;display:grid;place-items:center;transition:.2s}
.ib:hover{background:var(--soft)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border-radius:999px;font-weight:600;font-size:.9rem;border:0;cursor:pointer;background:var(--acc);color:#fff;transition:.2s;white-space:nowrap}
.btn:hover{background:var(--acc-d);transform:translateY(-1px);box-shadow:0 10px 24px rgba(225,29,72,.32)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.35)}.btn.ghost:hover{background:rgba(255,255,255,.12);box-shadow:none}
.burger{display:none}
.scrim{position:fixed;inset:0;background:rgba(5,8,18,.55);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:.3s;z-index:65}
.scrim.on{opacity:1;pointer-events:auto}

/* ticker */
.ticker{border-bottom:1px solid var(--line);background:var(--bg)}
.ticker .wrap{display:flex;align-items:center;gap:14px;height:44px;overflow:hidden}
.ticker b{flex:none;background:var(--acc);color:#fff;font-size:.68rem;letter-spacing:.12em;padding:4px 10px;border-radius:4px;display:flex;align-items:center;gap:6px}
.ticker b::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:pl 1.4s infinite}
@keyframes pl{50%{opacity:.25}}
.ticker div{overflow:hidden;flex:1}
.ticker p{white-space:nowrap;display:inline-block;padding-left:100%;animation:tk 70s linear infinite;font-size:.88rem}
.ticker p a{margin-right:46px;opacity:.85}.ticker p a:hover{color:var(--acc);opacity:1}
.ticker p a::before{content:"•";color:var(--acc);margin-right:10px}
.ticker:hover p{animation-play-state:paused}
@keyframes tk{to{transform:translateX(-100%)}}

/* ===== headings ===== */
.sec-h{display:flex;justify-content:space-between;align-items:end;gap:12px;margin:clamp(40px,6vw,72px) 0 22px;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.sec-h h2{font-family:'Newsreader',serif;font-size:clamp(1.6rem,1.2rem + 1.4vw,2.1rem);line-height:1;display:flex;align-items:center;gap:12px}
.sec-h h2::before{content:"";width:10px;height:26px;border-radius:3px;background:var(--cc,var(--acc))}
.sec-h a{font-size:.85rem;font-weight:600;color:var(--acc);white-space:nowrap}.sec-h a:hover{text-decoration:underline}

/* ===== images ===== */
.im{position:relative;overflow:hidden;background:linear-gradient(135deg,#dde2ee,#c4ccdd);border-radius:var(--r)}
.im img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
a:hover>.im img,.card:hover .im img,.row:hover .im img{transform:scale(1.06)}

/* ===== hero slider ===== */
.hero{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px;margin-top:26px}
.slider{position:relative;border-radius:22px;overflow:hidden;min-height:clamp(420px,52vw,580px);background:#111;color:#fff;isolation:isolate}
.hs{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s,visibility .9s;display:block}
.hs.on{opacity:1;visibility:visible}
.hs .im{position:absolute;inset:0;border-radius:0}
.hs .im img{transform:scale(1.08);transition:transform 7s linear}
.hs.on .im img{transform:scale(1)}
.hs::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,8,18,.94) 6%,rgba(5,8,18,.15) 62%,rgba(5,8,18,.35))}
.hs .tx{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,3.4vw,40px) clamp(20px,3.4vw,40px) 64px;z-index:2}
.hs .kicker{background:var(--cc);color:#fff;padding:5px 11px;border-radius:5px}.hs .kicker::before{display:none}
.hs h1{font-family:'Newsreader',serif;font-size:clamp(1.7rem,1.1rem + 2.6vw,3.1rem);line-height:1.08;margin:14px 0 10px;font-weight:700;max-width:720px;text-wrap:balance}
.hs p{color:#d3d9e8;max-width:600px;font-size:clamp(.92rem,.85rem + .3vw,1.05rem)}
.hs .meta{color:#b6bfd3;margin-top:14px}
.sctl{position:absolute;left:clamp(20px,3.4vw,40px);right:clamp(20px,3.4vw,40px);bottom:22px;z-index:5;display:flex;align-items:center;gap:8px}
.dot{flex:1;max-width:70px;height:4px;border-radius:4px;background:rgba(255,255,255,.3);border:0;cursor:pointer;overflow:hidden;position:relative}
.dot i{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.dot.on i{animation:fill 6s linear forwards}
.dot.done i{transform:scaleX(1)}
@keyframes fill{to{transform:scaleX(1)}}
.sarr{margin-left:auto;display:flex;gap:8px}
.sarr button{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);backdrop-filter:blur(8px);color:#fff;cursor:pointer;font-size:1rem;transition:.2s}
.sarr button:hover{background:var(--acc);border-color:var(--acc)}
.h-side{display:flex;flex-direction:column;gap:0}
.h-side h3.t{font-family:'Newsreader',serif;font-size:1.3rem;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.h-side h3.t::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--acc);animation:pl 1.4s infinite}
.side-i{display:grid;grid-template-columns:118px minmax(0,1fr);gap:14px;padding:16px 0;border-top:1px solid var(--line)}
.side-i .im{aspect-ratio:4/3;border-radius:12px}
.side-i h3{font-family:'Newsreader',serif;font-size:1.1rem;line-height:1.25;margin:4px 0 6px;font-weight:600;transition:color .2s}
.side-i:hover h3,.card:hover h3,.row:hover h3,.rank:hover h3,.tr:hover h3{color:var(--acc)}

/* ===== cards ===== */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,30px)}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.card{display:block;border-radius:var(--r);transition:transform .35s}
.card:hover{transform:translateY(-4px)}
.card .im{aspect-ratio:16/10;margin-bottom:14px}
.card h3{font-family:'Newsreader',serif;font-size:clamp(1.15rem,1rem + .5vw,1.35rem);line-height:1.25;margin:8px 0;font-weight:600;transition:color .2s}
.card p{color:var(--mute);font-size:.92rem;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(26px,4vw,48px);align-items:start}
.row{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:22px;padding:22px 0;border-bottom:1px solid var(--line)}
.row:first-child{padding-top:0}
.row .im{aspect-ratio:3/2}
.row h3{font-family:'Newsreader',serif;font-size:clamp(1.2rem,1rem + .8vw,1.5rem);line-height:1.2;margin:8px 0;font-weight:600;transition:color .2s}
.row p{color:var(--mute);font-size:.95rem;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* trending scroller */
.scroller{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 18px;margin:0 -2px;scrollbar-width:thin}
.tr{flex:0 0 clamp(250px,26vw,300px);scroll-snap-align:start;position:relative;display:block}
.tr .im{aspect-ratio:4/5;border-radius:18px}
.tr::after{content:"";position:absolute;left:0;right:0;top:0;aspect-ratio:4/5;border-radius:18px;background:linear-gradient(to top,rgba(5,8,18,.9),transparent 60%);pointer-events:none}
.tr .no{position:absolute;top:14px;left:16px;z-index:2;font-family:'Newsreader',serif;font-size:3rem;font-weight:700;line-height:1;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.tr .tt{position:absolute;left:0;right:0;top:0;aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;z-index:2;color:#fff}
.tr h3{font-family:'Newsreader',serif;font-size:1.2rem;line-height:1.2;margin:6px 0 4px;font-weight:600}
.tr:hover h3{color:#fff}
.tr .im img{transition:transform .8s}.tr:hover .im img{transform:scale(1.07)}

/* dark spotlight */
.dark{background:var(--navy);color:#e9edf7;margin-top:clamp(44px,6vw,80px);padding:clamp(40px,6vw,76px) 0;position:relative;overflow:hidden}
.dark::before{content:"";position:absolute;right:-160px;top:-160px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(225,29,72,.35),transparent 65%)}
.dark .sec-h{border-color:#2a3652;margin-top:0;color:#fff}
.dark .meta{color:#93a0bd}
.sp{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);position:relative}
.sp-main{position:relative;border-radius:20px;overflow:hidden;min-height:clamp(360px,40vw,480px);display:block}
.sp-main .im{position:absolute;inset:0;border-radius:0}
.sp-main::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,8,18,.95),transparent 65%)}
.sp-main .tx{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,3vw,32px);z-index:2}
.sp-main h3{font-family:'Newsreader',serif;font-size:clamp(1.5rem,1.1rem + 1.6vw,2.2rem);line-height:1.12;margin:10px 0;color:#fff}
.sp-list{display:grid;gap:14px;align-content:start}
.sp-i{display:grid;grid-template-columns:minmax(0,120px) minmax(0,1fr);gap:16px;padding:14px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);transition:.25s}
.sp-i:hover{background:rgba(255,255,255,.1);transform:translateX(4px)}
.sp-i .im{aspect-ratio:1;border-radius:12px}
.sp-i h3{font-family:'Newsreader',serif;font-size:1.12rem;line-height:1.25;margin:6px 0;color:#fff}

/* opinion */
.op{padding:28px;border-radius:var(--r);background:var(--soft);border:1px solid var(--line);position:relative;transition:.3s;display:block}
.op:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.op::before{content:"“";position:absolute;top:6px;right:22px;font-family:'Newsreader',serif;font-size:6rem;line-height:1;color:var(--acc);opacity:.18}
.op h3{font-family:'Newsreader',serif;font-size:1.3rem;line-height:1.3;margin:16px 0 20px;font-weight:600}
.op .by2{display:flex;gap:12px;align-items:center;font-size:.85rem}
.av{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--acc),#f97316);color:#fff;display:grid;place-items:center;font-weight:700;flex:none}
.op b{display:block}.op span.r{color:var(--mute);font-size:.8rem}

/* sidebar */
aside .box{background:var(--soft);border-radius:var(--r);padding:24px;margin-bottom:24px;border:1px solid var(--line)}
aside h4{font-family:'Newsreader',serif;font-size:1.3rem;margin-bottom:14px}
.rank{display:flex;gap:16px;padding:14px 0;border-top:1px solid var(--line);align-items:flex-start}
.rank:first-of-type{border:0;padding-top:0}
.rank b{font-family:'Newsreader',serif;font-size:2rem;line-height:1;color:var(--acc);min-width:28px}
.rank h3{font-size:.95rem;font-weight:600;line-height:1.35;transition:color .2s}
.mk{display:flex;justify-content:space-between;font-size:.9rem;padding:10px 0;border-top:1px solid var(--line)}
.mk:first-of-type{border:0}.up{color:#10b981;font-weight:600}.dn{color:var(--acc);font-weight:600}
.sticky{position:sticky;top:92px}
.topics{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.chip{padding:9px 18px;border-radius:999px;border:1px solid var(--line);font-size:.88rem;font-weight:500;background:var(--bg);transition:.2s;cursor:pointer;white-space:nowrap}
.chip:hover,.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink);transform:translateY(-1px)}
.chip.sc{display:flex;align-items:center;gap:8px}.chip.sc::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cc)}

/* ===== ADS ===== */
.adwrap{margin:clamp(26px,4vw,44px) 0;text-align:center}
aside .adwrap{margin:0 0 24px}
.adl{display:block;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:6px;text-align:center}
.ad-in{transition:opacity .45s}.ad-in.out{opacity:0}
.adx{position:relative;display:flex;color:#fff;overflow:hidden;text-align:left;border-radius:14px;background:var(--abg,#333);box-shadow:var(--sh);transition:transform .3s,box-shadow .3s;isolation:isolate}
.adx:hover{transform:translateY(-2px)}
.adb{position:absolute;top:8px;right:8px;z-index:5;font-size:.6rem;font-weight:700;background:rgba(255,255,255,.92);color:#334155;padding:2px 7px;border-radius:4px;display:flex;gap:4px;align-items:center;letter-spacing:.04em}
.adb i{font-style:normal;color:#2563eb}
.lg{width:54px;height:54px;border-radius:14px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.4);display:grid;place-items:center;font-family:'Newsreader',serif;font-size:1.7rem;font-weight:700;flex:none}
.acta{background:#fff;color:#111827;font-weight:700;font-size:.85rem;padding:11px 22px;border-radius:999px;white-space:nowrap;transition:.2s;flex:none}
.adx:hover .acta{background:#111827;color:#fff}
/* leaderboard */
.adx.lb{align-items:center;gap:18px;padding:16px 22px;min-height:96px;max-width:970px;margin-inline:auto}
.adx.lb::before{content:"";position:absolute;right:-60px;top:-80px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.14);z-index:-1}
.adx.lb::after{content:"";position:absolute;left:30%;bottom:-100px;width:200px;height:200px;border-radius:50%;background:rgba(0,0,0,.1);z-index:-1}
.at{flex:1;min-width:0}.at small{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85;font-weight:600}
.at b{display:block;font-family:'Newsreader',serif;font-size:clamp(1.05rem,.9rem + .8vw,1.5rem);line-height:1.2;margin-top:2px}
/* rectangle */
.adx.rect{flex-direction:column;justify-content:flex-end;aspect-ratio:6/5;max-width:340px;margin-inline:auto;padding:18px;background:var(--abg)}
.adx.rect img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.55;mix-blend-mode:luminosity;transition:transform .8s}
.adx.rect:hover img{transform:scale(1.07)}
.adx.rect::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.65),transparent 70%);z-index:-1}
.adx.rect .at{flex:none}
.adx.rect .at b{font-size:1.45rem;margin:4px 0 14px}
.adx.rect .acta{align-self:flex-start}
.adx.rect .off{position:absolute;top:14px;left:14px;background:#fff;color:#111;font-weight:800;border-radius:12px;padding:6px 12px;font-size:.9rem}
/* skyscraper / half page */
.adx.sky{flex-direction:column;max-width:340px;margin-inline:auto;min-height:560px;background:var(--abg)}
.adx.sky .ph{height:250px;position:relative;overflow:hidden}
.adx.sky .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s}.adx.sky:hover .ph img{transform:scale(1.07)}
.adx.sky .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--abg),transparent 55%)}
.adx.sky .bd{padding:6px 22px 24px;display:flex;flex-direction:column;gap:14px;flex:1}
.adx.sky h5{font-family:'Newsreader',serif;font-size:1.7rem;line-height:1.1}
.adx.sky ul{list-style:none;display:grid;gap:8px;font-size:.88rem;opacity:.95}.adx.sky li::before{content:"✓";margin-right:9px;font-weight:700}
.adx.sky .pr{font-size:.8rem;opacity:.85}.adx.sky .pr b{font-size:1.9rem;font-family:'Newsreader',serif;display:block;line-height:1}
.adx.sky .acta{text-align:center;margin-top:auto}
/* native */
.native{display:block;position:relative;border-radius:var(--r);transition:transform .35s;background:var(--soft);border:1px dashed var(--line);padding:14px}
.native:hover{transform:translateY(-4px)}
.native .im{aspect-ratio:16/10;margin-bottom:14px}
.native .sp-l{display:inline-flex;gap:6px;align-items:center;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#b45309;background:rgba(245,158,11,.15);padding:4px 10px;border-radius:5px}
.native h3{font-family:'Newsreader',serif;font-size:1.3rem;line-height:1.25;margin:10px 0 6px}
.native p{color:var(--mute);font-size:.9rem;margin-bottom:10px}
.native .brand{font-size:.8rem;font-weight:600;color:var(--mute)}
.row.native-row{grid-template-columns:minmax(0,260px) minmax(0,1fr);background:var(--soft);padding:18px;border-radius:var(--r);border:1px dashed var(--line);margin:8px 0}
/* anchor */
.anchor{position:fixed;left:50%;bottom:14px;transform:translate(-50%,160%);z-index:80;width:min(760px,100% - 20px);transition:transform .6s cubic-bezier(.2,.9,.3,1.1)}
.anchor.on{transform:translate(-50%,0)}
.anchor .adx{min-height:74px;padding:10px 16px;gap:14px;border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.anchor .lg{width:44px;height:44px;font-size:1.3rem}
.anchor .at b{font-size:1rem}
.anchor .x{position:absolute;top:-12px;left:-6px;z-index:6;width:28px;height:28px;border-radius:50%;border:0;background:#111827;color:#fff;cursor:pointer;font-size:.8rem;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.anchor .adb{top:4px;right:6px}
.toast{position:fixed;left:50%;top:84px;transform:translate(-50%,-30px);background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:12px;font-size:.88rem;opacity:0;pointer-events:none;transition:.35s;z-index:200;max-width:calc(100% - 30px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ===== newsletter ===== */
.band{margin-top:clamp(50px,7vw,86px);background:linear-gradient(120deg,var(--navy),#1b1033 60%,#3a0f24);color:#fff;border-radius:26px;padding:clamp(28px,5vw,60px);display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(20px,4vw,44px);align-items:center;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;right:-120px;top:-140px;width:380px;height:380px;border-radius:50%;background:var(--acc);opacity:.22}
.band h2{font-family:'Newsreader',serif;font-size:clamp(1.8rem,1.2rem + 2vw,2.7rem);line-height:1.08}
.band p{color:#b2bbd2;margin-top:10px}
.band form{display:flex;gap:10px;position:relative;z-index:1}
.band input{flex:1;min-width:0;padding:15px 20px;border-radius:999px;border:1px solid #34405e;background:rgba(255,255,255,.07);color:#fff;font:inherit;outline:0}
.band input:focus{border-color:var(--acc)}
.band small{display:block;color:#6ee7b7;min-height:1.2em;grid-column:2;position:relative}

/* ===== page heads / article ===== */
.phead{background:var(--soft);border-bottom:1px solid var(--line);padding:clamp(30px,5vw,56px) 0 clamp(22px,3vw,34px)}
.phead h1{font-family:'Newsreader',serif;font-size:clamp(2.1rem,1.4rem + 3vw,3.6rem);line-height:1.05;text-wrap:balance}
.phead p{color:var(--mute);margin-top:8px;max-width:640px}
.crumbs{font-size:.82rem;color:var(--mute);margin-bottom:14px}.crumbs a:hover{color:var(--acc)}
.empty{text-align:center;padding:70px 20px;color:var(--mute)}.empty h3{font-family:'Newsreader',serif;font-size:1.6rem;color:var(--ink)}
.art{max-width:760px;margin:0 auto}
.art-h{padding:clamp(28px,4vw,48px) 0 26px}
.art-h h1{font-family:'Newsreader',serif;font-size:clamp(1.9rem,1.2rem + 3.2vw,3.4rem);line-height:1.08;margin:14px 0;font-weight:700;text-wrap:balance}
.art-h .lede{font-size:clamp(1.05rem,1rem + .5vw,1.28rem);color:var(--mute);line-height:1.5}
.by{display:flex;align-items:center;gap:14px;margin-top:24px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.by b{display:block;font-size:.95rem}.by span{font-size:.82rem;color:var(--mute)}
.share{margin-left:auto;display:flex;gap:8px}
.share button{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--bg);cursor:pointer;color:var(--ink);font-size:.85rem}
.share button:hover{background:var(--ink);color:var(--bg)}
.cover{display:block;width:min(1100px,100% - 28px);margin:10px auto 0;aspect-ratio:21/9;border-radius:22px}
.cap{display:block;text-align:center;color:var(--mute);font-size:.78rem;margin-top:10px}
.body p{font-family:'Newsreader',serif;font-size:clamp(1.12rem,1.02rem + .5vw,1.32rem);line-height:1.75;margin:0 0 1.3em}
.body>p:first-child::first-letter{float:left;font-size:4.2rem;line-height:.85;padding:6px 10px 0 0;font-weight:700;color:var(--acc)}
.body blockquote{border-left:4px solid var(--acc);padding:6px 0 6px 22px;margin:1.6em 0;font-family:'Newsreader',serif;font-size:clamp(1.3rem,1.1rem + 1vw,1.75rem);line-height:1.35;font-style:italic}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin:30px 0}
.prog{position:fixed;top:0;left:0;height:3px;background:var(--acc);width:0;z-index:100}

.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);padding:clamp(30px,5vw,56px) 0}
.form{display:grid;gap:16px}.form label{font-size:.85rem;font-weight:600;display:grid;gap:6px}
.form input,.form select,.form textarea{padding:13px 16px;border:1px solid var(--line);border-radius:12px;font:inherit;outline:0;background:var(--bg);color:var(--ink);transition:.2s;width:100%}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--acc);box-shadow:0 0 0 4px rgba(225,29,72,.14)}
.form textarea{min-height:140px;resize:vertical}
.okmsg{display:none;padding:16px;border-radius:12px;background:rgba(16,185,129,.12);color:#10b981;border:1px solid rgba(16,185,129,.35)}
.info{display:grid;gap:14px;align-content:start}.info div{padding:22px;border-radius:var(--r);background:var(--soft);border:1px solid var(--line)}.info b{display:block;margin-bottom:4px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.stats div{padding:26px 14px;border-radius:var(--r);background:var(--soft);border:1px solid var(--line);text-align:center;color:var(--mute);font-size:.9rem}
.stats strong{font-family:'Newsreader',serif;font-size:clamp(1.8rem,1.4rem + 1.4vw,2.5rem);color:var(--acc);display:block;line-height:1.1}
.team .im{aspect-ratio:1}

/* ad formats page */
.fmt{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(18px,3vw,40px);padding:clamp(26px,4vw,40px) 0;border-bottom:1px solid var(--line);align-items:center}
.fmt h3{font-family:'Newsreader',serif;font-size:1.6rem;line-height:1.1;margin-bottom:8px}
.fmt .sz{display:inline-block;font-size:.75rem;font-weight:700;background:var(--soft);border:1px solid var(--line);padding:3px 10px;border-radius:999px;margin-bottom:10px}
.fmt p{color:var(--mute);font-size:.94rem}
.fmt .demo{background:var(--soft);border-radius:var(--r);padding:clamp(14px,2.4vw,28px);border:1px solid var(--line);min-width:0}
.fmt .demo .adwrap{margin:0}

/* ===== footer / misc ===== */
footer.site{margin-top:clamp(56px,8vw,90px);background:var(--navy);color:#9aa6c0;padding:clamp(40px,6vw,64px) 0 100px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(24px,4vw,44px)}
footer .logo{color:#fff;margin-bottom:14px}
footer h5{color:#fff;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}
footer a{display:block;padding:4px 0;font-size:.92rem}footer a:hover{color:#fff}
.fbot{border-top:1px solid #1f2a44;margin-top:40px;padding-top:22px;font-size:.82rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.totop{position:fixed;right:18px;bottom:104px;width:46px;height:46px;border-radius:50%;border:0;background:var(--acc);color:#fff;font-size:1.2rem;cursor:pointer;z-index:70;opacity:0;transform:translateY(20px);pointer-events:none;transition:.3s;box-shadow:0 10px 26px rgba(225,29,72,.45)}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.fade{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}.fade.in{opacity:1;transform:none}

/* ===== responsive ===== */
@media(max-width:1180px){.sbox input{width:110px}}
@media(max-width:1020px){
  .hero,.split,.band,.cols,.sp,.fmt{grid-template-columns:minmax(0,1fr)}
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .burger{display:grid}.sbox{display:none}
  .band small{grid-column:1}.sticky{position:static}
  aside{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}aside .adwrap.tall{grid-column:1/-1}
  .h-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}.h-side h3.t{grid-column:1/-1}
}
@media(max-width:700px){
  .grid3,.grid4{grid-template-columns:minmax(0,1fr)}
  .row,.row.native-row{grid-template-columns:minmax(0,1fr);gap:14px}.row .im{aspect-ratio:16/9}
  .util .r,.wx span+span{display:none}.hact .btn{display:none}
  aside{grid-template-columns:minmax(0,1fr)}.h-side{display:block}
  .adx.lb{flex-wrap:wrap;gap:12px;padding:16px;padding-top:30px}.adx.lb .at{flex-basis:calc(100% - 70px)}.adx.lb .acta{width:100%;text-align:center}
  .hs .tx{padding-bottom:70px}.sarr button{width:36px;height:36px}.dot{max-width:40px}
  .side-i{grid-template-columns:100px minmax(0,1fr)}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.fgrid>div:first-child{grid-column:1/-1}
  .band form{flex-direction:column}.band .btn{width:100%}
  .sp-i{grid-template-columns:96px minmax(0,1fr)}
  .by{flex-wrap:wrap}.cover{aspect-ratio:16/10;border-radius:16px}
  .anchor .acta{display:none}.anchor .lg{display:none}
}
@media(max-width:400px){.logo{font-size:1.4rem}.hrow{height:64px}.side-i{grid-template-columns:88px minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.fade{opacity:1;transform:none}}
.slider:hover .dot.on i{animation-play-state:paused}