/* ==========================================================
   memorial.wiki -- v2
   Brutalist monument / digital lapidarium
   Palette: Slate Black, Stone Surface, Carved Bevel,
            Lichen Gray, Bone Pale, Inscription Soft,
            Memorial Bronze
   ========================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: #1C1C1A;
  color: #E8E2D0;
  font-family: 'Spectral', Georgia, serif;
  font-weight: 400;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.85;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ----------------------------------------------------------
   Cold light shaft -- fixed diagonal beam across viewport
   ---------------------------------------------------------- */
.light-shaft {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(
      115deg,
      transparent 28%,
      rgba(232, 226, 208, 0.040) 44%,
      rgba(232, 226, 208, 0.075) 50%,
      rgba(232, 226, 208, 0.040) 56%,
      transparent 72%
    );
  mix-blend-mode: screen;
  opacity: 0;
  animation: shaftFadeIn 1.6s ease-out 0.2s forwards;
}

@keyframes shaftFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Subtle grain on body via second pseudo for depth */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(232, 226, 208, 0.025), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(140, 122, 85, 0.030), transparent 60%);
}

/* All real content above pseudo layers */
.hero,
.procession-header,
.procession,
.crypt-seal {
  position: relative;
  z-index: 1;
}

/* ----------------------------------------------------------
   HERO
   ---------------------------------------------------------- */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 32px 64px;
  text-align: center;
}

.hero-inner {
  max-width: 960px;
  width: 100%;
}

.hero-eyebrow {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  color: #8C7A55;
  margin-bottom: 56px;
  opacity: 0;
  animation: fadeUp 1.4s ease-out 0.6s forwards;
}

.wordmark {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-weight: 600;
  font-size: clamp(48px, 9vw, 124px);
  line-height: 1;
  letter-spacing: 0.04em;
  color: #E8E2D0;
  margin: 0 auto;
  display: inline-flex;
  flex-wrap: nowrap;
}

.wm-letter {
  display: inline-block;
  filter: blur(10px);
  opacity: 0;
  transform: translateY(6px);
  animation: chiselReveal 1100ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  text-shadow:
    1px 2px 0 #0A0908,
    0 -1px 0 rgba(255, 255, 255, 0.06),
    0 12px 24px rgba(0, 0, 0, 0.55);
}

.wm-dot {
  color: #8C7A55;
}

@keyframes chiselReveal {
  0%   { filter: blur(10px); opacity: 0;    transform: translateY(6px); }
  60%  { filter: blur(2px);  opacity: 0.8;  transform: translateY(0);   }
  100% { filter: blur(0);    opacity: 1;    transform: translateY(0);   }
}

.hero-rule {
  width: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    #5A5450 12%,
    #8C7A55 50%,
    #5A5450 88%,
    transparent
  );
  margin: 56px auto 40px;
  max-width: 480px;
  animation: drawRule 1800ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.6s forwards;
}

@keyframes drawRule {
  to { width: 100%; }
}

.hero-tagline {
  font-family: 'Spectral', Georgia, serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(17px, 1.4vw, 22px);
  color: #B8B0A0;
  letter-spacing: 0.02em;
  margin-bottom: 56px;
  opacity: 0;
  animation: fadeUp 1.6s ease-out 2.2s forwards;
}

.hero-meta {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  color: #5A5450;
  opacity: 0;
  animation: fadeUp 1.6s ease-out 2.6s forwards;
}

.hero-glyph {
  margin-top: 80px;
  opacity: 0;
  animation: fadeUp 1.6s ease-out 3.0s forwards;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ----------------------------------------------------------
   Procession header
   ---------------------------------------------------------- */
.procession-header {
  text-align: center;
  padding: 120px 32px 80px;
}

.procession-label {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.40em;
  color: #8C7A55;
  margin-bottom: 28px;
}

.procession-mark {
  display: inline-block;
}

/* ----------------------------------------------------------
   Vertical stone procession
   ---------------------------------------------------------- */
.procession {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 32px 80px;
  display: flex;
  flex-direction: column;
  gap: 120px;
}

.stone-slab {
  position: relative;
  background:
    linear-gradient(
      180deg,
      #2E2C2A 0%,
      #2A2826 50%,
      #242220 100%
    );
  border: 1px solid #4A463E;
  padding: 64px 56px 56px;
  box-shadow:
    0 28px 56px rgba(0, 0, 0, 0.65),
    0 8px 18px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    inset 1px 0 0 rgba(255, 255, 255, 0.025),
    inset -1px 0 0 rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.stone-slab.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.slab-numeral {
  position: absolute;
  top: 28px;
  left: 32px;
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-weight: 600;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  letter-spacing: 0.06em;
  color: #8C7A55;
  text-shadow:
    1px 2px 0 #0A0908,
    0 -1px 0 rgba(255, 255, 255, 0.05);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 700ms ease-out, transform 700ms ease-out;
}

.stone-slab.is-visible .slab-numeral {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0ms;
}

.stone-slab.is-visible .slab-name,
.stone-slab.is-visible .slab-dates,
.stone-slab.is-visible .slab-body,
.stone-slab.is-visible .slab-rule,
.stone-slab.is-visible .slab-meta,
.stone-slab.is-visible .slab-footnote {
  /* group reveal handled by parent transition */
}

.slab-meta {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.30em;
  color: #5A5450;
  text-align: right;
  margin-bottom: 52px;
}

.slab-name {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.1;
  letter-spacing: 0.04em;
  color: #E8E2D0;
  margin-bottom: 16px;
}

.carved-text {
  text-shadow:
    1px 2px 0 #0A0908,
    0 -1px 0 rgba(255, 255, 255, 0.06),
    0 0 1px rgba(0, 0, 0, 0.4);
}

.slab-dates {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: #8C7A55;
  margin-bottom: 32px;
}

.slab-body {
  font-family: 'Spectral', Georgia, serif;
  font-weight: 400;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.85;
  color: #B8B0A0;
  max-width: 560px;
}

.slab-rule {
  width: 56px;
  height: 1px;
  background: #4A463E;
  margin: 32px 0 16px;
}

.slab-footnote {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  color: #5A5450;
}

/* ----------------------------------------------------------
   Footer crypt seal
   ---------------------------------------------------------- */
.crypt-seal {
  margin-top: 120px;
  padding: 96px 32px 80px;
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(74, 70, 62, 0.10) 30%,
      rgba(74, 70, 62, 0.18) 100%
    );
  border-top: 1px solid #4A463E;
  text-align: center;
}

.seal-mark {
  margin-bottom: 32px;
  display: inline-block;
}

.seal-wordmark {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-weight: 600;
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: 0.06em;
  color: #E8E2D0;
  margin-bottom: 24px;
}

.seal-text {
  font-family: 'Spectral', Georgia, serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(15px, 1.2vw, 18px);
  color: #B8B0A0;
  letter-spacing: 0.02em;
  margin-bottom: 36px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

.seal-meta {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  color: #5A5450;
}

/* ----------------------------------------------------------
   Selection -- bone pale on slate
   ---------------------------------------------------------- */
::selection {
  background: rgba(232, 226, 208, 0.22);
  color: #E8E2D0;
}

/* ----------------------------------------------------------
   Responsive refinements
   ---------------------------------------------------------- */
@media (max-width: 720px) {
  .hero {
    padding: 64px 24px 48px;
  }
  .hero-eyebrow {
    margin-bottom: 40px;
  }
  .hero-rule {
    margin: 40px auto 32px;
  }
  .procession-header {
    padding: 80px 24px 60px;
  }
  .procession {
    padding: 0 20px 60px;
    gap: 80px;
  }
  .stone-slab {
    padding: 52px 28px 36px;
  }
  .slab-numeral {
    top: 18px;
    left: 22px;
  }
  .slab-meta {
    margin-bottom: 44px;
    font-size: 10px;
  }
  .crypt-seal {
    padding: 72px 24px 56px;
  }
}

@media (max-width: 480px) {
  .stone-slab {
    padding: 48px 22px 32px;
  }
  .slab-numeral {
    font-size: 38px;
  }
  .wordmark {
    letter-spacing: 0.02em;
  }
}

/* ----------------------------------------------------------
   Reduced motion fallback -- preserve dignity, remove motion
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .light-shaft,
  .hero-eyebrow,
  .hero-rule,
  .hero-tagline,
  .hero-meta,
  .hero-glyph,
  .wm-letter {
    animation: none !important;
    opacity: 1 !important;
    width: 100% !important;
    filter: none !important;
    transform: none !important;
  }
  .stone-slab {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .slab-numeral {
    opacity: 1 !important;
    transform: none !important;
  }
}