/* Painterly layers are decorative: quiet space stays behind all body copy. */
body {
  background-color: #F2EFE8;
  background-image: radial-gradient(ellipse at 8% 30%, #DCD6C823, transparent 60%);
}
body::before { opacity: .2; }

.haiga-background {
  position: absolute;
  top: 70px;
  left: 50%;
  width: min(100%, 1660px);
  height: 1060px;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
  overflow: hidden;
  z-index: 0;
  isolation: isolate;
}
.haiga-paint {
  position: absolute;
  top: 0;
  right: -40px;
  width: 100%;
  height: auto;
  opacity: .66;
  mix-blend-mode: multiply;
  mask-image: linear-gradient(to bottom, #000 0%, #000 76%, transparent 100%);
}

/* Keep the portrait clean and the introduction surrounded by pale paper. */
.home-intro { padding-top: 88px; padding-bottom: 125px; }
.home-intro > div:first-child { position: relative; }
.home-intro > div:first-child::before {
  content: '';
  position: absolute;
  inset: -30px -24px;
  z-index: -1;
  background: radial-gradient(ellipse at 35% 46%, #F2EFE8EF 30%, #F2EFE8B8 59%, transparent 76%);
  pointer-events: none;
}
.portrait-frame { background: #F2EFE8; }
.headshot-strip > figure { width: 160px; max-width: calc(50% - 7px); }
.page-heading,
.content-grid,
.personal-grid,
.social-links { position: relative; }
.page-heading::before {
  content: '';
  position: absolute;
  inset: 12px -35px 0;
  z-index: -1;
  background: radial-gradient(ellipse at 32% 50%, #F2EFE8F5 36%, #F2EFE8A8 66%, transparent 85%);
  pointer-events: none;
}
body:not(.page-home) .haiga-background {
  top: 48px;
  height: 960px;
}
body:not(.page-home) .haiga-paint {
  right: -170px;
  width: min(1050px, 100%);
  opacity: .35;
}

/* A poem rests above river wash, not inside a busy illustration. */
.home-poem {
  border-top: 1px solid #DCD6C8B0;
  border-bottom: 1px solid #DCD6C8B0;
  padding-top: 82px;
  padding-bottom: 98px;
  background: radial-gradient(ellipse at 50% 34%, #F2EFE8F5 19%, #F2EFE8B8 55%, transparent 85%);
}
.haiga-water {
  position: absolute;
  left: -2%;
  bottom: -22px;
  width: 104%;
  height: auto;
  z-index: -1;
  pointer-events: none;
  opacity: .78;
}
.home-poem .poem,
.home-poem > .eyebrow,
.home-poem > .text-link { position: relative; z-index: 1; }
.home-poem .poem blockquote { text-shadow: 0 1px 8px #F2EFE8; }
.poems-grid .poem { background: #F2EFE860; }
.directory { background: linear-gradient(#F2EFE840, #F2EFE890); }
.site-footer { background: linear-gradient(175deg, #F2EFE800, #DCD6C833); }

/* A handful of fallen blossoms; never animated across text or controls. */
.fallen-petals { z-index: 0; }
.petal { opacity: .64; width: 11px; height: 20px; }
.petal-1 { left: 3%; top: 500px; }
.petal-2 { left: 93%; top: 375px; }
.petal-3 { right: 6%; top: 730px; }
.petal-4 { left: 6%; top: 930px; }
.petal-5 { left: 84%; top: 1190px; }
.petal-6 { right: 3%; top: 63%; }
.petal:nth-child(n+7) { display: none; }

@media (min-width: 1600px) {
  .haiga-background { top: 48px; }
  .haiga-paint { right: 0; }
}
@media (max-width: 1000px) {
  .haiga-background { top: 98px; height: 900px; }
  .haiga-paint { width: 124%; max-width: none; right: -16%; opacity: .55; }
  .home-intro { padding-top: 60px; }
}
@media (max-width: 760px) {
  .haiga-background { top: 310px; height: 840px; }
  .haiga-paint { width: 1020px; max-width: none; right: -345px; opacity: .41; }
  .home-intro { padding-top: 40px; padding-bottom: 70px; }
  .home-intro > div:first-child::before { inset: -25px -15px; }
  body:not(.page-home) .haiga-background { top: 135px; height: 850px; }
  body:not(.page-home) .haiga-paint { width: 920px; right: -395px; opacity: .21; }
  .home-poem { padding-top: 52px; padding-bottom: 83px; }
  .haiga-water { width: 180%; max-width: none; left: -40%; bottom: -7px; opacity: .67; }
  .page-heading::before { inset: 0 -12px; }
  .petal-2 { top: 940px; }
  .petal-4 { top: 1110px; }
}
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  .haiga-background, .haiga-water, .fallen-petals, body::before { display: none; }
}
@media print {
  .haiga-background, .haiga-water, .fallen-petals, body::before { display: none; }
}