/* Fairy sketchbook: pink paper, ink doodles, ribbon and keepsake prints. */
@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600&display=swap");

html[data-theme="sketchbook"] {
  --paper: #fff8f8;
  --ink: #553746;
  --muted: #795c69;
  --rose: #a64068;
  --line: #e7c6d1;
  --pink: #f9dce6;
  --purple: #eee1f5;
  --serif: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  color-scheme: light;
}

html[data-theme="sketchbook"] body {
  background-color: var(--paper);
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0 31px,
    #be8ca80c 31px 32px
  );
}

html[data-theme="sketchbook"] .site-header {
  border-bottom: 2px dashed var(--line);
}

html[data-theme="sketchbook"] .wordmark {
  font-size: 32px;
}
html[data-theme="sketchbook"] .monogram {
  background: #fce3ec;
  border: 1px solid #b56a88;
  border-radius: 44% 56% 48% 52%;
  transform: rotate(-8deg);
  box-shadow: 3px 3px 0 #f2d3e0;
}

html[data-theme="sketchbook"] nav [aria-current] {
  border-bottom: 2px solid var(--rose);
  border-radius: 0 0 35% 15%;
}

html[data-theme="sketchbook"] h1 {
  letter-spacing: -1.5px;
  line-height: 1.06;
}
html[data-theme="sketchbook"] .hero h1 {
  font-weight: 500;
}
html[data-theme="sketchbook"] h1 em {
  background: linear-gradient(
    transparent 76%,
    #f6cfdf 76% 92%,
    transparent 92%
  );
}
html[data-theme="sketchbook"] .heading-star {
  color: #b15d83;
  transform: rotate(12deg);
}
html[data-theme="sketchbook"] .eyebrow {
  letter-spacing: 1.7px;
}
html[data-theme="sketchbook"] .line {
  height: 2px;
  transform: rotate(-4deg);
}

html[data-theme="sketchbook"] .button {
  background: var(--rose);
  border-radius: 8px 3px 7px 4px;
  box-shadow: 4px 4px 0 #ebc1d1;
}
html[data-theme="sketchbook"] .button:hover {
  background: #883052;
}
html[data-theme="sketchbook"] .hero-art {
  transform: rotate(2deg);
  padding: 25px 22px 33px;
}
html[data-theme="sketchbook"] .arched-art {
  border-radius: 2px 5px 3px 4px;
  border: 12px solid #fffdfb;
  border-bottom-width: 42px;
  background: #f8e0ed;
  box-shadow:
    0 0 0 1px #e6d2d9,
    8px 12px 0 #efd9e16b,
    0 14px 30px #734b6012;
}

/* A translucent strip of washi tape fixes the print to its page. */
html[data-theme="sketchbook"] .hero-art::before {
  content: "";
  position: absolute;
  z-index: 1;
  width: 115px;
  height: 34px;
  top: 42px;
  left: calc(50% - 57px);
  transform: rotate(-7deg);
  background: repeating-linear-gradient(
    45deg,
    #eeb8cfb8 0 8px,
    #f8d4e3bb 8px 16px
  );
  clip-path: polygon(
    2% 0,
    99% 4%,
    96% 22%,
    100% 41%,
    97% 63%,
    99% 94%,
    0 100%,
    3% 75%,
    0 50%,
    3% 24%
  );
  pointer-events: none;
}
html[data-theme="sketchbook"] .orbit-text {
  letter-spacing: 1.5px;
}
html[data-theme="sketchbook"] .art-caption {
  font-size: 25px;
  background: #ffe7ef;
  border-bottom: 1px dashed #c2829a;
  transform: rotate(-7deg);
  box-shadow: 3px 4px 0 #e7c4d153;
}
html[data-theme="sketchbook"] .art-star {
  color: #b06488;
}

html[data-theme="sketchbook"] .ribbon {
  position: relative;
  background: #f9e0e9;
  border-block: 1px dashed #be7895;
  box-shadow:
    0 5px 0 #f9e0e9,
    0 -5px 0 #f9e0e9;
  transform: rotate(-0.6deg);
}
html[data-theme="sketchbook"] .ribbon span {
  color: #765060;
}
html[data-theme="sketchbook"] h2 {
  font-size: 52px;
}
html[data-theme="sketchbook"] .portals {
  gap: 30px;
}
html[data-theme="sketchbook"] .portals > a {
  background: #fff0f4;
  border: 1px solid #d79bb2;
  border-radius: 3px 12px 4px 9px;
  box-shadow: 5px 5px 0 #f0d4df;
  transform: rotate(-0.7deg);
}
html[data-theme="sketchbook"] .portals > a:nth-child(2) {
  background: #f4ebfa;
  border-color: #c8acd8;
  box-shadow: 5px 5px 0 #e7d9ee;
  transform: rotate(0.7deg);
}
html[data-theme="sketchbook"] .portals h3 {
  font-size: 39px;
}
html[data-theme="sketchbook"] .portal-icon {
  color: #a05279;
}
html[data-theme="sketchbook"] footer {
  border-top: 2px dashed var(--line);
}

html[data-theme="sketchbook"] .gallery-heading h1 {
  font-weight: 500;
}
html[data-theme="sketchbook"] .gallery-heading h1 > span {
  color: #ad6287;
}
html[data-theme="sketchbook"] .demo-note {
  background: #f9e5ee;
  border: 1px dashed #cc99b0;
  border-radius: 7px 3px 8px 3px;
}
html[data-theme="sketchbook"] .gallery-controls {
  border-block-style: dashed;
}
html[data-theme="sketchbook"] .filter-tabs .active {
  background: #fae4ed;
  border-radius: 8px 8px 0 0;
}
html[data-theme="sketchbook"] .filter-row {
  border-top-style: dashed;
}
html[data-theme="sketchbook"] input,
html[data-theme="sketchbook"] select,
html[data-theme="sketchbook"] textarea {
  background-color: #fffafb;
}
html[data-theme="sketchbook"] .piece-card {
  align-self: start;
  padding: 10px 10px 16px;
  background: #fffdfc;
  border: 1px solid #e5cdd7;
  border-radius: 3px;
  box-shadow: 4px 5px 0 #ebd6df70;
}
html[data-theme="sketchbook"] .piece-card .image-wrap {
  border-radius: 1px;
}
html[data-theme="sketchbook"] .piece-card h3 {
  font-size: 31px;
}
html[data-theme="sketchbook"] .piece-card .card-meta {
  gap: 5px;
}
html[data-theme="sketchbook"] .preview-badge {
  background: #fff5faed;
}
html[data-theme="sketchbook"] dialog {
  border: 2px solid #c996ac;
  border-radius: 7px;
}
html[data-theme="sketchbook"] dialog::backdrop {
  background: #513243c9;
}
html[data-theme="sketchbook"] .lightbox-image {
  background: #f2e4ed;
}
html[data-theme="sketchbook"] .tags span {
  border-radius: 4px 8px 3px 7px;
}
html[data-theme="sketchbook"] .piece-nav {
  border-top-style: dashed;
}

@media (max-width: 640px) {
  html[data-theme="sketchbook"] .wordmark {
    font-size: 27px;
  }
  html[data-theme="sketchbook"] .hero h1 {
    font-size: clamp(57px, 12vw, 76px);
  }
  html[data-theme="sketchbook"] .hero-art {
    transform: rotate(1deg);
  }
  html[data-theme="sketchbook"] .art-caption {
    right: 0;
    font-size: 22px;
  }
  html[data-theme="sketchbook"] h2 {
    font-size: 45px;
  }
  html[data-theme="sketchbook"] .gallery-heading h1 {
    font-size: 63px;
  }
  html[data-theme="sketchbook"] .piece-card {
    padding: 6px 6px 12px;
  }
  html[data-theme="sketchbook"] .piece-card h3 {
    font-size: 27px;
  }
  html[data-theme="sketchbook"] .portals {
    gap: 22px;
  }
}