/* Project Trapshoot - tribute site
   Palette taken from the backglass: amber lamps, marquee red, night sky, grass green. */
:root {
  --bg: #0b0906;
  --panel: #15110b;
  --ink: #e9dfc8;
  --dim: #a8987a;
  --amber: #e8a010;
  --amber-hi: #f2c040;
  --red: #e23a3a;
  --green: #3f7a33;
  --line: #2c2416;
  --maxw: 1100px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 17px/1.65 Georgia, "Times New Roman", serif;
}
a { color: var(--amber-hi); }
a:hover { color: #fff; }
img, video { max-width: 100%; display: block; }
h1, h2, h3, .nav, .btn, .kicker, .tag {
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
}
h1, h2, h3 { line-height: 1.2; color: #fff; }
h2 { font-size: 1.9rem; margin: 2.4em 0 0.5em; }
h2::after { content: ""; display: block; width: 64px; height: 3px; margin-top: 0.35em;
            background: linear-gradient(90deg, var(--red), var(--amber)); }
h3 { font-size: 1.2rem; margin: 1.6em 0 0.3em; color: var(--amber-hi); }

/* ---- header / nav ---- */
.site-head {
  position: sticky; top: 0; z-index: 10; background: rgba(11,9,6,0.92);
  backdrop-filter: blur(6px); border-bottom: 1px solid var(--line);
}
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0.6em 1.2em; }
.brand { font: bold 1.15rem "Trebuchet MS", Arial, sans-serif; letter-spacing: 3px; color: #fff; text-decoration: none; }
.brand span { color: var(--red); }
.nav { display: flex; flex-wrap: wrap; gap: 0.2em 1.2em; font-size: 0.95rem; }
.nav a { color: var(--dim); text-decoration: none; letter-spacing: 1px; }
.nav a:hover, .nav a.on { color: var(--amber-hi); }
.nav a.play { color: #fff; background: var(--red); padding: 0.15em 0.8em; border-radius: 3px; }
.nav a.play:hover { background: #ff5040; }

.wrap { max-width: var(--maxw); margin: 0 auto; }
main .wrap { padding: 0 1.2em 3em; }

/* ---- marquee bulbs (from the TRAPSHOOT sign) ---- */
.bulbs { position: relative; padding: 14px; border-radius: 18px;
  background:
    radial-gradient(circle, #fff6d8 0 3px, transparent 3.5px) 0 0 / 22px 22px,
    #3a0d0b;
  animation: chase 1.4s steps(2) infinite;
}
@keyframes chase { 50% { background-position: 11px 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .bulbs { animation: none; } .hero .lit { animation: none !important; opacity: 1; } }

/* ---- hero: the board powers up ---- */
.hero { padding: 2.2em 1.2em 1em; text-align: center; }
.hero .board { position: relative; max-width: 1000px; margin: 0 auto; border-radius: 6px; overflow: hidden; background: #000; }
.hero .board img { width: 100%; }
.hero .board .lit { position: absolute; inset: 0; opacity: 0; animation: power 6s ease-in-out infinite; }
@keyframes power { 0%, 12% { opacity: 0; } 30%, 70% { opacity: 1; } 88%, 100% { opacity: 0; } }
.hero h1 { font-size: clamp(1.8rem, 4.5vw, 3.2rem); letter-spacing: 6px; margin: 0.8em 0 0.1em; }
.hero h1 span { color: var(--red); }
.hero p.lede { max-width: 720px; margin: 0.4em auto 1.4em; color: var(--dim); font-size: 1.1rem; }

.btn { display: inline-block; padding: 0.75em 1.8em; border-radius: 4px; text-decoration: none; font-weight: bold;
       letter-spacing: 3px; color: #fff; background: var(--red); box-shadow: 0 0 24px #e23a3a55; }
.btn:hover { background: #ff5040; color: #fff; }
.btn.ghost { background: transparent; border: 2px solid var(--amber); color: var(--amber-hi); box-shadow: none; margin-left: 0.6em; }
.btn.ghost:hover { background: var(--amber); color: #000; }

/* ---- page header ---- */
.page-head { padding: 2.4em 1.2em 0.4em; }
.page-head .kicker { color: var(--red); letter-spacing: 3px; font-size: 0.85rem; text-transform: uppercase; }
.page-head h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 0.2em 0 0.3em; }
.page-head p { color: var(--dim); max-width: 760px; margin: 0; font-size: 1.1rem; }

/* ---- cards ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2em; margin: 2em 0; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 1.2em 1.3em; text-decoration: none; color: var(--ink); display: block; }
.card:hover { border-color: var(--amber); }
.card h3 { margin: 0 0 0.3em; }
.card p { margin: 0; color: var(--dim); font-size: 0.98rem; }

/* ---- content blocks ---- */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2em; align-items: start; }
@media (max-width: 760px) { .cols { grid-template-columns: 1fr; } .btn.ghost { margin: 0.8em 0 0; } }
figure { margin: 1.4em 0; }
figure img { border-radius: 4px; border: 1px solid var(--line); }
figcaption { color: var(--dim); font-size: 0.9rem; margin-top: 0.4em; font-style: italic; }
.note { background: var(--panel); border-left: 3px solid var(--amber); padding: 0.8em 1.1em; margin: 1.4em 0; color: var(--dim); }
.note strong { color: var(--ink); }
.tag { display: inline-block; font-size: 0.72rem; letter-spacing: 2px; padding: 0.1em 0.6em; border-radius: 3px;
       background: #2a1f0e; color: var(--amber-hi); vertical-align: middle; margin-left: 0.4em; }
.tag.ours { background: #2c0f0d; color: #ff8a7a; }
table.spec { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 0.97rem; }
table.spec th, table.spec td { text-align: left; padding: 0.45em 0.6em; border-bottom: 1px solid var(--line); vertical-align: top; }
table.spec th { color: var(--amber-hi); font-family: "Trebuchet MS", Arial, sans-serif; font-weight: normal; white-space: nowrap; }
ol.steps { padding-left: 1.3em; } ol.steps li { margin: 0.35em 0; }
kbd { font-family: monospace; background: #241c10; border: 1px solid #4a3a1c; border-bottom-width: 2px; border-radius: 3px; padding: 0 0.4em; color: var(--amber-hi); }

/* ---- gallery ---- */
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.4em; margin: 1.4em 0; }
.vgrid figure { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.vgrid video { width: 100%; background: #000; aspect-ratio: 4 / 3; }
.vgrid figcaption { padding: 0.6em 0.9em 0.8em; margin: 0; font-style: normal; }
.vgrid figcaption b { color: var(--ink); display: block; font-family: "Trebuchet MS", Arial, sans-serif; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.8em; margin: 1.4em 0; }
.pgrid a { display: block; position: relative; border-radius: 4px; overflow: hidden; border: 1px solid var(--line); }
.pgrid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .25s; }
.pgrid a:hover img { transform: scale(1.04); }
.pgrid span { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.3em 0.6em; font-size: 0.82rem; color: #fff;
              background: linear-gradient(transparent, rgba(0,0,0,.85)); font-family: "Trebuchet MS", Arial, sans-serif; }
.lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center;
            background: rgba(0,0,0,0.92); padding: 2em; cursor: zoom-out; flex-direction: column; }
.lightbox.on { display: flex; }
.lightbox img { max-height: 85vh; width: auto; border-radius: 4px; }
.lightbox p { color: var(--dim); margin: 0.8em 0 0; text-align: center; }

/* ---- footer ---- */
.site-foot { border-top: 1px solid var(--line); color: var(--dim); font-size: 0.88rem; }
.site-foot .wrap { padding: 1.6em 1.2em 2.4em; }
.site-foot p { margin: 0.3em 0; }