*,*::before,*::after{box-sizing:border-box}
:root{--ink:#0c0f0e;--ink2:#262b29;--paper:#f6f5f1;--card:#fff;--line:#e2e0d8;--mut:#5b615e;--acc:#0f9d63;--acc-d:#0a7a4c;--hot:#d93a2b;--r:14px;--max:1240px;
--fh:"Inter Tight","Heebo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;--fb:"Inter","Heebo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.55 var(--fb);overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px;border-radius:6px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px;z-index:50}.skip:focus{left:8px}
[dir=auto]{unicode-bidi:plaintext}

/* masthead */
.mast{background:var(--paper);border-bottom:1px solid var(--line)}
.mast-in{max-width:var(--max);margin:0 auto;padding:18px 20px 14px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.mark{width:34px;height:34px;color:var(--ink);flex:none}
.word{font:800 27px/1 var(--fh);letter-spacing:-.035em}.word b{font-weight:800;color:var(--acc)}
.mast-date{font-size:15px;color:var(--mut);margin-left:6px;padding-left:18px;border-left:1px solid var(--line);white-space:nowrap}
.sbox{margin-left:auto;position:relative;width:min(320px,40vw)}
.sbox input{width:100%;font:500 16px var(--fb);padding:10px 14px 10px 40px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink)}
.sbox input:focus{outline:none;border-color:var(--ink)}
.sbox svg{position:absolute;left:13px;top:50%;width:19px;height:19px;transform:translateY(-50%);color:var(--mut);pointer-events:none}
.topics{border-top:1px solid var(--line)}
.topics-in{max-width:var(--max);margin:0 auto;padding:0 12px;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.topics-in::-webkit-scrollbar{display:none}
.topics a{flex:none;padding:12px 10px;font:600 15px/1 var(--fh);text-decoration:none;color:var(--ink2);border-bottom:3px solid transparent;white-space:nowrap}
.topics a:hover{color:var(--acc-d)}
.topics a[aria-current]{border-bottom-color:var(--acc);color:var(--ink)}

main{max-width:var(--max);margin:0 auto;padding:22px 20px 40px}

/* sections */
.sec-row{display:flex;align-items:baseline;gap:14px;margin:6px 0 16px;border-top:3px solid var(--ink);padding-top:12px}
.sec-h{font:800 21px/1.15 var(--fh);letter-spacing:-.02em;margin:0;display:flex;align-items:center;gap:9px}
.sec-sub{margin:0;color:var(--mut);font-size:15px}
.live{width:10px;height:10px;border-radius:50%;background:var(--hot);box-shadow:0 0 0 0 rgba(217,58,43,.5);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(217,58,43,0)}100%{box-shadow:0 0 0 0 rgba(217,58,43,0)}}
@media (prefers-reduced-motion:reduce){.live{animation:none}}

/* top */
.top{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);gap:28px;margin-bottom:34px}
.top>*{min-width:0}
.top-side{border-left:1px solid var(--line);padding-left:26px}
.top-side .sec-h{border-top:3px solid var(--ink);padding-top:12px;margin-bottom:6px}
.sec-alert{margin-top:26px;color:var(--hot)}
.minis{list-style:none;margin:0;padding:0}
.mini a{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line);text-decoration:none}
.mini a:hover .mh{text-decoration:underline}
.mn{font:800 22px/1 var(--fh);color:var(--acc);min-width:20px;padding-top:1px}
.mt{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.mh{font:700 16px/1.32 var(--fh);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mm{font-size:15px;color:var(--mut)}
.mini img{width:62px;height:62px;object-fit:cover;border-radius:10px;flex:none;background:#ddd}
.alerts{list-style:none;margin:0;padding:0}
.alerts li{padding:11px 0 11px 13px;border-left:3px solid var(--hot);margin:8px 0;background:#fff;border-radius:0 10px 10px 0}
.alerts a{font:600 16px/1.35 var(--fh);text-decoration:none;display:block;padding-right:10px}
.alerts a:hover{text-decoration:underline}
.alerts span{font-size:15px;color:var(--mut)}

/* cards */
.feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:22px}
.card{background:var(--card);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 0 rgba(0,0,0,.04),0 0 0 1px rgba(0,0,0,.05);transition:box-shadow .2s,transform .2s}
.card:hover{box-shadow:0 10px 28px -12px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.06)}
.md{position:relative;display:block;width:100%;aspect-ratio:4/5;overflow:hidden;background:#141816;border:0;padding:0;margin:0;cursor:pointer}
.md img{width:100%;height:100%;object-fit:contain;position:relative;z-index:1}
.md::before{content:"";position:absolute;inset:-30px;background:var(--bgimg,none) center/cover;filter:blur(26px) brightness(.75);z-index:0}
.md-blank{display:block;width:100%;height:100%}
.playbtn{position:absolute;z-index:2;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.35);transition:transform .2s}
.playbtn svg{width:30px;height:30px;margin-left:4px}
.md-play:hover .playbtn{transform:scale(1.07)}
.dur{position:absolute;z-index:2;right:10px;bottom:10px;background:rgba(0,0,0,.72);color:#fff;font:600 15px/1 var(--fb);padding:5px 8px;border-radius:6px}
.md video{width:100%;height:100%;object-fit:contain;background:#000;position:relative;z-index:1}
.md-txt{display:flex;align-items:center;justify-content:center;padding:26px 22px;text-align:center;text-decoration:none;font:600 20px/1.35 var(--fh);overflow:hidden}
.md-txt::before{display:none}
.md-txt span{display:block;overflow-wrap:anywhere;white-space:pre-line}
.ts-xl{font-size:30px;line-height:1.2;font-weight:800}.ts-l{font-size:23px}.ts-m{font-size:19px}.ts-s{font-size:16px;font-weight:500;line-height:1.45}
.md-aud{aspect-ratio:auto;padding:22px 16px;background:linear-gradient(135deg,#0b6b4f,#0c0f0e);color:#fff;display:flex;flex-direction:column;gap:12px;cursor:default}
.md-aud::before{display:none}
.aud-l{font:700 17px var(--fh)}
.md-aud audio{width:100%}
.cb{padding:14px 16px 12px;display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.kicks{display:flex;flex-wrap:wrap;gap:6px}
.kick{font:700 15px/1 var(--fh);letter-spacing:.03em;text-transform:uppercase;color:var(--acc-d);text-decoration:none;padding:5px 0}
.kick+.kick::before{content:"·";margin-right:6px;color:var(--mut)}
.kick.hot{color:#fff;background:var(--hot);padding:5px 7px;border-radius:5px}
.kick.hot+.kick::before{display:none}
.kick.pin{color:#fff;background:var(--ink);padding:5px 7px;border-radius:5px}.kick.pin+.kick::before{display:none}
.kick.soft{color:var(--mut)}
.hl{overflow-wrap:anywhere;font:700 18px/1.28 var(--fh);letter-spacing:-.012em;margin:0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.hl a{text-decoration:none}.hl a:hover{text-decoration:underline;text-decoration-thickness:2px}
.dek{margin:0;color:var(--ink2);font-size:15px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nocap{margin:0;font:600 16px var(--fh);color:var(--mut)}.nocap a{text-decoration:none}
.lnk{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:8px;text-decoration:none;font:600 15px/1.3 var(--fb);color:var(--ink2);background:#fafaf8}
.lnk img{width:46px;height:46px;object-fit:cover;border-radius:7px;flex:none}
.lnk span{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.by{display:flex;align-items:center;gap:7px;font-size:15px;color:var(--mut);margin-top:auto;padding-top:4px;min-width:0}
.by-who{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-weight:600;min-width:0}
.by-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.by-who:hover .by-name{text-decoration:underline}
.by time{white-space:nowrap}
.av{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--acc)}
.av-i{display:inline-grid;place-items:center;color:#fff;font:700 15px var(--fh)}
.av-lg{width:76px;height:76px;font-size:30px}
.vf{width:17px;height:17px;color:#1d9bf0;flex:none}
.acts{display:flex;gap:6px;flex-wrap:wrap;padding-top:8px;border-top:1px solid var(--line);margin-top:4px}
.act{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 11px;font:600 15px/1 var(--fb);cursor:pointer;text-decoration:none;color:var(--ink2)}
.act svg{width:18px;height:18px;flex:none}
.act:hover{border-color:var(--ink)}
.act-wa{background:#25d366;border-color:#25d366;color:#08331b}
.act-wa:hover{background:#1fbe5b;border-color:#1fbe5b}
.act-ic{padding:7px 9px}
.card .act:not(.act-wa) span{display:none}
.card .act:not(.act-wa){padding:7px 9px}

/* hero */
.card.hero{flex-direction:row;box-shadow:none;background:transparent;border-radius:0;gap:24px}
.card.hero .md{width:min(46%,400px);flex:none;border-radius:var(--r);aspect-ratio:4/5}
.card.hero .cb{padding:4px 0;justify-content:flex-start;gap:12px}
.card.hero .hl{font-size:clamp(26px,3vw,38px);line-height:1.1;letter-spacing:-.03em;-webkit-line-clamp:4}
.card.hero .dek{font-size:17px;-webkit-line-clamp:5}
.card.hero .acts{border-top:0;padding-top:4px}

.card.hero .act span{display:inline!important}
.card.hero .act{padding:9px 13px!important}
.card.hero .by{margin-top:0}

/* list pages */
.list-head{margin:6px 0 22px;padding-bottom:16px;border-bottom:3px solid var(--ink)}
.list-head h1{font:800 clamp(30px,4vw,44px)/1.05 var(--fh);letter-spacing:-.03em;margin:4px 0 0;display:flex;align-items:center;gap:10px}
.list-head h1 .vf{width:26px;height:26px}
.list-head p{color:var(--ink2);margin:8px 0 0;max-width:60ch}
.eyebrow{font:700 15px/1 var(--fh);letter-spacing:.1em;text-transform:uppercase;color:var(--acc-d)}
.creator-head{display:flex;gap:18px;align-items:center}
.ys-link{display:inline-block;margin-top:8px;font-weight:600;color:var(--acc-d)}
.more{display:flex;justify-content:center;margin:30px 0 6px}
.btn-more,.btn{font:700 16px var(--fh);background:var(--ink);color:#fff;border:0;border-radius:999px;padding:14px 26px;cursor:pointer;text-decoration:none;display:inline-block}
.btn-more:hover,.btn:hover{background:var(--acc-d)}
.btn-more[disabled]{opacity:.6;cursor:wait}
.empty{grid-column:1/-1;color:var(--mut);font-size:17px;padding:30px 0}

/* post page */
.post-in{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:40px;align-items:start;margin-bottom:40px}
.post-media .md{aspect-ratio:auto;border-radius:var(--r);background:#141816;max-height:82vh}
.post-media .md img{max-height:82vh;width:100%;height:auto;object-fit:contain}
.post-media .md video{max-height:82vh;height:auto}
.post-media .md::before{display:none}
.post-txt{padding:48px 30px;min-height:360px;font:600 23px/1.45 var(--fh);aspect-ratio:auto;cursor:default;border-radius:var(--r)}
.post-txt p{margin:0 0 .7em}.post-txt a{color:inherit}
.post-body{display:flex;flex-direction:column;gap:14px;padding-top:4px}
.post-h{overflow-wrap:anywhere;font:800 clamp(27px,3.2vw,40px)/1.12 var(--fh);letter-spacing:-.03em;margin:0}
.post-text{font-size:18px;line-height:1.65;color:var(--ink2)}
.post-text p{margin:0 0 1em}
.post-text a{color:var(--acc-d);overflow-wrap:anywhere}
.post .by{margin-top:6px;font-size:16px}.post .av{width:34px;height:34px}
.when{margin:0;color:var(--mut);font-size:15px}.when a{color:var(--acc-d)}
.post .acts{border-top:0;padding-top:0}
.post .act{padding:10px 15px;font-size:16px}
.via{margin:2px 0 0;font-size:15px;color:var(--mut)}.via a{color:var(--mut)}
.rel{margin-top:10px}
.nf{text-align:center;padding:70px 10px}.nf h1{font:800 32px/1.1 var(--fh);margin:0 0 10px}.nf p{color:var(--mut);margin:0 0 24px}

/* footer */
.foot{background:var(--ink);color:#d9dcda;margin-top:30px}
.foot-in{max-width:var(--max);margin:0 auto;padding:40px 20px 30px;display:grid;grid-template-columns:1.4fr 1fr;gap:26px}
.foot .mark{color:#fff;width:30px;height:30px}
.foot-brand{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.foot-brand .word{color:#fff;font-size:24px}
.foot-brand p{flex-basis:100%;margin:6px 0 0;color:#aab0ad;max-width:44ch;font-size:15px}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 18px;align-content:flex-start}
.foot-links a{text-decoration:none;font:600 15px var(--fh);color:#fff}
.foot-links a:hover{text-decoration:underline}
.foot-credit{grid-column:1/-1;font-size:15px;color:#aab0ad;border-top:1px solid #2a302d;padding-top:16px}
.foot a{color:#fff}

.toast{position:fixed;left:50%;top:18px;transform:translate(-50%,-30px);opacity:0;background:var(--ink);color:#fff;font:600 15px var(--fb);padding:11px 18px;border-radius:999px;transition:.25s;z-index:60;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* zoom */
.zoom{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:70;display:flex;align-items:center;justify-content:center;padding:14px;cursor:zoom-out}
.zoom img{max-width:100%;max-height:100%;object-fit:contain}

@media (max-width:1000px){
  .top{grid-template-columns:minmax(0,1fr)}
  .top>*{min-width:0}
.top-side{border-left:0;padding-left:0}
  .post-in{grid-template-columns:1fr;gap:20px}
  .post-media .md{max-width:520px;margin:0 auto}
}
@media (max-width:700px){
  .mast-in{flex-wrap:wrap;padding:14px 16px 12px;gap:10px 12px}
  .mast-date{display:none}
  .word{font-size:25px}.mark{width:31px;height:31px}
  .sbox{order:3;width:100%;margin-left:0}
  main{padding:16px 14px 30px}
  .card.hero{flex-direction:column;gap:14px}
  .card.hero .md{width:100%;aspect-ratio:4/5}
  .card.hero .hl{font-size:28px}
  .feed{grid-template-columns:minmax(0,1fr);gap:18px}
  .card .act span{display:inline!important}
  .card .act{padding:8px 12px!important}
  .post-txt{padding:36px 22px;font-size:21px;min-height:300px}
  .post-text{font-size:17px}
  .foot-in{grid-template-columns:1fr}
  .sec-row{flex-wrap:wrap;gap:4px 12px}
}
.top-more-h{border-top:3px solid var(--ink);padding-top:12px;margin:30px 0 16px}
.top-more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:700px){.top-more{grid-template-columns:minmax(0,1fr)}}