/* Section: Reset & Base */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { height: 100%; }
html { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif; }
body { margin: 0; color: var(--text); background: #000; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Section: Palette (Bronze + Neon Green) */
:root {
  --bg: #0b0b0b;
  --bg-2: #111;
  --text: #eafff3;
  --muted: #a6d4b9;
  --accent: #39ff14;        /* Neon green */
  --accent-2: #3dff8a;       /* Brighter neon accent */
  --bronze: #cd7f32;
  --bronze-2: #7a4a22;
  --glass: rgba(255,255,255,0.08);
  --glass-border: rgba(255,255,255,0.25);
}
body {
  background: 
    linear-gradient(135deg, rgba(110,52,12,0.85), rgba(0,0,0,0.85)),
    linear-gradient(to bottom, rgba(15,18,13,0.85), rgba(1,1,1,0.85)),
    repeating-linear-gradient(to bottom, rgba(0,255,0,0.04) 0 2px, transparent 2px 4px);
  background-blend-mode: overlay, overlay, overlay;
  color: var(--text);
}

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

/* Section: Glass panel primitives (fallback + backdrop-filter) */
.header-glass,
.main-glass,
.article-glass,
.footer-glass,
.aside-glass {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  .header-glass,
  .main-glass,
  .article-glass,
  .footer-glass,
  .aside-glass {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .header-glass,
  .main-glass,
  .article-glass,
  .footer-glass,
  .aside-glass {
    background: rgba(255,255,255,0.18);
  }
}

/* Section: Typographic scale (clamp for responsive typography) */
h1 { font-size: clamp(1.8rem, 4vw + 0.5rem, 3.5rem); line-height: 1.04; margin: 0.2rem 0 0.4rem; font-weight: 800; letter-spacing: .2px; color: #eafff0; }
h2 { font-size: clamp(1.1rem, 1.5vw + 0.8rem, 1.7rem); margin: 1rem 0 .5rem; color: #eafff0; }
p { margin: 0 0 1rem; color: #eafff0; opacity: 0.92; }
blockquote { margin: 1rem 0; padding: .75rem 1rem; border-left: 3px solid var(--accent); background: rgba(57,255,20,0.08); border-radius: 6px; }

/* Section: Global elements */
header, nav, main, article, aside, footer { display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; text-decoration-color: rgba(57,255,20,0.8); }

/* Focus visibility for accessibility */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* Section: Hero + header styling */
header { padding: 1rem 0; text-align: center; }
header nav { margin-top: .5rem; }

/* Section: Image framing with aspect and glow */
.image-frame { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; border: 1px solid rgba(255,255,255,.25); box-shadow: 0 8px 22px rgba(0,0,0,.4); }
.image-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transform: translateZ(0); opacity: 0; animation: fadeInUp 0.6s ease forwards; filter: saturate(1.05); }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .image-frame img { animation: none; opacity: 1; } }

/* Section: Content blocks (glass panels) */
main { padding: 0; }
article { display: block; }
.article-glass { margin-top: 1rem; }

/* Section: Content utilities */
.content { padding: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }

/* Section: Cards & tags (utility classes) */
.card { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.22); border-radius: 12px; padding: 1rem; }
.tag { display: inline-block; padding: .15rem .5rem; border-radius: 999px; font-size: .75rem; background: rgba(57,255,20,0.15); border: 1px solid rgba(57,255,20,0.6); color: #eafff3; }

/* Section: Buttons & CTAs (solid + outline variants) */
.btn, .cta { display: inline-block; padding: .65rem 1.15rem; border-radius: 999px; font-weight: 600; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, background .15s ease, color .15s ease; text-align: center; }
.btn { color: #02110a; background: linear-gradient(135deg, rgba(57,255,20,0.9), rgba(0,255,120,0.8)); border-color: rgba(57,255,20,0.9); box-shadow: 0 6px 14px rgba(0,0,0,.25); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn.outline { background: transparent; color: var(--text); border-color: rgba(57,255,20,0.9); }
.btn.secondary { background: #1b1f24; color: #eafff0; border: 1px solid rgba(255,255,255,0.25); }

/* Section: Layout helpers (container and responsive sections) */
header, main, footer { padding: 1rem 0; }
nav a { padding: .25rem .5rem; border-radius: 6px; }

/* Section: Structural selectors (targets per requirement) */
html, body, header, nav, main, article, footer, aside { /* structural baseline targets */ }

/* Section: Small print & print styles */
@media print {
  body { color: #000; background: #fff; }
  a { text-decoration: underline; color: #000; }
  header, main, footer { background: #fff; border: none; }
}

/* Section: Responsive refinements */
@media (max-width: 720px) {
  h1 { font-size: clamp(1.6rem, 6vw, 2.6rem); }
}