:root {
  --maxw: 900px;
  --ink: #111;
  --accent: #ff5e5e;
  --accent-dark: #e44a4a;
  --bg: #1b1b1b;
}

/* Reset + base */
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);

  /* Cinematic background */
  background:
    radial-gradient(1600px 800px at 20% -10%, #1b1f2a 0%, transparent 60%),
    radial-gradient(1200px 600px at 90% 0%, #2b1f1f 0%, transparent 55%),
    var(--bg) url('https://www.transparenttextures.com/patterns/asfalt-light.png') repeat;
  background-attachment: fixed;
}

/* Global film grain overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'>\
  <filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/></filter>\
  <rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>");
  animation: grain 1.8s steps(2,end) infinite;
}

@keyframes grain {
  0%   { transform: translate(0,0) }
  25%  { transform: translate(-10px,8px) }
  50%  { transform: translate(6px,-12px) }
  75%  { transform: translate(-4px,6px) }
  100% { transform: translate(0,0) }
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 1.25rem; }

/* HERO */
.hero {
  position: relative;
  background: url('https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=1950&q=80')
             center/cover no-repeat;
  height: 300px;
  color: #fff;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.35);
}
.overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 0 1rem;
}
.overlay h1 { font-size: 2.5rem; margin: 0; text-shadow: 0 2px 8px rgba(0,0,0,.35); }
.overlay p  { margin-top: .5rem; font-size: 1.2rem; text-shadow: 0 1px 6px rgba(0,0,0,.35); }

/* Cards */
.card {
  background: #fff;
  border-radius: 12px;
  padding: 1.25rem;
  margin: 1.5rem 0;
  box-shadow: 0 10px 26px rgba(25, 35, 65, 0.15);
}
h2 { margin-top: 0; color: var(--accent); }
a { color: var(--accent); }
a:hover { color: var(--accent-dark); }

/* Feature image + caption */
.joke-photo {
  width: 100%;
  max-width: 520px;
  border-radius: 10px;
  display: block;
  box-shadow: 0 10px 24px rgba(17,30,56,.12);
}
.feature { position: relative; margin: .5rem 0 0; display: inline-block; }

.caption-banner {
  margin-top: .75rem;
  display: inline-block;
  padding: .75rem 1rem;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(229, 64, 64, 0.25);
  max-width: 520px;
}
.caption-line {
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.25;
}

/* Footer */
.smallprint { color: #aaa; text-align: center; padding-bottom: 2rem; }