/* Versys Media Journal: compact editorial system with readable articles. */
:root {
  --bg:#08090b; --panel:#101319; --panel2:#171b23; --line:#2a3039;
  --text:#f4f5f7; --muted:#abb2c0; --red:#e30b31; --max:1100px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.65 'Montserrat',Arial,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid #f89cab; outline-offset:3px; }
#vm-header .versys-header,#vm-header .versys-header.scrolled { background:#08090b!important; border-bottom:1px solid #232831!important; box-shadow:none!important; }
#vm-header .versys-nav-link,#vm-header .versys-logo-text { color:#fff!important; }
#vm-header .versys-nav-link:hover,#vm-header .versys-nav-link.active { color:#f64968!important; }
#vm-header .versys-burger-line { background:#fff!important; }
#vm-header .versys-dropdown { background:#11151c!important; }
#vm-header .versys-dropdown-title { color:#fff!important; }
#vm-header .versys-drawer { background:#0e1118!important; }
#vm-header .versys-drawer-link,#vm-header .versys-drawer-drop a { color:#fff!important; }
.container { width:min(var(--max),calc(100% - 40px)); margin-inline:auto; }
.masthead { border-bottom:1px solid var(--line); padding:46px 0 42px; background:radial-gradient(circle at 90% 10%,rgba(227,11,49,.10),transparent 44%); }
.eyebrow { margin:0 0 9px; color:#fb738c; letter-spacing:.15em; text-transform:uppercase; font-size:10px; font-weight:800; }
.masthead h1,.article-heading h1 { margin:0; letter-spacing:-.047em; line-height:1.1; font-size:clamp(34px,4.4vw,55px); }
.masthead .intro { max-width:720px; color:var(--muted); font-size:15px; margin:13px 0 0; line-height:1.65; }
.editorial-note { max-width:730px; color:#9da7b8; font-size:12px; margin-top:13px; }
.blog-main { padding:36px 0 70px; }
.sectionbar { display:flex; gap:15px; align-items:end; justify-content:space-between; margin-bottom:18px; }
.sectionbar h2 { font-size:19px; letter-spacing:-.02em; margin:0; }
.count { font-size:12px; color:var(--muted); }
/* Featured story is intentionally horizontal on desktop, not a giant poster. */
.feature { display:grid; grid-template-columns:minmax(0,46%) minmax(0,54%); min-height:0; height:318px; align-items:stretch; border:1px solid var(--line); border-radius:11px; overflow:hidden; background:#11151c; margin-bottom:30px; text-decoration:none; transition:border-color .17s ease,transform .17s ease; }
.feature img { display:block; width:100%; height:100%; min-height:0; object-fit:cover; object-position:center; background:#171b23; }
.feature .copy { display:flex; flex-direction:column; justify-content:center; padding:25px 29px; min-width:0; }
.chip { font-size:10px; text-transform:uppercase; letter-spacing:.10em; font-weight:800; color:#f18fa3; }
.feature h2 { font-size:clamp(23px,2.4vw,30px); line-height:1.19; letter-spacing:-.035em; margin:10px 0; }
.feature p { color:var(--muted); margin:0 0 12px; font-size:13px; line-height:1.62; }
.readlink { color:#fff; font-size:12px; font-weight:800; }
.filters { background:#11151c; border:1px solid var(--line); border-radius:10px; padding:14px; display:flex; gap:11px; align-items:end; flex-wrap:wrap; margin-bottom:18px; }
.field { display:flex; flex-direction:column; gap:5px; flex:1 1 235px; min-width:0; }
.field.small { flex:0 1 230px; }
.field label { font-size:11px; font-weight:700; color:#d5d9e1; }
.field input,.field select { min-height:43px; width:100%; border:1px solid #384150; border-radius:8px; background:#080b10; color:#fff; padding:0 12px; font:inherit; font-size:13px; }
.reset { min-height:43px; border:1px solid #394451; border-radius:8px; background:#242a33; color:#fff; padding:0 14px; font-size:12px; font-weight:700; cursor:pointer; }
.reset:hover { background:#333b49; }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.post { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#10141b; display:flex; flex-direction:column; text-decoration:none; min-width:0; transition:transform .17s,border-color .17s; }
.post:hover,.feature:hover { border-color:#e04460; transform:translateY(-2px); }
.post img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; object-position:center; background:#171b23; }
.post-body { padding:15px 16px 16px; display:flex; flex-direction:column; flex:1; min-width:0; }
.post h3 { font-size:16px; line-height:1.3; letter-spacing:-.025em; margin:8px 0; }
.post p { color:var(--muted); font-size:12px; line-height:1.62; margin:0 0 14px; }
.post-bottom { margin-top:auto; display:flex; justify-content:space-between; gap:10px; align-items:center; font-size:11px; color:#acb5c4; }
.empty { border:1px dashed #58616c; border-radius:10px; padding:22px; text-align:center; color:var(--muted); }
.empty[hidden],.post[hidden],.feature[hidden] { display:none!important; }
/* Article pages are narrower than the listing for comfortable long-form reading. */
.breadcrumb { padding-top:20px; color:#b0bacb; font-size:12px; }
.breadcrumb a { text-decoration:none; color:#e6e8f0; }
.breadcrumb a:hover { text-decoration:underline; }
.article-heading { max-width:860px; padding:26px 0 21px; }
.article-heading h1 { font-size:clamp(33px,4.1vw,51px); }
.article-heading .lead { font-size:16px; color:#b5becd; max-width:750px; line-height:1.7; margin:16px 0; }
.meta { font-size:11px; color:#b1b9c6; display:flex; gap:9px 18px; flex-wrap:wrap; }
.hero-image { border-radius:11px; display:block; width:100%; max-height:470px; height:auto; aspect-ratio:16/9; object-fit:cover; border:1px solid #303640; background:#171b23; }
.caption { color:#9da8b8; font-size:11px; padding:8px 0; }
.caption a { color:#cad3df; text-underline-offset:3px; }
.article-layout { display:grid; grid-template-columns:minmax(0,735px) minmax(180px,1fr); gap:35px; align-items:start; margin:29px 0 58px; }
.article { min-width:0; font-size:15px; line-height:1.8; color:#d2d8e2; overflow-wrap:break-word; }
.article h2 { font-size:25px; line-height:1.28; letter-spacing:-.03em; margin:35px 0 12px; color:#fff; scroll-margin-top:85px; }
.article h3 { font-size:19px; color:#fff; margin:24px 0 7px; }
.article p { margin:0 0 17px; }
.article .opening { font-size:17px; color:#f3f4f6; line-height:1.75; }
.article a { color:#ff8297; text-underline-offset:3px; overflow-wrap:anywhere; }
.article a:hover { color:#fff; }
.article :is(img,video,iframe) { max-width:100%; }
.answer { padding:19px; border-left:3px solid #ec3156; background:#191820; border-radius:0 9px 9px 0; color:#eef0f4; margin:24px 0; font-size:14px; }
.article ol,.article ul { padding-left:23px; margin:0 0 21px; }
.article li { padding-bottom:6px; }
.article table { display:block; width:100%; max-width:100%; overflow-x:auto; border-collapse:collapse; font-size:13px; margin:21px 0 27px; line-height:1.6; -webkit-overflow-scrolling:touch; }
.article th,.article td { padding:11px 10px; border-bottom:1px solid #39414b; text-align:left; vertical-align:top; }
.article th { color:#fff; background:#19202a; }
.toolbox { border:1px solid #38414e; background:#121922; padding:18px; margin:24px 0; border-radius:10px; color:#e2e7ef; }
.toolbox strong { display:block; color:#fff; font-size:15px; margin-bottom:8px; }
.toolbox ul,.toolbox ol { margin-bottom:0; }
.toc { position:sticky; top:83px; border:1px solid #313946; padding:17px; border-radius:10px; background:#11151c; font-size:12px; }
.toc strong { font-size:12px; color:#f6f7fa; display:block; margin-bottom:10px; text-transform:uppercase; letter-spacing:.06em; }
.toc a { display:block; padding:6px 0; color:#bdc5d3; text-decoration:none; line-height:1.5; }
.toc a:hover { color:#fff; }
.toc .toc-link { margin-top:12px; color:#ff8da2; font-weight:700; }
.sources { border-top:1px solid #39414b; margin-top:32px; padding-top:20px; }
.sources h2 { margin-top:0; font-size:18px; }
.sources ul { font-size:12px; }
.related { padding:35px 0 55px; border-top:1px solid var(--line); }
.related h2 { font-size:23px; letter-spacing:-.02em; }
.related .grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media(max-width:960px) {
  .feature { height:300px; }
  .grid,.related .grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .article-layout { grid-template-columns:1fr; }
  .toc { position:static; order:-1; }
}
@media(max-width:680px) {
  .container { width:calc(100% - 28px); }
  .masthead { padding:35px 0 33px; }
  .masthead h1 { font-size:clamp(31px,8.2vw,42px); }
  .masthead .intro { font-size:14px; }
  .blog-main { padding:28px 0 49px; }
  .sectionbar { margin-bottom:14px; }
  .feature { display:flex; flex-direction:column; height:auto; margin-bottom:25px; }
  .feature img { width:100%; height:auto; max-height:none; aspect-ratio:16/9; }
  .feature .copy { padding:19px; }
  .feature h2 { font-size:23px; }
  .grid,.related .grid { grid-template-columns:1fr; gap:13px; }
  .filters { padding:13px; display:grid; grid-template-columns:1fr; gap:10px; }
  .field,.field.small { width:100%; flex:auto; }
  .reset { width:100%; }
  .post-body { padding:15px; }
  .breadcrumb { padding-top:17px; }
  .article-heading { padding:23px 0 16px; }
  .article-heading h1 { font-size:clamp(30px,8vw,39px); overflow-wrap:anywhere; }
  .article-heading .lead { font-size:15px; }
  .article-layout { display:flex; flex-direction:column; gap:21px; margin:22px 0 37px; }
  .toc { order:-1; width:100%; }
  .article { width:100%; font-size:14px; }
  .article h2 { font-size:22px; }
  .article .opening { font-size:16px; }
  .hero-image { max-height:none; }
  .related { padding:26px 0 45px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .post,.feature { transition:none; }
}

/* Business-first journal hierarchy; gaming is an accessible secondary archive. */
.games-section { margin-top:52px; padding-top:30px; border-top:1px solid var(--line); }
.games-section .sectionbar { margin-bottom:7px; }
.games-intro { margin:0 0 19px; max-width:730px; color:var(--muted); font-size:13px; }
.games-intro a { color:#ff8da2; }
.blog-group[hidden] { display:none!important; }
@media(max-width:680px){.games-section{margin-top:37px;padding-top:24px}}

/* Editorial tables remain easy to scan on narrow devices. */
.article table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.article h2{scroll-margin-top:90px}