/**
 * Modern Vice visual layer.
 * Retains the responsive layout in styles.css and applies the GTA VI dark/neon
 * design tokens in one place. No Tailwind runtime or remote font request.
 */
:root {
  color-scheme: dark;
  --bg: #0D0E12;
  --surface: #161920;
  --surface2: #161920;
  --stroke: #242936;
  --ink: #F3F4F6;
  --muted: #9CA3AF;
  --subtle: #9CA3AF;
  --accent: #FF2A7A;
  --teal: #00F0FF;
  --vice-pink: #FF2A7A;
  --vice-cyan: #00F0FF;
  --vice-border: #242936;
  --heading-font: "Montserrat", "Arial Narrow", "Arial", sans-serif;
  --body-font: "Inter", "Roboto", system-ui, sans-serif;
}

html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body-font);
}
h1, h2, h3 {
  color: var(--ink);
  font-family: var(--heading-font);
  font-weight: 850;
  letter-spacing: .035em;
  text-transform: uppercase;
  line-height: 1.07;
}
p, li { line-height: 1.75; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline-color: var(--vice-cyan);
}

/* Navigation and brand */
.site-header {
  background: #0D0E12f5;
  border-bottom-color: var(--vice-border);
}
.brand-mark {
  background: linear-gradient(145deg, #161920, #0D0E12);
  border-color: var(--vice-pink);
  box-shadow: inset 0 0 20px #FF2A7A18, 0 0 18px #FF2A7A26;
}
.brand-dot, .brand-name span { color: var(--vice-pink); }
.nav-links > a:not(.nav-cta) { color: var(--muted); }
.nav-links > a:hover, .nav-links > a[aria-current=page] {
  color: var(--vice-cyan);
}
.nav-cta {
  color: var(--ink);
  border-color: var(--vice-border);
  background: var(--surface);
}
.nav-cta:hover { border-color: var(--vice-pink); }
.nav-cta span { color: var(--vice-pink); }
.menu-toggle span { background: var(--vice-cyan); }

/* Primary actions */
.button-primary {
  color: var(--bg);
  background: var(--vice-pink);
  border-color: var(--vice-pink);
  box-shadow: 0 8px 30px #FF2A7A36;
}
.button-primary:hover {
  background: #ff4c91;
  border-color: #ff4c91;
  box-shadow: 0 8px 36px #FF2A7A58;
}
.button-ghost {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--vice-border);
}
.button-ghost:hover {
  color: var(--vice-cyan);
  background: #1B2029;
  border-color: var(--vice-cyan);
}
.eyebrow, .kicker { color: var(--vice-cyan); }
.live-dot {
  background: var(--vice-pink);
  box-shadow: 0 0 14px #FF2A7A;
}

/* The Vice City skyline keeps its silhouette but swaps sunset orange for neon */
.hero {
  background: radial-gradient(circle at 72% 42%, #2A1635 0, #171822 28%, #101116 57%, #0D0E12 87%);
}
.hero-glow {
  background: linear-gradient(90deg, #0D0E12 0, #0D0E1200 80%);
}
.hero h1 {
  font-weight: 900;
  letter-spacing: .022em;
}
.hero h1 em, .section h2 em, .page-hero h1 em {
  background: linear-gradient(105deg, var(--vice-pink), #fb7ab0 48%, var(--vice-cyan));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.hero-lead { color: var(--muted); }
.hero-verification, .hero-facts span { color: var(--muted); }
.hero-verification > span:first-child { color: var(--vice-cyan); }
.hero-separator { color: var(--vice-pink); }
.hero-visual:before {
  background: radial-gradient(ellipse at center, #FF2A7A24, transparent 64%);
}
.scene-sun {
  background: linear-gradient(180deg, #FF78AC 0%, #FF2A7A 52%, #B6229F 80%, #00F0FF 125%);
  box-shadow: 0 0 105px #FF2A7A6b;
}
.scene-grid {
  background:
    repeating-linear-gradient(90deg, transparent 0 55px, #00F0FF48 56px 57px),
    repeating-linear-gradient(0deg, transparent 0 31px, #FF2A7A44 32px 33px);
}
.skyline { background: #161920; }
.skyline-front, .palm .trunk { background-color: #0D0E12; }
.palm .leaves { color: #0D0E12; }
.countdown-card {
  background: linear-gradient(145deg, #161920f5, #0D0E12f9);
  border-color: #00F0FF80;
  box-shadow: 0 25px 55px #0008, inset 0 1px 0 #00F0FF1a;
}
.countdown-label, .countdown-live { color: var(--muted); }
.countdown-card strong span, .countdown-sub #countdown-days { color: var(--vice-pink); }
.countdown-divider, .hero-facts { border-color: var(--vice-border); }
.countdown-divider { background: var(--vice-border); }
.hero-facts > div { border-left-color: var(--vice-border); }
.hero-facts > div:first-child { border-color: var(--vice-pink); }

/* Common cards and long-form reading */
.section-guides, .article-shell { background: var(--bg); }
.section-heading p, .feature-grid p, .road-content p, .article-header > p,
.guide-card p, .claim-card p, .claim-policy p, .article-body, .article-next p {
  color: var(--muted);
}
.section-link, .section-link span, .arrow-icon,
.card-footer span:last-child, .trust-strip a { color: var(--vice-pink); }
.guide-card, .claim-card {
  border-color: var(--vice-border);
  background: var(--surface);
}
.guide-card:hover, .claim-card:hover {
  border-color: var(--vice-pink);
  background: #1B1E27;
  box-shadow: 0 13px 34px #FF2A7A12;
}
.guide-category { color: var(--vice-cyan); }
.card-footer, .claim-card-meta { border-top-color: var(--vice-border); color: var(--muted); }
.feature-section {
  background: radial-gradient(circle at 78% 45%, #13282E, #11151B 40%, var(--bg) 80%);
}
.feature-points li, .preview-item { color: var(--ink); }
.feature-points li span, .preview-progress strong { color: var(--vice-cyan); }
.feature-preview, .article-next, .checklist-panel {
  background: var(--surface);
  border-color: var(--vice-border);
}
.preview-status {
  color: var(--vice-cyan);
  border-color: var(--vice-cyan);
}
.preview-track, .progress-bar { background: var(--vice-border); }
.preview-track > span, .progress-bar span { background: var(--vice-cyan); }
.preview-item, .checklist-item, .checklist-bottom { border-top-color: var(--vice-border); }
.preview-check, .custom-checkbox { border-color: var(--muted); }
.road-section {
  background: radial-gradient(circle at 80% 45%, #28172D, #111219 43%, var(--bg) 80%);
  border-top-color: var(--vice-border);
}
.road-pills span, .status-tag {
  background: var(--surface);
  border-color: var(--vice-border);
  color: var(--vice-cyan);
}
.trust-section, .page-hero {
  background: var(--surface);
  border-color: var(--vice-border);
}
.trust-symbol { color: var(--vice-pink); }
.trust-strip p, .footer-top p, .footer-bottom, .breadcrumbs { color: var(--muted); }
.site-footer {
  background: var(--bg);
  border-top-color: var(--vice-border);
}
.footer-bottom { border-top-color: var(--vice-border); }
.footer-nav { color: var(--muted); }
.footer-nav a:hover, .breadcrumbs a:hover { color: var(--vice-cyan); }
.notice, .note {
  background: var(--surface);
  border-color: var(--vice-border);
}
.note { border-left-color: var(--vice-cyan); }
.notice > span, .note a, .article-body a:not(.button) { color: var(--vice-cyan); }
.article-meta, .article-next, .related-guides { border-color: var(--vice-border); }
.meta-dot { color: var(--vice-pink); }
.article-body h2, .article-body strong { color: var(--ink); }
.checklist-section { background: var(--bg); }
.progress-row span, .checklist-bottom span { color: var(--vice-cyan); }
.checklist-item.is-complete .custom-checkbox {
  background: var(--vice-cyan);
  border-color: var(--vice-cyan);
  color: var(--bg);
}
.checklist-item.is-complete .task-text strong { color: var(--muted); }

/* Never rely on colour alone for the claim status labels */
.rumour-teaser, .claim-hero {
  background: radial-gradient(circle at 85% 28%, #29142D, #161920 44%, var(--bg) 84%);
}
.claim-label {
  color: var(--vice-pink);
  background: #FF2A7A17;
  border-color: var(--vice-pink);
}
.claim-label.unverified {
  color: var(--vice-cyan);
  background: #00F0FF13;
  border-color: var(--vice-cyan);
}
.claim-policy, .claim-warning {
  background: var(--surface);
  border-color: var(--vice-border);
}
.claim-warning { border-left: 4px solid var(--vice-pink); }
.claim-warning.unverified { border-left-color: var(--vice-cyan); }
.claim-warning strong { color: var(--vice-pink); }
.claim-warning.unverified strong { color: var(--vice-cyan); }
.claim-warning p, .claim-warning.unverified p, .claim-source-list small { color: var(--muted); }
.claim-card-meta span { color: var(--vice-pink); }
.claim-policy a { color: var(--vice-cyan); }
.claim-distinction { color: var(--muted); }

@media (max-width: 760px) {
  .nav-links { background: var(--surface); border-bottom-color: var(--vice-border); }
  .hero h1 { letter-spacing: .01em; }
  .hero h1, .page-hero h1 { overflow-wrap: break-word; }
}