/* Florilegio — the zine, printed for the web. Two inks and a fold. */

:root {
  --bone: #f2eee4;
  --bone-deep: #e5e0d3;
  --blue: #2b3bc7;
  --red: #d93325;
  --green: #00a95c;
  --yellow: #f2c744;
  --pink: #ff48b0;
  --violet: #765ba7;
  --smoke: #1a1a1a;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bone) url('/paper.png');
  background-size: 430px auto;
  color: var(--blue);
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700;
  line-height: 1.55;
  overflow-x: hidden;
}

/* the halftone screen, laid over everything printed loud */
.screened { position: relative; }
.screened::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--bone) 1px, transparent 1.4px);
  background-size: 9px 9px;
  opacity: 0.35;
  pointer-events: none;
}

.shout {
  font-family: 'Arial Narrow', 'Helvetica Neue', Impact, sans-serif;
  font-weight: 900;
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.95;
}

.page { max-width: 680px; margin: 0 auto; padding: 32px 22px 80px; }

/* pasted paper chips */
.chip {
  display: inline-block;
  padding: 5px 14px;
  color: var(--bone);
  letter-spacing: 2px;
  font-size: 12px;
  box-shadow: 4px 5px 0 var(--smoke);
  transform: rotate(-2deg);
}
.chip.red { background: var(--red); }
.chip.green { background: var(--green); }
.chip.violet { background: var(--violet); }
.chip.pink { background: var(--pink); }
.chip.yellow { background: var(--yellow); color: var(--blue); }

h1.shout {
  font-size: clamp(64px, 16vw, 130px);
  color: var(--red);
  text-shadow: 3px 3px 0 var(--yellow);
  transform: rotate(-1.5deg);
  margin: 18px 0 6px -4px;
  word-break: break-word;
}
h2.shout {
  font-size: clamp(30px, 7vw, 44px);
  color: var(--blue);
  text-shadow: 2px 2px 0 var(--pink);
  transform: rotate(-0.8deg);
  margin: 54px 0 12px;
}

p { margin: 12px 0; font-size: 15px; }
p.small, li { font-size: 13.5px; }
ul { margin: 10px 0 10px 22px; }
a { color: var(--red); }

.hand {
  font-family: 'Bradley Hand', 'Comic Sans MS', cursive;
  font-weight: 400;
  color: var(--red);
  transform: rotate(-2deg);
  display: inline-block;
  font-size: 20px;
}

.card {
  background: rgba(246, 243, 234, 0.82);
  border: 3px solid var(--blue);
  padding: 20px 22px;
  margin: 26px 0;
  box-shadow: 7px 8px 0 rgba(26, 26, 26, 0.28);
  transform: rotate(0.4deg);
  position: relative;
}
.card .reg { position: absolute; color: var(--red); font-size: 18px; }
.card .reg.tl { top: -12px; left: -10px; }
.card .reg.br { bottom: -12px; right: -8px; }

.btn {
  display: inline-block;
  padding: 15px 34px;
  color: var(--bone);
  background: var(--green);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  font-size: 14px;
  border: 4px solid #fff;
  box-shadow: 5px 7px 0 var(--smoke);
  transform: rotate(-1deg);
  margin: 10px 0;
}
.btn.pink { background: var(--pink); }
.btn:active { transform: rotate(-1deg) translate(3px, 4px); box-shadow: 2px 3px 0 var(--smoke); }

.foot {
  margin-top: 70px;
  font-size: 11px;
  letter-spacing: 1.4px;
  color: rgba(43, 59, 199, 0.6);
  text-transform: uppercase;
}
.foot a { color: inherit; margin-right: 14px; }

/* naive marker doodles, inline SVG strokes */
.doodle { position: absolute; pointer-events: none; }

.giftimg {
  max-width: 260px;
  display: block;
  margin: 10px auto;
  filter: drop-shadow(6px 7px 0 rgba(26, 26, 26, 0.25));
  transform: rotate(-2deg);
}