/* Base & Tokens */
:root{
  --bg: #0a0a0f;
  --bg-2: #0b0d14;
  --text: #e9e7ff;
  --muted: #b8c0d9;
  --accent: #ff2a92;      /* plasma pink */
  --accent-2: #ff5a5a;    /* red highlight */
  --panel: rgba(255,255,255,.08);
  --panel-border: rgba(255,255,255,.25);
  --shadow: 0 8px 28px rgba(0,0,0,.28);
  --radius: 14px;
  --radius-sm: 10px;
}
*{box-sizing:border-box}
html,body{height:100%}
html{font-size:16px}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial;
  color:var(--text);
  line-height:1.5;
  min-height:100%;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,0,130,.25), transparent 40%),
    radial-gradient(circle at 85% 0%, rgba(255,0,0,.20), transparent 40%),
    linear-gradient(#0a0a12 0%, #090912 60%, #06070d 100%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.04) 0, rgba(255,255,255,.04) 1px, transparent 1px, transparent 2px);
  background-blend-mode: overlay, overlay, normal, overlay;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img{max-width:100%; display:block}

 /* Layout helpers */
.container{max-width:clamp(320px, 86vw, 1100px); margin-inline:auto; padding-inline:1rem}
.grid{display:grid; gap:1rem}
.card{background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius); padding:.9rem; box-shadow:var(--shadow)}
.tag{display:inline-block; padding:.25em .6em; border-radius:999px; font-size:.75rem; color:var(--text); background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25)}

/* Glass panels (frosted) with fallback */
header, main, article, footer, aside{
  background: var(--panel);
  border:1px solid var(--panel-border);
  border-radius: var(--radius);
  padding:1rem;
  box-shadow: var(--shadow);
}
@supports not (backdrop-filter: blur(12px)){
  header, main, article, footer, aside{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); }
}
.glass{ backdrop-filter: saturate(1.2) blur(12px); -webkit-backdrop-filter: saturate(1.2) blur(12px) }

/* Content & typography */
header{ display:flex; flex-direction:column; gap:.4rem; margin:1rem auto; width:min(100%, 1100px) }
header h1{ font-size:clamp(1.6rem, 4vw, 3rem); line-height:1.04; margin:0; letter-spacing:.2px; }
header .meta{ font-size:.9rem; color:var(--muted) }
nav{ margin-top:.25rem; }
nav a{ color:#fff; text-decoration:none; padding:.25rem .6rem; border-radius:6px; border:1px solid rgba(255,255,255,.25) }
nav a:hover{ text-decoration:underline; }
nav a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Main content & article */
main{ padding:1rem 0 2rem; }
article{ display:block; }

/* Featured image frame */
.image-frame{ aspect-ratio:16/9; width:100%; overflow:hidden; border-radius:12px; border:1px solid rgba(255,255,255,.25); box-shadow:0 8px 22px rgba(0,0,0,.25); margin:0.25rem 0 1rem }
.image-frame img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Content typography specifics */
.content{ padding:0; margin:0; }
h2{ font-size: clamp(1.4rem, 2.5vw, 1.8rem); margin:.75rem 0 .5rem; color:var(--text) }
p{ color:var(--text); margin:.6rem 0 }
blockquote{ margin: .8rem 0; padding:.6rem 1rem; border-left:3px solid var(--accent); background: rgba(255,255,255,.04); border-radius:6px; font-style:italic }
ul{ padding-left:1.25rem; margin:.6rem 0 }
li{ margin:.25rem 0; }

/* Footer & product ads */
footer{ margin:2rem auto; padding:1rem; display:grid; gap:.75rem; grid-template-columns: 1fr; }
.product-ad, .sponsored-page{ border-radius:12px; overflow:hidden; }
.product-ad a, .sponsored-page a{ display:block; padding:.75rem; color:var(--text); text-decoration:none; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25) }
.product-ad a:hover, .sponsored-page a:hover{ text-decoration:underline; background: rgba(255,255,255,.12) }
footer p{ text-align:center; color:var(--muted); }

/* Links & interactions */
a, button, .btn, .cta{ transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease }
a{ color:var(--accent) }
a:hover{ text-decoration:underline; color:#fff }
a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; text-decoration:underline }

/* Buttons (solid / outline variants) */
button, .btn, .cta{ font-family:inherit; font-size:1rem; padding:.65rem 1rem; border-radius:999px; border:1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color:var(--text); cursor:pointer }
.btn{ display:inline-block; text-align:center; text-decoration:none; }
.btn.primary{ background:var(--accent); border-color: rgba(255,255,255,.25); color:white; }
.btn.secondary{ background:transparent; border-color: rgba(255,255,255,.5); color:var(--text) }
button:focus-visible, .btn:focus-visible, .cta:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Helper utilities (grid, container, card, tag) */
.container{ max-width: clamp(320px, 86vw, 1100px); margin-inline:auto; padding-inline:1rem }
.grid{ display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items:stretch }
.card{ background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.15); border-radius:12px; padding:0.75rem }

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; overscroll-behavior:none !important; }
}

/* Print styles (readability) */
@media print{
  body{ background: #fff; color:#000; }
  header, main, article, footer{ background: transparent; border: none; box-shadow: none; }
  a{ text-decoration: underline; color: #000; }
}