/* hero */
.hero { position: relative; min-height: min(92vh, 900px); display: grid; place-items: center; overflow: hidden; padding: 40px 16px 110px; isolation: isolate;
  background: linear-gradient(180deg, transparent 55%, rgba(79, 122, 76, .16) 88%, transparent); }
.moon { position: absolute; z-index: -2; width: min(560px, 86vw); aspect-ratio: 1; top: 34%; left: 70%; translate: -50% -50%;
  background: url("/assets/moon.png") center / contain no-repeat; image-rendering: pixelated; animation: moonbob 9s steps(9) infinite; }
@keyframes moonbob { 50% { transform: translateY(-12px); } }
.hero::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 176px; pointer-events: none;
  background: url("/assets/graveyard.png") 0 100% / auto 176px repeat-x; image-rendering: pixelated; }

.scene { position: absolute; inset: 0; z-index: -1; transform: translateZ(0); perspective: 1400px; perspective-origin: 50% 40%; display: grid; place-items: center; pointer-events: none; }
.ring { --R: 440px; --card: 132px; position: relative; width: var(--card); height: var(--card); transform-style: preserve-3d;
  transform: translateY(var(--ty, -110px)) rotateX(-12deg); will-change: transform; } /* spun by home.js */
.ring .rc { position: absolute; inset: 0; transform: rotateY(calc(var(--i) * var(--step))) translateZ(var(--R)); transform-style: preserve-3d; }
@media (max-width: 900px) { .ring { --R: 300px; --card: 104px; --ty: -90px; } }
@media (max-width: 560px) { .ring { --R: 175px; --card: 74px; --ty: -120px; } .ring .vcard { padding: 4px; } }

.hero-copy { text-align: center; position: relative; z-index: 2; transform: translateZ(0); }
.wordmark { margin: 0; display: grid; justify-items: center; animation: float 6s steps(6) infinite; }
@keyframes float { 50% { transform: translateY(-10px); } }
/* hand-drawn pixel logotype (tools/make_logo.py) */
.wordmark img { display: block; width: min(940px, 88vw); height: auto; }
/* tagline hangs like a wooden sign */
.tag { --line: #2a170c; display: inline-block; margin: 30px auto 34px; max-width: 32ch; padding: 10px 18px; rotate: -1.5deg;
  background: linear-gradient(180deg, #5a3218 0 50%, #4c2a14 50%); font-size: clamp(19px, 2.6vw, 24px); color: var(--bone); text-shadow: 2px 2px 0 #1a0d05; }
.cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* the vamp wall */
.wall-sec { padding: 90px 0 60px; overflow: hidden; }
.wall-head { margin-bottom: 30px; }
.wall { perspective: 1100px; padding: 40px 0 70px; transform-style: preserve-3d;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.wall-tilt { transform: rotateX(16deg) rotateZ(-3deg); transform-style: preserve-3d; }
.wall .lane { display: flex; gap: 26px; width: max-content; padding: 16px 8px; transform-style: preserve-3d; will-change: transform; } /* slid by home.js */

.flip { --s: 170px; width: var(--s); height: calc(var(--s) + 40px); perspective: 800px; flex: none; cursor: pointer; transition: transform .3s cubic-bezier(.2, .9, .3, 1.3); transform-style: preserve-3d; }
.flip:hover, .flip:focus-visible, .flip.on { transform: translateZ(70px) translateY(-14px) scale(1.06); z-index: 3; }
.flip-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .5s steps(8); }
.flip:hover .flip-in, .flip:focus-visible .flip-in, .flip.on .flip-in { transform: rotateY(180deg); }
.face { --line: var(--ink); position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.face.front { padding: 6px; background: var(--grad-gold); display: flex; flex-direction: column; overflow: hidden; }
.face.front img { width: 100%; height: auto; aspect-ratio: 1; flex: none; display: block; }
.face.front span { color: var(--ink); font-weight: 600; font-size: 14px; padding: 6px 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.face.back { --line: var(--gold); transform: rotateY(180deg); padding: 10px 10px 8px; background: linear-gradient(180deg, #2e1a1c 0 46px, var(--slab) 46px);
  display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.2; overflow: hidden; }
/* one line per row: long names and values are clipped with … instead of wrapping */
.face.back small { color: var(--mist); font-size: 12px; }
.face.back b { font-size: 15px; color: var(--gold); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.face.back div { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; min-width: 0; }
.face.back i { flex: none; font-style: normal; color: var(--mist); }
.face.back span { min-width: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) {
  .flip { --s: 140px; }
  .face.back { padding: 8px 7px 6px; font-size: 11px; gap: 1px; background: linear-gradient(180deg, #2e1a1c 0 38px, var(--slab) 38px); }
  .face.back small { font-size: 10px; }
  .face.back b { font-size: 13px; margin-bottom: 5px; }
}

/* facts: four headstones of uneven height on a strip of graveyard dirt */
.facts { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: clamp(14px, 4vw, 48px); padding: 50px 16px 0; margin-bottom: 90px; }
.facts::after { content: ""; position: absolute; left: 0; right: 0; bottom: -18px; height: 22px; z-index: -1;
  background: repeating-linear-gradient(90deg, var(--moss-deep) 0 6px, transparent 6px 10px) 0 0 / 100% 4px no-repeat, linear-gradient(180deg, #1d140f 0 50%, #140e0a 50%); }
.fact { --h: 150px; flex: 0 1 220px; min-height: var(--h); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; padding: 34px 10px 18px; text-align: center;
  clip-path: polygon(22% 0, 78% 0, 78% 6px, 90% 6px, 90% 14px, 96% 14px, 96% 28px, 100% 28px, 100% 100%, 0 100%, 0 28px, 4% 28px, 4% 14px, 10% 14px, 10% 6px, 22% 6px);
  background: linear-gradient(90deg, #6f6a63 0 8px, #57524c 8px calc(100% - 8px), #3f3b37 calc(100% - 8px));
  box-shadow: inset 0 -8px 0 #1d140f, inset 0 -12px 0 var(--moss-deep), inset 0 -18px 0 #2f2c29; }
.fact:nth-child(1) { --h: 170px; }
.fact:nth-child(2) { --h: 140px; }
.fact:nth-child(3) { --h: 186px; }
.fact:nth-child(4) { --h: 156px; }
.fact b { font-size: clamp(22px, 2.9vw, 34px); line-height: 1.1; color: var(--bone); text-shadow: 0 -2px 0 #2b2724, 0 2px 0 #8a847b; }
.fact span { color: #e4ddd0; font-size: 16px; text-shadow: 0 -1px 0 #2b2724; }
@media (max-width: 760px) {
  .facts { flex-wrap: wrap; gap: 26px 14px; padding-top: 20px; }
  .facts::after { display: none; }
  .fact { flex: 0 1 calc(50% - 7px); --h: 130px !important; }
  .fact:nth-child(even) { --h: 116px !important; }
}

/* final call */
.final { padding-bottom: 100px; }
.final-box { display: grid; grid-template-columns: 220px 1fr; gap: 34px; align-items: center; }
.final-vamp { --line: var(--gold); width: calc(100% - 8px); margin: 4px; rotate: -4deg; animation: float 5s steps(5) infinite; }
@media (max-width: 640px) { .final-box { grid-template-columns: 1fr; text-align: center; } .final-vamp { width: 160px; margin: 0 auto; } }

/* phone hero, last so it wins */
@media (max-width: 560px) {
  .hero { min-height: 680px; padding: 30px 16px 100px; }
  .hero::after { height: 120px; background-size: auto 120px; }
  .moon { width: 78vw; top: 22%; left: 74%; }
  .wordmark img { width: 94vw; }
  .tag { margin-top: 84px; font-size: 18px; }
  .cta .btn { min-width: 240px; }
}