/* Reset & Tokens */
:root{
  --bg: #0b0b0f;
  --bg-2: #1a0d12;
  --text: #f8f8f8;
  --muted: #b9b9b9;
  --accent: #e5182b;       /* scarlet/red primary */
  --accent-2: #ff495e;      /* secondary red accent */
  --glass: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.25);
  --shadow: 0 10px 28px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
html{font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; line-height:1.4; font-size: 16px}
body{
  margin:0;
  color:var(--text);
  background: linear-gradient(135deg, rgba(180,0,20,.9) 0%, rgba(60,0,0,.9) 60%), 
              radial-gradient( circle at 20% -10%, rgba(255,0,50,.25), transparent 40% ),
              radial-gradient( circle at 90% 10%, rgba(255,60,60,.15), transparent 40% );
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@supports (backdrop-filter: blur(12px)){
  body { background-blend-mode: normal; }
}
@media (prefers-reduced-motion: no-preference){
  body::before{
    content:"";
    position: fixed;
    inset:0;
    background-image: linear-gradient(to bottom, rgba(0,0,0,.04) 0 1px, transparent 1px 2px);
    background-size: 100% 2px;
    pointer-events:none;
    z-index:0;
    mix-blend-mode: overlay;
    opacity:.6;
  }
}
 /* Layered foreground to ensure content sits above background */
 .content-layer{ position:relative; z-index:1; }

/* Layout primitives */
.container{ width: min(92vw, 1100px); margin: 0 auto; padding: 1rem 0; }
.grid{ display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Base elements */
header, main, article, footer, aside{ width:100%; }
header{ padding: 1.25rem 1rem; text-align:center; display:block; }
header h1{ font-size: clamp(1.75rem, 3.2vw + 0.5rem, 3rem); line-height:1.1; margin:0.25rem 0 0.25rem; letter-spacing:.2px; }
header .meta{ color: var(--muted); font-size: clamp(.9rem, .6vw + .7rem, 1rem); margin-top:.25rem; }
nav{ margin-top:.5rem; }
nav a{ color:var(--text); text-decoration:none; padding:.35rem .6rem; border-radius:6px; border:1px solid rgba(255,255,255,.15); display:inline-block; transition: transform .15s ease, background .2s ease; }
nav a:hover{ background: rgba(255,255,255,.08); transform: translateY(-1px); }
nav a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Hero / glass feel for header */
.header-glass{ 
  background: linear-gradient(to bottom right, rgba(255,255,255,.10), rgba(255,0,0,.15)); 
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 14px;
  padding: .75rem 1rem;
  display:inline-block;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
}
@supports not (backdrop-filter: blur(8px)){
  .header-glass{ background: rgba(255,255,255,.14); }
}

/* Main content styling */
main{ padding: 1rem; }
article{ display:block; max-width: clamp(320px, 90vw, 860px); margin: 0 auto; padding: .25rem; }
.image-frame{ aspect-ratio: 16/9; width:100%; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.25); box-shadow: 0 6px 18px rgba(0,0,0,.25); margin: .25rem 0 1rem; }
.image-frame img{ width:100%; height:100%; object-fit:cover; display:block; transform: translateZ(0); }
h2{ font-size: clamp(1.25rem, 1.6vw + 1rem, 2rem); margin: .6rem 0 .4rem; }
p{ font-size: clamp(.95rem, .8vw + .9rem, 1.05rem); color: #f2f2f2; margin: .4rem 0 1rem; line-height: 1.6; }
blockquote{ border-left: 3px solid rgba(231,0,0,.8); padding: .5rem 1rem; margin: .5rem 0; color:#fff; background: rgba(0,0,0,.15); border-radius:6px; }

/* Lists & content helpers */
ul{ padding-left: 1.25rem; margin: .25rem 0 1rem; color: #f7f7f7; }
li{ margin: .25rem 0; }
.tag{ display:inline-block; font-size:.75rem; padding:.25rem .6rem; border-radius:999px; background: rgba(229, 0, 22, .25); color:#ffdede; border:1px solid rgba(255,255,255,.25); }

/* Content utility */
.content{ font-family: inherit; color: var(--text); }

/* Glass panels (cards) with fallback */
.glass{ background: var(--glass); border: 1px solid var(--glass-border); border-radius: 12px; padding: 1rem; box-shadow: 0 8px 24px rgba(0,0,0,.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
@supports not (backdrop-filter: blur(12px)){
  .glass{ background: rgba(255,255,255,.15); backdrop-filter: none; }
}
.card{ background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.15); border-radius:12px; padding:1rem; }

/* Buttons & links */
a, button, .btn, .cta{ font-family: inherit; color: #fff; text-decoration: none; cursor: pointer; }
a{ transition: color .15s ease, text-decoration-color .15s ease; color: var(--accent); text-underline-offset: 3px; }
a:hover{ text-decoration: underline; color: var(--accent-2); }
a:focus-visible{ outline:2px solid var(--accent); outline-offset: 2px; border-radius:4px; }
button, .btn, .cta{ background: var(--accent); border:0; border-radius:6px; padding:.55rem .95rem; font-size: .95rem; color:#fff; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; }

.btn{ background: var(--accent); }
.btn:hover{ background: #c6131d; transform: translateY(-1px); }
.btn:active{ transform: translateY(0); opacity:.95; }
.btn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* Outline variant for CTAs */
.btn--outline{ background: transparent; color: var(--text); border:1px solid rgba(255,255,255,.6); padding:.5rem .9rem; }
.btn--outline:hover{ background: rgba(255,255,255,.08); color:#fff; }

/* Footer / ads as glass panels */
footer{ padding: 1rem 0; display:block; text-align:center; }
.product-ad, .sponsored-page{ display:inline-block; min-width: 240px; margin: .25rem; padding: .75rem; }
.product-ad a, .sponsored-page a{ display:block; text-align:left; color:inherit; text-decoration:none; }
.product-ad{ border-radius:12px; }
.sponsored-page{ border-radius:12px; }

/* Image & media tweaks */
img{ max-width:100%; height:auto; display:block; }

/* Layout helpers for potential side content */
aside{ padding: .5rem; }

/* Print styles */
@media print{
  body{ background: #fff; color:#000; }
  header, nav, footer{ display:none; }
  article{ display:block; width:100%; margin:0; padding:0; }
}
 
/* Subtle responsive typography tweaks */
@media (min-width: 980px){
  html{ font-size: 18px; }
}
@media (min-width: 1200px){
  html{ font-size: 19px; }
}

/* Accessibility: ensure high contrast for text over glass where possible */
:root{ color-scheme: light; }