/* Palette & Tokens */
:root{
  --bg: #110027;
  --bg-2: #2a1747;
  --text: #e9e0ff;
  --muted: #c9bfb8;
  --accent: #8e6df2;        /* purple */
  --accent-2: #c7b96b;      /* khaki */
  --card: rgba(255,255,255,.08);
  --card-2: rgba(255,255,255,.12);
  --border: rgba(255,255,255,.28);
  --shadow: 0 8px 28px rgba(0,0,0,.30);
  --radius: 14px;
  --focus: 0 0 0 4px rgba(142,109,242,.55);
  --gap: 1rem;
}

/* Section: Base & Layout */
*,
*::before,
*::after{ box-sizing: border-box; }
html, body{ height:100%; }
html{ color-scheme: dark; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: var(--text);
  background: #000;
  /* Layered background: gradient + subtle scanlines + soft noise */
  background-image:
    linear-gradient(135deg, rgba(88,0,120,.65), rgba(40,20,60,.65)),
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.07), transparent 40px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.04) 0 2px, transparent 2px 4px);
  background-blend-mode: overlay;
  min-height:100%;
  overflow-x:hidden;
}
header, main, footer, aside, article, nav{ padding:0; }

/* Glass panels (fallback where backdrop-filter unsupported) */
.glass{
  background: rgba(8,8,16,.28);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
@supports not (backdrop-filter: blur(12px)){
  .glass{ background: rgba(8,8,16,.55); }
}

/* Utility & layout helpers */
.container{ max-width: clamp(640px, 90vw, 1120px); margin-inline: auto; padding: 0 1rem; }
.grid{ display:grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card{ background: var(--card); border:1px solid var(--border); border-radius: .75rem; padding:1rem; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.tag{ display:inline-block; padding:.15em .5em; border-radius:999px; font-size:.75rem; border:1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color:#fff; }

/* Image framing helpers */
.image-frame, .featured-image{ aspect-ratio: 16/9; width:100%; overflow:hidden; border-radius: 12px; border:1px solid rgba(255,255,255,.25); background:#000; display:block; }
.image-frame img, .featured-image img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Typography scaling (fluid) */
h1, h2{ line-height:1.15; margin:.25rem 0; }
h1{ font-size: clamp(2rem, 4vw + 1rem, 3.5rem); letter-spacing:.2px; }
h2{ font-size: clamp(1.25rem, 1.5vw + .5rem, 2rem); margin-top:.4rem; }
p{ font-size: clamp(1rem, .8vw + .9rem, 1.125rem); line-height: 1.6; margin:.75rem 0; color: #eeddff; }
blockquote{ border-left: 3px solid rgba(142,109,242,.8); padding-left:.75rem; color:#f5eaff; opacity:.95; margin: .75rem 0; }

/* Header, main, footer, and other sections styling (glass panels) */
header, main, footer, aside, nav, article{ background: rgba(8,8,20,.28); border:1px solid rgba(255,255,255,.25); border-radius: var(--radius); padding: 1rem; }

/* Specific sections for semantic structure */
header{ margin: 1.25rem auto; padding: 1rem 1rem; text-align: center; }
header h1{ margin: .25rem 0 .25rem; color:#fff; }
header .meta{ color: var(--muted); font-size: .92rem; }

/* Main content area */
main{ padding: 1rem; }
.featured-image{ margin: .75rem 0; }

/* Footer with compact ad sections */
footer{ margin: 1.25rem auto; padding: 1rem; display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; align-items: start; }

/* Link & button treatments (AA accessible) */
a, button, .btn, .cta{ color: var(--text); text-decoration: none; cursor: pointer; border-radius: 999px; transition: transform .15s ease, background-color .2s ease, color .2s ease; }
a{ color: var(--accent); }
a:hover, a:focus-visible{ text-decoration: underline; outline-offset: 3px; }
button, .btn, .cta{ padding:.55rem .95rem; border:1px solid rgba(255,255,255,.28); background: rgba(142,109,242,.25); color:#fff; }
.btn{ background: linear-gradient(135deg, rgba(110,84,228,.9), rgba(140,110,244,.8)); border:1px solid rgba(255,255,255,.4); }
.btn:hover{ filter: brightness(1.05); transform: translateY(-1px); }
.btn.primary{ background: var(--accent); border-color: rgba(0,0,0,.15); color:#fff; }
.btn.ghost{ background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); color:#fff; }
.cta{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem 1rem; }

/* Focus states for accessibility (visible) */
a:focus-visible, button:focus-visible, .btn:focus-visible, .cta:focus-visible{
  outline: var(--focus);
  outline-offset: 4px;
}

/* Image glow on focus when keyboard navigating (subtle) */
.image-frame:focus-within, .featured-image:focus-within{ box-shadow: 0 0 0 3px rgba(142,109,242,.5); }

/* Lists styling */
ul{ padding-left: 1.25rem; margin: .5rem 0; }
ul li{ margin: .25rem 0; }

/* Print styles: basic readability */
@media print{
  body{ background: #fff; color: #000; }
  header, main, footer{ background: transparent; border: none; box-shadow: none; }
  a{ color: #000; text-decoration: underline; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}
 
/* Demo helper: subtle fade-in on load (GPU-friendly) */
@keyframes fadeIn{ to{ opacity:1; transform: translateY(0); } }
.fade-in{ opacity:0; transform: translateY(6px); animation: fadeIn .6s ease forwards; }