/* Minimal reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
:root {
  --bg: #0f0a07;            /* deep brown/black */
  --beige: #e9dcc2;          /* beige for frosted glass */
  --beige2: #d8c6a0;
  --text: #f6edd6;           /* accessible light text on dark */
  --glass: rgba(245, 240, 226, 0.28);
  --accent: #a58a57;          /* bronze accent */
  --shadow: 0 12px 28px rgba(0,0,0,.25);
}
html { font-size: 16px; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color: var(--text);
  background-color: var(--bg);
  /* brown diagonal lines background */
  background-image: repeating-linear-gradient(
    135deg,
    rgba(140, 90, 50, 0.28) 0px,
    rgba(140, 90, 50, 0.28) 8px,
    rgba(100, 60, 40, 0.0) 8px,
    rgba(100, 60, 40, 0.0) 16px
  );
  background-size: cover;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }

/* Layout scaffold (mobile-first) */
main {
  min-height: calc(100vh - 160px);
  display: grid;
  place-items: center;
  padding: 6vmin 1rem 0;
}
.image-frame {
  width: min(92vw, 860px);
  background: rgba(233, 220, 194, 0.28);  /* frosted-beige panel */
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 18px;
  padding: 1.25rem;
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
}
.image-frame img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.35);
  object-fit: cover;
}

/* Footer with CTA card and auth-friendly colors */
footer {
  padding: 1.75rem 1rem;
  text-align: center;
  color: #f2e6cd;
  background: linear-gradient(to top, rgba(0,0,0,0.25), rgba(0,0,0,0));
}
.product-ad {
  display: inline-block;
  padding: .6rem;
  margin: 0 auto 0.75rem;
  background: rgba(253, 244, 220, 0.22);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 12px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.product-ad h3 {
  margin: 0 0 .35rem;
  font-size: 1.05rem;
  font-weight: 700;
}
.product-ad a {
  display: inline-block;
  padding: .55rem 1rem;
  border-radius: 8px;
  background: linear-gradient(135deg, #d3a05e, #7a5a2a);
  color: #1b1006;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,.25);
}
.product-ad a:hover { transform: translateY(-1px); }
.product-ad a:focus-visible {
  outline: 3px solid #ffd29b;
  outline-offset: 2px;
}
.product-ad a p { margin: 0; padding: 0; }

/* Typography tweaks for readability and 'hacker/beige' vibe */
footer p { margin: 0.25rem 0 0; font-size: .85rem; opacity: .95; }

/* Focus accessibility for links/buttons outside of ad as well */
:focus-visible {
  outline: 3px solid #ffd29b;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Responsive tweaks for larger screens (desktop/tablet) */
@media (min-width: 600px) {
  main { padding: 8vmin 2rem 0; }
  .image-frame { width: min(70vw, 900px); }
}
@media (min-width: 900px) {
  /* Slightly larger breathing room on wide screens */
  main { padding: 10vmin 3rem 0; }
  .image-frame { border-radius: 20px; padding: 1.5rem; }
}