.home-content { position: relative; }
.home-stories { position: relative; }
.home-hero { position: relative; height: 1407px; }
.book {
  --book-width: 932px;
  --lower-angle: 60deg;
  --edge-offset: calc((var(--book-width) - 100vw) / 2);
  --fish-shift: 0px;
  width: var(--book-width);
  height: 1236px;
  position: relative;
  margin-inline: auto;
}
.book-cover {
  position: relative;
  z-index: 2;
  height: 606px;
  padding: 20px 23px 3px;
  border: 2px solid transparent;
  border-radius: 62px 62px 4px 4px;
  background:
    linear-gradient(var(--red), var(--red)) padding-box,
    linear-gradient(#f5e1ce, var(--red) 62%) border-box;
}
.book-cover::before, .book-lower::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url("/sites/jackie/home/leather.jpg") left top / 1448px auto repeat;
  mix-blend-mode: multiply;
  opacity: .22;
  pointer-events: none;
  content: "";
}
.book-paper {
  position: absolute;
  inset: 18px 23px 2px;
  isolation: isolate;
  overflow: hidden;
  background: var(--paper);
  border-radius: 20px 20px 4px 4px;
  border-top: 1px solid #fff6ed;
  box-shadow: 0 4px 2px -1px #51251c5c, 0 7px 8px #51251c3c;
}
.book-paper::after {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: linear-gradient(transparent 87%, #4c331b14 98%, #33210f64);
  pointer-events: none;
  content: "";
}
.book-grid {
  position: absolute;
  inset: 0;
  background: url("/sites/jackie/home/grid.png") calc(50% - 11px) top / 42px auto repeat;
  opacity: .27;
  mask-image: linear-gradient(#000 16%, #0007 43%, transparent 66%);
}
.book-copy {
  position: absolute;
  z-index: 3;
  top: 126px;
  left: 69px;
  color: var(--red);
}
.book-copy > img { width: 154px; height: 52px; }
.book-role { margin-top: 1px; font: 400 26px/1 "Averia Serif Libre", serif; letter-spacing: 1.1px; }
.book-copy h1 { margin-top: 5px; font: 600 45px/1.31 "Awesome Serif Semi Bold Tall", serif; }
.book-copy h1 [data-hero-word] { display: inline-block; font: 400 51px/1.2 var(--hand); }
.book-location { margin-top: 9px; font: 300 20px/1 "Averia Serif Libre", serif; letter-spacing: -.8px; }
.book-illustration { position: absolute; top: 90px; right: 0; width: 60.4%; height: 493px; object-fit: contain; }
.book-paper-art { position: absolute; inset: 18px 23px -54px; overflow: hidden; pointer-events: none; }
.book-flower { position: absolute; width: 181px; left: -49px; bottom: 0; transform: rotate(-9deg); }
.book-doodle { position: absolute; z-index: 0; max-width: none; }
.book-doodle--juice { width: 104px; left: calc(var(--edge-offset) + 118px); top: 321px; transform: rotate(-4deg); }
.book-doodle--noodles { width: 131px; right: calc(var(--edge-offset) + 108px); top: 146px; transform: rotate(-8deg); }
.book-doodle--godzilla { width: 155px; right: calc(var(--edge-offset) + 139px); top: 386px; }
.book-doodle--fish { width: 219px; left: calc(var(--edge-offset) + 75px); top: calc(911px + var(--fish-shift)); transform: rotate(-13deg); }
.book-doodle--flowers { width: 163px; right: calc(var(--edge-offset) + 108px); top: 992px; transform: rotate(10deg); }
.book-doodle--stem { width: 154px; right: calc(var(--edge-offset) + 273px); top: 631px; }
.book-ribbon { position: absolute; z-index: 4; background: #ed7164; opacity: .93; }
.book-ribbon--left {
  bottom: -15px;
  left: -60px;
  width: 88.5px;
  height: 40.5px;
  clip-path: polygon(100% 0, 42% 20%, 0 70%, 10% 80%, 10% 100%, 49% 57%, 100% 42%);
}
.book-ribbon--right {
  bottom: 4px;
  right: -19px;
  width: 46.5px;
  height: 93px;
  clip-path: polygon(0 25%, 89% 56%, 100% 78%, 51% 92%, 0 100%, 0 81%, 39% 75%, 60% 67%, 45% 23%, 0 0);
}
.book-lower {
  position: absolute;
  inset: 606px 0 auto;
  height: 630px;
  padding: 0 26px 24px;
  border-radius: 2px 2px 60px 60px;
  background: var(--red);
  transform: perspective(3310px) rotateX(var(--lower-angle));
  transform-origin: center top;
}
.book-lower-paper {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 4px 4px 20px 20px;
  background: linear-gradient(#69452950, transparent 46px), var(--paper);
  color: var(--red);
}
.book-lower h2 {
  position: absolute;
  left: 54px;
  top: 61px;
  right: 54px;
  overflow-wrap: anywhere;
  font: 600 22px/1.2 "Awesome Serif Semi Bold Tall", serif;
}
.lower-flower--left, .lower-flower--right { position: absolute; bottom: 0; }
.lower-flower--left { left: 0; width: 186px; }
.lower-flower--right { right: 0; width: 149px; }
.mobile-book { display: none; }

.notes-track {
  position: absolute;
  z-index: 4;
  top: 686px;
  inset-inline: 0;
  bottom: 0;
  pointer-events: none;
}
.notes-stack {
  position: sticky;
  top: 80px;
  width: 670px;
  height: 497px;
  margin-inline: auto;
  font-family: var(--hand);
}
.value-note {
  position: absolute;
  width: 242px;
  height: 194px;
  left: 214px;
  top: 151px;
  color: #171717;
  transition: transform .7s cubic-bezier(.2,.8,.24,1), opacity .45s ease;
}
.note-paper { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.value-note p { position: absolute; left: 32px; right: 18px; top: 56px; white-space: pre-line; overflow-wrap: anywhere; }
.value-note--clarity { transform: rotate(-5deg); z-index: 3; font: 32px/.8 var(--hand); }
.value-note--moments { transform: translate(-5px, 7px) rotate(5deg); z-index: 1; font: 600 27px/1.1 "Awesome Serif Italic Semi Bold Extra Tall", serif; }
.value-note--empower { transform: translate(7px, -7px) rotate(8deg); z-index: 2; font: 27px/.95 "Geist Mono", monospace; }
.value-note--empower p { top: 41px; }
.notes-stack[data-note="rest"] .value-note--clarity { transform: translate(-154px, -61px) rotate(-4deg) scale(1.24); }
.notes-stack[data-note="rest"] .value-note--moments { transform: translate(25px, 107px) rotate(5deg) scale(1.32); }
.notes-stack[data-note="rest"] .value-note--empower { transform: translate(142px, -62px) rotate(6deg) scale(1.38); }
.notes-stack[data-note="moments"] .value-note--moments,
.notes-stack[data-note="empower"] .value-note--moments { z-index: 3; transform: translate(-4px, -8px) rotate(4deg); }
.notes-stack[data-note="moments"] .value-note--clarity,
.notes-stack[data-note="empower"] .value-note--clarity { z-index: 1; transform: translate(0, 9px) rotate(-5deg); }
.notes-stack[data-note="moments"] .value-note--empower { z-index: 4; transform: translate(10px, -30px) rotate(5deg); }
.notes-stack[data-note="empower"] .value-note--empower { z-index: 2; transform: translate(16px, 9px) rotate(5deg); }

.story-scene { position: relative; height: 1037px; }
.story-scene--2 { height: 1050px; }
.story-scene--3 { height: 1072px; }
.story-card, .mat-card {
  position: absolute;
  left: var(--left);
  top: var(--top);
  width: min(var(--width), 30vw);
  height: var(--height);
  border: 10px solid #fff;
  border-radius: 15px;
  overflow: hidden;
  background: #fff;
  transform: rotate(var(--angle));
  transition: transform .32s ease, box-shadow .32s ease;
  box-shadow: 0 3px 8px #0005;
}
.story-card img, .mat-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
.story-card:hover, .mat-card:is(:hover, :focus-visible) { z-index: 3; transform: rotate(0deg) scale(1.045); box-shadow: 0 12px 22px #0006; }
.scene-deco { position: absolute; z-index: 1; pointer-events: none; }
.scene-lucky { width: 144px; left: 9%; top: -19px; transform: rotate(-6deg); }
.scene-gem { width: 99px; left: 9%; bottom: -18px; }
.scene-flower { width: 182px; left: 22%; bottom: -60px; }
.scene-hornbill { width: 137px; left: 67%; bottom: -211px; z-index: 0; }
.scene-coffee { width: 78px; left: 7.4%; bottom: -10px; }
.scene-map { width: 204px; left: 71.3%; bottom: -49px; }

.home-screenies { position: relative; height: 1399px; padding-top: 120px; }
.mat-doodles { position: relative; width: 388px; height: 148px; margin: 0 auto; }
.mat-doodles img { position: absolute; bottom: 10px; }
.mat-scraps { width: 126px; left: 0; }
.mat-cutting { width: 252px; right: 0; }
.cut-mat { position: relative; z-index: 3; height: 894px; width: 100%; max-width: 1780px; margin: 0 auto; }
.cut-mat-back {
  position: absolute;
  inset: 0 12% 5px;
  background: var(--red);
  border-radius: 18px;
  transform: rotate(-2deg);
}
.cut-mat-front {
  position: absolute;
  z-index: 1;
  inset: 11px 12px 31px;
  padding: 18px 20px 52px 35px;
  border: 1px solid var(--paper);
  border-radius: 24px;
  background: #1d1d1d;
  transform: rotate(1deg);
}
.mat-grid {
  height: 100%;
  border: 2px solid var(--paper);
  border-radius: 18px;
  background:
    linear-gradient(#cbbba52b 1px, transparent 1px),
    linear-gradient(90deg, #cbbba52b 1px, transparent 1px),
    url("/sites/jackie/home/mat.png") center / 230px repeat, #1d1d1d;
  background-size: 46px 46px, 46px 46px, 230px auto;
}
.cut-mat-front p { margin-top: 12px; text-align: right; color: var(--paper); font: 19px/1.2 var(--hand); }
.mat-numbers {
  position: absolute;
  left: 10px;
  top: 17px;
  height: calc(100% - 84px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  color: var(--paper);
  font: 16px/1 "Inter", sans-serif;
}
.mat-gallery { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.mat-card { width: min(var(--width), 28vw); pointer-events: auto; }
.mat-card[data-column="1"] { z-index: 1; }
.mat-card:is(:hover, :focus-visible) { z-index: 5; }
.home-about-card {
  position: absolute;
  z-index: 0;
  top: 735px;
  left: 50%;
  width: 221px;
  height: 273px;
  display: block;
  transform: translateX(-50%) rotate(-2deg);
  border: 1px dashed var(--red);
  border-radius: 12px;
  padding: 14px 21px;
  text-decoration: none;
  color: var(--red);
  transition: transform .36s ease, z-index 0s .36s;
}
.home-about-card:hover, .home-about-card:focus-visible {
  z-index: 3;
  transform: translate(-50%, 20px) rotate(3deg);
  transition-delay: 0s;
}
.about-photo { width: 100%; height: 185px; background: #eee7dc; border-radius: 10px 10px 0 0; object-fit: cover; }
.about-photo-signature { width: 100%; height: 36px; padding: 2px 30px; object-fit: contain; background: #eee7dc; border-radius: 0 0 7px 7px; }
.about-photo-mask {
  position: absolute;
  width: 124px;
  left: 50%;
  top: 48px;
  padding: 10px;
  border: 2px solid var(--paper);
  border-radius: 46% 49% 48% 44%;
  background: #364739;
  opacity: 0;
  transform: translateX(-50%) rotate(-10deg);
  transition: opacity .2s ease;
}
.home-about-card:is(:hover, :focus-visible) .about-photo-mask { opacity: 1; }
.about-card-caption { display: grid; justify-items: center; margin-top: 7px; color: var(--red); font: 16px/1.1 var(--hand); }
.about-card-caption span { grid-area: 1 / 1; }
.about-card-caption span:first-child, .home-about-card:hover .about-card-caption span:last-child { opacity: 0; }
.home-about-card:hover .about-card-caption span:first-child { opacity: 1; }

.home-footer { height: 942px; position: relative; padding-top: 100px; }
.contact-wrap { position: relative; z-index: 3; width: 773px; margin: 0 auto; }
.contact-card {
  position: relative;
  z-index: 1;
  height: 374px;
  border-radius: 31px;
  padding: 33px 32px;
  background: var(--paper);
  color: var(--red);
  transition: transform .5s cubic-bezier(.2,.85,.25,1.1);
}
.contact-copy { width: 55.2%; }
.contact-card h2 { padding: 13px 0 14px; border-block: 1px solid #e353428f; font: 600 29px/1.2 "Awesome Serif Semi Bold Extra Tall", serif; }
.contact-card ul { list-style: none; padding: 0; margin: 0; font: 22px/1.2 var(--hand); }
.contact-card li { min-height: 50px; border-bottom: 1px dashed #e3534275; }
.contact-card li img { width: 23px; height: 21px; object-fit: contain; }
.contact-media { position: absolute; right: 30px; top: 33px; width: 311px; height: 308px; }
.contact-media-frame { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.contact-card li:last-child { border-bottom: 0; }
.contact-choice {
  width: 100%;
  min-height: 49px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 4px;
  border: 0;
  color: inherit;
  background: none;
  text-align: left;
  cursor: pointer;
}
.contact-check { position: relative; flex: 0 0 23px; }
.contact-check::after {
  position: absolute;
  inset: 1px 0 0;
  display: grid;
  place-items: center;
  content: "✓";
  opacity: 0;
}
.contact-choice:is(:hover, :focus-visible) .contact-check { background: #e353421e; }
.contact-choice[aria-pressed="true"] .contact-check::after { opacity: 1; }
.contact-choice[aria-pressed="true"] .contact-label { text-decoration: line-through; }
.contact-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(.95);
  transition: opacity .36s ease, transform .36s ease;
}
.contact-wrap:is([data-checked="1"], [data-checked="2"], [data-checked="3"]) .contact-layer--foreground,
.contact-wrap:is([data-checked="2"], [data-checked="3"]) .contact-layer--middle,
.contact-wrap[data-checked="3"] .contact-layer--background { opacity: 1; transform: scale(1); }
.contact-wrap[data-checked="3"] .contact-card { transform: rotate(-3deg); }
.contact-gif {
  position: absolute;
  z-index: 0;
  opacity: 0;
  object-fit: cover;
  width: 478px;
  height: 269px;
  inset: 100px auto auto 50%;
  border-radius: 0;
  transform: translateX(-50%) rotate(2deg);
  pointer-events: none;
  transition: transform .65s cubic-bezier(.2,.8,.25,1.1), opacity .35s ease;
}
.contact-wrap[data-checked="3"] .contact-gif { opacity: 1; transform: translate(-50%, 265px) rotate(2deg); }
.home-footer:has(.contact-wrap[data-checked="3"]) .footer-computer { opacity: 0; }
.footer-computer { transition: opacity .3s ease; }

.contact-doodle { position: absolute; top: 14px; right: -35px; width: 121px; }
.footer-flowers { position: absolute; width: 238px; top: 207px; left: 4.5%; transform: rotate(-10deg); }
.footer-bird { position: absolute; width: 207px; right: 0; top: 498px; }
.footer-computer { width: 191px; margin: 57px auto 0; }
@media (min-width: 810px) and (max-width: 1389.98px) {
  .book { --book-width: min(770px, calc(100vw - 128px)); }
  .book-copy { left: 52px; }
  .book-illustration { width: 58%; }
}
@media (min-width: 810px) and (max-width: 949.98px) {
  .book { --book-width: min(674px, calc(100vw - 112px)); }
  .book-copy { left: 37px; }
  .book-copy h1 { font-size: 40px; }
  .story-card { height: calc(var(--height) * .78); }
}
@media (max-width: 809.98px) {
  .home-hero { height: 1247px; }
  .book { display: none; }
  .mobile-book { display: block; width: min(354px, calc(100% - 26px)); height: 605px; position: relative; z-index: 3; margin-inline: auto; overflow: hidden; }
  .mobile-book-paper { position: absolute; inset: 70px 0 0; border-radius: 0 0 10px 10px; background: var(--paper); }
  .mobile-book-binding { position: absolute; height: 72px; inset: -70px 0 auto; background: url("/sites/jackie/home/coil-texture.png") left top / 116.5px auto repeat-x; }
  .mobile-book .book-copy { left: 31px; top: 45px; }
  .mobile-book .book-location { margin-top: 9px; }
  .mobile-book-illustration { position: absolute; bottom: -10px; width: 100%; height: 238px; object-fit: cover; object-position: center top; }
  .notes-track { top: 526px; }
  .notes-stack { margin-left: calc(50% - 335px); }
  .value-note { transition-duration: .62s; }
  .notes-stack[data-note="rest"] .value-note { transform: rotate(-5deg); }
  .notes-stack:not([data-note="rest"]) .value-note { margin-left: -105px; }
  .notes-stack[data-note="mobile-clarity"] .value-note { margin-left: -17px; }
  .story-scene { height: 1244px; }
  .story-scene--2 { height: 1150px; }
  .story-scene--3 { height: 1333px; }
  .story-card {
    left: calc(50% + var(--mobile-left));
    top: var(--mobile-top);
    width: var(--mobile-width);
    height: var(--mobile-height);
  }
  .scene-deco { display: none; }
  .scene-hornbill { display: block; left: calc(50% - 15px); bottom: -6px; }
  .home-screenies { height: 1710px; }
  .cut-mat { width: 432px; margin-left: calc(50% - 216px); }
  .cut-mat-front { inset-inline: 8px; }
  .mat-card {
    left: calc(var(--left) * .89 - 54px);
    top: calc(var(--top) * .8 + 80px);
    width: calc(var(--width) * .74);
    height: calc(var(--height) * .74);
  }
  .mat-card[data-column="1"] { left: 89px; }
  .mat-card[data-column="2"] { left: 224px; }
  .mat-card[data-row="2"][data-column="1"] { left: 81px; }
  .contact-wrap { width: 649px; margin-left: calc(50% - 324.5px); }
  .contact-copy { width: 230px; }
  .contact-media { left: 308px; right: auto; }
  .contact-doodle { left: 99px; right: auto; }
  .portfolio-home .stamp-rail--left { clip-path: inset(0 0 1100px -140px); }
  .footer-song { width: 655px; margin-left: calc(50% - 327.5px); }
  .footer-flowers, .footer-bird { display: none; }
}