@font-face{font-family:"Caveat";font-weight:500;src:url(/fonts/caveat-medium.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Caveat";font-weight:700;src:url(/fonts/caveat-bold.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Reenie Beanie";src:url(/fonts/reenie.ttf) format("truetype");font-display:swap}

:root{--ink:#1d2b4f;--ink-soft:#4a587d;--paper:#f4f3ee}
*{box-sizing:border-box}
html{min-height:100%}
body{
  margin:0;min-height:100vh;padding:4vh 3vw 8vh;
  font-family:"Caveat",cursive;font-weight:500;color:var(--ink);font-size:26px;
  /* the wall: painted plaster */
  background:
    radial-gradient(ellipse at 50% 20%,rgba(255,255,255,.35),transparent 70%),
    url(/img/wall.jpg) 0 0/900px auto,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .33 0 0 0 0 .3 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"),
    #cfcabf;
  background-attachment:fixed;
}
.svg-defs{position:absolute;width:0;height:0}

/* cork pinboard in a wooden frame */
.board{
  width:min(900px,100%);margin:0 auto;padding:54px 46px 70px;border-radius:6px;
  border:16px solid transparent;
  background:
    url(/img/cork.jpg) 0 0/380px auto padding-box,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='3' seed='2'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .22 0 0 0 0 .1 0 0 0 1.6 -.55'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .17 0 0 0 0 .07 0 0 0 3 -1.25'/%3E%3C/filter%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='8'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .78 0 0 0 0 .55 0 0 0 3 -1.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='%23b88a58'/%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E") padding-box,
    url(/img/frame.jpg) 0 0/520px auto border-box,
    #4d3019;
  outline:1px solid rgba(0,0,0,.55);outline-offset:-1px;
  box-shadow:inset 0 3px 10px rgba(0,0,0,.45),0 2px 3px rgba(0,0,0,.3),0 18px 40px rgba(0,0,0,.3);
}
.sheet{filter:drop-shadow(1px 3px 3px rgba(0,0,0,.35)) drop-shadow(0 14px 14px rgba(0,0,0,.22))}
.pin{
  position:absolute;z-index:3;left:50%;top:8px;width:30px;height:39px;margin-left:-15px;
  background:url(/img/pin.png) center/contain no-repeat;
  filter:drop-shadow(2px 4px 3px rgba(0,0,0,.45));
}

.paper{
  position:relative;width:min(780px,100%);margin:0 auto;
  padding:64px 56px 90px 104px;background:var(--paper);
  transform:rotate(-.7deg);
  /* ragged torn-ish edge */
  clip-path:polygon(0 .4%,6% 0,18% .5%,33% .1%,50% .6%,68% 0,84% .5%,100% .2%,99.6% 30%,100% 55%,99.5% 80%,100% 99.6%,82% 100%,60% 99.5%,38% 100%,16% 99.6%,.3% 100%,0 70%,.5% 42%,0 20%);
}
/* faint ruled lines + red margin, warped by the same creases as the ink */
.paper::before{
  content:"";position:absolute;inset:0;pointer-events:none;filter:url(#warp);
  background:
    linear-gradient(90deg,transparent 78px,rgba(190,60,60,.40) 78px 80px,transparent 80px),
    repeating-linear-gradient(180deg,transparent 0 38px,rgba(70,110,170,.30) 38px 40px);
  background-position:0 0,0 22px;
}
.paper>.ink{position:relative;z-index:1}
/* creases + paper grain, multiplied over everything on the sheet */
.paper::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  filter:url(#wrinkles);mix-blend-mode:multiply;
}
/* everything written by hand is warped by the same creases */
.ink{filter:url(#warp)}

h1{
  font-family:"Reenie Beanie",cursive;font-weight:400;font-size:clamp(64px,13vw,104px);
  line-height:.9;margin:0 0 .15em;letter-spacing:.01em;
}
h1 .u{display:block;height:14px;margin-top:6px;width:min(420px,80%)}

.list{list-style:none;margin:30px 0 0;padding:0}
.item{
  display:grid;grid-template-columns:96px 1fr;gap:22px;align-items:center;
  padding:16px 0 18px;
}
.item:nth-child(odd){transform:rotate(.25deg)}
.item:nth-child(even){transform:rotate(-.3deg)}
.pic{
  width:96px;height:96px;border:3px solid var(--ink);border-radius:46% 54% 50% 50%/52% 48% 54% 46%;
  overflow:hidden;background:rgba(29,43,79,.06);display:grid;place-items:center;
}
.pic.none{border:0;background:none;border-radius:0;overflow:visible}
.pic.none img{filter:none;object-fit:contain}
.pic img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.55) contrast(1.05) sepia(.25)}
.pic svg{width:70%;height:70%}
.who{min-width:0}
.name{font-weight:700;font-size:clamp(34px,6vw,46px);line-height:1;overflow-wrap:anywhere}
.why{font-size:clamp(22px,4vw,28px);color:var(--ink-soft);line-height:1.05;margin-top:4px;overflow-wrap:anywhere}
.empty{font-size:34px;padding:40px 0;color:var(--ink-soft)}
.foot{margin-top:40px;font-size:22px;color:var(--ink-soft)}
.foot a{color:inherit}

/* the "this time you went too far" note */
.note{padding-top:20px}
.note p{margin:.2em 0;line-height:1.1}
.note .dear{font-size:clamp(34px,7vw,46px)}
.note .big{font-family:"Reenie Beanie",cursive;font-size:clamp(60px,14vw,112px);line-height:.92;margin:.25em 0 .2em}
.note .who-name{display:inline-block;position:relative;font-weight:700}
.note .who-name svg{position:absolute;left:-8%;top:-18%;width:116%;height:140%;overflow:visible}
.note .sign{margin-top:46px;text-align:right;font-size:34px}

@media (max-width:560px){
  .paper{padding:44px 20px 70px 56px}
  .board{padding:30px 14px 44px;border-width:10px}
  .item{grid-template-columns:72px 1fr;gap:14px}
  .pic{width:72px;height:72px}
}