/* Base tokens */
:root{
  --bg: #0a0a0a;
  --bg-2: #1a0f0a;
  --text: #f7f7f7;
  --muted: #c9bfb0;
  --accent: #e06700;
  --accent-2: #b85400;
  --glass: rgba(255,255,255,.10);
  --stroke: rgba(255,255,255,.25);
  --radius: 14px;
  --radius-sm: 10px;
  --focus-ring: 0 0 0 3px rgba(224,102,0,.6);
}

/* Reset-ish */
* { box-sizing: border-box; }
html, body { height: 100%; }

/* Layered background: gradient + subtle noise/scanline */
body{
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;
  color: var(--text);
  line-height: 1.4;
  background:
    linear-gradient(135deg, #2b120d 0%, #0b0b0b 60%, #130f0a 100%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.04) 0 1px, transparent 1px 2px);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Layout helpers */
.container{ width:100%; max-width: clamp(320px, 90vw, 1100px); padding-inline:1rem; margin-inline:auto; }

/* Header / Nav / Main / Article / Footer */
header{
  display:block;
  margin: .75rem auto;
  padding: .75rem 1rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(10,10,10,.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
header h1{ font-size: clamp(1.4rem, 2.5vw + 1rem, 3rem); margin:.25rem 0 .25rem; }
nav{ margin-top:.25rem; }
nav a{ color:#fff; text-decoration:none; padding:.4rem .6rem; border-radius:999px; border:1px solid rgba(255,255,255,.25); }
nav a:hover, nav a:focus{ text-decoration:underline; outline:none; }

/* Main content region */
main{ padding:0 0 1rem; }

/* Article + image frame */
article{ padding:0; }
.image-frame{ width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:var(--radius); border:1px solid rgba(255,255,255,.25); box-shadow:inset 0 0 12px rgba(0,0,0,.25); background: rgba(0,0,0,.25); }
.image-frame img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Content & utilities */
.content{ padding:.75rem 0; }

/* Product ad sections in footer */
.product-ad{ display:block; padding:.75rem; border-radius:var(--radius-sm); text-align:center; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); margin:.25rem 0; }
.product-ad a{ color:#fff; text-decoration:none; display:inline-block; padding:.25rem .5rem; }

/* Link/Button primitives */
a, button, .btn, .cta{ font-family:inherit; font-weight:600; transition: transform .15s ease, background .3s ease; color:inherit; text-decoration:none; }
a{ color:var(--accent); }
a:hover, a:focus{ text-decoration:underline; outline:none; }

/* Button variants */
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:.75rem 1.25rem; border-radius:999px; border:1px solid transparent; cursor:pointer; background:var(--accent); color:#111; }
.btn.primary{ background:var(--accent); }
.btn.primary:hover{ background:var(--accent-2); transform: translateY(-1px); }
.btn.secondary{ background:rgba(0,0,0,.0); color:var(--text); border:1px solid rgba(255,255,255,.25); }

/* Glass panels (fallback handled) */
.glass{ background: rgba(20,20,20,.22); border:1px solid rgba(255,255,255,.25); border-radius:12px; padding:.75rem; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow:0 8px 24px rgba(0,0,0,.35); }
@supports not (backdrop-filter: blur(12px)) {
  .glass{ background: rgba(20,20,20,.75); border-color: rgba(255,255,255,.4); }
}

/* Chips / tags */
.tag{ display:inline-block; padding:.2rem .5rem; font-size:.75rem; border-radius:999px; background: rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); color:#fff; }

/* Grid & cards */
.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:1rem; }
.card{ background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.25); border-radius:var(--radius); padding:1rem; }

/* Lists */
ul, li{ margin:0; padding:0; list-style:none; }

/* Aside (present for selector coverage) */
aside{ display:none; }

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

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

/* Focus ring for accessibility (focus-visible) */
a:focus-visible, button:focus-visible, .btn:focus-visible, .cta:focus-visible{
  outline:0;
  box-shadow: 0 0 0 3px rgba(255,184,0,.95);
  outline-offset:2px;
}