/* An idea on a paper napkin: CSS paper, folds and pen strokes, no bitmap. */
@font-face {
  font-family: 'Caveat';
  src: url('assets/caveat-variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

.hero .concept-note.napkin {
  --pen: #353738;
  container-type: inline-size;
  width: 77%;
  max-width: 385px;
  min-height: 0;
  aspect-ratio: 1.045;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: drop-shadow(3px 5px 2px #08001132) drop-shadow(10px 22px 18px #07001470);
  transform: translate(-50%, -50%) rotate(-6deg);
  pointer-events: none;
}
.hero .concept-note.napkin:before,
.hero .concept-note.napkin:after { content: none; }

.napkin-paper {
  position: absolute;
  inset: 0;
  background: #f5f3ed;
  clip-path: polygon(1.4% 1%, 18% 1.5%, 33% .2%, 50% .9%, 67% .1%, 82% 1%, 98.5% .3%, 99% 18%, 98.5% 33%, 99.7% 51%, 98.8% 68%, 99.5% 85%, 98.6% 98.3%, 84% 99%, 67% 98.6%, 50% 99.7%, 32% 98.7%, 16% 99.3%, .6% 98%, 1.2% 81%, .2% 64%, .9% 48%, .2% 32%, 1% 17%);
  background-image:
    radial-gradient(ellipse at 9% 3%, #fff 0, transparent 38%),
    linear-gradient(171deg, transparent 70%, #d2cec52a 83%, #fff8 94%, #e1ddd3 100%);
}
.napkin-paper:before {
  content: '';
  position: absolute;
  inset: 0;
  /* Offset embossing catches a tiny highlight beside each paper dimple. */
  background-image:
    radial-gradient(ellipse, #a9a69924 0 .65px, transparent .95px),
    radial-gradient(ellipse, #fff9 0 .8px, transparent 1.3px),
    repeating-linear-gradient(37deg, #b3ac9c08 0 1px, transparent 1px 3px);
  background-size: 4px 4px, 4px 4px, 7px 9px;
  background-position: 0 0, 1px 1px, 0 0;
}
.napkin-paper:after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 44%, #b5b0a31c 48.5%, #fff9 49.5%, #a5a09227 50%, #fff8 51%, transparent 57%),
    linear-gradient(178deg, transparent 45%, #b7b0a213 48%, #fff9 49.7%, #aaa39424 50.1%, #fff5 51.5%, transparent 55%),
    linear-gradient(131deg, transparent 5%, #aaa39412 7%, #fff8 7.6%, transparent 12%, transparent 91%, #b7afa323 95%, #fff5 96%);
  mix-blend-mode: multiply;
}
.napkin-seam {
  position: absolute;
  inset: 4.1%;
  border: 3px dotted #beb9ab35;
  outline: 1px dotted #c5c0b334;
  outline-offset: 4px;
  border-radius: 1% 2% 1.4% .6%;
}
.napkin-ink {
  position: absolute;
  inset: 0;
  color: var(--pen);
  font: 500 6cqw/1 'Caveat', 'Segoe Print', cursive;
  transform: rotate(1deg);
  opacity: .9;
}
.hero .napkin .napkin-question {
  position: absolute;
  left: 11%;
  top: 9%;
  max-width: none;
  margin: 0;
  font: 600 9.3cqw/.97 'Caveat', 'Segoe Print', cursive;
  letter-spacing: -.02em;
  transform: rotate(-1deg);
}
.napkin-question:after {
  content: '';
  position: absolute;
  bottom: -9%;
  left: 17%;
  width: 82%;
  height: 10%;
  border-bottom: 1.5px solid var(--pen);
  border-radius: 50%;
  transform: rotate(-2deg);
  opacity: .65;
}
.sketch-screen {
  position: absolute;
  left: 12%;
  top: 34%;
  width: 54%;
  height: 30%;
  border: 2px solid var(--pen);
  border-radius: 2% 4% 2% 1% / 4% 2% 3% 6%;
  transform: rotate(-2deg) skewY(1deg);
}
.sketch-screen:before {
  content: '';
  position: absolute;
  inset: -4px -3px -3px -2px;
  border: 1px solid #35373865;
  border-radius: 2% 2% 4% 1%;
  transform: rotate(.9deg);
}
.sketch-screen:after {
  content: '';
  position: absolute;
  inset: 5% 3% 20%;
  border: 1px solid #35373880;
  border-radius: 2%;
}
.sketch-sun {
  position: absolute;
  top: 15%;
  right: 19%;
  width: 22%;
  aspect-ratio: 1;
  border: 1.5px solid var(--pen);
  border-radius: 48% 53% 46% 54%;
  background: repeating-linear-gradient(112deg, transparent 0 3px, #35373830 3px 4px);
  transform: rotate(-8deg);
}
.sketch-door {
  position: absolute;
  left: 18%;
  top: 15%;
  width: 26%;
  height: 55%;
  border: 2px solid var(--pen);
  border-bottom: 0;
  border-radius: 55% 49% 0 0;
  transform: rotate(-9deg);
}
.sketch-door:after { content: ''; position: absolute; inset: 5% 12% 0 10%; border: 1px solid #35373880; border-bottom: 0; border-radius: inherit; }
.sketch-ground { position: absolute; left: 6%; top: 67%; width: 84%; height: 8%; border-top: 1.5px solid var(--pen); border-radius: 50%; transform: rotate(2deg); }
.sketch-play { position: absolute; left: 52%; top: 40%; width: 0; height: 0; border-left: 2.7cqw solid var(--pen); border-block: 1.65cqw solid transparent; transform: rotate(3deg); opacity: .8; }
.sketch-timeline { position: absolute; left: 9%; right: 9%; bottom: 10%; border-bottom: 1px solid var(--pen); }
.sketch-timeline:before { content: ''; position: absolute; left: 27%; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--pen); }
.sketch-aside { position: absolute; left: 74%; top: 34%; font-size: 6.2cqw; transform: rotate(6deg); }
.sketch-pointer { position: absolute; left: 69%; top: 46%; width: 13%; height: 9%; border-right: 1.5px solid var(--pen); border-bottom: 1.5px solid var(--pen); border-radius: 0 0 75% 0; transform: rotate(8deg); }
.sketch-pointer:after { content: ''; position: absolute; bottom: -3px; left: 0; width: 7px; height: 7px; border-left: 1.5px solid var(--pen); border-bottom: 1.5px solid var(--pen); transform: rotate(32deg); }
.sketch-branches { position: absolute; top: 65%; left: 23%; width: 32%; height: 9%; }
.sketch-branches i { position: absolute; left: 50%; top: 0; width: 52%; height: 100%; border-top: 1.5px solid var(--pen); border-right: 1.5px solid var(--pen); border-radius: 0 18% 0 0; transform: skewY(-3deg); }
.sketch-branches i:first-child { left: 0; border-right: 0; border-left: 1.5px solid var(--pen); border-radius: 15% 0 0 0; transform: skewY(4deg); }
.sketch-branches i:after { content: ''; position: absolute; bottom: 0; right: -4px; width: 6px; height: 6px; border-right: 1.5px solid var(--pen); border-bottom: 1.5px solid var(--pen); transform: rotate(45deg); }
.sketch-branches i:first-child:after { right: auto; left: -4px; }
.sketch-choice { position: absolute; top: 76%; width: 17%; height: 12%; border: 1.5px solid var(--pen); border-radius: 4% 2% 6% 3%; }
.choice-a { left: 14%; transform: rotate(-3deg); }.choice-b { left: 44%; transform: rotate(4deg); }
.sketch-choice>span { position: absolute; top: 0; right: 8%; font-size: 4.5cqw; }
.sketch-choice i { position: absolute; left: 19%; bottom: 12%; width: 46%; height: 62%; border: 1.5px solid var(--pen); border-bottom: 0; border-radius: 50% 50% 0 0; transform: rotate(-10deg); }
.choice-b i { border-radius: 0; height: 44%; transform: rotate(-5deg); border-right: 0; background: repeating-linear-gradient(135deg,transparent 0 3px,#35373840 3px 4px); clip-path: polygon(0 100%,50% 0,100% 100%); }
.sketch-decision { position: absolute; left: 20%; top: 90%; font-size: 5.8cqw; transform: rotate(-2deg); }
.napkin-footnote { position: absolute; left: 65%; top: 73%; font-size: 6cqw; transform: rotate(4deg); }
.napkin-spark { position: absolute; left: 78%; top: 59%; font-size: 9cqw; font-weight: 400; transform: rotate(12deg); }

@media (min-width:1600px) { .hero .concept-note.napkin { max-width: 430px; } }
@media (min-width:801px) and (max-width:1100px) { .hero .concept-note.napkin { width: 82%; } }
@media (max-width:800px) { .hero .concept-note.napkin { width: 73%; max-width: 365px; } }
@media (max-width:520px) { .hero .concept-note.napkin { width: 84%; max-width: 295px; } }
@media (max-width:359px) { .hero .concept-note.napkin { width: 86%; } }