/* Minimal reset and a hacker-inspired, beige-beige cyberpunk theme with frosted glass */
:root{
  --bg-dark: #000000;
  --beige: #e8d9b0;
  --beige-deep: #d6c49e;
  --beige-soft: rgba(232,217,176,0.25);
  --glass: rgba(246,235,214,0.15);
  --glass-border: rgba(246,235,214,0.45);
  --text: #f5eed7;
  --subtle: #cdbb93;
  --shadow: rgba(0,0,0,.6);
  --cta: #e9d6a3;
}
*,
*::before,
*::after{ box-sizing: border-box; }
html, body{ height: 100%; }
html { font-size: 100%; }
body{
  margin: 0;
  padding: 0;
  color: var(--text);
  background-color: var(--bg-dark);
  /* light paper texture: subtle grain and ruled lines reminiscent of a black notebook */
  background-image:
    linear-gradient(rgba(0,0,0,.75), rgba(0,0,0,.75)),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.04) 0px,
      rgba(255,255,255,.04) 1px,
      transparent 1px,
      transparent 40px),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.04) 0px,
      rgba(255,255,255,.04) 1px,
      transparent 1px,
      transparent 40px);
  background-blend-mode: overlay;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}
header{
  padding: 2rem 1rem;
  text-align: center;
  position: relative;
  margin-bottom: 1rem;
  /* frosted glass header band */
  background: linear-gradient(to bottom right, rgba(246,235,214,.08), rgba(246,235,214,.04));
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
header h1{
  margin: 0 auto;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--beige);
  font-size: 2.4rem;
  line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.meta{
  display: block;
  margin-top: .5rem;
  font-size: .92rem;
  color: var(--subtle);
  opacity: .95;
}
main{ padding: 0 1rem 2rem; }
.article{ max-width: 1100px; margin: 0 auto; }

.featured-image{
  width: min(100%, 820px);
  margin: 1rem auto 0;
  border-radius: 14px;
  overflow: hidden;
  display: block;
  background: #111;
  box-shadow: 0 20px 40px rgba(0,0,0,.6);
  border: 1px solid rgba(255,255,255,.04);
}
.featured-image img{ width: 100%; height: auto; display: block; }

article{ display: block; line-height: 1.75; color: var(--text); }
article p{ margin: 1rem 0; color: var(--text); opacity: .98; }
article p, .article * { /* ensure readable chain */ text-rendering: optimizeLegibility; }

footer{
  padding: 2rem 1rem 3rem;
  text-align: center;
  color: var(--beige);
  background: rgba(0,0,0,.15);
}
.product-ad{
  display: inline-block;
  padding: 1rem;
  border-radius: 12px;
  background: rgba(246,235,214,.15);
  border: 1px solid rgba(246,235,214,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  margin-bottom: 1rem;
}
.product-ad h3{ margin: 0 0 .25rem; font-size: 1.05rem; color: var(--beige); }
.product-ad p{ margin: 0; padding: .5rem 0; color: var(--beige); font-weight: 600; }

.product-ad a{
  text-decoration: none;
  color: inherit;
  display: inline-block;
  padding: .75rem 1.2rem;
  border-radius: 8px;
  background: rgba(246,235,214,.25);
  border: 1px solid rgba(246,235,214,.55);
  color: #f6ecd8;
  transition: transform .2s ease, background .2s ease;
}
.product-ad a:hover{ transform: translateY(-1px); background: rgba(246,235,214,.35); }
.product-ad a:focus-visible{ outline: 3px solid #e7d3a3; outline-offset: 2px; }

@media (min-width: 768px){
  /* Desktop-ish tweaks: keep a clean hero, allow slightly larger typography */
  header{ padding: 3rem 1rem 2rem; }
  header h1{ font-size: 3.5rem; }
  .featured-image{ width: 60%; margin: 0 auto 1rem; border-radius: 16px; }

  article p{ font-size: 1.05rem; }
  footer{ padding: 2.5rem 1rem; }
  .product-ad{ padding: 1rem 1.25rem; }
}