/* Steven Bremel, version 21: Zine. Shared paper, toner, cut paper, labels, tape and staples. */

:root {
  --ink: #171614;
  --mat: #2b5a46;
  --mat-deep: #214637;
  --mat-line: rgba(226, 242, 232, .11);
  --mat-line-major: rgba(226, 242, 232, .22);
  --white: #fbfaf5;
  --cream: #f2efe6;
  --biro: #2441b2;
  --marker: #f3ee45;
  --cover: #ff5ba6;
  --paper: #f2efe6;
  --u: 5px;
  --f-type: "Special Elite", "American Typewriter", "Courier New", monospace;
  --f-read: "Courier Prime", "Courier New", monospace;
  --f-hand: "Reenie Beanie", "Bradley Hand", "Segoe Print", cursive;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .085 0 0 0 0 .08 2.7 0 0 0 -1.5'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

/* The cutting mat the zine lies on. */
.mat {
  background-color: var(--mat);
  background-image:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(255, 255, 255, .07), rgba(0, 0, 0, 0) 70%),
    linear-gradient(var(--mat-line-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--mat-line-major) 1px, transparent 1px),
    linear-gradient(var(--mat-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--mat-line) 1px, transparent 1px),
    var(--grain);
  background-size: 100% 100%, 120px 120px, 120px 120px, 24px 24px, 24px 24px, 160px 160px;
  background-position: 0 0, -1px -1px, -1px -1px, -1px -1px, -1px -1px, 0 0;
}

.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Cut paper letters. */
.cut { display: inline; line-height: 1.16; }
.cut-w { display: inline-block; white-space: nowrap; margin-right: .2em; }
.cut-w:last-child { margin-right: 0; }
.cut-l {
  display: inline-block;
  font-size: calc(var(--k, 1) * 1em);
  transform: translateY(var(--y, 0)) rotate(var(--r, 0deg));
  filter: drop-shadow(.025em .035em 0 rgba(20, 19, 17, .5));
  margin: 0 .012em;
  vertical-align: baseline;
}
.cut-s {
  display: inline-block;
  padding: var(--pv, .06em) var(--ph, .1em) calc(var(--pv, .06em) * .7);
  line-height: 1;
  color: var(--ink);
  background: var(--white);
  font-weight: 400;
  font-style: normal;
}
.f-ultra { font-family: "Ultra", "Rockwell Extra Bold", Georgia, serif; }
.f-bodoni { font-family: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif; font-weight: 900; }
.f-bodoni-i { font-family: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif; font-weight: 900; font-style: italic; }
.f-mono { font-family: "Rubik Mono One", "Arial Black", sans-serif; }
.f-caps { font-family: "Six Caps", "Impact", "Haettenschweiler", sans-serif; }
.f-frak { font-family: "UnifrakturMaguntia", "Old English Text MT", serif; }
.f-type { font-family: var(--f-type); }

.s-paper { background: var(--paper); }
.s-white { background: var(--white); }
.s-light { background: #d8d4cb; }
.s-grey { background: #a19d95; }
.s-black { background: var(--ink); color: var(--paper); }
.s-dots {
  background:
    radial-gradient(circle, rgba(23, 22, 20, .34) 30%, rgba(23, 22, 20, 0) 34%) 0 0 / .17em .17em,
    #efece4;
}
.s-yellow { background: #ffe23d; }
.s-cyan { background: #3cc4e8; }
.s-black.f-type, .s-black.f-caps { color: var(--white); }

/* Typed labels: a strip of paper through the typewriter, then glued down. */
.lbl {
  display: inline-block;
  font-family: var(--f-type);
  font-weight: 400;
  color: var(--ink);
  background: var(--white);
  padding: .3em .62em .24em;
  line-height: 1.18;
  letter-spacing: .02em;
  transform: rotate(var(--r, -1.2deg));
  box-shadow: .05em .08em 0 rgba(20, 19, 17, .3);
}

.hand { font-family: var(--f-hand); color: var(--biro); line-height: 1.02; font-weight: 400; }

/* Masking tape, and tape that has been through the copier with the page. */
.tape {
  position: absolute;
  z-index: 5;
  width: var(--tw, 5.6em);
  height: var(--th, 1.55em);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 45%),
    rgba(234, 226, 196, .7);
  transform: translate(-50%, -50%) rotate(var(--r, -24deg));
  clip-path: polygon(3% 0, 97% 0, 100% 18%, 96.5% 36%, 100% 55%, 97% 74%, 100% 100%, 3% 100%, 0 82%, 3.5% 64%, 0 45%, 3% 26%);
  pointer-events: none;
}
.tape.copied {
  background:
    linear-gradient(90deg, rgba(23, 22, 20, .12), rgba(23, 22, 20, 0) 12%, rgba(23, 22, 20, 0) 88%, rgba(23, 22, 20, .12)),
    rgba(120, 117, 110, .26);
}

/* Staples. */
.stp {
  position: absolute;
  z-index: 6;
  width: max(4px, calc(var(--u) * .95));
  height: calc(var(--u) * 8.5);
  border-radius: 1.5px;
  background: linear-gradient(90deg, #6f7378, #eef0f2 38%, #b4b8bc 62%, #66696e);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .35), 1px 1.5px 1.5px rgba(0, 0, 0, .35);
  pointer-events: none;
}

.arrow { fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.scissors { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* A copied photograph: the halftone canvas replaces the picture once it is drawn. */
.ph-box { position: absolute; overflow: hidden; background: var(--white); }
.ph-box img, .ph-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ph-box img {
  object-fit: cover;
  filter: grayscale(1) contrast(1.45) brightness(1.06);
  transition: opacity .3s ease;
}
.ph-box canvas { opacity: 0; transition: opacity .3s ease; }
.is-ht .ph-box canvas { opacity: 1; }
.is-ht .ph-box img { opacity: 0; }

:focus-visible { outline: 3px solid var(--biro); outline-offset: 3px; }