/* GTA News Hub — AAA premium stylesheet. Generated asset, external + cacheable. */
@import url("https://fonts.cdnfonts.com/css/pricedown");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Oswald:wght@300;400;500;600;700&family=Anton&family=Archivo:wght@400;500;600;700;800;900&display=swap");

:root{
  --pink:#ff2d78; --cyan:#00d4ff; --purple:#b044ff; --gold:#ffd700; --lime:#00ff9c;
  --bg:#08080a; --bg2:#101014; --panel:#121216; --ink:#f5f5f7;
  --muted:rgba(245,245,247,.60); --faint:rgba(245,245,247,.36);
  --glass:rgba(255,255,255,.045); --glass-2:rgba(255,255,255,.07);
  --glass-border:rgba(255,255,255,.09); --glass-border-2:rgba(255,255,255,.14);
  --radius:10px; --radius-lg:16px; --maxw:1320px;
  --display:"Pricedown","Anton",Impact,sans-serif;
  --cond:"Oswald","Archivo Narrow",sans-serif;
  --head:"Archivo","Inter",sans-serif;
  --sans:"Inter",-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;
  --shadow-sm:0 2px 10px rgba(0,0,0,.4);
  --shadow-md:0 14px 40px rgba(0,0,0,.5);
  --shadow-lg:0 30px 80px rgba(0,0,0,.6);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
::selection{background:var(--pink); color:#fff}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh; overflow-x:hidden; line-height:1.5;
}
/* near-black stage — artwork supplies the colour (Rockstar approach) */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(70% 50% at 50% -8%, rgba(255,45,120,.12), transparent 60%),
    radial-gradient(60% 50% at 100% 0%, rgba(0,212,255,.06), transparent 55%),
    linear-gradient(180deg,#0d0d11 0%, #08080a 55%, #060608 100%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.30;
  background-image:var(--grain, none); background-size:280px; mix-blend-mode:overlay;
}
a{color:var(--cyan); text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.display{font-family:var(--display); letter-spacing:.5px}

/* page fade-in */
@keyframes pageIn{from{opacity:0}to{opacity:1}}
body{animation:pageIn .5s var(--ease-out) both}

/* ---------- header ---------- */
header.site-header{
  position:sticky; top:0; z-index:200; display:flex; align-items:center;
  justify-content:space-between; padding:16px 24px;
  background:linear-gradient(180deg,rgba(8,8,12,.85),rgba(8,8,12,.35));
  backdrop-filter:blur(20px) saturate(1.5); -webkit-backdrop-filter:blur(20px) saturate(1.5);
  border-bottom:1px solid transparent; transition:padding .3s var(--ease), background .3s, border-color .3s;
}
header.site-header.scrolled{padding:10px 24px; background:rgba(8,8,12,.92); border-bottom-color:var(--glass-border)}
.brand-link{display:flex; align-items:center; gap:13px}
.brand-logo{width:42px; height:42px; filter:drop-shadow(0 4px 18px rgba(255,45,120,.45)); transition:transform .4s var(--ease)}
.brand-link:hover .brand-logo{transform:rotate(-6deg) scale(1.06)}
.brand-text{line-height:1}
.brand-text .b1{
  font-family:var(--display); font-size:24px; letter-spacing:1px;
  background:linear-gradient(92deg,#fff 10%,var(--pink) 55%,var(--cyan) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-text .b2{display:block; font-size:9px; letter-spacing:3px; color:var(--faint); margin-top:4px; text-transform:uppercase}
.brand-text .b3{display:block; font-size:8.5px; letter-spacing:2.5px; font-weight:800; color:var(--pink); margin-top:2px}
.header-actions{display:flex; align-items:center; gap:16px}
.search-btn,.menu-toggle{background:none; border:none; cursor:pointer; color:var(--ink); padding:0}
.search-btn{width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--glass-border); background:var(--glass); transition:.2s}
.search-btn svg{width:19px; height:19px}
.search-btn:hover{border-color:var(--glass-border-2); background:var(--glass-2); transform:scale(1.05)}
.menu-toggle{width:34px; height:24px; display:flex; flex-direction:column; justify-content:space-between}
.menu-toggle span{display:block; height:2px; width:100%; background:#fff; border-radius:2px; transition:.3s var(--ease)}
.menu-toggle.open span:nth-child(1){transform:translateY(11px) rotate(45deg)}
.menu-toggle.open span:nth-child(2){opacity:0}
.menu-toggle.open span:nth-child(3){transform:translateY(-11px) rotate(-45deg)}

/* reading progress bar */
.read-progress{position:fixed; top:0; left:0; height:3px; width:0; z-index:300;
  background:linear-gradient(90deg,var(--pink),var(--cyan)); box-shadow:0 0 12px rgba(255,45,120,.6);
  transition:width .1s linear}

/* ---------- overlay menu ---------- */
.menu-overlay{
  position:fixed; inset:0; z-index:199;
  background:radial-gradient(120% 100% at 50% 0%, rgba(20,8,26,.99), rgba(4,4,10,.99));
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
}
.menu-overlay.open{opacity:1; pointer-events:auto}
.menu-overlay nav{display:flex; flex-direction:column; gap:22px; text-align:center; padding:20px}
.menu-overlay .m-title{font-family:var(--cond); font-weight:600; font-size:12px; letter-spacing:5px; color:var(--faint); margin-bottom:10px; text-transform:uppercase}
.menu-overlay a{font-family:var(--display); font-size:clamp(30px,6vw,46px); color:#fff; letter-spacing:1px; transition:.25s var(--ease); opacity:0; transform:translateY(16px)}
.menu-overlay.open a{opacity:1; transform:none}
.menu-overlay.open a:nth-child(2){transition-delay:.05s}
.menu-overlay.open a:nth-child(n+4){transition-delay:.1s}
.menu-overlay a:hover{color:var(--pink); transform:scale(1.05)}
.menu-overlay .menu-sub{font-size:11px; letter-spacing:3px; color:var(--faint); margin:2px 0; text-transform:uppercase}

/* ---------- search overlay ---------- */
.search-overlay{
  position:fixed; inset:0; z-index:201; background:rgba(4,4,10,.96);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  display:flex; flex-direction:column; align-items:center;
  padding-top:13vh; opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.search-overlay.open{opacity:1; pointer-events:auto}
.search-box{width:min(720px,90vw)}
.search-box input{
  width:100%; background:var(--glass); border:1px solid var(--glass-border);
  border-radius:var(--radius-lg); padding:20px 24px; font-size:21px; color:#fff; font-family:var(--sans);
  outline:none; transition:.25s;
}
.search-box input:focus{border-color:var(--pink); box-shadow:0 0 0 4px rgba(255,45,120,.15), var(--shadow-md); background:var(--glass-2)}
.search-hint{color:var(--faint); font-size:11px; letter-spacing:2px; margin-top:14px; text-align:center; text-transform:uppercase}
.search-results{width:min(720px,90vw); margin-top:20px; max-height:60vh; overflow:auto}
.search-result{
  display:block; padding:15px 18px; border-radius:12px; margin-bottom:9px;
  background:var(--glass); border:1px solid var(--glass-border); color:var(--ink); transition:.2s;
}
.search-result:hover{border-color:var(--pink); background:var(--glass-2); transform:translateX(4px)}
.search-result .sr-h{font-weight:700; font-size:16px; color:#fff; margin-bottom:5px}
.search-result .sr-m{font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em}
.search-empty{color:var(--faint); text-align:center; padding:36px; font-size:14px}

/* ---------- breaking ticker ---------- */
.ticker{
  display:block; border-top:1px solid var(--glass-border);
  border-bottom:1px solid var(--glass-border);
  background:linear-gradient(90deg, rgba(255,45,120,.10), rgba(255,45,120,.03));
  overflow:hidden; white-space:nowrap; position:relative;
}
.ticker::after{content:""; position:absolute; top:0; right:0; height:100%; width:90px; z-index:3;
  background:linear-gradient(90deg,transparent,var(--bg)); pointer-events:none}
.ticker-tag{
  position:absolute; left:0; top:0; height:100%; z-index:4;
  font-family:var(--cond); font-weight:700; font-size:13px; letter-spacing:2.5px; color:#fff;
  background:linear-gradient(90deg,var(--pink),var(--purple)); padding:0 20px;
  display:flex; align-items:center; gap:8px;
}
.ticker-tag .ld{width:7px; height:7px; border-radius:50%; background:#fff; animation:pulse 1.6s infinite}
/* opaque cover so scrolling text is fully hidden until it clears the tag, with
   a short fade at the reveal edge so words emerge smoothly (not a hard cut) */
.ticker::before{content:""; position:absolute; left:0; top:0; height:100%; width:136px; z-index:3;
  background:linear-gradient(90deg,var(--bg) 0,var(--bg) 100px,transparent 136px); pointer-events:none}
.ticker-track{display:inline-flex; gap:40px; padding:11px 0; padding-left:24px; animation:ticker 45s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track a{color:var(--muted); font-size:13px; font-weight:600; letter-spacing:.02em; transition:color .2s}
.ticker-track a:hover{color:#fff}
.ticker-track .dot{color:var(--pink)}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}70%{box-shadow:0 0 0 8px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

/* ---------- HERO: cinematic full-bleed ---------- */
.hero{
  position:relative; display:flex; align-items:flex-end;
  min-height:clamp(560px,86vh,860px); overflow:hidden; isolation:isolate; margin-bottom:0;
}
.hero .art{position:absolute; inset:0; height:100%; border-radius:0;
  background-size:cover; background-position:center 30%; background-image:var(--cat-img-hero,none);
  transform:scale(1.05); animation:heroZoom 18s var(--ease-out) both}
@keyframes heroZoom{from{transform:scale(1.14)}to{transform:scale(1.05)}}
.hero .art .art-label,.hero .art .art-glow{display:none}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top, var(--bg) 0%, rgba(8,8,10,.7) 30%, rgba(8,8,10,.2) 62%, transparent 100%),
    linear-gradient(to right, rgba(8,8,10,.7) 0%, transparent 55%),
    radial-gradient(130% 90% at 50% 30%, transparent 50%, rgba(0,0,0,.6) 100%);
}
.hero-content{position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; width:100%;
  padding:0 24px clamp(48px,7vh,96px)}
.hero-inner{max-width:940px; animation:heroRise 1s var(--ease-out) .25s both}
@keyframes heroRise{from{opacity:0; transform:translateY(28px)}to{opacity:1; transform:none}}
.hero-kicker{display:inline-flex; align-items:center; gap:10px; font-family:var(--cond); font-weight:600;
  font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:#fff; margin-bottom:20px}
.hero-kicker .live{width:9px; height:9px; border-radius:50%; background:var(--pink);
  box-shadow:0 0 0 0 rgba(255,45,120,.6); animation:livepulse 1.8s infinite}
@keyframes livepulse{70%{box-shadow:0 0 0 11px rgba(255,45,120,0)}100%{box-shadow:0 0 0 0 rgba(255,45,120,0)}}
.hero-badges{display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap}
.hero-headline{
  font-family:var(--display); text-transform:uppercase; font-weight:400;
  font-size:clamp(44px,7.2vw,102px); line-height:.92; letter-spacing:-.01em;
  color:#fff; margin:0 0 22px; padding-top:.06em; max-width:15ch; text-shadow:0 8px 50px rgba(0,0,0,.7);
  overflow-wrap:break-word;
}
.hero-excerpt{font-size:clamp(16px,1.5vw,19px); color:rgba(245,245,251,.9); max-width:620px;
  margin:0 0 30px; line-height:1.6; text-shadow:0 2px 14px rgba(0,0,0,.6)}
.hero-cta{display:inline-flex; align-items:center; gap:11px; font-family:var(--cond); font-weight:700;
  font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:#04120c;
  background:linear-gradient(92deg,var(--cyan),var(--lime)); padding:16px 32px; border-radius:4px;
  box-shadow:0 12px 34px -8px rgba(0,255,156,.55); transition:.25s var(--ease); border:none}
.hero-cta:hover{filter:brightness(1.08); transform:translateY(-3px); box-shadow:0 18px 44px -8px rgba(0,255,156,.7)}
.hero-cta .arr{transition:transform .25s var(--ease)}
.hero-cta:hover .arr{transform:translateX(4px)}
.hero-scroll{position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:2;
  font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--faint);
  display:flex; flex-direction:column; align-items:center; gap:8px; animation:floaty 2.4s ease-in-out infinite}
.hero-scroll::after{content:""; width:1px; height:26px; background:linear-gradient(var(--faint),transparent)}
@keyframes floaty{50%{transform:translate(-50%,6px)}}

/* ---------- section head ---------- */
.section-head{display:flex; align-items:flex-end; justify-content:space-between; margin:clamp(48px,7vw,84px) 0 24px; gap:16px; flex-wrap:wrap}
.section-title{font-family:var(--display); text-transform:uppercase; font-size:clamp(26px,3.6vw,46px);
  line-height:.95; color:#fff; margin:0; letter-spacing:-.01em}
.section-title .accent{color:var(--pink)}
.section-label{font-family:var(--cond); font-weight:600; font-size:12px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:12px; margin:0 0 8px}
.section-label::before{content:""; width:26px; height:2px; border-radius:3px; background:linear-gradient(90deg,var(--pink),var(--cyan))}
.section-count{font-family:var(--cond); font-size:12px; color:var(--faint); letter-spacing:.08em; text-transform:uppercase}

/* ---------- filters ---------- */
.filters-wrap{position:sticky; top:64px; z-index:120; padding:14px 0; margin-bottom:6px;
  background:linear-gradient(180deg,rgba(8,8,12,.9),rgba(8,8,12,.5)); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px)}
.filters{display:flex; gap:9px; flex-wrap:wrap; margin-bottom:9px}
.filters:last-child{margin-bottom:0}
.filter-pill{
  font-family:var(--cond); font-weight:600; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase;
  padding:8px 16px; border-radius:4px; background:var(--glass); border:1px solid var(--glass-border-2);
  color:var(--muted); cursor:pointer; user-select:none; transition:.2s var(--ease); white-space:nowrap;
}
.filter-pill:hover{color:#fff; border-color:var(--glass-border-2); background:var(--glass)}
.filter-pill.active{background:#fff; border-color:#fff; color:#0a0a0b; box-shadow:0 6px 18px rgba(255,255,255,.14)}

/* ---------- MAGAZINE FEATURE GRID ---------- */
.feature-grid{display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:250px; gap:16px; margin:16px 0; grid-auto-flow:dense}
.tile{
  position:relative; overflow:hidden; border-radius:var(--radius); min-height:300px;
  display:flex; align-items:flex-end; isolation:isolate; background:#0d0d0f;
  border:1px solid var(--glass-border); grid-column:span 2;
  opacity:0; transform:translateY(24px) scale(.99); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out), border-color .3s, box-shadow .3s;
}
.tile.reveal{opacity:1; transform:none}
.tile .art{position:absolute; inset:0; height:100%; border-radius:0; background-size:cover; background-position:center;
  transition:transform .7s var(--ease-out); filter:saturate(.9) contrast(1.06)}
.tile .art .art-label,.tile .art .art-glow{display:none}
.tile::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top, rgba(6,6,8,.97) 0%, rgba(6,6,8,.5) 40%, transparent 74%),
    radial-gradient(130% 100% at 50% 35%, transparent 52%, rgba(0,0,0,.52) 100%);}
.tile:hover{border-color:var(--glass-border-2); box-shadow:var(--shadow-md)}
.tile:hover .art{transform:scale(1.07)}
.tile .tile-body{position:relative; z-index:2; padding:22px 24px; width:100%}
.tile .tile-badges{display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap}
.tile h2{font-family:var(--head); font-weight:800; letter-spacing:-.01em; font-size:19px; line-height:1.12;
  color:#fff; margin:0 0 9px; text-shadow:0 2px 18px rgba(0,0,0,.6); transition:color .25s var(--ease); text-transform:uppercase}
.tile:hover h2{color:#fff}
.tile:hover{transform:translateY(-3px)}
.tile .tile-meta{font-family:var(--cond); font-size:11.5px; letter-spacing:.06em; color:var(--muted);
  text-transform:uppercase; display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.tile .tile-arrow{position:absolute; top:18px; right:18px; z-index:3; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; color:#fff;
  font-size:17px; opacity:0; transform:translateY(-6px); transition:.35s var(--ease); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14)}
.tile:hover .tile-arrow{opacity:1; transform:none}

/* size variants — magazine rhythm (rows are 250px each via grid-auto-rows) */
.tile{min-height:0}
.tile.feat{grid-column:span 4; grid-row:span 2}
.tile.feat h2{font-size:clamp(28px,3.4vw,44px); line-height:1.0; max-width:18ch}
.tile.feat .tile-body{padding:34px}
.tile.tall{grid-column:span 2; grid-row:span 2}
.tile.tall h2{font-size:23px}
.tile.wide{grid-column:span 3}
.tile.wide h2{font-size:24px}
.tile.wide .tile-body{padding:28px}
.tile.reg{grid-column:span 2}
.tile.small{grid-column:span 2}

/* cinematic full-width divider band */
.cine-band{grid-column:1/-1; position:relative; text-align:center; padding:clamp(48px,7vw,88px) 20px clamp(20px,3vw,32px);
  overflow:hidden}
.cine-band::before{content:""; position:absolute; left:50%; top:0; transform:translateX(-50%); width:min(560px,80%); height:1px;
  background:linear-gradient(90deg,transparent,var(--glass-border-2),transparent)}
.cine-band h3{font-family:var(--display); text-transform:uppercase; font-size:clamp(28px,4.4vw,60px);
  color:#fff; margin:0; letter-spacing:-.01em; line-height:.95}
.cine-band p{color:var(--muted); font-size:14px; margin:12px auto 0; max-width:520px; line-height:1.6}

/* ---------- badges + art base ---------- */
.badge-row{display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap}
.badge{display:inline-flex; align-items:center; font-family:var(--cond); font-weight:600; font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; padding:5px 11px; border-radius:4px}
.region-badge{background:rgba(255,255,255,.11); color:rgba(245,245,251,.82); backdrop-filter:blur(6px)}
.art{position:relative; display:flex; align-items:center; justify-content:center;
  background-color:var(--art-bg); background-size:cover; background-position:center; overflow:hidden}
.art::before{content:""; position:absolute; inset:0;
  background:radial-gradient(80% 120% at 20% 0%, color-mix(in srgb,var(--art-fg) 20%, transparent), transparent 60%)}
.art .art-label{position:relative; z-index:1; font-family:var(--display); font-size:16px; letter-spacing:2px;
  text-transform:uppercase; color:var(--art-fg); opacity:.9}
.art .art-glow{position:absolute; inset:0; background:linear-gradient(120deg,transparent 40%,color-mix(in srgb,var(--art-fg) 10%,transparent))}
.no-results{grid-column:1/-1; text-align:center; color:var(--faint); padding:70px 20px; font-size:15px; font-family:var(--cond); letter-spacing:.05em; text-transform:uppercase}

/* ---------- ARTICLE: premium magazine ---------- */
.article-hero{position:relative; min-height:clamp(420px,60vh,620px); display:flex; align-items:flex-end;
  overflow:hidden; isolation:isolate; margin-bottom:0}
.article-hero .art{position:absolute; inset:0; height:100%; background-size:cover; background-position:center;
  transform:scale(1.05); animation:heroZoom 16s var(--ease-out) both; filter:saturate(.94) contrast(1.04)}
.article-hero .art .art-label,.article-hero .art .art-glow{display:none}
.article-hero::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, var(--bg) 2%, rgba(8,8,10,.72) 34%, rgba(8,8,10,.2) 70%, transparent 100%),
    radial-gradient(120% 90% at 50% 30%, transparent 55%, rgba(0,0,0,.5) 100%)}
.article-hero-content{position:relative; z-index:2; max-width:860px; margin:0 auto; width:100%;
  padding:0 24px clamp(30px,5vw,52px)}
.article-hero .back-link{margin-bottom:20px}
.article-hero h1{font-family:var(--display); text-transform:uppercase; letter-spacing:-.005em; font-weight:400;
  line-height:.98; font-size:clamp(32px,5.4vw,64px); color:#fff; margin:14px 0 18px; padding-top:.06em; text-shadow:0 8px 40px rgba(0,0,0,.65); max-width:20ch;
  overflow-wrap:break-word}
.article-hero .lead-meta{display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-family:var(--cond);
  font-size:13px; color:rgba(245,245,251,.82); text-transform:uppercase; letter-spacing:.05em}
.article-hero .lead-meta .byline{color:var(--pink); font-weight:600}

.article{max-width:760px; margin:0 auto; padding:clamp(30px,5vw,52px) 0 80px}
.article-lead{font-size:clamp(19px,2.2vw,23px); line-height:1.55; color:rgba(245,245,251,.94); font-weight:500;
  margin:0 0 30px; padding-bottom:28px; border-bottom:1px solid var(--glass-border)}
.article .body-text{font-size:18px; line-height:1.8; color:rgba(245,245,251,.86); white-space:pre-wrap}
.article .body-text::first-letter{font-family:var(--display); -webkit-initial-letter:3 2; initial-letter:3 2;
  font-size:3.1em; line-height:1; float:left; margin:2px 12px 0 0; color:var(--pink);
  text-shadow:0 4px 20px rgba(255,45,120,.35)}
.back-link{display:inline-flex; align-items:center; gap:8px; font-family:var(--cond); font-size:13px;
  letter-spacing:.05em; text-transform:uppercase; color:rgba(245,245,251,.8); transition:.25s var(--ease)}
.back-link:hover{color:var(--pink); gap:12px}

/* share bar */
.share-bar{display:flex; align-items:center; gap:12px; margin:34px 0; padding:18px 0;
  border-top:1px solid var(--glass-border); border-bottom:1px solid var(--glass-border)}
.share-bar .share-label{font-family:var(--cond); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-right:2px}
.share-btn-a{width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--glass); border:1px solid var(--glass-border); color:#fff; transition:.25s var(--ease); cursor:pointer}
.share-btn-a svg{width:18px; height:18px}
.share-btn-a:hover{transform:translateY(-3px); border-color:var(--glass-border-2); background:var(--glass-2); box-shadow:var(--shadow-sm)}
.share-btn-a.tg:hover{color:var(--cyan); border-color:rgba(0,212,255,.5)}
.share-btn-a.x:hover{color:#fff}
.share-btn-a.cp:hover{color:var(--lime); border-color:rgba(0,255,156,.5)}
.share-toast{position:fixed; left:50%; bottom:34px; transform:translate(-50%,20px);
  background:var(--panel); border:1px solid var(--glass-border-2); color:#fff; font-size:13px; padding:12px 22px;
  border-radius:100px; box-shadow:var(--shadow-md); opacity:0; pointer-events:none; transition:.35s var(--ease); z-index:400}
.share-toast.show{opacity:1; transform:translate(-50%,0)}

.article-foot{margin-top:34px; padding-top:26px; border-top:1px solid var(--glass-border);
  display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.tg-cta{display:inline-flex; align-items:center; gap:9px; font-family:var(--cond); font-weight:600; font-size:13px;
  letter-spacing:.04em; text-transform:uppercase; padding:13px 22px; border-radius:4px;
  background:rgba(0,212,255,.12); border:1px solid rgba(0,212,255,.32); color:var(--cyan); transition:.25s var(--ease)}
.tg-cta:hover{background:rgba(0,212,255,.22); transform:translateY(-2px)}
.src-cta{font-family:var(--cond); font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); transition:.2s}
.src-cta:hover{color:#fff}

/* ---------- related articles ---------- */
.related{max-width:var(--maxw); margin:0 auto; padding:0 24px 40px}
.related .section-head{margin:20px 0 22px}
.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.rel-card{position:relative; overflow:hidden; border-radius:var(--radius); min-height:230px; display:flex;
  align-items:flex-end; isolation:isolate; background:#0d0d0f; border:1px solid var(--glass-border);
  transition:.3s var(--ease); opacity:0; transform:translateY(20px)}
.rel-card.reveal{opacity:1; transform:none}
.rel-card .art{position:absolute; inset:0; height:100%; background-size:cover; background-position:center;
  transition:transform .6s var(--ease-out); filter:saturate(.9) contrast(1.05)}
.rel-card .art .art-label,.rel-card .art .art-glow{display:none}
.rel-card::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(6,6,8,.96), rgba(6,6,8,.35) 55%, transparent 80%)}
.rel-card:hover{border-color:var(--glass-border-2); box-shadow:var(--shadow-md)}
.rel-card:hover .art{transform:scale(1.07)}
.rel-body{position:relative; z-index:2; padding:18px 20px}
.rel-body .badge-row{margin-bottom:9px}
.rel-body h3{font-family:var(--head); font-weight:800; font-size:16px; line-height:1.16; color:#fff; margin:0 0 6px; text-transform:uppercase}
.rel-body .rel-meta{font-family:var(--cond); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}

/* ---------- footer ---------- */
footer.site-footer{border-top:1px solid var(--glass-border); margin-top:60px; padding:56px 0 30px;
  background:linear-gradient(180deg,transparent,rgba(255,45,120,.035))}
.footer-top{display:flex; gap:16px; align-items:center; margin-bottom:38px; flex-wrap:wrap}
.footer-top .brand-logo{width:46px; height:46px}
.footer-top .ft-name{font-family:var(--display); font-size:24px; background:linear-gradient(92deg,#fff,var(--pink) 60%,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.footer-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:36px; padding-bottom:36px}
.footer-col h4{font-family:var(--cond); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin:0 0 16px}
.footer-col a,.footer-col span{display:block; font-size:13.5px; color:rgba(245,245,251,.7); margin-bottom:12px; transition:.2s var(--ease)}
.footer-col a:hover{color:var(--pink); transform:translateX(3px)}
.footer-bottom{border-top:1px solid var(--glass-border); padding-top:22px; text-align:center; color:var(--faint); font-size:11px; line-height:1.8}

/* ---------- MOBILE / RESPONSIVE ---------- */
@media (max-width:1000px){
  .feature-grid{grid-template-columns:repeat(4,1fr); grid-auto-rows:220px}
  .tile.feat{grid-column:span 4; grid-row:span 2}
  .tile.wide{grid-column:span 4; grid-row:span 1}
  .tile.tall{grid-column:span 2; grid-row:span 1}
  .related-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .wrap,.hero-content,.article-hero-content,.related{padding-left:22px; padding-right:22px}
  .feature-grid{grid-template-columns:1fr; grid-auto-rows:auto; gap:14px}
  .tile,.tile.feat,.tile.wide,.tile.tall,.tile.reg,.tile.small{grid-column:1/-1; grid-row:auto; min-height:280px}
  .tile.feat h2{font-size:clamp(26px,7vw,36px)}
  .tile h2{font-size:20px}
  .tile .tile-body{padding:20px}
  .tile .tile-arrow{opacity:1; transform:none} /* always visible on touch */
  .related-grid{grid-template-columns:1fr}
  .hero{min-height:70vh; align-items:flex-end}
  .hero .art{background-position:center 26%}
  .hero-content{padding:0 22px 38px}
  .hero-inner{max-width:100%}
  .article-hero-content{padding:0 22px 30px}
  .hero-headline{font-size:clamp(31px,7.6vw,46px); max-width:100%; line-height:.98}
  .article-hero h1{font-size:clamp(26px,6.8vw,40px); max-width:100%; line-height:1.0}
  .hero-scroll{display:none}
  .hero-excerpt{font-size:15px}
  .filters-wrap{top:58px}
  .filters{gap:7px}
  .filter-pill{font-size:11.5px; padding:7px 13px}
  .section-head{margin:40px 0 18px}
  .article .body-text{font-size:16.5px; line-height:1.75}
  .article .body-text::first-letter{font-size:2.8em; -webkit-initial-letter:3 2; initial-letter:3 2; margin:2px 10px 0 0}
  .article-lead{font-size:18px}
  header.site-header{padding:12px 18px}
  .brand-text .b2,.brand-text .b3{display:none}
  .article-hero h1{font-size:clamp(28px,8vw,44px)}
  .share-bar{flex-wrap:wrap}
}
@media (max-width:400px){
  .brand-text .b1{font-size:20px}
  .hero-cta{padding:14px 24px; font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important; transition-duration:.001ms!important}
  .tile,.rel-card,.hero-inner{opacity:1!important; transform:none!important}
}