/* =====================================================================
   Viral News Media — front end.

   Light by default, dark when the reader's phone is dark. One file, no
   web fonts, no framework: the whole stylesheet is one request and the
   first paint needs nothing else.

   Motion rules kept throughout:
     · only transform and opacity are animated, so nothing reflows
     · will-change is never left on permanently
     · every animation is switched off under prefers-reduced-motion
   ===================================================================== */

/* ---------- tokens ---------- */
:root{
  /* surfaces — warm paper rather than pure white; easier on the eye and it
     makes white cards read as raised without needing a heavy shadow */
  --bg:#f7f6f2; --surface:#fff; --surface-2:#fbfaf8; --surface-3:#f1f0ec;
  --ink:#0e1f18; --body:#3c4a45; --mut:#6d7c76; --soft:#8b9993;
  --line:#e4e6e1; --line-2:#eceee9;

  --g900:#06231a; --g800:#0a3225; --g700:#0f5132; --g600:#177a4a;
  --g500:#1f9d63; --g400:#2fc47f; --g300:#63d9a0;
  --teal:#2fb8a8;
  --gold:#c9930f; --gold-2:#f5c542; --gold-3:#ffe08a;
  --rose:#c8394d;

  --r:20px; --r-sm:14px; --r-xs:9px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(12,32,24,.05), 0 2px 8px rgba(12,32,24,.04);
  --sh-2:0 2px 4px rgba(12,32,24,.05), 0 12px 28px rgba(12,32,24,.08);
  --sh-3:0 4px 8px rgba(12,32,24,.06), 0 24px 56px rgba(12,32,24,.13);
  --sh-glow:0 18px 46px rgba(15,81,50,.18);

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
  --t:.34s;

  --wrap:1180px;
  --measure:70ch;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0a100d; --surface:#111917; --surface-2:#141d1a; --surface-3:#1a2523;
    --ink:#e9f2ee; --body:#bccac4; --mut:#8fa09a; --soft:#7b8c86;
    --line:#22302c; --line-2:#1c2724;
    --gold:#f0c04a;
    --sh-1:0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.25);
    --sh-2:0 2px 6px rgba(0,0,0,.45), 0 14px 32px rgba(0,0,0,.35);
    --sh-3:0 6px 12px rgba(0,0,0,.5), 0 28px 64px rgba(0,0,0,.45);
    --sh-glow:0 18px 46px rgba(0,0,0,.5);
  }
}

*,*::before,*::after{box-sizing:border-box}

/* A class that sets `display` beats the browser's own [hidden] rule, which
   silently leaves overlays covering the page and swallowing clicks. */
[hidden]{display:none!important}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--body);
  font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
/* the whole page arrives rather than appearing */
body{animation:pagein .5s var(--ease) both}
@keyframes pagein{from{opacity:0}to{opacity:1}}

img{max-width:100%;height:auto;display:block}
a{color:var(--g600);text-decoration:none}
a:hover{color:var(--g500)}
h1,h2,h3,h4{color:var(--ink);line-height:1.22;letter-spacing:-.022em;margin:0 0 .5em;
  font-weight:800;text-wrap:balance}
p{margin:0 0 1.05em}
:focus-visible{outline:2px solid var(--g500);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 22px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--g700);color:#fff;
  padding:12px 20px;border-radius:0 0 var(--r-xs) 0;font-weight:700}
.skip:focus{left:0}

/* ---------- reading progress ---------- */
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:120;
  background:linear-gradient(90deg,var(--g500),var(--g400) 45%,var(--gold-2));
  box-shadow:0 0 12px rgba(47,196,127,.5);
  transition:width .12s linear}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:100;
  background:linear-gradient(140deg,var(--g900),var(--g800) 48%,#0c4430);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 6px 26px rgba(6,35,26,.28);
  transition:box-shadow var(--t) var(--ease)}
.site-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(47,196,127,.55),rgba(245,197,66,.45),transparent)}
.site-head.small{box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 10px 30px rgba(6,35,26,.4)}

.head-in{display:flex;align-items:center;gap:20px;padding:18px 22px;
  transition:padding var(--t) var(--ease)}
.site-head.small .head-in{padding:11px 22px}

.brand{display:flex;align-items:center;gap:12px;color:#fff;flex:none}
.brand:hover{text-decoration:none;color:#fff}
.brand-mark{width:44px;height:44px;flex:none;border-radius:14px;display:grid;place-items:center;
  font-weight:900;font-size:21px;color:#06231a;letter-spacing:-.03em;
  background:linear-gradient(135deg,var(--gold-2),var(--teal));
  box-shadow:0 6px 20px rgba(47,184,168,.4), 0 0 0 1px rgba(255,255,255,.2) inset;
  transition:transform .5s var(--ease-spring), box-shadow var(--t) var(--ease)}
.brand:hover .brand-mark{transform:rotate(-7deg) scale(1.07);
  box-shadow:0 10px 28px rgba(47,184,168,.55), 0 0 0 1px rgba(255,255,255,.35) inset}
.site-head.small .brand-mark{width:38px;height:38px;font-size:18px;border-radius:12px}
.brand-txt{min-width:0;line-height:1.25}
.brand-txt strong{display:block;font-size:18.5px;font-weight:800;letter-spacing:-.025em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-txt small{display:block;font-size:11.5px;color:#9fd4bd;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-head.small .brand-txt small{display:none}

.searchbox{display:flex;flex:1;max-width:430px;margin-left:auto;position:relative}
.searchbox input{flex:1;min-width:0;padding:11px 46px 11px 16px;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.09);color:#fff;
  font:inherit;font-size:14px;transition:background var(--t),border-color var(--t),box-shadow var(--t)}
.searchbox input::placeholder{color:rgba(255,255,255,.55)}
.searchbox input:focus{outline:none;background:rgba(255,255,255,.15);
  border-color:rgba(99,217,160,.65);box-shadow:0 0 0 4px rgba(47,196,127,.16)}
.searchbox button{position:absolute;right:4px;top:4px;bottom:4px;width:38px;border:0;cursor:pointer;
  border-radius:var(--r-pill);background:linear-gradient(135deg,var(--g500),var(--g400));
  color:#04170f;font-size:14px;line-height:1;
  transition:transform .25s var(--ease-spring),filter .2s}
.searchbox button:hover{transform:scale(1.06);filter:brightness(1.08)}
.searchbox.mob{display:none}

.navtoggle{display:none;width:44px;height:38px;background:none;border:0;cursor:pointer;
  padding:9px 8px;flex-direction:column;justify-content:space-between}
.navtoggle span{display:block;height:2px;border-radius:2px;background:#fff;
  transition:transform .3s var(--ease),opacity .2s}
.navtoggle.x span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.navtoggle.x span:nth-child(2){opacity:0}
.navtoggle.x span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.nav{border-top:1px solid rgba(255,255,255,.08)}
.nav-in{display:flex;gap:4px;padding:0 22px;overflow-x:auto;scrollbar-width:none}
.nav-in::-webkit-scrollbar{display:none}
.nav a{position:relative;display:inline-flex;align-items:center;gap:8px;flex:none;
  padding:13px 15px;color:#cfe6db;font-size:14.5px;font-weight:600;white-space:nowrap;
  transition:color .22s var(--ease)}
.nav a i{font-style:normal;font-size:15px;filter:saturate(.85);transition:transform .3s var(--ease-spring)}
.nav a::after{content:"";position:absolute;left:15px;right:15px;bottom:6px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--g400),var(--gold-2));
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover{color:#fff;text-decoration:none}
.nav a:hover i{transform:translateY(-2px) scale(1.12)}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1)}
.nav a.on{color:#fff}

/* ---------- country bar ---------- */
.countrybar{position:relative;background:var(--surface);border-bottom:1px solid var(--line);
  box-shadow:var(--sh-1)}
.cb-in{display:flex;align-items:center;gap:7px;padding:11px 22px;overflow-x:auto;
  scrollbar-width:none}
.cb-in::-webkit-scrollbar{display:none}
.countrybar::after{content:"";position:absolute;top:0;bottom:1px;right:0;width:46px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--surface))}
.cb-label{flex:none;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--soft);padding-right:4px}
.cb-in a{flex:none;padding:6px 14px;border-radius:var(--r-pill);font-size:13px;font-weight:600;
  color:var(--body);background:var(--surface-3);border:1px solid transparent;white-space:nowrap;
  transition:color .2s,background .2s,border-color .2s,transform .2s var(--ease)}
.cb-in a:hover{background:var(--g700);border-color:var(--g700);color:#fff;
  text-decoration:none;transform:translateY(-1px)}
.cb-in a.abroad{background:rgba(201,147,15,.1);color:#8a6a10;border-color:rgba(201,147,15,.24)}
.cb-in a.abroad:hover{background:var(--gold);color:#241c05;border-color:var(--gold)}
.cb-in a.any{background:rgba(47,184,168,.1);color:#12716a;border-color:rgba(47,184,168,.24)}
.cb-in a.any:hover{background:var(--teal);color:#04231f;border-color:var(--teal)}
@media (prefers-color-scheme: dark){
  .cb-in a.abroad{color:var(--gold-2)}
  .cb-in a.any{color:#6fd8cc}
}

/* ---------- layout ---------- */
/* <main> also carries .wrap, and .wrap wins on specificity — so the vertical
   padding has to be set on the combined selector or it silently disappears. */
main{display:block;min-height:52vh}
main.wrap{padding:30px 22px 64px}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 328px;gap:34px;align-items:start}

/* Long lists get cheaper: the browser skips layout and paint for cards that are
   still far below the fold, and the reserved height stops the scrollbar from
   jumping while it does. Deliberately NOT applied to the sidebar — containment
   and position:sticky do not get along — nor to article text, where a wrong
   size estimate is worse than the saving. */
.grid > .card{content-visibility:auto;contain-intrinsic-size:auto 420px}

.pagetitle{font-size:clamp(25px,3.4vw,34px);margin:0 0 8px;letter-spacing:-.03em}
.pagesub{color:var(--mut);font-size:15.5px;margin:0 0 26px;max-width:66ch}
.sectiontitle{font-size:21px;margin:38px 0 18px;display:flex;align-items:center;gap:12px}
.sectiontitle::before{content:"";width:4px;height:22px;border-radius:3px;flex:none;
  background:linear-gradient(180deg,var(--g400),var(--gold-2))}

/* ---------- featured ---------- */
.featured{position:relative;overflow:hidden;border-radius:var(--r);padding:34px;margin-bottom:36px;
  color:#fff;box-shadow:var(--sh-glow);
  background:linear-gradient(135deg,var(--g900) 0%,var(--g800) 42%,#0d5c3f 100%);
  display:grid;grid-template-columns:1.32fr 1fr;gap:30px;align-items:center;
  animation:heroin .7s var(--ease) both}
@keyframes heroin{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.featured::before{content:"";position:absolute;top:-120px;right:-90px;width:380px;height:380px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(245,197,66,.3),transparent 66%);
  animation:float 11s ease-in-out infinite}
.featured::after{content:"";position:absolute;left:-70px;bottom:-140px;width:300px;height:300px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(47,184,168,.24),transparent 68%);
  animation:float 14s ease-in-out infinite reverse}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(-22px,18px)}}
.featured > *{position:relative;z-index:1}
.feat-txt{min-width:0}
.featured .meta{color:#a8dcc9}
.featured .tag{background:rgba(255,255,255,.16);color:#fff;border:0;backdrop-filter:blur(6px)}
.featured h2{font-size:clamp(22px,2.9vw,31px);margin:12px 0 12px;letter-spacing:-.032em;color:#fff}
.featured h2 a{color:#fff;background-image:linear-gradient(var(--gold-2),var(--gold-2));
  background-size:0 2px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .4s var(--ease)}
.featured h2 a:hover{text-decoration:none;background-size:100% 2px}
.featured p{color:#cfe8dd;margin:0 0 14px;font-size:15.5px}
.featured .live{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-3)}
.featured .live span{width:7px;height:7px;border-radius:50%;background:var(--gold-2);
  box-shadow:0 0 0 0 rgba(245,197,66,.7);animation:pulse 2.2s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(245,197,66,.6)}
  70%{box-shadow:0 0 0 10px rgba(245,197,66,0)}
  100%{box-shadow:0 0 0 0 rgba(245,197,66,0)}
}
.feat-img{display:block;border-radius:var(--r-sm);overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.1)}
.feat-img .thumb{background:rgba(255,255,255,.07)}
.feat-img .thumb img{transition:transform .8s var(--ease)}
.feat-img:hover .thumb img{transform:scale(1.06)}

/* ---------- cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(234px,1fr));gap:20px}
.card{position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-1);
  transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .38s var(--ease)}
.card::after{content:"";position:absolute;inset:0;border-radius:var(--r);pointer-events:none;
  box-shadow:0 0 0 1px rgba(31,157,99,0) inset;transition:box-shadow .38s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:transparent}
.card:hover::after{box-shadow:0 0 0 1px rgba(31,157,99,.3) inset}
.card-img{display:block;overflow:hidden;position:relative}
.card-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:17px;margin:10px 0 8px;line-height:1.35;letter-spacing:-.02em}
.card h3 a{color:var(--ink);transition:color .25s var(--ease)}
.card:hover h3 a{color:var(--g600)}
.card p{margin:0 0 14px;font-size:14.2px;color:var(--mut);line-height:1.6}
.card .foot{margin-top:auto;font-size:12.5px}

.thumb{position:relative;aspect-ratio:16/9;background:var(--surface-3);overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .75s var(--ease)}
.card:hover .thumb img{transform:scale(1.07)}
.thumb::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(6,35,26,.14));
  opacity:0;transition:opacity .38s var(--ease)}
.card:hover .thumb::after{opacity:1}
.thumb.ph{display:grid;place-items:center;gap:3px;
  background:linear-gradient(135deg,var(--c1,#274060),var(--c2,#5a7ca8))}
.thumb.ph::before{content:"";position:absolute;inset:0;
  background:radial-gradient(150px 100px at 78% 16%,rgba(255,255,255,.24),transparent 70%)}
.ph-ico{font-size:34px;line-height:1;filter:drop-shadow(0 3px 8px rgba(0,0,0,.3));z-index:1}
.ph-txt{font-size:10.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.88);z-index:1}

@supports not (aspect-ratio: 16/9){
  .thumb{height:0;padding-bottom:56.25%}
  .thumb.ph{padding-bottom:0;height:172px}
}

/* ---------- meta + tags ---------- */
.meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12.5px;color:var(--soft)}
.tag{font-size:10.5px;font-weight:800;letter-spacing:.04em;padding:5px 11px;border-radius:var(--r-pill);
  color:#fff;white-space:nowrap;
  background:linear-gradient(135deg,var(--c1,#0f5132),var(--c2,#2f9e63));
  box-shadow:0 2px 8px rgba(15,81,50,.22)}
a.tag{transition:transform .22s var(--ease-spring),filter .22s}
a.tag:hover{text-decoration:none;filter:brightness(1.09);transform:translateY(-1px)}
.tag.c{background:var(--surface-3);color:var(--mut);border:1px solid var(--line);
  font-weight:700;box-shadow:none}
a.tag.c:hover{background:var(--g700);color:#fff;border-color:var(--g700)}
.dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.45;display:inline-block}

/* ---------- article ---------- */
.crumbs{font-size:13px;color:var(--soft);margin-bottom:16px}
.crumbs a{color:var(--mut);font-weight:600}
.crumbs a:hover{color:var(--g600)}

.article{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,3.4vw,40px);box-shadow:var(--sh-1)}
.article h1{font-size:clamp(26px,4vw,40px);margin:14px 0 14px;letter-spacing:-.034em;line-height:1.16}
.byline{color:var(--soft);font-size:13px;margin-bottom:22px;
  padding-bottom:18px;border-bottom:1px solid var(--line-2)}
.hero{position:relative;aspect-ratio:21/9;border-radius:var(--r-sm);overflow:hidden;
  background:var(--surface-3);margin-bottom:26px;box-shadow:var(--sh-2)}
.hero img{width:100%;height:100%;object-fit:cover}
.hero.ph{display:grid;place-items:center;
  background:linear-gradient(135deg,var(--c1,#274060),var(--c2,#5a7ca8))}
@supports not (aspect-ratio: 21/9){ .hero{height:0;padding-bottom:42.8%} }

.body{font-size:17.2px;line-height:1.78;color:var(--body);max-width:var(--measure)}
.body h2{font-size:clamp(20px,2.5vw,25px);margin:1.9em 0 .6em;letter-spacing:-.026em;
  display:flex;align-items:baseline;gap:11px}
.body h2::before{content:"";width:3px;height:.95em;border-radius:3px;flex:none;
  background:linear-gradient(180deg,var(--g400),var(--gold-2))}
.body h3{font-size:19px;margin:1.6em 0 .5em;letter-spacing:-.022em}
.body a{color:var(--g600);font-weight:600;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px;background-position:0 92%;background-repeat:no-repeat;
  transition:background-size .3s var(--ease),color .2s}
.body a:hover{color:var(--g500);background-size:100% 2px}
.body ul,.body ol{padding-left:0;margin:0 0 1.2em;list-style:none}
.body ul li{position:relative;padding-left:26px;margin-bottom:.62em}
.body ul li::before{content:"";position:absolute;left:6px;top:.66em;width:7px;height:7px;
  border-radius:50%;background:linear-gradient(135deg,var(--g400),var(--g500))}
.body ol{counter-reset:vn;padding-left:0}
.body ol li{position:relative;padding-left:34px;margin-bottom:.62em;counter-increment:vn}
.body ol li::before{content:counter(vn);position:absolute;left:0;top:.16em;
  width:23px;height:23px;border-radius:8px;display:grid;place-items:center;
  font-size:11.5px;font-weight:800;color:#04170f;
  background:linear-gradient(135deg,var(--g400),var(--g500))}
.body blockquote{margin:1.5em 0;padding:16px 22px;border-radius:0 var(--r-sm) var(--r-sm) 0;
  border-left:3px solid var(--g500);background:var(--surface-2);color:var(--ink);
  font-size:17px;font-style:italic}
.body img{border-radius:var(--r-sm);margin:1.4em 0;box-shadow:var(--sh-2)}
.body figure{margin:1.5em 0}
.body figcaption{font-size:13px;color:var(--soft);text-align:center;margin-top:8px}
.body code{background:var(--surface-3);border:1px solid var(--line);border-radius:6px;
  padding:2px 7px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.87em}
.body pre{background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:16px;overflow-x:auto}
.body pre code{background:none;border:0;padding:0}
.body hr{border:0;height:1px;background:var(--line);margin:2em 0}
/* wide tables scroll inside their own box; the page never moves sideways */
.body table{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:15px;
  display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.body th,.body td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left;
  vertical-align:top}
.body thead th{background:var(--surface-3);color:var(--ink);font-size:12px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.body tbody tr{transition:background .2s}
.body tbody tr:hover{background:var(--surface-2)}

.notice{margin-top:26px;padding:16px 20px;border-radius:var(--r-sm);font-size:14.5px;
  background:rgba(201,147,15,.08);border:1px solid rgba(201,147,15,.24);color:var(--ink)}
.notice strong{color:var(--gold)}

.share{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:28px;
  padding-top:22px;border-top:1px solid var(--line-2);font-size:13.5px;color:var(--soft)}
.sh{padding:9px 17px;border-radius:var(--r-pill);font-size:13px;font-weight:700;color:#fff;
  border:0;cursor:pointer;font-family:inherit;
  transition:transform .25s var(--ease-spring),filter .2s,box-shadow .25s}
.sh:hover{text-decoration:none;color:#fff;transform:translateY(-2px);filter:brightness(1.07);
  box-shadow:var(--sh-2)}
.sh.wa{background:linear-gradient(135deg,#1da851,#25d366)}
.sh.fb{background:linear-gradient(135deg,#1559b8,#1877f2)}
.sh.tg{background:linear-gradient(135deg,#1e88c4,#2aabee)}
.sh.cp{background:var(--surface-3);color:var(--body);border:1px solid var(--line)}
.sh.cp:hover{color:var(--ink)}
.sh.cp.done{background:var(--g500);color:#fff;border-color:var(--g500)}

/* ---------- sidebar ---------- */
.side{display:flex;flex-direction:column;gap:20px;position:sticky;top:96px}
.widget{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;box-shadow:var(--sh-1)}
.widget h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.13em;color:var(--soft);
  margin:0 0 15px;display:flex;align-items:center;gap:9px}
.widget h4::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.wico{font-size:15px}
.widget.alert{background:linear-gradient(150deg,rgba(200,57,77,.06),rgba(201,147,15,.06));
  border-color:rgba(200,57,77,.2)}
.widget.alert p{font-size:14px;color:var(--body);margin:0 0 14px}

.mostread{list-style:none;margin:0;padding:0}
.mostread li + li{margin-top:3px;padding-top:12px;border-top:1px solid var(--line-2)}
.mostread a{display:flex;gap:12px;align-items:flex-start;color:var(--ink);font-size:14.2px;
  font-weight:600;line-height:1.45;padding:3px 0;transition:color .22s}
.mostread a:hover{color:var(--g600);text-decoration:none}
.num{flex:none;width:25px;height:25px;border-radius:9px;display:grid;place-items:center;
  font-size:12px;font-weight:800;color:#04170f;
  background:linear-gradient(135deg,var(--g400),var(--g500));
  transition:transform .3s var(--ease-spring)}
.mostread a:hover .num{transform:scale(1.12) rotate(-5deg)}

.chipgroup + .chipgroup{margin-top:16px}
.cg-label{display:block;font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--soft);margin-bottom:9px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--r-pill);
  background:var(--surface-3);border:1px solid var(--line);color:var(--body);
  font-size:12.5px;font-weight:600;
  transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease)}
.chip b{font-size:10.5px;font-weight:800;color:var(--soft);transition:color .2s}
.chip:hover{background:var(--g700);border-color:var(--g700);color:#fff;text-decoration:none;
  transform:translateY(-1px)}
.chip:hover b{color:var(--gold-3)}
.chip.abroad{background:rgba(201,147,15,.09);border-color:rgba(201,147,15,.22)}
.chip.abroad:hover{background:var(--gold);border-color:var(--gold);color:#241c05}

.btn-ghost{display:inline-flex;align-items:center;gap:7px;padding:9px 17px;border-radius:var(--r-pill);
  border:1px solid var(--g500);color:var(--g600);font-size:13.5px;font-weight:700;
  transition:background .25s,color .25s,transform .25s var(--ease)}
.btn-ghost:hover{background:var(--g600);color:#fff;text-decoration:none;transform:translateY(-2px)}

/* ---------- pagination ---------- */
.pager{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:38px}
.pager a,.pager span{min-width:42px;text-align:center;padding:10px 14px;border-radius:var(--r-xs);
  font-size:14px;font-weight:700;background:var(--surface);border:1px solid var(--line);
  color:var(--mut);transition:transform .22s var(--ease),border-color .22s,color .22s,box-shadow .22s}
.pager a:hover{color:var(--g600);border-color:var(--g500);text-decoration:none;
  transform:translateY(-2px);box-shadow:var(--sh-1)}
.pager .cur{background:linear-gradient(135deg,var(--g600),var(--g500));border-color:transparent;
  color:#fff;box-shadow:0 6px 18px rgba(31,157,99,.3)}
.pager .gap{border:0;background:none;min-width:22px;padding:10px 2px}

/* ---------- footer ---------- */
.site-foot{position:relative;margin-top:56px;padding:46px 0 26px;color:#c6ded4;
  background:linear-gradient(160deg,var(--g900),var(--g800) 60%,#0b3a2a)}
.site-foot::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(47,196,127,.5),rgba(245,197,66,.4),transparent)}
.foot-in{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:34px}
.foot-col strong{display:block;color:#fff;font-size:14.5px;font-weight:800;margin-bottom:14px;
  letter-spacing:-.01em}
.foot-col p{font-size:13.5px;line-height:1.65;color:#a9c8bc;margin:0 0 10px}
.foot-note{font-size:12.5px;color:#87a99d}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{margin-bottom:8px}
.foot-col a{color:#c6ded4;font-size:13.5px;position:relative;
  transition:color .2s,padding-left .25s var(--ease)}
.foot-col a:hover{color:var(--gold-3);text-decoration:none;padding-left:6px}
.copy{margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);
  font-size:12.5px;color:#87a99d;text-align:center}

/* ---------- back to top ---------- */
.totop{position:fixed;right:20px;bottom:20px;z-index:90;width:46px;height:46px;border-radius:50%;
  border:0;cursor:pointer;font-size:19px;color:#04170f;
  background:linear-gradient(135deg,var(--g400),var(--g500));
  box-shadow:0 10px 26px rgba(15,81,50,.36);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);
  transition:opacity .3s var(--ease),transform .35s var(--ease-spring),visibility .3s}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop:hover{transform:translateY(-3px) scale(1.06)}

/* ---------- cookie ---------- */
.cookie{position:fixed;left:14px;right:14px;bottom:14px;z-index:110;display:flex;
  align-items:center;gap:16px;flex-wrap:wrap;
  padding:16px 20px;border-radius:var(--r-sm);
  background:rgba(6,35,26,.96);color:#dbeee5;font-size:13.5px;
  box-shadow:0 -4px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.07) inset;
  backdrop-filter:blur(10px);
  animation:cookiein .5s var(--ease) both}
@keyframes cookiein{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.cookie p{margin:0;flex:1;min-width:220px;line-height:1.55}
.cookie a{color:var(--gold-3);font-weight:600}
.cookie button{padding:11px 26px;border-radius:var(--r-pill);border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--g400),var(--g500));color:#04170f;
  font-weight:800;font-size:13.5px;font-family:inherit;
  transition:transform .25s var(--ease-spring),filter .2s}
.cookie button:hover{transform:translateY(-2px) scale(1.02);filter:brightness(1.08)}

/* ---------- forms ---------- */
.form{display:grid;gap:15px;max-width:560px;margin-top:22px}
.form label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--soft);display:block;margin-bottom:6px}
.form input,.form textarea{width:100%;padding:13px 15px;border-radius:var(--r-xs);
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font:inherit;font-size:15px;transition:border-color .22s,box-shadow .22s}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--g500);
  box-shadow:0 0 0 4px rgba(31,157,99,.14)}
.form button{justify-self:start;padding:13px 30px;border-radius:var(--r-pill);border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--g600),var(--g500));color:#fff;
  font-weight:800;font-size:15px;font-family:inherit;box-shadow:0 8px 22px rgba(31,157,99,.28);
  transition:transform .25s var(--ease-spring),box-shadow .25s,filter .2s}
.form button:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 12px 30px rgba(31,157,99,.36)}
.form .ok{color:var(--g600);font-weight:600}
.form .err{color:var(--rose);font-weight:600}

/* ---------- ads ---------- */
.ad{margin:22px 0;text-align:center;overflow:hidden}
.ad-label{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--soft);margin-bottom:8px}
.ad-in_article{margin:32px 0}
.grid > .adrow{grid-column:1/-1}
.ad-before_content{margin:0 0 20px}
.ad-between_posts{margin:4px 0}

.stickyad{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--surface);
  border-top:1px solid var(--line);box-shadow:0 -4px 20px rgba(12,32,24,.14);
  padding:7px 44px 7px 10px;text-align:center;min-height:56px;
  animation:cookiein .45s var(--ease) both}
.stickyad.prev{position:static;box-shadow:none;border:1px dashed var(--line);border-radius:var(--r-sm);
  margin:18px 0;animation:none}
.stickyad-x{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border-radius:50%;border:1px solid var(--line);cursor:pointer;
  background:var(--surface-3);color:var(--mut);font-size:16px;line-height:1;
  transition:background .2s,color .2s}
.stickyad-x:hover{background:var(--rose);color:#fff;border-color:var(--rose)}
@media(min-width:721px){ .stickyad:not(.prev){display:none} }

/* ---------- placement preview (?vnpreview=1) ---------- */
.ad-prev{border:2px dashed var(--line);border-radius:var(--r-sm);background:var(--surface-2);
  padding:14px 16px;margin:18px 0;text-align:left}
.ad-prev.on{border-color:var(--g500);background:rgba(31,157,99,.05)}
.ad-prev b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:3px}
.ad-prev span{display:block;font-size:12.5px;color:var(--mut)}
.ad-prev i{display:block;font-size:12.5px;font-style:normal;margin-top:7px;color:var(--gold)}
.ad-prev.on i{color:var(--g600)}
.ad-prev-live{margin-top:11px;padding-top:11px;border-top:1px dashed var(--line)}
.grid > .adrow .ad-prev{margin:0}

/* ---------- scroll reveal ---------- */
/* The stagger is done with nth-child delays rather than per-element inline
   styles: no JavaScript writes to the DOM, and the browser can keep the whole
   grid on one compositor layer. */
.reveal{opacity:0;transform:translateY(20px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
.grid > .reveal:nth-child(2){transition-delay:.06s}
.grid > .reveal:nth-child(3){transition-delay:.12s}
.grid > .reveal:nth-child(4){transition-delay:.18s}
.grid > .reveal:nth-child(5){transition-delay:.24s}
.grid > .reveal:nth-child(6){transition-delay:.3s}
.side > .reveal:nth-child(2){transition-delay:.08s}
.side > .reveal:nth-child(3){transition-delay:.16s}

/* ---------- estimated salary ---------- */
/* Card: a gold strip directly BELOW the picture, first thing in the body, so
   the thumbnail is never covered. */
.paybadge{position:relative;overflow:hidden;order:-1;
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  margin:0 0 12px;padding:8px 13px;border-radius:12px;
  background:linear-gradient(135deg,#fff6d9,#ffe9ae 55%,#f9d787);
  border:1px solid #efd48c;color:#5a4406;
  box-shadow:0 3px 12px rgba(190,150,30,.18);
  transform:translateY(-6px);opacity:0;
  transition:transform .45s var(--ease-spring),opacity .35s ease,
             box-shadow .25s,border-color .25s}
.reveal.in .paybadge{transform:none;opacity:1}
.paybadge:hover{text-decoration:none;border-color:#e0b840;
  box-shadow:0 6px 18px rgba(190,150,30,.3)}
.paybadge i{flex:none;font-style:normal;font-size:9.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:#8a6a10;opacity:.92}
.paybadge i::before{content:"💰 ";letter-spacing:0}
.paybadge b{max-width:100%;font-size:15.5px;font-weight:800;letter-spacing:-.024em;color:#241c05;
  line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.paybadge::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);
  transform:skewX(-20deg);animation:payshine 5.5s ease-in-out infinite}
@keyframes payshine{0%,55%{left:-70%}90%,100%{left:140%}}

/* Featured post: the same value as a pill on the dark hero panel. */
.feat-pay{display:inline-flex;align-items:center;gap:12px;position:relative;overflow:hidden;
  margin:0 0 14px;padding:9px 17px 9px 10px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.1);border:1px solid rgba(245,197,66,.42);
  box-shadow:0 6px 20px rgba(0,0,0,.22);backdrop-filter:blur(6px);
  transition:transform .25s var(--ease-spring),background .25s,border-color .25s}
.feat-pay:hover{text-decoration:none;transform:translateY(-2px);
  background:rgba(255,255,255,.17);border-color:rgba(245,197,66,.78)}
.fp-ico{flex:none;width:33px;height:33px;border-radius:50%;display:grid;place-items:center;
  font-size:16px;background:linear-gradient(135deg,var(--gold-2),#e0a92f);
  animation:paybob 3.4s ease-in-out infinite}
.fp-txt{display:flex;flex-direction:column;gap:1px;line-height:1.15;min-width:0}
.fp-txt i{font-style:normal;font-size:9px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:#a8dcc9}
.fp-txt b{font-size:17px;font-weight:800;letter-spacing:-.024em;color:var(--gold-3);
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feat-pay::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);
  transform:skewX(-20deg);animation:payshine 6.5s ease-in-out infinite}

/* Article: a full-width highlighted row directly under the picture. */
.payrow{position:relative;overflow:hidden;display:flex;align-items:center;gap:17px;flex-wrap:wrap;
  margin:-6px 0 26px;padding:18px 22px;border-radius:var(--r-sm);
  background:linear-gradient(120deg,var(--g900),#15694b 55%,#1b9c78);
  color:#fff;box-shadow:var(--sh-glow);
  opacity:0;transform:translateY(16px)}
.reveal.in.payrow{opacity:1;transform:none;
  transition:opacity .55s ease,transform .6s var(--ease)}
.payrow::before{content:"";position:absolute;top:-70px;right:-40px;width:240px;height:240px;
  border-radius:50%;background:radial-gradient(circle,rgba(245,197,66,.34),transparent 66%);
  animation:float 11s ease-in-out infinite}
.payrow > *{position:relative;z-index:1}
.payrow-ico{flex:none;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;
  font-size:22px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);
  animation:paybob 3.4s ease-in-out infinite}
@keyframes paybob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-4px) rotate(4deg)}}
.payrow-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.payrow-label{font-size:10px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  color:#9fd8c4}
.payrow-fig{font-size:clamp(22px,3.2vw,28px);font-weight:800;letter-spacing:-.032em;line-height:1.15;
  color:var(--gold-3);font-variant-numeric:tabular-nums}
.payrow-src{margin-left:auto;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:#a8dcc9;background:rgba(255,255,255,.1);padding:6px 12px;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.14)}

/* ---------- apply button (Admin → Apply Button) ---------- */
.applywrap{margin:30px 0 0;text-align:center}
.btn-apply{display:inline-flex;align-items:center;gap:11px;padding:15px 32px;border-radius:var(--r-pill);
  background:linear-gradient(135deg,var(--g600),var(--g500));color:#fff;
  font-weight:800;font-size:16px;box-shadow:0 10px 28px rgba(31,157,99,.32);
  transition:transform .25s var(--ease-spring),box-shadow .25s,filter .2s}
.btn-apply span{transition:transform .25s var(--ease)}
.btn-apply:hover{text-decoration:none;color:#fff;transform:translateY(-3px);
  box-shadow:0 16px 36px rgba(31,157,99,.4);filter:brightness(1.05)}
.btn-apply:hover span{transform:translateX(5px)}

.cta{position:relative;overflow:hidden;margin:30px 0 0;padding:26px 28px;border-radius:var(--r);
  text-align:center;color:#fff;box-shadow:var(--sh-glow)}
.cta::before{content:"";position:absolute;top:-80px;right:-60px;width:250px;height:250px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 65%);
  animation:float 11s ease-in-out infinite}
.cta > *{position:relative;z-index:1}
.cta-green{background:linear-gradient(125deg,var(--g900),#15694b 55%,#1b9c78)}
.cta-gold {background:linear-gradient(125deg,#4a3708,#a8790f 55%,#e0a92f);color:#241c05}
.cta-blue {background:linear-gradient(125deg,#0a2740,#12507e 55%,#2183c4)}
.cta-red  {background:linear-gradient(125deg,#3d0d16,#8a1f2f 55%,#c8394d)}
.cta-note{margin:0 0 16px;font-size:16px;font-weight:600;line-height:1.5;opacity:.95}
.cta-gold .cta-note{opacity:1}
.cta-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:11px;
  padding:16px 36px;border-radius:var(--r-pill);background:#fff;color:#0f2a1e;
  font-weight:800;font-size:16.5px;letter-spacing:-.012em;box-shadow:0 10px 30px rgba(0,0,0,.28);
  transition:transform .25s var(--ease-spring),box-shadow .25s}
.cta-gold .cta-btn{background:#241c05;color:var(--gold-3)}
.cta-btn span{transition:transform .25s var(--ease)}
.cta-btn:hover{text-decoration:none;transform:translateY(-3px) scale(1.02);
  box-shadow:0 16px 38px rgba(0,0,0,.34)}
.cta-btn:hover span{transform:translateX(5px)}
.cta-btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);animation:payshine 4.5s ease-in-out infinite}
.cta-gold .cta-btn::after{background:linear-gradient(100deg,transparent,rgba(255,224,138,.28),transparent)}
.cta-dis{margin:13px 0 0;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.72}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .cols{grid-template-columns:1fr}
  .side{position:static}
  .foot-in{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  body{font-size:15.5px}
  .head-in{flex-wrap:wrap;gap:12px;padding:14px 18px}
  .searchbox.desk{display:none}
  .searchbox.mob{display:flex;max-width:none;margin:10px 0 4px}
  .navtoggle{display:flex;margin-left:auto}
  .nav{display:none}
  .nav.open{display:block;animation:navin .3s var(--ease) both}
  @keyframes navin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .nav-in{flex-direction:column;overflow:visible;padding:8px 18px 16px}
  .nav a{width:100%;padding:12px 14px;border-radius:11px}
  .nav a::after{display:none}
  .nav a:hover,.nav a.on{background:rgba(255,255,255,.08)}
  main{padding:22px 18px 54px}
  .wrap{padding:0 18px}
  .featured{padding:22px;gap:20px;grid-template-columns:1fr}
  .feat-img{order:-1}
  .grid{grid-template-columns:1fr;gap:18px}
  .article{padding:20px 18px}
  .body{font-size:16.5px}
  .foot-in{grid-template-columns:1fr;gap:26px}
  .cookie{flex-direction:column;align-items:stretch;text-align:center;left:10px;right:10px;bottom:10px}
  .cookie button{width:100%}
  .totop{right:14px;bottom:74px;width:42px;height:42px}
  .payrow{gap:13px;padding:15px 16px}
  .payrow-src{margin-left:0;width:100%;text-align:center}
  .share{gap:7px}
  .sh{padding:8px 14px;font-size:12.5px}
}

/* ---------- respect reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal,.paybadge,.payrow{opacity:1!important;transform:none!important}
  body{animation:none}
}

/* ---------- print ---------- */
@media print{
  .site-head,.countrybar,.side,.share,.cookie,.totop,.ad,.cta,.applywrap,.site-foot,.progress{display:none!important}
  .article{border:0;box-shadow:none;padding:0}
  body{background:#fff}
}