/* Gary’s selected frosted-paper treatment over the supplied decorative marsh. */
:root {
  --ink: #25271f;
  --muted: #35382f;
  --accent: #5b3827;
  --line: rgb(66 58 42 / 24%);
  background: #6d7165;
}

body {
  background: transparent;
  padding: 48px 0 72px;
}

body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  z-index: -2;
  background: url('images/marsh.webp') center / cover no-repeat;
}

body::after {
  z-index: -1;
  background: linear-gradient(180deg, rgb(33 36 31 / 6%), rgb(33 36 31 / 18%));
}

.memorial-sheet {
  width: min(1320px, calc(100% - 96px));
  margin-inline: auto;
  background: linear-gradient(135deg, rgb(255 252 242 / 55%), rgb(250 246 235 / 40%));
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: 18px;
  box-shadow: 0 24px 85px rgb(30 30 22 / 22%), inset 0 1px 0 rgb(255 255 255 / 55%);
}

.memorial-sheet .wrap { width: calc(100% - 104px); }
.site-header { padding-block: 28px; }
.hero { gap: 8%; padding-block: 48px 60px; }
.hero h1 { font-size: clamp(76px, 8vw, 122px); }
.hero-photo { max-width: 380px; }
.hero-intro { max-width: 350px; }
.introduction { padding-block: 58px 75px; }
.memories { background: rgb(248 245 236 / 27%); }
.remembrance { padding-block: 75px; }

@media (max-width: 800px) {
  body { padding-top: 24px; }
  .memorial-sheet { width: calc(100% - 40px); }
  .memorial-sheet .wrap { width: calc(100% - 48px); }
  .hero h1 { font-size: clamp(76px, 12vw, 110px); }
}

@media (max-width: 650px) {
  body { padding-block: 16px 24px; }
  body::before {
    background-image: url('images/marsh-small.webp');
    background-position: 58% center;
  }
  .memorial-sheet {
    width: calc(100% - 24px);
    background: rgb(248 245 236 / 66%);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-radius: 12px;
  }
  .memorial-sheet .wrap { width: calc(100% - 36px); }
  .site-header { padding-block: 23px; }
  .hero { padding-block: 38px 42px; gap: 30px; }
  .hero h1 { font-size: clamp(70px, 20vw, 110px); }
  .hero-photo { max-width: none; }
}

/* Readable paper remains available when blur is unsupported or unwanted. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .memorial-sheet { background: #f5f2eb; }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  .memorial-sheet {
    background: var(--paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media print {
  :root { background: white; }
  body { padding: 0; }
  body::before, body::after { display: none; }
  .memorial-sheet {
    width: 100%;
    background: white;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}