/* Light reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }

/* Theme & accessibility */
:root {
  --green: #2fff88;
  --green-dark: #0aa870;
  --text: #eafff0;
  --muted: #b8ffd5;
  --glass: rgba(6, 14, 10, 0.55);
  --glass-border: rgba(0, 255, 140, 0.45);
}
html, body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto;
  color: var(--text);
  background: radial-gradient(circle at 20% 0%, rgba(255,105,180,.65) 0%, rgba(255,105,180,.35) 40%, rgba(255,105,180,0) 70%),
              radial-gradient(circle at 80% 20%, rgba(0,255,128,.25) 0%, rgba(0,255,128,.05) 60%),
              #0a0a0a;
  background-blend-mode: screen;
  line-height: 1.6;
  min-height: 100%;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Layout helpers (mobile-first) */
header, main, footer { width: min(92%, 1100px); margin: 0 auto; padding: 1rem 0; }

header, footer, main { border-radius: 12px; }

/* Frosted glass panels for cyberpunk look */
header, footer, main, .featured-image { backdrop-filter: saturate(110%) blur(6px); -webkit-backdrop-filter: saturate(110%) blur(6px); background: rgba(6, 14, 10, 0.45); border: 1px solid var(--glass-border); }

/* Header styling (clear hero presence) */
header { padding: 1.25rem; }
header h1 { font-size: 1.6rem; margin-bottom: .25rem; color: #eafff9; text-shadow: 0 0 8px rgba(0,255,140,.4); }
.meta { font-size: .92rem; color: #c9ffd9; opacity: .95; }

/* Featured image block */
.featured-image { margin: 1rem 0; border-radius: 12px; overflow: hidden; border: 1px solid rgba(0,255,140,.25); }
.featured-image img { display: block; width: 100%; height: auto; }

/* Main article area */
main { padding: .75rem 0; }
article { padding: 0.75rem; font-size: 1rem; line-height: 1.8; color: #eafff3; }

/* Product ad CTA (prominent in footer) */
.product-ad { padding: .75rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; border-radius: 12px; background: rgba(6, 14, 10, 0.55); border: 1px solid rgba(0,255,140,.4); }
.product-ad h3 { margin: 0; font-size: 1.04rem; }
.product-ad a { text-decoration: none; }

/* CTA button style for product ad link (neon green hacker vibe) */
.product-ad a p, .product-ad a { color: #041e0b; font-weight: 700; padding: .65rem 1rem; border-radius: 999px; background: linear-gradient(#2cff88, #1cc76d); display: inline-block; border: 1px solid rgba(0,0,0,.15); box-shadow: 0 2px 6px rgba(0,255,140,.5); }

/* Footer text */
footer p { text-align: center; margin: .6rem 0 0; color: #c8ffd0; }

/* Focus styles for accessibility */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

/* Captioning: first letter styling for content paragraphs (enhanced readability) */
p.content:first-letter { font-weight: 700; font-size: 1.8em; float: left; margin: 0 .1em 0 0; color: #aaffcc; }

/* Responsive tweaks */
@media (min-width: 600px) {
  header h1 { font-size: 2rem; }
  article { font-size: 1.05rem; }
}
@media (min-width: 900px) {
  header { padding: 1.5rem 1.25rem; }
  header h1 { font-size: 2.6rem; }
  .product-ad { gap: 1.25rem; }
}