:root {
  color-scheme: dark;
  --bg: #070809;
  --stone-top: #30343c;
  --stone-bot: #191c21;
  --edge: #444b55;
  --engrave: #9aa2ad;
  --moon: #d6dee8;
  --dim: #5b626c;
}
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100vh;
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--engrave);
  background: radial-gradient(120% 80% at 50% -10%, #14181f 0%, #0a0c0f 42%, #070809 100%);
  overflow-x: hidden;
  position: relative;
}

/* cold moon (parallaxed via JS) */
.moon {
  position: fixed; top: -14vh; left: 50%; transform: translateX(-50%);
  width: 62vh; height: 62vh; border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 214, 230, 0.12), rgba(200, 214, 230, 0) 60%);
  pointer-events: none; z-index: 0; will-change: transform;
}

/* particle canvas (ash + wisps) */
#embers { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }

/* drifting fog */
.fog { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; will-change: transform; }
.fog-layer {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(150, 160, 172, 0.11), rgba(150, 160, 172, 0) 70%);
  filter: blur(52px); will-change: transform;
}
.f1 { width: 80vw; height: 40vh; top: 30%; left: -20vw; animation: drift1 88s ease-in-out infinite; }
.f2 { width: 70vw; height: 34vh; top: 56%; left: 30vw; animation: drift2 116s ease-in-out infinite; opacity: 0.8; }
.f3 { width: 92vw; height: 50vh; top: 8%;  left: 8vw;  animation: drift1 150s ease-in-out infinite; opacity: 0.5; }
/* thin low ground fog creeping along the bottom */
.f4 {
  width: 140vw; height: 22vh; left: -20vw; bottom: -6vh; top: auto; border-radius: 40%;
  background: radial-gradient(ellipse at 50% 100%, rgba(170, 180, 192, 0.10), rgba(170, 180, 192, 0) 72%);
  filter: blur(34px); animation: creep 70s ease-in-out infinite;
}
@keyframes drift1 { 0%,100% { transform: translateX(-10vw); } 50% { transform: translateX(20vw); } }
@keyframes drift2 { 0%,100% { transform: translateX(15vw); } 50% { transform: translateX(-15vw); } }
@keyframes creep  { 0%,100% { transform: translateX(-6vw); } 50% { transform: translateX(6vw); } }

main { position: relative; z-index: 2; max-width: 980px; margin: 0 auto; padding: 5rem 1.25rem 4rem; text-align: center; }

.cross { font-size: 1.6rem; color: var(--dim); margin-bottom: 1rem; animation: pulse 4.5s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { opacity: 0.45; transform: scale(1); text-shadow: 0 0 0 rgba(200, 214, 230, 0); }
  50% { opacity: 0.9; transform: scale(1.08); text-shadow: 0 0 14px rgba(200, 214, 230, 0.35); }
}
h1 {
  font-size: clamp(2rem, 6vw, 3.4rem); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--moon);
  text-shadow: 0 0 18px rgba(180, 196, 214, 0.25);
}
.slogan { margin: 0.9rem auto 2.6rem; font-style: italic; opacity: 0.8; font-size: 1.05rem; max-width: 40ch; }

.counter {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-variant-numeric: tabular-nums; font-weight: 700;
  font-size: clamp(2.6rem, 11vw, 6.5rem); line-height: 1; color: var(--moon);
  text-shadow: 0 0 26px rgba(190, 205, 222, 0.30), 0 0 60px rgba(120, 140, 165, 0.18);
  animation: flicker 7s infinite;
}
/* brief flare burst when the number actually changes */
.counter.flare { animation: flare 0.6s ease-out, flicker 7s infinite; }
@keyframes flicker { 0%,100% { opacity: 1; } 48% { opacity: 0.97; } 50% { opacity: 0.86; } 52% { opacity: 0.97; } }
@keyframes flare {
  0%   { text-shadow: 0 0 26px rgba(190,205,222,0.30), 0 0 60px rgba(120,140,165,0.18); }
  18%  { text-shadow: 0 0 42px rgba(224,238,255,0.75), 0 0 96px rgba(150,180,210,0.42); opacity: 0.9; }
  100% { text-shadow: 0 0 26px rgba(190,205,222,0.30), 0 0 60px rgba(120,140,165,0.18); opacity: 1; }
}
.counter-label { margin-top: 0.6rem; text-transform: uppercase; letter-spacing: 0.25em; font-size: 0.72rem; color: var(--dim); }

.vitals { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; margin-top: 2.4rem; }
.vitals li { display: flex; flex-direction: column; gap: 0.25rem; }
.vitals span { font-family: ui-monospace, monospace; font-size: 1.15rem; color: #c3cbd5; font-variant-numeric: tabular-nums; }
.vitals em { font-style: normal; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.62rem; color: var(--dim); }

/* candle altar */
.altar { display: flex; justify-content: center; align-items: flex-end; gap: 2.4rem; margin-top: 3.2rem; height: 70px; }
.candle {
  position: relative; width: 13px; height: 42px; border-radius: 3px;
  background: linear-gradient(180deg, #cfd4da, #9aa0a8 42%, #6f747c);
  box-shadow: inset 0 -6px 8px rgba(0, 0, 0, 0.4), 0 0 16px rgba(255, 170, 90, 0.10);
}
.candle.tall { height: 58px; }
.candle::before { content: ''; position: absolute; top: -3px; left: 50%; transform: translateX(-50%); width: 2px; height: 5px; background: #2c2c2c; }
.flame {
  position: absolute; top: -21px; left: 50%; width: 11px; height: 20px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 50% 72%, #fff2c0 0%, #ffb24d 42%, #ff7a1a 72%, rgba(255, 90, 0, 0) 100%);
  box-shadow: 0 0 18px 6px rgba(255, 150, 60, 0.42), 0 0 42px 14px rgba(255, 110, 30, 0.16);
  transform-origin: 50% 90%;
  animation: flame 1.7s ease-in-out infinite;
}
.candle:nth-child(2) .flame { animation-delay: -0.5s; animation-duration: 1.9s; }
.candle:nth-child(3) .flame { animation-delay: -1.1s; animation-duration: 1.5s; }
@keyframes flame {
  0%, 100% { transform: translateX(-50%) scale(1) rotate(-1deg); opacity: 0.95; }
  25%      { transform: translateX(-53%) scale(1.05, 0.95) rotate(2deg); opacity: 1; }
  50%      { transform: translateX(-47%) scale(0.96, 1.06) rotate(-2deg); opacity: 0.88; }
  75%      { transform: translateX(-51%) scale(1.03, 0.98) rotate(1deg); opacity: 1; }
}

.yard { margin-top: 5rem; }
.yard-title { font-size: 1.4rem; letter-spacing: 0.1em; color: var(--moon); font-weight: 700; }
.yard-sub { margin: 0.6rem auto 2.2rem; max-width: 46ch; font-style: italic; opacity: 0.65; font-size: 0.95rem; }

.graves {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1.6rem 1.2rem; align-items: end;
}
.grave { display: flex; flex-direction: column; align-items: center; }
.grave-stone {
  --lean: 0deg;
  position: relative; width: 100%; padding: 1.2rem 0.8rem 1.1rem;
  overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #3c3f39 0%, #2b2c26 52%, #211f19 100%);
  border: 1px solid rgba(0, 0, 0, 0.45); border-top: 1px solid #4b4d44;
  border-radius: 48% 48% 7px 9px / 34% 34% 7px 7px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.04),
    inset 0 -22px 28px rgba(0, 0, 0, 0.5),
    inset 0 0 18px rgba(0, 0, 0, 0.35),
    0 10px 24px rgba(0, 0, 0, 0.55);
  text-align: center;
  transform: rotate(var(--lean));
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
/* pitted, grainy stone surface */
.grave-stone::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.5; mix-blend-mode: soft-light;
}
/* moss along shaded edges, rain streaks, lichen speckles */
.grave-stone::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(70% 42% at 14% 102%, rgba(92, 110, 60, 0.6), rgba(92, 110, 60, 0) 70%),
    radial-gradient(60% 40% at 88% 104%, rgba(78, 96, 52, 0.5), rgba(78, 96, 52, 0) 70%),
    radial-gradient(34% 26% at 4% 6%, rgba(104, 120, 70, 0.4), rgba(104, 120, 70, 0) 72%),
    radial-gradient(8px 8px at 64% 30%, rgba(150, 158, 120, 0.35), rgba(150, 158, 120, 0) 70%),
    radial-gradient(6px 6px at 38% 64%, rgba(140, 150, 116, 0.3), rgba(140, 150, 116, 0) 70%),
    radial-gradient(5px 5px at 78% 70%, rgba(120, 140, 96, 0.3), rgba(120, 140, 96, 0) 70%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 28%, rgba(16, 18, 12, 0.28) 100%);
}
/* age: each stone leans a little, mossy variation flipped on alternates */
.grave:nth-child(3n) .grave-stone { --lean: -1.1deg; }
.grave:nth-child(3n + 1) .grave-stone { --lean: 0.9deg; }
.grave:nth-child(4n) .grave-stone { --lean: -0.5deg; }
.grave:nth-child(5n) .grave-stone { --lean: 1.3deg; }
.grave:nth-child(even) .grave-stone::after { transform: scaleX(-1); }
.grave:nth-child(3n) .grave-stone::before { transform: scale(-1, 1); }

.grave:hover .grave-stone {
  transform: rotate(var(--lean)) translateY(-4px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.05),
    inset 0 -22px 28px rgba(0, 0, 0, 0.5),
    0 14px 30px rgba(0, 0, 0, 0.6),
    0 0 22px rgba(150, 170, 130, 0.14);
}
.rip { display: block; font-size: 0.62rem; letter-spacing: 0.3em; color: #6a6f60; margin-bottom: 0.5rem; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7); }
.grave-name { display: block; font-size: 0.95rem; color: #b7bbab; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.65), 0 -1px 0 rgba(255, 255, 255, 0.04); }
.grave.clickable { cursor: pointer; }
.grave.clickable:hover .grave-name { color: #d6dee8; }
.grave.clickable:focus-visible { outline: none; }
.grave.clickable:focus-visible .grave-stone { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.05), 0 0 0 2px rgba(150, 180, 120, 0.5), 0 10px 24px rgba(0, 0, 0, 0.55); }
.grave-tokens { display: block; margin-top: 0.45rem; font-family: ui-monospace, monospace; font-size: 0.85rem; color: #9aa08c; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); }
.grave-meter { display: block; height: 3px; margin-top: 0.7rem; background: rgba(0, 0, 0, 0.35); border-radius: 3px; overflow: hidden; }
.grave-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4a5240, #8b9472); transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.grave-mound {
  width: 124%; height: 16px; margin-top: -3px;
  background:
    radial-gradient(ellipse at 50% 0, #13140e 0%, rgba(19, 20, 14, 0) 72%),
    radial-gradient(ellipse at 30% 8%, rgba(70, 84, 48, 0.5), rgba(70, 84, 48, 0) 60%),
    radial-gradient(ellipse at 72% 12%, rgba(58, 72, 40, 0.45), rgba(58, 72, 40, 0) 60%);
  border-radius: 50%;
}

.colophon { margin-top: 5rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; font-size: 0.72rem; color: var(--dim); }
.colophon .dim { opacity: 0.7; }
.colophon a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.2); }
.colophon a:hover { color: var(--moon); }
.fx-toggle {
  margin-top: 0.4rem; font: inherit; font-size: 0.7rem; letter-spacing: 0.12em;
  color: var(--dim); background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px;
  padding: 0.35rem 0.9rem; cursor: pointer; transition: color 0.25s, border-color 0.25s;
}
.fx-toggle:hover { color: var(--moon); border-color: rgba(180, 200, 222, 0.3); }

/* the tale */
.eulogy { max-width: 58ch; margin: 4.5rem auto 0; font-size: 1.02rem; line-height: 1.75; opacity: 0.82; }
.eulogy-mark { font-size: 1.4rem; color: var(--dim); margin-bottom: 1rem; }
.eulogy em { font-style: italic; color: var(--moon); opacity: 0.95; }
.eulogy-sig { margin-top: 1.4rem; font-style: italic; font-size: 0.9rem; color: var(--dim); }

/* epitaph overlay */
.epitaph[hidden] { display: none; }
.epitaph { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1.5rem; }
.epitaph-backdrop { position: absolute; inset: 0; background: rgba(4, 5, 7, 0.78); backdrop-filter: blur(4px); }
.epitaph-card {
  position: relative; z-index: 1; width: min(420px, 92vw); overflow: hidden; isolation: isolate;
  padding: 2.6rem 2rem 2rem; text-align: center;
  background: linear-gradient(180deg, #3c3f39, #232420);
  border: 1px solid rgba(0, 0, 0, 0.5); border-top: 1px solid #4b4d44;
  border-radius: 46% 46% 10px 10px / 22% 22% 10px 10px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.05), 0 24px 60px rgba(0, 0, 0, 0.7);
  color: #b7bbab; animation: rise 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.epitaph-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.45; mix-blend-mode: soft-light;
}
@keyframes rise { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } }
.ep-rip { letter-spacing: 0.35em; font-size: 0.7rem; color: #6a6f60; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7); }
.ep-name { margin: 0.5rem 0 1.6rem; font-size: 1.6rem; letter-spacing: 0.06em; color: #d6dee8; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); word-break: break-word; }
.ep-rows { display: flex; flex-direction: column; gap: 0.65rem; text-align: left; }
.ep-rows > div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; border-bottom: 1px dashed rgba(255, 255, 255, 0.08); padding-bottom: 0.5rem; }
.ep-rows dt { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.12em; color: #6a6f60; }
.ep-rows dd { font-family: ui-monospace, monospace; font-size: 0.85rem; color: #c3cbb5; text-align: right; }
.ep-link[hidden] { display: none; }
.ep-link {
  display: inline-block; margin-top: 1.7rem; padding: 0.5rem 1.3rem;
  border: 1px solid rgba(180, 200, 170, 0.3); border-radius: 999px;
  color: #cdd6c4; text-decoration: none; font-size: 0.8rem; letter-spacing: 0.06em;
  transition: color 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.ep-link:hover { color: #eaf0e4; border-color: rgba(180, 200, 170, 0.55); box-shadow: 0 0 18px rgba(150, 180, 120, 0.2); }
.epitaph-close { position: absolute; top: 0.5rem; right: 0.9rem; background: none; border: none; color: #6a6f60; font-size: 1.7rem; line-height: 1; cursor: pointer; }
.epitaph-close:hover { color: #cdd6c4; }
.modal-open { overflow: hidden; }

/* legal documents (imprint / privacy) */
.doc { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; padding: 4rem 1.5rem 5rem; line-height: 1.7; }
.doc-home { display: inline-block; margin-bottom: 2.5rem; color: var(--dim); text-decoration: none; letter-spacing: 0.1em; font-size: 0.78rem; text-transform: uppercase; }
.doc-home:hover { color: var(--moon); }
.doc h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); letter-spacing: 0.12em; text-transform: uppercase; color: var(--moon); margin-bottom: 0.4rem; }
.doc .lead { font-style: italic; opacity: 0.7; margin-bottom: 2.5rem; }
.doc h2 { font-size: 1.05rem; letter-spacing: 0.06em; color: #c8d0da; margin: 2.2rem 0 0.6rem; }
.doc p, .doc li { color: var(--engrave); margin-bottom: 0.6rem; }
.doc a { color: #b8c3cf; }
.doc address { font-style: normal; color: var(--engrave); margin-bottom: 0.6rem; }
.doc ul { padding-left: 1.2rem; }
.doc li { margin: 0.3rem 0; }
.doc .fine { margin-top: 3rem; font-size: 0.78rem; opacity: 0.5; }

@media (max-width: 680px) {
  .graves { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 1.3rem 0.9rem; }
  .vitals { gap: 1.3rem; }
  .altar { gap: 1.8rem; }
}
/* Effects disabled (toggle or reduced-motion default): static, no canvas. */
.fx-off #embers { display: none; }
.fx-off .fog-layer,
.fx-off .counter,
.fx-off .counter.flare,
.fx-off .flame,
.fx-off .cross { animation: none; }