html { background: #ded8ca; }

body {
  margin: 0;
  padding: 46px 24px 64px;
  display: flex;
  justify-content: center;
  font-family: 'Special Elite', 'Courier New', Courier, monospace;
}

.sheet {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 680px;
  padding: 76px 76px 98px;
  transform: rotate(-0.4deg);
  background:
    radial-gradient(90% 60% at 12% 8%, rgba(190,164,116,.10), rgba(190,164,116,0) 62%),
    radial-gradient(70% 50% at 92% 88%, rgba(168,138,92,.11), rgba(168,138,92,0) 64%),
    linear-gradient(#fbf6ea, #f8f2e4);
  box-shadow: 0 14px 30px rgba(60,45,25,.24), inset 0 0 60px rgba(160,130,86,.07);
  font-size: 16.5px;
  line-height: 2;
  color: #2a2520;
  text-shadow: 0 0 .6px rgba(42,37,32,.8), .4px .3px .9px rgba(42,37,32,.24);
}

.stain {
  position: absolute;
  right: 44px;
  bottom: 40px;
  width: 190px;
  height: 178px;
  border-radius: 50%;
  transform: rotate(-11deg);
  mix-blend-mode: multiply;
  pointer-events: none;
  opacity: .11;
  border: 6px solid rgba(146,101,52,.5);
  border-top-width: 3px;
  border-right-width: 9px;
  border-left-width: 4px;
  background: radial-gradient(58% 52% at 42% 64%, rgba(146,101,52,.10), rgba(146,101,52,0) 74%);
  -webkit-mask-image: conic-gradient(from 30deg, #000 0 18%, rgba(0,0,0,.15) 27%, #000 42%, rgba(0,0,0,.45) 58%, #000 72%, rgba(0,0,0,.1) 84%, #000 100%);
  mask-image: conic-gradient(from 30deg, #000 0 18%, rgba(0,0,0,.15) 27%, #000 42%, rgba(0,0,0,.45) 58%, #000 72%, rgba(0,0,0,.1) 84%, #000 100%);
}

.inner { position: relative; }

.stamp {
  display: inline-block;
  border: 2.5px solid #8a3226;
  padding: 11px 18px 9px;
  transform: rotate(-3.4deg);
  color: #8a3226;
  opacity: .66;
  margin-bottom: 32px;
  mix-blend-mode: multiply;
  box-shadow: inset 0 0 14px rgba(138,50,38,.16);
}
.stamp-title { font-size: 27px; letter-spacing: .2em; text-transform: uppercase; line-height: 1; }
.stamp-sub { font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; margin-top: 8px; }

.definition { margin: 0 0 30px; color: #5f5648; transform: rotate(.18deg); }
.lede { margin: 0 0 8px; transform: rotate(-.12deg); }
.lede.faint { margin-bottom: 34px; opacity: .92; }

.entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; }
.entries li { display: grid; grid-template-columns: 26px 1fr; column-gap: 8px; }
.entries li:nth-child(1) { transform: rotate(.14deg); }
.entries li:nth-child(2) { transform: rotate(-.1deg); }
.entries li:nth-child(3) { transform: rotate(.1deg); }
.entries p { margin: 0; }
.dash { color: #8a3226; }

a {
  position: relative;
  color: inherit;
  text-decoration: none;
}
a::after {
  content: '';
  position: absolute;
  left: -3px;
  right: -3px;
  bottom: -2px;
  height: 2.2px;
  background: rgba(35,54,120,.6);
  border-radius: 2px;
  transform: rotate(-.6deg);
}
.entries li:nth-child(2) a:last-of-type::after,
.entries li:nth-child(3) a:last-of-type::after { transform: rotate(.5deg); }
a:hover { color: #233678; }

a.circled {
  display: inline-block;
  padding: 2px 9px;
}
a.circled::after {
  left: auto;
  right: auto;
  bottom: auto;
  height: auto;
  inset: -3px -4px -1px;
  background: none;
  border: 1.8px solid rgba(35,54,120,.6);
  border-radius: 50%;
  transform: rotate(-2.6deg);
}

@media (max-width: 620px) {
  body { padding: 20px 12px 40px; }
  .sheet { padding: 44px 26px 64px; font-size: 15.5px; line-height: 1.9; transform: none; }
  .stain { right: 10px; bottom: 16px; width: 140px; height: 132px; }
  .stamp-title { font-size: 21px; letter-spacing: .16em; }
  .stamp-sub { font-size: 8.5px; letter-spacing: .22em; }
  .entries li { grid-template-columns: 18px 1fr; }
}