/* Base & Tokens */
:root{
  --bg: #0a0b10;
  --bg-2: #0c0f14;
  --surface: rgba(255,255,255,.08);
  --surface-2: rgba(255,255,255,.12);
  --text: #e9eefb;
  --muted: #a6afc8;
  --accent: #e6eaf5;          /* platinum */
  --accent-2: #cbd5e9;
  --card: rgba(255,255,255,.08);
  --border: rgba(255,255,255,.28);
  --shadow: 0 6px 24px rgba(0,0,0,.28);
  --focus: #7bd3fc;
  --radius: 14px;
  --radius-sm: 10px;
  --gap: 1rem;
  --maxw: clamp(320px, 92vw, 1100px);
}
*{box-sizing:border-box}
html,body{height:100%}
html{font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif}
body{
  margin:0;
  color:var(--text);
  background: linear-gradient(135deg, rgba(8,9,14,.95) 0, rgba(6,8,12,.98) 60%, rgba(4,6,12,.95) 100%);
  min-height:100%;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  position:relative;
  isolation:isolate;
}
body::before{
  content:"";
  position: fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 6px),
    radial-gradient(circle at 60% 40%, rgba(255,255,255,.05), transparent 40%),
    linear-gradient(135deg, rgba(6,8,12,.60), rgba(6,8,12,.85) 60%, rgba(6,8,12,.60));
  background-blend-mode: overlay, overlay, normal;
  opacity:.65;
  filter: saturate(0.95);
}

/* Layout helpers */
.container{max-width:var(--maxw); margin-inline:auto; padding-inline:1rem}
.grid{display:grid; gap:var(--gap)}
.card, article, .product-ad{ background: var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);}

/* Header */
header{ padding:1rem 0; }
header h1{ font-size: clamp(1.75rem, 3vw + 1rem, 3rem); line-height:1.04; margin:0 0 .25rem; color:var(--text) }
header .meta{ font-size: .9rem; color:var(--muted) }

/* Hero image frame (supports .image-frame as required) */
.image-frame, .featured-image{ border-radius:var(--radius); overflow:hidden; border:1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); display:block; width:100%; }
.image-frame{ aspect-ratio:16/9; }
.image-frame img, .featured-image img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Main content styling (article glass panel) */
main{ padding: .75rem 0 1rem; }
article{ background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); border-radius:var(--radius); padding:1rem; box-shadow:0 8px 28px rgba(0,0,0,.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* Typography for article content */
article h1{ font-size: clamp(1.25rem, 2.6vw + .5rem, 2rem); margin: .25rem 0 0.5rem; color:var(--text) }
article h2{ font-size: clamp(1.05rem, 2vw, 1.25rem); margin: .75rem 0 .25rem; color:var(--accent); }
article p{ color:var(--text); margin: .5rem 0; line-height:1.55; }
article ul{ padding-left:1.25em; margin: .25rem 0; }
article li{ margin:.25rem 0; color: var(--text) }
blockquote{ margin: .75rem 0; padding:.5rem 1rem; border-left: 3px solid var(--accent-2); color:#eef0ff; background: rgba(255,255,255,.05); border-radius:8px }

/* Content helpers */
.content{ display:block; }

/* Product ad (glass panel) */
.product-ad{ display:flex; flex-direction:column; gap:.5rem; align-items:flex-start; }
.product-ad h3{ margin:.25rem 0; font-size:1.05rem; color:var(--text) }
.product-ad a{ text-decoration:none; color:var(--text); display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1rem; border-radius:999px; border:1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); transition: transform .2s ease, background .2s ease; }
.product-ad a p{ margin:0; }
.product-ad a:hover{ transform: translateY(-1px); background: rgba(255,255,255,.14) }

/* Links & controls */
a, button, .btn, .cta{ color:var(--text); text-decoration:none; outline: none; }
a:focus-visible, button:focus-visible, .btn:focus-visible, .cta:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:6px; }

/* Button variants */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.65rem 1rem; border-radius:999px; border:1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.12); color:var(--text); cursor:pointer; transition: transform .2s ease, background .2s ease; }
.btn:hover{ background: rgba(255,255,255,.20); transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.cta{ padding:.6rem 1rem; border-radius:8px; }

/* Image frame secondary styles */
.image-frame{ border:1px solid rgba(255,255,255,.25); }

/* Lists & utilities */
ul, li{ margin:0 0 0.5rem; padding:0; }
li{ list-style: disc; padding-left:1.25rem; }

/* Utility components */
.container{ width:100%; }
.grid{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }
.card{ padding:1rem; }

/* Tag (small badge) */
.tag{ display:inline-block; padding:.15rem .5rem; font-size:.75rem; border-radius:999px; border:1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color:var(--text); }

/* Aside / Footer adjustments */
footer{ padding:1rem 0; }

/* Print styles (basic readability) */
@media print{
  body{ background:white; color:#000; }
  header, nav, footer{ display:none; }
  article{ background: none; border: none; box-shadow:none; padding:0; }
  .container{ padding:0; width:100%; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}
@supports (backdrop-filter: blur(1px)){
  article{ backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
}