:root{
  --bg: #0b0f14;
  --bg-2: #0e1117;
  --text: #eaf7ff;
  --muted: #a8c5d4;
  --accent: #d4b01a;      /* mustard */
  --accent-2: #0fb6a5;     /* retro teal */
  --glass: rgba(255,255,255,0.08);
  --glass-strong: rgba(255,255,255,0.18);
  --border: rgba(255,255,255,0.25);
  --shadow: 0 6px 20px rgba(0,0,0,.25);
  --radius: 12px;
  --focus: 0 0 0 3px rgba(15, 210, 170, .6);
}
*,::before,::after{ box-sizing:border-box; }
html, body{ height:100%; }
html{ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body{
  margin:0;
  font-family: UI-System,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue","Arial","Noto Sans",sans-serif;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    linear-gradient(135deg, rgba(212,176,0,0.12), rgba(14,182,165,0.12) 60%, rgba(212,176,0,0.12)),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.04) 0 1px, transparent 1px 2px);
  background-blend-mode: overlay, overlay;
  background-attachment: fixed;
  min-height:100%;
  line-height:1.5;
}
/* Subtle hero vignette for depth */
body::after{
  content:"";
  position: fixed;
  inset:0;
  pointer-events:none;
  background: radial-gradient(circle at 50% -10%, rgba(0,0,0,.25), transparent 40%);
  z-index:0;
}
header, main, footer, aside{
  position: relative;
  z-index: 1;
}
.container{
  width:100%;
  max-width: clamp(860px, 92vw, 1200px);
  margin-inline: auto;
  padding: 0 1rem;
}
header{
  padding: clamp(1.25rem, 3vw, 2.25rem) 0;
  text-align:center;
}
header h1{
  margin:0 0 .5rem;
  font-size: clamp(1.9rem, 4vw + 0.5rem, 3.25rem);
  line-height: 1.08;
  letter-spacing:.2px;
}
header .meta{
  margin:0 0 .75rem;
  color: var(--muted);
  font-size: clamp(0.85rem, 1vw + 0.3rem, 1rem);
}
nav{ margin-top:.25rem; }
nav a{
  color: var(--accent-2);
  text-decoration: none;
  padding:.25rem .6rem;
  border-radius:6px;
  border:1px solid rgba(0,0,0,.0);
}
nav a:focus-visible{ outline: none; box-shadow: var(--focus); outline-offset:2px; }
main{ padding: 1rem 0 2rem; }
article{ display:block; padding: 1rem; border-radius: var(--radius); }

/* Image frame with aspect ratio and glow */
.image-frame{
  display:block;
  width:100%;
  max-width: 900px;
  aspect-ratio: 16/9;
  margin: 0.75rem auto 1rem;
  border-radius: 12px;
  padding:2px;
  border:1px solid rgba(255,255,255,.25);
  background: linear-gradient(135deg, rgba(14,178,165,.25), rgba(212,176,0,.25));
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
  overflow:hidden;
}
.image-frame img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Glass panels (fallback-friendly) */
.section-glass, .product-ad, .sponsored-page{
  background: var(--glass);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
@supports not (backdrop-filter: blur(12px)){
  .section-glass, .product-ad, .sponsored-page{ background: var(--glass-strong); }
}
.product-ad a, .sponsored-page a, .section-glass a{ color: var(--text); text-decoration: none; display:block; }
.product-ad a:hover, .sponsored-page a:hover{ text-decoration: underline; }

/* Content helpers */
.content{ padding: .25rem 0 0; }

/* Buttons and links (solid and outline) */
a, button, .btn, .cta{
  font-family: inherit;
  font-weight: 600;
  font-size: 1rem;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  outline: none;
}
.btn, .cta{
  display:inline-block;
  padding:.75rem 1.1rem;
  border-radius: 8px;
  border:1px solid transparent;
  transition: transform .15s ease, background .2s ease, color .2s ease;
}
.btn{ background: var(--accent); color: #1b1b0d; }
.btn:hover{ transform: translateY(-1px); }
.btn:focus-visible{ outline: none; box-shadow: var(--focus); outline-offset:2px; }
.btn--outline{
  background: transparent;
  color: var(--text);
  border:1px solid rgba(212,176,0,.7);
}
.btn--outline:hover{ background: rgba(212,176,0,.15); }

/* Links behavior */
a:focus-visible{ outline: none; box-shadow: var(--focus); outline-offset:2px; text-decoration: underline; }
a:hover{ text-decoration: underline; }

/* Typography scale (responsive) */
h2{ font-size: clamp(1.4rem, 1.5vw + 1rem, 2rem); margin:.6rem 0; }
h3{ font-size: clamp(1.15rem, 1vw + .8rem, 1.4rem); margin:.5rem 0; }
p{ margin: .5rem 0 1rem; font-size: clamp(1rem, 0.8vw + 0.9rem, 1.125rem); color: rgba(234,247,255,.92); }

/* Lists */
ul{ padding-left: 1.25rem; margin: .5rem 0 1rem; }
li{ margin: .25rem 0; }

/* Utility grid and cards */
.grid{ display:grid; gap:1rem; }
.card{
  background: var(--glass);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
}
.tag{
  display:inline-block;
  padding:.15em .6em;
  font-size:.75rem;
  border-radius:999px;
  background: rgba(14,178,165,.18);
  color: var(--text);
  border:1px solid rgba(14,178,165,.5);
}

/* Layout helpers for sections in footer */
footer{ padding: 1.25rem 0; text-align:center; color: var(--muted); }
footer p{ margin:.5rem 0; color: var(--muted); }

/* Print friendliness */
@media print{
  body{ background: #fff; color:#000; }
  a{ color:#00f; text-decoration: underline; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}
@media (min-width: 0){
  /* Mobile-first: ensure fluid typography scales down nicely on small devices */
  html{ font-size: 16px; }
}
aside{ display:none; }

/* Small reset for readability on all elements within main content */
main, article{ word-break: break-word; }
footer .container{ display:flex; gap:1rem; justify-content:center; align-items:center; flex-wrap:wrap; }

/* Ensure image container scales nicely inside content flow */
.featured-image{ width:100%; display:block; margin:0 auto 1rem; }

/* Accessibility helpers for high contrast on glass text */
.section-glass, .product-ad, .sponsored-page{ color: #eafaff; }
.section-glass a, .product-ad a, .sponsored-page a{ color: #eaffff; }
.section-glass p, .section-glass li{ color: #eaffff; }

/* End of stylesheet */