/* Base color tokens (khaki/gold inspired) */
:root{
  --bg: #141306;
  --bg-2: #2a2a14;
  --text: #f7f4d9;
  --muted: #cbb98a;
  --accent: #d4af37;
  --accent-2: #e0bd56;
  --glass: rgba(246, 238, 178, 0.14);
  --glass-2: rgba(246, 238, 178, 0.08);
  --border: rgba(255,255,255,0.28);
  --focus: #ffd96a;
  --shadow: 0 6px 18px rgba(0,0,0,.25);
  --radius: 14px;
}

/* Reset & helpers */
*,*::before,*::after{ box-sizing:border-box; }
html, body{ height:100%; }
html{ font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial; }
body{
  margin:0;
  color:var(--text);
  background:
    linear-gradient(135deg, rgba(18,16,4,.75), rgba(8,8,0,.92) 60%),
    radial-gradient(circle at 15% 0%, rgba(212,175,55,.08), transparent 40%),
    #0e0d0a;
  background-attachment: fixed;
  font-size: clamp(14px, 1.9vw, 18px);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  isolation: isolate;
}
body::before, body::after{
  content:"";
  position: fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
}
body::before{
  /* subtle CRT scanlines (pure CSS) */
  background-image:
    repeating-linear-gradient(to bottom, rgba(0,0,0,.12) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(to right, rgba(0,0,0,.04) 0 1px, transparent 1px 2px);
  mix-blend-mode: overlay;
  opacity:.28;
}
body::after{
  /* faint noise/texture cue */
  background-image: radial-gradient(circle at 20% 40%, rgba(255,255,255,.03), transparent 40%);
  mix-blend-mode: overlay;
  opacity:.6;
}

/* Layout scaffolding */
.container{ width: min(1100px, 92vw); margin-inline: auto; padding: 1rem; }

header, main, footer, nav, aside, article{ display: block; }

header{
  text-align:center;
  padding: 2rem 0 1rem;
  position: relative;
  z-index: 1;
}
header h1{
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  line-height: 1.15;
  margin: 0.25rem 0 0.4rem;
  letter-spacing:.2px;
  color: var(--text);
}
header .meta{
  color: var(--muted);
  font-size: clamp(0.8rem, 1.6vw, 0.95rem);
  margin-top: .25rem;
}

/* Main content area */
main{ display:block; padding: 0.75rem 0 2rem; }
article{ width: min(90vw, 860px); margin-inline:auto; padding: 1rem; border-radius: var(--radius); 
  background: rgba(20,16,6,.28);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce){
  article{ transition: none; }
}
.featured-image{ width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:12px; border:1px solid rgba(255,255,255,.28);
  margin: 0 0 1rem;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.featured-image img{ width:100%; height:100%; object-fit:cover; display:block; }
.image-frame{ width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.28);
  background:#000; box-shadow: 0 8px 22px rgba(0,0,0,.25); display:block;
}
.image-frame img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Glass panel variants & panels */
.card, .content, .product-ad, .sponsored-page{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 12px;
  padding: .9rem;
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
}
.content{ background: var(--glass); border:1px solid var(--border); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
@media (prefers-reduced-motion: reduce){
  .card, .content { transition: none; }
}
.card{ transition: transform .25s ease, box-shadow .25s ease; }
.card:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.28); }

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

/* Typography helpers */
h2{ font-size: clamp(1.15rem, 2.6vw, 1.6rem); margin: 1rem 0 .5rem; color: var(--text); }
p{ margin: .5rem 0 1rem; color: #f4f1d8; }
ul, ol{ margin: .5rem 0 1rem 1.25rem; }
li{ margin: .25rem 0; }

/* Links & buttons (interactive elements) */
a, button, .btn, .cta{ color: var(--text); text-decoration: none; border-radius: 999px; padding: .55rem .95rem; border:1px solid rgba(255,255,255,.35); background: rgba(212,175,55,.25); cursor: pointer; display:inline-block; }
a:focus-visible, button:focus-visible, .btn:focus-visible{ outline: 3px solid var(--focus); outline-offset: 2px; }
a:hover, button:hover, .btn:hover{ text-decoration: underline; text-decoration-color: rgba(255,255,255,.6); }
.btn{ font-weight:600; background: rgba(212,175,55,.28); color: #fff; }
.btn:hover{ background: rgba(212,175,55,.42); transform: translateY(-1px); }
.btn--outline{ background: transparent; border-color: rgba(212,175,55,.8); color: var(--text); }
.btn--outline:hover{ background: rgba(212,175,55,.12); }
.cta{ letter-spacing:.2px; }

/* Special sections in footer */
.product-ad, .sponsored-page{ display:block; text-align:center; margin: .75rem 0; background: rgba(240, 230, 170, .08); border-color: rgba(255,255,255,.28); }
.product-ad a, .sponsored-page a{ color: var(--accent); text-decoration: none; display:block; padding: .5rem; }
.product-ad a:hover, .sponsored-page a:hover{ text-decoration: underline; }

/* Lists and content rhythm */
ul{ padding-left: 1rem; }
ol{ padding-left: 1rem; }

/* Image frame adjustments for alternate usage */
.image-frame{ border-radius: 12px; overflow: hidden; border:1px solid rgba(255,255,255,.28); }

/* Print styles (basic readability) */
@media print{
  body{ background: #fff; color: #000; }
  article{ background: transparent; border: none; box-shadow: none; }
  a, button{ color: #000; text-decoration: underline; }
}
  
/* Layout niceties for micro-breakpoints */
@media (max-width: 700px){
  header{ padding: 1.5rem 0 0.75rem; }
  .featured-image{ aspect-ratio: 16/9; }
}
  
/* Section headers (for sectioning in codebase) */
.header-section, .content-section, .footer-section{ display: none; }