/* Base & Theme Tokens */
:root{
  --bg: #0b0f14;
  --bg-2: #11161c;
  --text: #e8f0e8;
  --muted: #a6b4a0;
  --accent: #7a9e3d;
  --accent-2: #a9c57a;
  --card: rgba(255,255,255,0.08);
  --card-border: rgba(255,255,255,0.18);
  --focus: 0 0 0 3px rgba(122,158,61,.6);
  --radius: 12px;
}

/* Reset & Layout Core */
*{box-sizing:border-box}
html,body{height:100%}
html{font-size:16px}
body{
  margin:0;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  background:
    linear-gradient(135deg, rgba(10,14,12,.92) 0%, rgba(9,12,12,.92) 60%, rgba(8,12,12,.92) 100%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.04) 0 1px, transparent 1px 2px),
    radial-gradient(circle at 20% 0%, rgba(90,110,60,.18), transparent 40%),
    radial-gradient(circle at 90% 10%, rgba(60,80,40,.18), transparent 40%);
  background-blend-mode: overlay, overlay, normal, normal;
  min-height:100%;
  background-attachment: fixed;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}

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

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

.card{background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); padding:1rem}

/* Header / Page Structure */
header, main, footer, aside{ padding:0.5rem 0; }

/* Glassy surfaces with graceful fallback */
header, .glass, article{ background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); border-radius:var(--radius); padding:1rem; }
header{ text-align:center; margin:1rem auto; }
@supports not (backdrop-filter: blur(8px)){
  header{ background: rgba(255,255,255,0.15); }
}
header h1{ font-size: clamp(1.6rem, 2.4vw + 1rem, 2.6rem); margin:.25rem 0 0.5rem; letter-spacing:.2px }
header .meta{ color:var(--muted); font-size: .9rem; margin-bottom:.5rem; }

/* Image framing (even if not used by markup, style selector included) */
.image-frame{ aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; border:1px solid rgba(255,255,255,.25); background:#111; box-shadow:0 6px 20px rgba(0,0,0,.25) }
.image-frame img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Content semantics */
.content{ padding:block 0.75rem; padding-inline:0; }

/* Article content styling (targets article descendants) */
article{ margin:0 auto; max-width:900px; padding:0.75rem; }
article h2{ font-size: clamp(1.4rem, 1vw + 1.4rem, 1.9rem); margin:.75rem 0 .5rem; }
article h3{ font-size:1.15rem; margin:.75rem 0 .4rem; color:#e9f0d9 }
article p{ margin:.5rem 0 1rem; color:#dde7d2 }
article ul{ margin:0.5rem 0 1rem 1.25rem; padding:0; }
article li{ margin:.25rem 0 }

/* Utility: tags */
.tag{ display:inline-block; padding:.15em .6em; font-size:.75rem; border-radius:999px; background: rgba(122,158,61,.25); color:#eaffea; border:1px solid rgba(122,158,61,.6) }

/* Product ad & footer blocks (glass panels) */
.product-ad, .sponsored-page{ display:block; padding:0.9rem; margin:.5rem 0; text-align:center; border-radius:var(--radius); background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18) }
.product-ad a, .sponsored-page a{ color:#eaffea; text-decoration:none; display:inline-block; padding:.5rem 1rem; border-radius:8px; background: rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.25) }
.product-ad a:hover, .sponsored-page a:hover{ text-decoration:underline }

/* Links & buttons (interactive states) */
a, button, .btn, .cta{ color:var(--text); text-decoration:none; cursor:pointer; }
a:hover, a:focus{ text-decoration:underline; outline:0; }
button, .btn, .cta{ border:none; border-radius:8px; padding:.6em 1em; background: var(--accent); color:#041100; font-weight:600; display:inline-block; transition: transform .2s ease, box-shadow .2s ease; }
.btn{ background: rgba(122,158,61,.9); color:white; border:1px solid rgba(0,0,0,.15) }
.btn:hover{ transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.25) }
.btn:active{ transform: translateY(0) scale(.99) }

/* Outline variant example (ready for usage) */
.btn.outline{ background: transparent; border:1px solid rgba(122,158,61,.8); color:var(--text) }

/* Focus ring accessibility (focus-visible) */
a:focus-visible, button:focus-visible{ outline:none; box-shadow: var(--focus); outline-offset:2px }

/* Glass panel text contrast helpers */
.header-glass h1, .header-glass p{ color:#eaf4e9 } /* fallback text for non-backdrop UI */

/* Layout helpers (responsive) */
@media (min-width: 600px){
  .container{ padding-inline:1rem; }
}
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}

/* Print styles (basic readability) */
@media print{
  body{ background: #fff; color:#000 }
  a{ text-decoration:underline }
}