/* Homepage: the hero sheet, the cut-out photo, and the "stuff I make" board. */

.hero { display: grid; grid-template-columns: 1.35fr 1fr; gap: 40px; align-items: center; }

.sheet {
  position: relative;
  padding: 44px 46px 40px;
  background-color: var(--cream);
  transform: rotate(-.8deg);
  filter: var(--lift);
}
.sheet .t1 { left: -24px; top: 14px; transform: rotate(-38deg); }
.sheet .t2 { right: -22px; top: 10px; transform: rotate(34deg); }
.hand { font: 700 27px/1 var(--font-hand); color: var(--tomato); }
.sheet h1 { margin: 10px 0 20px; font: 400 clamp(44px, 6.6vw, 78px)/.92 var(--font-head); letter-spacing: -.5px; }
.sheet h1 span { display: block; color: var(--tomato); }
.bio { max-width: 520px; font-size: 17px; line-height: 1.6; }
.stickers { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; list-style: none; }
.stickers li { padding: 5px 11px; border-radius: 30px; font-weight: 700; font-size: 13px; filter: var(--lift); }
.stickers li:nth-child(1) { background-color: var(--mustard); }
.stickers li:nth-child(2) { background-color: var(--sky); }
.stickers li:nth-child(3) { background-color: var(--mint); }
.sheet .key { width: 120px; right: -26px; bottom: -34px; }

.photo-wrap { position: relative; justify-self: center; margin-bottom: 56px; transform: rotate(3deg); filter: var(--lift); }
.photo-wrap .tape { left: 50%; top: -12px; transform: translateX(-50%) rotate(-4deg); }
.photo-cut {
  padding: 12px;
  background: #fff;
  clip-path: polygon(4% 2%, 30% 0, 62% 3%, 97% 1%, 100% 34%, 98% 70%, 99% 99%, 62% 97%, 28% 100%, 1% 98%, 3% 64%, 0 30%);
}
.photo-cut img {
  display: block;
  width: 330px;
  height: auto;
  aspect-ratio: 330 / 370;
  object-fit: cover;
  clip-path: polygon(1% 1%, 40% 0, 99% 2%, 100% 50%, 98% 99%, 50% 100%, 0 98%, 1% 50%);
}
.note {
  position: absolute;
  left: 18px;
  top: calc(100% + 2px);
  display: flex;
  align-items: flex-end;
  gap: 6px;
  font: 700 24px/1 var(--font-hand);
  color: var(--cream);
  white-space: nowrap;
  transform: rotate(-3deg);
}
.note svg {
  width: 46px; height: 42px;
  margin-bottom: -4px;
  fill: none;
  stroke: var(--cream);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- the board of draggable scraps ---- */
.board-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 64px 0 18px; }
.board-head .label {
  padding: 6px 18px 3px;
  font: 700 25px/1 var(--font-hand);
  background: rgba(236, 226, 190, .85);
  transform: rotate(-1deg);
}
.board-head .hand-note { font-size: 20px; }

.board { position: relative; height: 500px; }

.scrap {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: block;
  color: var(--ink);
  text-decoration: none;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
  filter: var(--lift);
  transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--r, 0deg));
  transition: filter .15s;
}
.scrap.held { cursor: grabbing; filter: var(--lift-high); }
.scrap h3 { margin-bottom: 8px; font: 400 22px/1 var(--font-head); }
.scrap p { font-size: 14px; line-height: 1.45; }
.scrap .cta { display: inline-block; margin-top: 10px; font-weight: 700; font-size: 14px; text-decoration: underline; }

.bubble { width: 260px; padding: 22px 22px 24px; border-radius: 26px; background-color: var(--tomato); }
.bubble::after {
  content: '';
  position: absolute;
  left: 46px; bottom: -22px;
  width: 34px; height: 30px;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 8% 100%);
}
.bubble h3 { font-size: 24px; color: #fff; }

.page { width: 255px; }
.page .face {
  display: block;
  padding: 30px 22px 22px 46px;
  background-color: var(--white);
  background-image: var(--grain), linear-gradient(90deg, transparent 32px, #f19a9a 32px 34px, transparent 34px), repeating-linear-gradient(transparent 0 23px, #bcd5ee 23px 24px);
  background-position: 0 0, 0 0, 0 6px;
  clip-path: var(--torn-top);
}

.punch { width: 296px; }
.punch .face {
  position: relative;
  display: block;
  padding: 20px 22px 18px;
  background-color: var(--manila);
  clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%, 0 15%);
}
.punch .digits {
  display: block;
  margin-bottom: 10px;
  overflow: hidden;
  white-space: nowrap;
  font: 10px/1.35 var(--font-type);
  letter-spacing: 3px;
  color: rgba(80, 60, 20, .45);
}
.punch .hole { position: absolute; width: 6px; height: 11px; background: var(--mat); }

.clip .face { display: block; width: 230px; padding: 16px 18px 20px; background-color: var(--news); clip-path: var(--torn-bottom); }
.clip h3 { padding-bottom: 6px; border-bottom: 2px solid var(--ink); font: 700 24px/1 Georgia, 'Times New Roman', serif; }
.clip .cols { display: block; margin-top: 8px; columns: 2; column-gap: 12px; font: 12px/1.4 var(--font-type); }

.quiz { width: 310px; padding: 20px 22px; border-radius: 6px; background-color: var(--sky); }
.quiz .q { display: block; font: 700 24px/1.05 var(--font-hand); }
.quiz .ans { display: block; margin-top: 10px; padding: 8px 10px; border-radius: 4px; font-size: 14px; background: rgba(255, 255, 255, .55); }

.postit { width: 220px; padding: 18px 18px 20px; background-color: #ffe45c; }
.postit.alt { background-color: var(--pink); }
.postit .kicker { display: block; font: 700 12px var(--font-type); letter-spacing: 1px; text-transform: uppercase; }
.postit h4 { margin: 6px 0; font: 700 18px/1.2 var(--font-body); }
.postit p { font-size: 14px; }

@media (pointer: fine) and (min-width: 761px) {
  .scrap { touch-action: none; }
}

/* Narrower than the full mat: the scraps flow instead of being scattered. */
@media (max-width: 1179px) {
  .board { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 34px 26px; height: auto; }
  .scrap { position: relative; left: auto; top: auto; }
}

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; gap: 28px; }
  .sheet { padding: 30px 24px 34px; transform: rotate(-.5deg); }
  .sheet .t1 { left: -8px; top: -6px; }
  .sheet .t2 { right: -8px; top: -8px; }
  .board-head .hand-note { display: none; }
  .sheet .key { width: 96px; right: -4px; bottom: -32px; }
  .photo-wrap { margin: 20px 0 64px; transform: rotate(1deg); }
  .photo-cut img { width: 300px; max-width: 100%; }
  .board { flex-direction: column; align-items: stretch; gap: 30px; }
  .scrap {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    cursor: pointer;
    transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(calc(var(--r, 0deg) * .3));
  }
  .bubble, .page, .punch, .quiz, .postit { width: 100%; }
  .clip .face { width: auto; }
}