/* Beloud v2 - one stylesheet, no framework. Mobile first; light + dark via prefers-color-scheme. */
:root{
  --bg:#f2f3f5;--card:#fff;--ink:#121417;--ink2:#3a3f47;--muted:#5d6470;--line:#e3e5e9;--chip:#f1f2f4;
  --red:#d6001c;--red-ink:#c4001a;--red-soft:#fde8ea;--brand:#f8001a;--focus:#1a73e8;
  --r:16px;--r-sm:12px;--shadow:0 1px 2px rgba(16,18,22,.06),0 4px 14px rgba(16,18,22,.05);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --head:"Roboto Condensed","Arial Narrow",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0f1012;--card:#18191c;--ink:#f1f2f4;--ink2:#d3d6db;--muted:#a3a9b3;--line:#2b2e33;--chip:#23252a;
    --red:#ff3348;--red-ink:#ff5466;--red-soft:#3a1519;--focus:#8ab4f8;--shadow:none}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 18px/1.5 var(--font);padding-bottom:calc(76px + env(safe-area-inset-bottom))}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;line-height:1.2}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--card);padding:10px 14px;border-radius:8px;z-index:50}
.skip:focus{left:8px}
.i{width:22px;height:22px;flex:none}
.spr{position:absolute;width:0;height:0;overflow:hidden}
.ph1.quiet{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.muted{color:var(--muted)}
.center{text-align:center}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font:600 17px/1 var(--font);cursor:pointer}
.btn-red{background:var(--red);border-color:var(--red);color:#fff}
@media (prefers-color-scheme:dark){.btn-red{color:#160003}}
.btn .i{width:20px;height:20px}

/* header */
.top{position:sticky;top:0;z-index:20;background:var(--card);border-bottom:1px solid var(--line)}
.top-in{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:10px 16px}
.logo img{height:30px;width:auto}
.tsearch{display:none}
.tlink{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;color:var(--ink)}
.tlink .i{width:26px;height:26px}
.tapp{min-height:42px;padding:0 16px;font-size:16px}
.tabs{border-top:1px solid var(--line)}
.tabs-in{max-width:1120px;margin:0 auto;display:flex;gap:6px;overflow-x:auto;padding:8px 12px;scrollbar-width:none}
.tabs-in::-webkit-scrollbar{display:none}
.tabs a{flex:none;padding:9px 16px;border-radius:999px;font-weight:600;font-size:17px;color:var(--muted);white-space:nowrap}
.tabs a.on{background:var(--red-soft);color:var(--red-ink)}

/* layout */
.wrap{max-width:1120px;margin:0 auto;padding:12px 0 24px}
.main{min-width:0}
.side{display:none}
.ph1{padding:14px 16px 8px}
.ph1 h1{font:700 30px/1.15 var(--head);letter-spacing:-.2px}
.lead{margin:8px 0 0;color:var(--muted);font-size:18px}
.kicker{display:flex;align-items:center;gap:6px;margin:0 0 6px;color:var(--red-ink);font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.4px}
.kicker .i{width:18px;height:18px}
.empty{padding:24px 16px;color:var(--muted)}
.rcount{padding:0 16px}

/* cards */
.feed{display:flex;flex-direction:column;gap:12px}
.card{position:relative;background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.card .ph{margin:0;position:relative;aspect-ratio:16/9;background:var(--chip)}
.card .ph img{width:100%;height:100%;object-fit:cover}
.cb{padding:12px 16px 6px}
.meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:15px;color:var(--muted);line-height:1.3}
.meta .sn{position:relative;z-index:2;color:var(--ink2);font-weight:700;text-transform:uppercase;font-size:14px;letter-spacing:.3px}
.meta .cty{position:relative;z-index:2;display:inline-flex;align-items:center;gap:3px;color:var(--ink2);font-weight:600}
.meta .ip{width:16px;height:16px}
.sic{width:22px;height:22px;border-radius:50%;object-fit:cover;background:var(--chip);flex:none}
.sic-0,.av-0{display:inline-flex;align-items:center;justify-content:center;background:var(--red-soft);color:var(--red-ink);font-weight:700;font-size:12px}
.vf{width:16px;height:16px;color:#1d9bf0;stroke-width:3}
.dot{opacity:.7}
.ct{margin:8px 0 6px;font:700 21px/1.28 var(--font);letter-spacing:-.1px}
.cs{margin:0 0 6px;color:var(--ink2);font-size:17px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.stretch::after{content:"";position:absolute;inset:0;z-index:1}
.card:hover .ct a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.badge{position:absolute;left:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:4px;background:var(--red);color:#fff;font:700 13px/1 var(--font);letter-spacing:.5px;padding:7px 10px;border-radius:8px}
.noimg .badge,.badge.sm{position:static;margin:0 0 6px;width:max-content}
.ib{width:14px;height:14px;fill:currentColor;stroke:none}
.hero .ph{aspect-ratio:4/3}
.hero .ov{position:absolute;inset:auto 0 0 0;padding:56px 16px 16px;background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,.55) 40%,rgba(0,0,0,.82) 100%);color:#fff}
.hero .badge{position:static;margin-bottom:10px;width:max-content}
.hero .ct{margin:0;font:700 25px/1.22 var(--head);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4)}

/* social row (same icons everywhere) */
.soc{display:flex;align-items:center;gap:2px;margin:2px -8px 0;color:var(--ink2)}
.soc>span,.soc>a{position:relative;z-index:2;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;border-radius:999px;font-size:16px}
.soc b{font-weight:600}
.soc .i{width:22px;height:22px}
.soc.sm>span{min-height:36px;font-size:15px}
.soc.sm .i{width:19px;height:19px}

/* small row cards (related) */
.card.row{display:flex;gap:12px;padding:12px 16px;box-shadow:none;border-top:1px solid var(--line);background:transparent}
.card.row .th{width:104px;height:78px;border-radius:10px;object-fit:cover;flex:none;background:var(--chip)}
.card.row .ct{margin:0 0 6px;font-size:17px;line-height:1.3}
.rb{min-width:0}

/* pager */
.pager{display:flex;justify-content:center;gap:12px;padding:20px 16px}

/* article */
.art{background:var(--card);padding:6px 16px 20px;box-shadow:var(--shadow)}
.art-top{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:6px 0 10px;color:var(--muted);font-size:15px}
.back{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:-10px;border-radius:50%;color:var(--ink)}
.back .i{width:26px;height:26px}
.chip{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;background:var(--red-soft);color:var(--red-ink);font-weight:700;font-size:15px}
.art-h{font:700 30px/1.18 var(--head);letter-spacing:-.2px;margin:2px 0 12px}
.art-src{padding:0 0 12px}
.art-src .meta{font-size:16px}
.art-ph{margin:0 -16px 16px}
.art-ph img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--chip)}
.art-body p{margin:0 0 16px;font-size:20px;line-height:1.65;color:var(--ink)}
.btn-read{width:100%;min-height:54px;font-size:18px;margin:4px 0 8px;border-color:var(--ink)}
.btn-read .i{width:20px;height:20px}
.art-soc{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:12px 0;padding:4px 0}
.art-soc .soc{justify-content:space-between;margin:0}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 6px}
.share-l{font-weight:700;margin-right:4px;width:100%}
.sh{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);font-weight:600;font-size:16px}
.sh .i{width:20px;height:20px}
.sh.fb .i{color:#1877f2}.sh.wa .i{color:#25d366}.sh.tg .i{color:#29a9eb}
.comments{margin-top:22px}
.comments h2,.related h2{font:700 23px/1.2 var(--head);margin:0 0 10px;display:flex;align-items:center;gap:10px}
.cnt{display:inline-flex;align-items:center;min-width:32px;height:28px;padding:0 10px;border-radius:999px;background:var(--chip);font:700 15px/1 var(--font);color:var(--ink2)}
.cml{list-style:none;margin:0;padding:0}
.cm{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.cm.hl{background:var(--red-soft);margin:0 -16px;padding:14px 16px;border-radius:12px}
.av{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;background:var(--chip)}
.cmb{min-width:0;flex:1}
.cmh{display:flex;align-items:center;gap:6px;font-size:15px;color:var(--muted)}
.cmh a{color:var(--ink);font-weight:700;font-size:16px}
.cmb p{margin:4px 0 2px;font-size:18px;line-height:1.5;overflow-wrap:anywhere}
.related{margin-top:24px}
.related .card.row{padding-left:0;padding-right:0}
.appbox{margin:18px 0 6px;padding:16px;border-radius:var(--r);background:var(--chip)}
.appbox-t{display:flex;gap:12px;align-items:center}
.appbox-t img{border-radius:12px}
.appbox p{margin:0;font-weight:600;font-size:17px}
.appbox-b{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.appbox-b .btn{flex:1 1 140px}

/* post */
.pauthor{display:flex;gap:12px;align-items:center;margin:4px 0 12px}
.pn{font-weight:700;font-size:18px}
.post-text{font:600 22px/1.4 var(--font);margin:0 0 14px;overflow-wrap:anywhere}
.linkcard{display:block;border:1.5px solid var(--line);border-radius:var(--r);overflow:hidden;margin:0 0 12px}
.linkcard img{width:100%;aspect-ratio:2/1;object-fit:cover;background:var(--chip)}
.lc-b{display:block;padding:12px 14px}
.lc-d{display:block;color:var(--muted);font-size:14px;text-transform:uppercase;letter-spacing:.3px}
.lc-t{display:block;font-weight:700;font-size:18px;margin-top:2px}

/* profiles, newsstand, search */
.profile{display:flex;align-items:center;gap:14px;padding:16px;background:var(--card);box-shadow:var(--shadow);margin-bottom:12px;flex-wrap:wrap}
.profile h1{font:700 26px/1.2 var(--head);display:flex;align-items:center;gap:6px}
.profile p{margin:4px 0 0}
.profile .btn{margin-left:auto}
.pav{width:64px;height:64px;border-radius:50%;object-fit:cover;background:var(--chip);font-size:26px}
.srcgrid{list-style:none;margin:0;padding:0 16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.srcgrid a{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:16px 10px;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);min-height:150px}
.srcgrid img,.srcgrid .av-0{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--chip);font-size:18px}
.sg-n{font-weight:700;font-size:16px;line-height:1.25}
.sg-c{color:var(--muted);font-size:14px}
.bigsearch{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.bigsearch input{flex:1 1 200px;min-height:52px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font:400 18px var(--font)}
.box{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;margin-bottom:12px}
.box.inl{margin:12px 16px}
.bh{display:flex;align-items:center;gap:8px;font:700 19px/1.2 var(--font);margin:0 0 10px}
.bh .i{color:var(--red)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags a{display:inline-flex;align-items:center;min-height:42px;padding:0 14px;border-radius:999px;background:var(--chip);font-weight:600;font-size:16px}
.tlist{list-style:none;margin:0;padding:0;counter-reset:t}
.tlist li{padding:10px 0;border-top:1px solid var(--line)}
.tlist li:first-child{border-top:0;padding-top:0}
.tlist a{display:flex;gap:10px;font-weight:700;font-size:16px;line-height:1.35}
.tn{color:var(--red);font:700 20px/1.1 var(--head);min-width:20px}
.tm{display:block;margin:4px 0 0 30px;color:var(--muted);font-size:14px}
.more{display:inline-block;margin-top:8px;color:var(--red-ink);font-weight:700}
.prose{background:var(--card);padding:16px;box-shadow:var(--shadow);font-size:18px;line-height:1.6;overflow-wrap:anywhere}
.prose h1{font:700 28px/1.2 var(--head);margin:6px 0 12px}
.prose h2{font:700 22px/1.25 var(--head);margin:22px 0 8px}
.prose h3{font:700 19px/1.3 var(--font);margin:18px 0 6px}
.prose a{color:var(--red-ink);text-decoration:underline}
.nf h1{font-size:28px}

/* footer + bottom bar */
.foot{border-top:1px solid var(--line);background:var(--card);margin-top:8px}
.foot-in{max-width:1120px;margin:0 auto;padding:22px 16px 28px;color:var(--muted);font-size:16px}
.foot-in p{margin:8px 0}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0}
.foot nav a{color:var(--ink2);font-weight:600;min-height:40px;display:inline-flex;align-items:center}
.bbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:space-around;background:var(--card);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.bbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:56px;justify-content:center;color:var(--muted);font-size:13px;font-weight:600;border-radius:12px}
.bbar .i{width:25px;height:25px}
.bbar a.on{color:var(--red-ink)}

/* small phones */
@media (max-width:360px){
  body{font-size:17px}
  .tapp{display:none}
  .ct{font-size:20px}
  .hero .ct{font-size:22px}
  .art-h,.ph1 h1{font-size:26px}
  .soc>span,.soc>a{padding:0 7px;gap:4px}
  .bbar a{font-size:12px}
}

/* tablets + desktop: centered feed column, rounded cards, right sidebar, no bottom bar */
@media (min-width:760px){
  body{padding-bottom:0}
  .bbar{display:none}
  .tlink{display:none}
  .tsearch{display:flex;margin-left:auto;align-items:center;background:var(--chip);border-radius:999px;padding:0 6px 0 16px;min-width:300px;border:1.5px solid transparent}
  .tsearch:focus-within{border-color:var(--focus)}
  .tsearch input{flex:1;border:0;background:transparent;color:var(--ink);font:400 17px var(--font);min-height:44px;outline:0}
  .tsearch button{border:0;background:transparent;color:var(--muted);width:40px;height:40px;cursor:pointer}
  .logo img{height:34px}
  .wrap{padding:20px 16px 32px}
  .card,.art,.profile,.prose{border-radius:var(--r)}
  .feed{gap:16px}
  .art{padding:10px 28px 28px}
  .art-ph{margin:0 0 18px}
  .art-ph img{border-radius:var(--r)}
  .art-h{font-size:38px}
  .ph1{padding:6px 4px 14px}
  .ph1 h1{font-size:36px}
  .srcgrid{padding:0}
  .box.inl{margin:12px 0}
  .share-l{width:auto}
  .cm.hl{margin:0 -12px;padding:14px 12px}
}
@media (min-width:1024px){
  .wrap{display:grid;grid-template-columns:minmax(0,680px) 340px;gap:28px;justify-content:center}
  .wrap.noside{grid-template-columns:minmax(0,760px)}
  .side{display:block;position:sticky;top:132px;align-self:start}
  .side .appbox{background:var(--card);box-shadow:var(--shadow)}
}