/* CSS: The Number That Called Itself - future cyberpunk, glassy, mobile-first */

:root{
  /* Tokenized palette (brown + rose-gold) */
  --bg: #1b0f08;
  --bg-2: #2a1811;
  --text: #f8efe7;
  --muted: #c7b6a0;
  --accent: #b86b4a;      /* rose-gold baseline */
  --accent-2: #e0b38a;    /* lighter rose-gold */
  --glass: rgba(255,255,255,.08);
  --glass-border: rgba(255,255,255,.25);
  --shadow: 0 8px 24px rgba(0,0,0,.25);
  --radius: 12px;
}

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

html, body { height: 100%; }

html{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  font-size: clamp(14px, 1.6vw, 16px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body{
  margin:0;
  color: var(--text);
  background: 
    linear-gradient(135deg, rgba(60,30,20,.75), rgba(20,12,6,.9)),
    linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.15)),
    radial-gradient(circle at 20% -10%, rgba(200,150,120,.08), transparent 40%),
    #000;
  background-blend-mode: normal;
  min-height: 100%;
  overflow-x: hidden;
  /* Subtle CSS-only noise/scanline layer */
  background-image:
    linear-gradient(135deg, rgba(60,30,20,.75), rgba(20,12,6,.9)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 2px);
  background-size: cover;
}

@media (prefers-reduced-motion: reduce){
  html, body { scroll-behavior: auto; }
}

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

a{ color: var(--accent); text-decoration: none; outline: none; }
a:focus-visible{ outline: 3px solid var(--accent-2); outline-offset: 2px; text-decoration: underline; }
a:hover{ text-decoration: underline; }

/* Layout utilities */
.container{ width: 100%; max-width: clamp(680px, 92vw, 1100px); margin: 0 auto; padding: 0 1rem; }

.grid{ display: grid; gap: 1rem; }
.card{ background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* Hero / content sections */
header{ padding: 2rem 1rem; text-align: center; }
header h1{ margin: .25rem 0 .25rem; font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1.05; letter-spacing:.5px; color: var(--text); }
header .meta{ color: var(--muted); font-size: .92rem; margin-top: .25rem; }

/* Main content */
main{ padding: 1rem 0 2rem; }
.featured-image{ display:block; margin: 1rem auto 1rem; width: min(100%, 720px); border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.25); box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.featured-image img{ width: 100%; height: auto; display: block; object-fit: cover; }

h2{ font-size: clamp(1.4rem, 4vw, 2.2rem); margin: .75rem 0 0.25rem; color: var(--text); }

p{ color: var(--text); margin: 0.75rem 0; max-width: 65ch; }

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

/* Quote styling */
blockquote{ margin: 1rem 0; padding: .75rem 1rem; border-left: 3px solid var(--accent); background: rgba(255,255,255,.05); color: #f7efe7; }

/* .content and utility elements (present or future use) */
.content{ padding: 1rem; color: var(--text); }

/* Image frame utility (as required) */
.image-frame{ aspect-ratio: 16/9; border-radius: calc(var(--radius) + 2px); overflow: hidden; border: 1px solid rgba(255,255,255,.25); box-shadow: var(--shadow); background: #000; display:block; }
.image-frame img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* Product ad / footer modules */
.product-ad{ padding: .75rem; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); text-align: center; }
.product-ad a{ display: block; padding: .75rem; font-weight: 600; color: var(--text); border-radius: 10px; transition: transform .2s; }
.product-ad a:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); }

footer{ padding: 1rem; margin-top: 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; align-items: start; }

.sponsored-page{ padding: .75rem; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); text-align: center; }
.sponsored-page a{ display:block; padding: .75rem; font-weight: 600; color: var(--text); }

/* Generic CTA buttons (variants) */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; padding:.65em 1em; border-radius:999px; border:1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.14); color: var(--text); cursor:pointer; transition: transform .2s ease, background .2s ease; text-align:center; }
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.22); }
.btn:focus-visible{ outline: 3px solid var(--accent-2); outline-offset: 2px; }

/* Outline variant */
.btn.outline{ background: transparent; border:1px solid rgba(183,107,74,.6); color: var(--text); }
.btn.outline:hover{ background: rgba(183,107,74,.15); }

/* Utility: tags */
.tag{ display:inline-block; padding:.25em .6em; border-radius:999px; font-size:.75rem; background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); color: var(--text); }

/* Glass panel fallback (no backdrop-filter) */
@supports not (backdrop-filter: blur(1px)){
  .glass, .card, .product-ad, .sponsored-page{ background: rgba(255,255,255,.15); }
  .glass{ backdrop-filter: none; }
}

/* Print styles */
@media print{
  body{ background: #fff; color: #000; }
  header, main, footer{ padding: .25in; }
  a{ color: #000; text-decoration: underline; }
}
 
/* Reduced motion solo for accessibility */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}