:root { --edge-fade: 0px; --edge-radius: 0px; }
/* A design breakpoint, not device detection. It also covers either landscape side. */
@media (hover: none) and (pointer: coarse) and (max-width: 700px) and (max-height: 700px) {
  :root { --edge-fade: clamp(100px, 28vmin, 140px); --edge-radius: clamp(56px, 18vmin, 80px); }
}
.background-frame {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: var(--edge-radius);
  overflow: clip;
}
/* One soft rounded shape makes the horizontal and vertical edges flow together. */
.background-frame::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 var(--edge-fade) calc(var(--edge-fade) * .3) var(--edge-color),
              inset 0 0 calc(var(--edge-fade) * .25) calc(var(--edge-fade) * .12) var(--edge-color);
}

/* The project photograph already fades to black; use that same canvas everywhere. */
html:has(body:not(.present) .top-image), body:not(.present):has(.top-image) { background: #000; }
.top-image img { display: block; margin-inline: auto; }
.top:has(.top-image)::after { content: none; }
/* Skill pages paint a photograph behind their title rather than using .top-image. */
html:has(body:not(.present) > .skill-backdrop) { background: #000; --edge-color: #000; }
body:not(.present):has(> .skill-backdrop) { position: relative; isolation: isolate; background: transparent; }
.skill-backdrop {
  position: absolute; bottom: auto; width: 100%; height: auto; aspect-ratio: 8 / 7;
  background-image: linear-gradient(transparent 60%, #000 92%), var(--skill-photo);
  background-size: 100% 100%, 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}
@media (max-width: 500px) {
  .skill-backdrop { aspect-ratio: 16 / 21; background-size: 100% 100%, 150% auto; }
  .skill-backdrop::before { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / .35); }
}
@media (hover: none) and (pointer: coarse) {
  html:has(body:not(.present) > .skill-backdrop) { --edge-fade: clamp(100px, 28vmin, 140px); --edge-radius: clamp(56px, 18vmin, 80px); }
}
body.present > .skill-backdrop { display: none; }
/* Keep navigation and page content within the native safe area. */
body > .header {
  padding-left: max(50px, env(safe-area-inset-left));
  padding-right: max(50px, env(safe-area-inset-right));
}
body:not(.present) > .page {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  box-sizing: border-box;
}
body:not(.present) > .top {
  padding-left: max(50px, env(safe-area-inset-left));
  padding-right: max(50px, env(safe-area-inset-right));
}
body > .previous { left: env(safe-area-inset-left); }
body > .next { right: env(safe-area-inset-right); }
@media (max-width: 600px) {
  body > .header {
    padding-left: max(30px, env(safe-area-inset-left)) !important;
    padding-right: max(30px, env(safe-area-inset-right)) !important;
  }
  body:not(.present) > .top:has(.top-image) { padding-left: 0; padding-right: 0; }
  body:not(.present) > .top:not(:has(.top-image)),
  .top:has(.top-image) > h2, .top:has(.top-image) > h3, .top:has(.top-image) > p {
    padding-left: max(30px, env(safe-area-inset-left));
    padding-right: max(30px, env(safe-area-inset-right));
  }
}