:root {
  --bg:hsl(107, 60%, 98%); --primary:#474547; --accent:#646264;
  --text:#0f172a; --card:#ffffff;
  --muted: rgba(0,0,0,0.55); --radius:14px; --shadow:0 10px 24px rgba(0,0,0,0.08);
  --bar-bg: rgba(0,0,0,0.08); --bar-h: 8px;
  --hero-img: url("images/hero-1792x1024.png");
}
* { box-sizing:border-box; }
html,body {
  margin:0; padding:0; background:var(--bg); color:var(--text); line-height:1.6;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial;
}
/* Top header uses a gradient influenced by primary/accent (ties to hero color if available) */
header {
  background:linear-gradient(90deg, var(--primary), var(--accent));
  color:#fff; padding:2.2rem 1rem; text-align:center; box-shadow:var(--shadow);
}
header h1 { margin:0; font-size: clamp(1.5rem, 3.2vw, 2.4rem); }

main { padding:1.25rem; max-width:1100px; margin:0 auto; }

/* HERO section */
.hero {
  margin:1.25rem 0 1.75rem; border-radius:16px; overflow:hidden; box-shadow:var(--shadow);
  background:#000; position:relative;
}
.hero.no-img { background: linear-gradient(90deg, var(--primary), var(--accent)); }
.hero.no-img .overlay { background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.25)); }
.hero img {
  display:block; width:100%; height:auto; aspect-ratio: 16/9; object-fit: cover;
}
.hero .overlay {
  position:absolute; inset:0; 
  background:linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.35));
}
.hero .overview {
  position:absolute; left:0; right:0; bottom:0; padding:1.1rem 1rem;
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,0.5);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.55));
}
.hero .overview p { margin:.3rem 0; }
.hero .overview a { color:#fff; text-decoration: underline; }
.hero .overview strong { color:#fff; }

/* Grid: lock to max 2 columns, collapse to 1 on small screens */
.container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}
@media (max-width: 720px) {
  .container {
    grid-template-columns: 1fr;
  }
}

.card {
  background:var(--card); border-radius:var(--radius);
  padding:1rem 1.1rem; box-shadow:var(--shadow);
  border:1px solid rgba(0,0,0,0.05);
}
/* Bold black titles */
.card h3 { color:#000; font-weight:700; margin-top:0.2rem; }
.card img {
  width:220px; max-width:95%; border-radius:10px; display:block;
  margin:10px 0; box-shadow:0 6px 16px rgba(0,0,0,0.08);
}

.notice {
  font-size:.9rem; background:#fff3cd; padding:10px; border-left:4px solid #ffc107; border-radius:6px;
}

/* AAM rating visuals */
.aam-row { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin:.2rem 0 .5rem; }
.aam-badge { background:var(--accent); color:#fff; border-radius:999px; padding:.2rem .6rem; font-weight:700; font-size:.85rem; }
.aam-bar { width:100%; background:var(--bar-bg); height:var(--bar-h); border-radius:999px; overflow:hidden; }
.aam-bar > span { display:block; height:100%; background:var(--primary); width:0%; transition:width .5s ease; }
.aam-just { font-size:.9rem; color:var(--muted); margin:.4rem 0 0; }

a.button {
  display:inline-block; padding:10px 14px; background:var(--primary); color:#fff;
  border-radius:10px; text-decoration:none; font-weight:600; margin-top:8px; box-shadow:var(--shadow);
}
a.button:hover { filter: brightness(1.05); }

footer { max-width:1100px; margin:0 auto 2rem; padding:1rem 1.25rem; color:var(--muted); }
footer a { color:var(--accent); }