/* Base tokens */
:root{
  --bg: #0b0f14;
  --bg-2:#1b0f12;
  --text:#f8f2f6;
  --muted:#cdbcc7;
  --pink:#fdbbdc;
  --pink-2:#ffd6e4;
  --accent:#ff8a3d;
  --accent-2:#ffd9a6;
  --glass: rgba(255,255,255,.08);
  --card: rgba(255,255,255,.12);
  --radius: 14px;
  --shadow: 0 6px 20px rgba(0,0,0,.25);
  --focus: 3px solid #fff;
}

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

html {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size: clamp(14px, 1vw + 12px, 16px);
}

body {
  margin:0;
  color:var(--text);
  background-color:var(--bg);
  /* Layered background: gradient + subtle noise/scanlines (pure CSS) */
  background-image:
    radial-gradient(circle at 20% 0%, rgba(255,180,210,.25) 0 40px, transparent 40px),
    linear-gradient(135deg, rgba(255,160,120,.25), rgba(255,210,140,.15) 60%, rgba(0,0,0,0) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 2px);
  background-blend-mode: overlay;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height:1.5;
  min-height:100%;
}

a { color: var(--accent-2); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.container { max-width: clamp(320px, 92vw, 1100px); margin-inline: auto; padding-inline: 1rem; }

/* Layout primitives */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }

.card { background: var(--card); border: 1px solid rgba(255,255,255,.25); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); }

/* Glassy surfaces (with fallback) */
header, main, footer { display:block; }
header, footer { padding: .75rem 0; border-radius: 12px; }
header { 
  /* glassy header with backdrop blur */
  background: var(--glass);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
@supports not (backdrop-filter: blur(12px)) {
  header { background: rgba(255,255,255,.18); }
}
footer { 
  background: var(--glass);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
@supports not (backdrop-filter: blur(12px)) {
  footer { background: rgba(255,255,255,.18); }
}

/* Typography / headings */
header h1 { 
  margin:0;
  font-size: clamp(1.75rem, 2.6vw + 1rem, 3rem);
  letter-spacing:.4px;
}
header .meta {
  color: var(--muted);
  font-size: .9rem;
  margin-top:.25rem;
}
h2 {
  font-size: clamp(1.6rem, 2.5vw + 1rem, 2.4rem);
  color: var(--pink-2);
  margin: .25rem 0 .5rem;
}
h3 {
  font-size: clamp(1.2rem, 2vw + .8rem, 1.6rem);
  color: var(--accent);
  margin:.5rem 0;
}
p { color: var(--muted); }

/* Image handling */
.image-frame, .featured-image {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.25);
}
.image-frame img, .featured-image img {
  width:100%; height: auto; display:block; object-fit: cover;
}
.featured-image { margin: .5rem 0; }

/* Content scaffolding */
.content { padding: 1rem; border-radius: var(--radius); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); }

/* Lists and inline items */
ul { padding-left: 1.25rem; }
li { margin:.25rem 0; }

/* Utility / UI elements */
.tag {
  display:inline-block; padding:.25rem .5rem; border-radius:999px;
  font-size:.75rem; border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.14); color:#fff;
}
.product-ad { display:block; padding:.75rem; border-radius:var(--radius);
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25);
  box-shadow: var(--shadow);
}
.product-ad a { display:block; padding:.5rem; border-radius:10px; background: rgba(255,200,140,.8); color:#111; font-weight:700; text-align:center; text-decoration:none; }
.product-ad a:hover { filter: brightness(1.05); }

/* Interactive controls */
.btn, button, .cta {
  display:inline-block;
  padding:.65rem 1rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.4);
  background: var(--accent);
  color:#111;
  font-weight:700;
  cursor:pointer;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.btn.secondary { background: transparent; color: var(--accent); border:1px solid rgba(255,180,120,.9); }

/* Focus management for all focusable elements */
a:focus-visible, button:focus-visible { outline:3px solid #fff; outline-offset:2px; }

/* Layout helpers for responsive content blocks */
@media (min-width: 720px){
  main { padding: 1.5rem 0; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Print-friendly tweaks */
@media print {
  body { background: #fff; color:#000; }
  a { text-decoration: underline; }
}

/* Image source fallback for environments without prefers-contrast tweaks */
@supports not (backdrop-filter: blur(12px)) {
  header, footer { background: rgba(255,255,255,.22); }
}