:root { --bg:#0d0d0d; --panel:#161412; --text:#e8e0d0; --orange:#ff8a1f; --muted:#a89f8f; --glow:#7dffc0; --wood:#9a5c1c; --brass:#d1a63a; --ink:#3a1d06; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Georgia,"Times New Roman",serif; line-height:1.6; }
body.noscroll { overflow:hidden; }
header, main, footer { max-width:64rem; margin:0 auto; padding:0 1.25rem; }
header { padding-top:2.5rem; text-align:center; }
h1 { color:var(--orange); font-size:clamp(2rem,7vw,3rem); line-height:1.15; margin:0 0 .5rem; }
h2 { color:var(--orange); font-size:1.5rem; margin:2.25rem 0 .5rem; border-bottom:1px solid #2a2622; padding-bottom:.25rem; }
.tagline { color:var(--muted); font-size:1.1rem; margin:0 0 1rem; }
.when { font-family:"Palatino Linotype",Palatino,"Book Antiqua",Cambria,"Times New Roman",serif; font-size:1.4rem; margin:.25rem 0; font-variant-numeric:lining-nums; }
.where { text-align:center; font-family:inherit; font-size:1.15rem; margin:.25rem 0 .5rem; text-shadow:0 1px 8px #000; }
.contact { margin:.25rem 0 0; }
a { color:var(--orange); }
a:hover, a:focus { color:#ffb061; }
ul { padding-left:1.25rem; }
li { margin:.5rem 0; }
.text, #live > h2 { max-width:44rem; margin-left:auto; margin-right:auto; }
section.text > h2 { max-width:none; }
footer { text-align:center; color:var(--muted); padding:2.5rem 1.25rem 3rem; }

/* ---- the TV grid ---- */
.tvs { display:grid; grid-template-columns:1fr; gap:1.25rem 1.5rem; margin:1.25rem auto 0; max-width:52rem; }
@media (min-width:42rem) { .tvs { grid-template-columns:1fr 1fr; } }

.tv { position:relative; margin:0; aspect-ratio:800 / 700; container-type:inline-size; transition:transform .18s ease; }
@media (hover:hover) { .tv:hover { transform:rotate(-1deg) scale(1.02); } }
.frame { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3; }
.tv-btn { position:absolute; inset:0; z-index:5; width:100%; height:100%; margin:0; padding:0; border:0; background:transparent; cursor:pointer; border-radius:6%; }
.tv-btn:focus-visible { outline:3px solid var(--orange); outline-offset:2px; }

/* glass area: matches the hole in tv.svg (x 140, y 160, 480 by 270 of 800 by 700) */
.glass { position:absolute; left:17.5%; top:22.857%; width:60%; height:38.571%; border-radius:9.17% / 16.3%; overflow:hidden; background:#06110d; z-index:1; }
.glass video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; opacity:0; transition:opacity .4s; }
.glass[data-state="live"] video { opacity:1; }
.demo { display:none; position:absolute; inset:0; width:100%; height:100%; }
.glass.demoing .demo { display:block; }

.static { position:absolute; inset:-20%; opacity:.6; animation:snow .5s steps(5) infinite;
  background-size:200px 200px;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.glass[data-state="sleeping"] .static { opacity:.2; }
.glass[data-state="live"] .static { display:none; }
@keyframes snow {
  0% { transform:translate(0,0); } 20% { transform:translate(-9%,6%); } 40% { transform:translate(7%,-8%); }
  60% { transform:translate(-5%,-4%); } 80% { transform:translate(8%,9%); } 100% { transform:translate(0,0); }
}

.msg { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:84%; margin:0; padding:.35em .6em; text-align:center; font-size:3.6cqw; line-height:1.3; color:#d9ffe9; background:rgba(0,0,0,.55); border-radius:8px; text-shadow:0 0 6px rgba(125,255,192,.7); }
.glass[data-state="live"] .msg { display:none; }
.msg:empty { display:none; }

/* glow, vignette, and scanlines over the glass */
.fx { position:absolute; inset:0; pointer-events:none; z-index:2;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.5) 100%), repeating-linear-gradient(to bottom, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  box-shadow:inset 0 0 7cqw rgba(125,255,192,.4); animation:flicker 5s infinite; }
@keyframes flicker { 0%,100% { opacity:1; } 47% { opacity:1; } 48% { opacity:.78; } 50% { opacity:1; } 83% { opacity:.9; } 85% { opacity:1; } }

.plate-label { position:absolute; left:37.5%; top:64.57%; width:25%; height:5.71%; z-index:4; display:flex; align-items:center; justify-content:center; pointer-events:none;
  font-weight:bold; font-size:3cqw; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); text-shadow:0 1px 0 rgba(255,255,255,.35); }

/* ---- full-screen view ---- */
#theater { position:fixed; inset:0; z-index:100; background:#000; }
#theater[hidden] { display:none; }
.bezel { position:absolute; inset:0; padding:clamp(14px,3.2vw,44px) clamp(14px,3.2vw,44px) clamp(44px,6.5vw,72px);
  background:repeating-linear-gradient(95deg, rgba(0,0,0,.08) 0 3px, transparent 3px 11px), linear-gradient(#c98a34, #8a4f17 60%, #6b3a10);
  box-shadow:inset 0 0 0 3px var(--ink), inset 0 0 40px rgba(0,0,0,.45); }
.bigscreen { position:relative; width:100%; height:100%; background:#000; border-radius:clamp(14px,3vw,34px); overflow:hidden;
  box-shadow:0 0 0 4px var(--ink), 0 0 0 7px #5a300c, inset 0 0 40px rgba(125,255,192,.35); }
.bigscreen video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }
.bigscreen .static { opacity:.5; }
#theater[data-state="live"] .bigscreen .static { display:none; }
#theater[data-state="sleeping"] .bigscreen .static { opacity:.2; }
#bigmsg { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:80%; margin:0; padding:.6rem 1rem; text-align:center; font-size:clamp(1rem,2.6vw,1.6rem); color:#d9ffe9; background:rgba(0,0,0,.6); border-radius:10px; text-shadow:0 0 6px rgba(125,255,192,.7); }
#bigmsg:empty { display:none; }
#theater[data-state="live"] #bigmsg { display:none; }
.bigscreen .demo { object-fit:contain; }
.web { position:absolute; top:0; left:0; width:clamp(80px,14vw,160px); height:clamp(80px,14vw,160px); z-index:3; pointer-events:none; }
.biglabel { position:absolute; left:50%; bottom:clamp(6px,1.2vw,14px); transform:translateX(-50%); min-width:9rem; padding:.15rem 1.4rem; text-align:center; font-weight:bold; letter-spacing:.08em; text-transform:uppercase; font-size:clamp(.8rem,2vw,1.2rem); color:var(--ink);
  background:linear-gradient(#f3d77a, #d1a63a 50%, #9a7418); border:3px solid var(--ink); border-radius:10px; }
#close { position:absolute; top:.6rem; right:.6rem; z-index:4; font:inherit; font-weight:bold; padding:.4rem 1rem; color:var(--ink); background:linear-gradient(#f3d77a, #d1a63a); border:3px solid var(--ink); border-radius:10px; cursor:pointer; }
#close:hover, #close:focus-visible { background:#ffe28f; outline:3px solid var(--orange); outline-offset:2px; }
.rotate-hint { display:none; position:absolute; left:50%; top:.6rem; transform:translateX(-50%); z-index:4; margin:0; padding:.25rem .8rem; font-size:.9rem; color:#fff; background:rgba(0,0,0,.65); border-radius:999px; white-space:nowrap; animation:hintfade 7s forwards; }
@keyframes hintfade { 0%,70% { opacity:1; } 100% { opacity:0; visibility:hidden; } }
@media (orientation:portrait) and (max-width:700px) { .rotate-hint { display:block; } #close { top:2.6rem; } }

@media (prefers-reduced-motion:reduce) {
  .static, .fx, .rotate-hint { animation:none; }
  .tv { transition:none; }
  .tv:hover { transform:none; }
}

/* ---- background scene, readable text panels, per-TV tilt (added with the weathered art) ---- */
html { background:#04080d; }
body { background:transparent; }
.scene { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:#04080d url(bg.svg) center / cover no-repeat; }
.scene::after { content:""; position:absolute; inset:0; background:linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.42)); }
.fog { position:absolute; left:0; width:200%; background:url(fog.svg) repeat-x 0 0 / 50% 100%; animation:drift 150s linear infinite; }
.fog1 { bottom:0; height:42%; opacity:.9; }
.fog2 { bottom:14%; height:36%; opacity:.6; animation-duration:230s; animation-direction:reverse; }
@keyframes drift { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.bat { position:absolute; left:0; top:0; width:clamp(26px,3.4vw,52px); will-change:transform; }
.bat img { display:block; width:100%; animation:flap .5s ease-in-out infinite alternate; }
@keyframes flap { from { transform:scaleY(1); } to { transform:scaleY(.5); } }
@keyframes fly1 { 0% { transform:translate(-8vw,24vh); } 25% { transform:translate(24vw,16vh); } 50% { transform:translate(50vw,26vh); } 75% { transform:translate(78vw,14vh); } 100% { transform:translate(108vw,32vh); } }
@keyframes fly2 { 0% { transform:translate(108vw,50vh); } 30% { transform:translate(72vw,42vh); } 60% { transform:translate(36vw,54vh); } 100% { transform:translate(-8vw,40vh); } }
@keyframes fly3 { 0% { transform:translate(-8vw,8vh); } 50% { transform:translate(52vw,16vh); } 100% { transform:translate(108vw,10vh); } }
.b1 { animation:fly1 46s linear infinite; }
.b2 { animation:fly2 61s linear infinite; animation-delay:-18s; width:clamp(20px,2.6vw,40px); }
.b3 { animation:fly3 38s linear infinite; animation-delay:-9s; width:clamp(18px,2.2vw,34px); }
.b4 { animation:fly1 72s linear infinite; animation-delay:-40s; width:clamp(18px,2.4vw,36px); }
.b5 { animation:fly2 54s linear infinite; animation-delay:-30s; }

.text { background:rgba(4,9,13,.62); border-radius:12px; padding:.9rem 1.25rem; }
section.text > h2:first-child { margin-top:.25rem; }
h1, .tagline, #live > h2 { text-shadow:0 2px 14px #000; }
footer { text-shadow:0 1px 8px #000; }

.tv { transform:rotate(var(--tilt, 0deg)); }
.tv[data-cam="doorbell"] { --tilt:-1.2deg; }
.tv[data-cam="front"] { --tilt:.9deg; }
.tv[data-cam="graveyard"] { --tilt:-.6deg; }
.tv[data-cam="driveway"] { --tilt:1.4deg; }
@media (hover:hover) { .tv:hover { transform:rotate(calc(var(--tilt, 0deg) - 1deg)) scale(1.02); } }

@media (prefers-reduced-motion:reduce) {
  .fog { animation:none; }
  .bat { display:none; }
  .tv { transition:none; }
  .tv:hover { transform:rotate(var(--tilt, 0deg)); }
}

.center { text-align:center; }

.btn-row { margin:2rem auto 1rem; max-width:44rem; }
.btn { display:inline-block; padding:.6rem 1.6rem; font:inherit; font-weight:bold; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; color:var(--ink); background:linear-gradient(#f3d77a, #d1a63a 50%, #9a7418); border:3px solid var(--ink); border-radius:10px; box-shadow:0 3px 10px rgba(0,0,0,.6); }
.btn:hover, .btn:focus { color:var(--ink); background:linear-gradient(#ffe28f, #e0b84a 50%, #a98320); }
.btn:focus-visible { outline:3px solid var(--orange); outline-offset:2px; }

.lead { text-align:center; color:var(--orange); font-size:1.6rem; margin:.25rem 0; text-shadow:0 2px 10px #000; }
#live > h2 { text-align:center; }
header { text-align:center; }

/* ---- visit counters (odometers) ---- */
.svg-defs { position:absolute; }
.counters { display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem 3rem; max-width:44rem; margin:1.75rem auto 0; }
#counters[hidden] { display:none; }
.counter { text-align:center; }
.counter p { margin:.5rem 0 0; color:var(--muted); font-size:.95rem; text-shadow:0 1px 8px #000; }
.odo { display:inline-flex; gap:3px; padding:6px; background:linear-gradient(#f3d77a, #d1a63a 50%, #9a7418); border:3px solid var(--ink); border-radius:10px; box-shadow:0 3px 10px rgba(0,0,0,.6); min-height:3rem; min-width:7rem; }
.digit { display:inline-block; min-width:1.35em; padding:.2em .1em; text-align:center; font:700 1.7rem/1 "Courier New", Courier, monospace; color:#f3d77a; border-radius:4px;
  background:linear-gradient(#0d0804 0 48%, #2a1a0a 52% 100%); text-shadow:0 0 8px rgba(243,215,122,.45); }

.glass[data-state="idle"] .static { opacity:.35; }