/* Responsive portrait background; keep the entire photograph in view. */
html { background: #090909; }
body {
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  background: #090909;
  isolation: isolate;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("../img/linda-portrait.jpg");
  background-image: image-set(url("../img/linda-portrait-640.webp") 1x, url("../img/linda-portrait-1254.webp") 2x);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
h1 { font-size: clamp(2.1rem, 7vw, 6rem); }
body { letter-spacing: clamp(0.15rem, 0.7vw, 0.7rem); }
header { padding-inline: clamp(1rem, 3vw, 3rem); }
section { height: 91vh; height: 91svh; }
.footer { padding-bottom: env(safe-area-inset-bottom, 0px); }
@media (max-width: 62em) {
  body { background: #090909; }
  body h1#mobileLogo { font-size: clamp(1.5rem, 5.6vw, 2.5rem); }
  .footer a i { font-size: clamp(1.25rem, 5vw, 2rem); }
  .mainNav .menu a { font-size: clamp(1.5rem, 6vw, 3rem); }
  .mainNav .panel #copyright { font-size: clamp(0.85rem, 3vw, 2rem); }
}

/* Give the outlined wordmark a consistent dark field over the portrait. */
.logo h1 {
  color: #fff;
  padding: clamp(0.75rem, 2vw, 1.5rem) clamp(1rem, 3vw, 3rem);
  margin: 0;
  background: rgb(0 0 0 / 72%);
  border-radius: 0.25rem;
  text-shadow: 0 2px 4px #000, 0 0 12px #000;
}
body h1#mobileLogo {
  color: #fff;
  padding: 0.35em 0.5em;
  background: rgb(0 0 0 / 80%);
  border-radius: 0.25rem;
  text-shadow: 0 2px 4px #000;
}

/* Apply the fade to the photograph bounds, including letterboxed layouts. */
body::before {
  inset: auto;
  top: 50%;
  left: 50%;
  width: min(100vw, 100vh);
  width: min(100vw, 100svh);
  height: min(100vw, 100vh);
  height: min(100vw, 100svh);
  transform: translate(-50%, -50%);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
}