:root{
  --bg:#f1e0c6;          /* beige / paper base */
  --ink:#2b251c;          /* body text */
  --accent:#ff9a1a;        /* orange cyber accent */
  --glass: rgba(255,255,255,.15);
  --glassStroke: rgba(255,255,255,.5);
}

*,
*::before,
*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--ink);
  background-color:var(--bg);
  line-height:1.65;
  background-image:
    repeating-linear-gradient(to right, rgba(0,0,0,.08) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(to bottom, rgba(0,0,0,.08) 0 1px, transparent 1px 40px);
  background-attachment: fixed;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Focus styles for accessibility */
:focus-visible{ outline:2px solid #ffd27a; outline-offset:2px; border-radius:2px; }

/* Frosted glass header / hero area */
header{
  position:sticky; top:0; z-index:5;
  display:grid; gap:.25rem;
  padding:1rem 1rem;
  background: rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

header h1{
  margin:0;
  font-family: "Inconsolata","JetBrains Mono","SFMono-Regular",Monaco,"Courier New", monospace;
  font-size: clamp(1.8rem, 4vw, 3rem);
  color:#f8ecd6;
  letter-spacing:.4px;
  text-shadow:0 1px 0 rgba(0,0,0,.15);
}

header .meta{
  margin:0;
  font-size:.85rem;
  color:#d2c3a7;
}

/* Content layout */
main{ padding:1rem; }

article{
  max-width:760px;
  margin:0 auto;
  padding:1rem;
  color:var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto;
  font-size:1rem;
  line-height:1.75;
}

.featured-image{
  margin:1rem auto;
  max-width:100%;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.12);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}

.featured-image img{ width:100%; height:auto; display:block; }

/* Footer / product CTA */
footer{ padding:1.25rem; text-align:center; color:#7e663f; }

.product-ad{
  display:inline-block;
  padding:.75rem 1rem;
  border-radius:12px;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.5);
  margin-bottom:.75rem;
}

.product-ad h3{
  margin:.0 0 .5rem;
  font-family: ui-monospace,SFMono-Regular,Monaco;
  font-size:.92rem;
  color:#f0e0c4;
}

.product-ad a{
  display:inline-block;
  padding:.6rem 1rem;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.6);
  background: rgba(255,153,0,.25);
  color:#2b1f0b;
  font-weight:700;
  transition: transform .15s ease, background .15s ease;
}
.product-ad a:hover{ background: rgba(255,153,0,.38); transform: translateY(-1px); }
.product-ad a:focus-visible{ outline:2px solid #ffd27a; outline-offset:2px; }

/* Small screens first: tighten typography for compact devices */
@media (max-width:599px){
  header{ padding: .9rem 0.8rem; }
  header h1{ font-size:2rem; }
  article{ padding:.8rem; }
}

/* Wider viewports: scale up for hero feel */
@media (min-width:600px){
  header{ padding:1.2rem 1.6rem; }
  header h1{ font-size:2.4rem; }
  article{ padding:1.2rem; }
  .featured-image{ border-radius:14px; }
}
@media (min-width:900px){
  body{ font-size:1.05rem; }
  article{ padding:1.4rem; }
}