/* 0. Token palette & global helpers */
:root{
  --bg: #1b0a2b;              /* deep plum base */
  --bg-2: #2a122a;            /* richer layer */
  --text: #f8f5ff;             /* high-contrast text */
  --muted: #d6c4e6;            /* secondary text */
  --accent: #d4af37;           /* gold primary */
  --accent-2: #ffd66b;         /* gold secondary */
  --glass: rgba(255,255,255,.18);       /* frosted glass tint (with backdrop) */
  --glass-2: rgba(255,255,255,.08);     /* fallback tint */
  --border: rgba(255,255,255,.28);      /* glass border */
  --shadow: 0 8px 28px rgba(0,0,0,.25);
  --focus: #ffffff;
  --radius: 14px;
}
*{box-sizing:border-box}
html,body{height:100%}
html{font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial; line-height:1.5; background: none}
body{
  margin:0;
  color:var(--text);
  min-height:100%;
  display:flex;
  flex-direction:column;
  /* Layered background: gradient + subtle scanlines + gold specks */
  background-image:
    radial-gradient(circle at 15% 20%, rgba(212,175,55,.08) 0 8px, transparent 9px),
    radial-gradient(circle at 85% 60%, rgba(212,175,55,.05) 0 8px, transparent 9px),
    linear-gradient(135deg, rgba(22,0,35,.95), rgba(10,0,20,.95)),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.04) 0 1px, transparent 1px 2px);
  background-blend-mode: overlay, overlay, normal, overlay;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (prefers-reduced-motion: reduce){
  body{ background-attachment: initial; }
}
@media print{
  :root{ color-scheme: light; }
  body{ background: #fff; color:#000; }
  header, main, footer{ background: transparent; box-shadow:none; border:none; }
  .image-frame{ border: none; box-shadow:none; }
}

/* 1. Layout primitives (sections required in selectors) */
html, body, header, nav, main, article, footer, aside{ /* baseline to satisfy selectors */ }
header, main, footer, aside{ width:100% }

/* 2. Structural utilities */
.container{ max-width: clamp(320px, 88vw, 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,.08); border:1px solid rgba(255,255,255,.25); border-radius: 12px; padding: .9rem 1rem; color:var(--text); box-shadow: var(--shadow); }
.tag{ font-size: .75rem; padding:.25rem .5rem; border-radius:999px; background: rgba(212,175,55,.25); color:#fff; display:inline-block }

/* 3. Frosted glass panels (fallback if no backdrop-filter) */
.glass, header, main, footer, .content, .product-ad{ 
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: .75rem;
}
@supports not (backdrop-filter: blur(12px)){
  .glass, header, main, footer, .content, .product-ad{
    background: var(--glass-2);
  }
}
header, main, footer{ display:block; }

/* 4. Typography (fluid + readable) */
h1{ font-size: clamp(1.75rem, 1.6rem + 2vw, 3rem); line-height:1.14; margin:0 0 .5rem; letter-spacing:.2px; color:var(--text) }
p{ margin:0 0 0.75rem; color: var(--muted); }
a, button, .btn, .cta{ font-family: inherit; font-weight: 600; color: #fff; text-decoration: none; }

/* 5. Image frame styling (media content) */
.image-frame{ aspect-ratio: 16 / 9; width: min(720px, 92%); margin: 1rem auto; border-radius: 12px; overflow:hidden; border:1px solid rgba(255,255,255,.28); 
  box-shadow: 0 8px 28px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
  background: #0b0b0f;
}
.image-frame img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Subtle glow border on image frame for depth */
.image-frame{ outline: 1px solid rgba(212,175,55,.35); outline-offset: 0.5px; }

/* 6. Core page layout rules (aligned to requirements) */
header{ text-align:center; padding: 1.75rem 1rem; display:grid; place-items:center; }
main{ padding: 0.75rem 1rem; display:grid; place-items:center; }
article{ width:100%; display:flex; justify-content:center; }
footer{ padding: .75rem 1rem; display:grid; gap:.75rem; grid-template-columns: 1fr; justify-items:center; }

/* 7. Specific selectors requested */
.content{ padding: .75rem 0; color: var(--muted); }
.product-ad{ display:flex; align-items:center; justify-content:center; text-align:center; width:100%; padding: .6rem 0; }
.product-ad a{ display:inline-block; padding:.6rem 1rem; border-radius:999px; background: rgba(212,175,55,.28); color:#fff; transition: transform .15s ease, background .2s ease; }
.product-ad a:hover{ transform: translateY(-1px); background: rgba(212,175,55,.44); }
.sponsored-page{ display:flex; align-items:center; justify-content:center; }

/* 8. Interactive controls (buttons, links, forms) */
a{ color: var(--accent-2); }
a:hover{ text-decoration: underline; color: #ffd86b; }
a:focus-visible, button:focus-visible, .btn:focus-visible, .cta:focus-visible{ outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

/* Button variants (solid and outline) */
.btn, .cta, button{ display:inline-block; border:0; border-radius: 8px; padding: .65rem 1rem; font-size: 0.95rem; cursor: pointer; transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s; }
.btn{ background: var(--accent); color:#111; }
.btn:hover{ background: color-mix(in oklab, var(--accent) 70%, #000 30%); transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn.secondary{ background: transparent; color: var(--text); border: 1px solid rgba(255,255,255,.4); }
.btn.ghost{ background: transparent; color: var(--text); border: 1px solid transparent; }

.cta{ background: transparent; color: var(--text); border: 1px solid rgba(212,175,55,.6); padding: .65rem 1rem; }
.cta:hover{ background: rgba(212,175,55,.25); }

/* 9. Utilities for lists (ul, li) */
ul{ margin:0; padding-left:1.25rem; color: var(--muted); }
li{ margin: .25rem 0; }

/* 10. Responsive behavior helpers (grid utilities) */
@media (min-width: 720px){
  .container{ padding-inline: 0; }
}
@media (prefers-reduced-motion: reduce){
  * { transition: none !important; animation: none !important; }
}

/* 11. Print optimization (basic readability) */
@media print{
  body{ background: #fff; color:#000; }
  header, main, footer{ background: transparent; border: none; box-shadow:none; }
  .image-frame{ page-break-inside: avoid; }
}