/* The paper itself: grain over everything, torn edges, tape and the sea-chart corners. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 100; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .34  0 0 0 0 .22  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
body {
  background:
    radial-gradient(ellipse 90% 60% at 20% 0%, var(--paper-hi), transparent 70%),
    radial-gradient(ellipse 80% 70% at 100% 100%, var(--paper-lo), transparent 70%),
    var(--paper);
}

/* A strip of torn paper between sections. */
.torn { position: relative; height: 26px; margin: -13px 0; z-index: 2; color: var(--paper-hi); }
.torn svg { width: 100%; height: 100%; display: block; }

/* Masking tape. */
.tape {
  position: absolute; width: 110px; height: 30px;
  background: rgba(232, 218, 182, .78);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 95%, 0 45%);
  z-index: 3;
}

/* Sea-chart corners, like the poster's. */
.chart-corner {
  position: absolute; width: clamp(120px, 22vw, 260px); aspect-ratio: 1;
  color: var(--chart); opacity: .28; pointer-events: none; z-index: 0;
}
.chart-corner svg { width: 100%; height: 100%; }
.chart-corner.tl { top: 0; left: 0; }
.chart-corner.br { bottom: 0; right: 0; transform: rotate(180deg); }