/* KOZA — final paper-detail alignment and deliberately responsive scrapbook typography. */

/* A little breathing room around the welcoming rug. */
@media (min-width: 651px) {
  .hero { overflow:visible !important; }
  .hero::after { bottom:-23px !important; }
  .hero .hero-visual {
    transform: translateY(-20px) scale(.81) !important;
    transform-origin: 52% 46%;
  }
  .hero .cloud-stage img { width:116% !important; max-width:790px !important; left:-6% !important; top:10% !important; }
}
@media (min-width:651px) and (max-width:1000px) {
  .hero .hero-visual { transform:translateY(-24px) scale(.76) !important; }
}
@media (min-width:1550px) {
  .hero .hero-visual { transform:translateY(-66px) scale(.79) !important; }
}
@media (max-width: 650px) {
  .hero .hero-visual { transform: translateY(-88px) scale(.87) !important; transform-origin: 50% 30%; }
}

/* Light individual washi-tape labels: sharp CSS paper edges and folded corners. */
.intro .intro-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 11px 13px; }
.intro .intro-tags span {
  position: relative; isolation: isolate; padding: 10px 19px 11px;
  background: linear-gradient(128deg,#f6f4df 0%,#fffdf0 50%,#ebeacb 100%) !important;
  color: #34452a; border: 0 !important; border-radius: 0 !important;
  box-shadow: 2px 5px 8px #24351f1b, inset 0 1px 2px #fffef2 !important;
  clip-path: polygon(0 7%,3% 4%,4% 0,95% 2%,100% 0,98% 100%,3% 97%,0 100%);
  transform: rotate(-3deg); letter-spacing: .015em; font-weight: 700;
}
.intro .intro-tags span:nth-child(2) { background:linear-gradient(120deg,#e3eff0,#f0fbf8 55%,#d4e5e5) !important; transform:rotate(2deg); }
.intro .intro-tags span:nth-child(3) { background:linear-gradient(118deg,#f3efdb,#fcf8e9 55%,#e5e8ce) !important; transform:rotate(-2deg); }
.intro .intro-tags span::after {
  content: ''; position:absolute; top:0; right:8px; width:17px; height:100%; opacity:.43;
  background:linear-gradient(88deg,transparent,#a7a98c54 50%,#fffdfb 70%,transparent); transform:skewX(-11deg);
  pointer-events:none;
}

/* Keep the fold far to the right of the Collection lettering. */
.pill.tape-pill.tape-olive {
  min-width:178px; padding-left:16px; padding-right:45px;
  text-align:center; letter-spacing:.11em;
}
.pill.tape-pill.tape-blue { padding:11px 28px 13px 22px; }

/* Product captions are printed on their own small, folded paper strips. */
.collection .product-badge,
.collection .product-two .product-badge,
.collection .product-three .product-badge {
  box-sizing:border-box; display:flex; align-items:center; justify-content:center;
  width:175px; height:53px; padding:8px 17px 11px;
  background: url('assets/tape-olive-hd.png') center / 100% 100% no-repeat !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  font: 800 10px/1.1 Manrope,Arial,sans-serif; color:#26371d;
  letter-spacing:.065em; text-align:center; white-space:nowrap;
  transform: translateX(-50%) rotate(-3deg) !important;
}
.collection .product-two .product-badge {
  width:190px; background-image:url('assets/tape-blue-hd.png') !important;
  transform:translateX(-50%) rotate(2deg) !important;
}
.collection .product-three .product-badge {
  width:185px; transform:translateX(-50%) rotate(-1deg) !important;
}

/* The photo slips underneath both the brass clip and the delicate dragonfly. */
.process .process-image .process-board-front {
  z-index:5; pointer-events:none; mix-blend-mode:normal;
}
.process .process-image .process-clip-front {
  clip-path:polygon(43% 0,51% 0,56% 15%,68% 15%,70% 21%,69% 25%,32% 28%,31% 22%,42% 19%);
}
.process .process-image .process-dragonfly-front {
  clip-path:polygon(94% 32%,99% 35%,95% 47%,100% 45%,100% 54%,92% 57%,98% 70%,95% 74%,87% 59%,74% 57%,73% 52%,84% 47%,84% 39%);
}
.process .process-image span { display:none !important; }

/* The paper drawings stay separate from text: real, selectable, responsive lettering. */
.extras article,.extras article + article {
  box-sizing:border-box;
  align-items:flex-start;
  justify-content:flex-start;
}
.extras .pill { white-space:nowrap; }
.extras h2 { overflow-wrap:normal; hyphens:none; }
.extras .extras-status { display:inline-flex; align-items:center; gap:5px; }

/* The memo paper is the label: no separate category pills above its title. */
.extras #friends > .pill,.extras #paper > .pill { display:none !important; }
.extras article,.extras article + article {
  padding-top:clamp(126px,17vw,310px);
  padding-left:18%; padding-right:19%;
}
.extras h2 {margin-top:0;}
.extras #paper h2 {max-width:9ch;}
.extras #friends h2 {max-width:100%;}

@media (min-width: 651px) and (max-width: 900px) {
  .extras { padding-left:3%; padding-right:3%; gap:0; }
  .extras article,.extras article + article { padding:clamp(116px,17vw,151px) 17% 5%; }
  .extras h2 { font-size:clamp(27px,3.6vw,35px); margin:8px 0; }
  .extras p { font-size:10px; line-height:1.43; }
  .extras .extras-status { margin-top:8px; font-size:8px; }
}

@media (max-width:650px) {
  .intro .intro-tags { gap:9px 7px; }
  .intro .intro-tags span { font-size:10px; padding:9px 12px; }
  .pill.tape-pill.tape-olive { min-width:170px; padding-left:13px; padding-right:43px; }
  .collection .product-badge,.collection .product-two .product-badge,.collection .product-three .product-badge {
    height:49px; width:174px; font-size:9px;
  }
  .collection .product-two .product-badge { width:188px; }
  .extras { padding:20px 0 50px !important; gap:0 !important; }
  .extras article,.extras article + article {
    width:min(100%,430px) !important; max-width:none;
    aspect-ratio:1/1; min-height:0 !important; height:auto;
    padding:clamp(132px,35vw,165px) 16.5% 6.5% !important;
    background-size:contain !important;
  }
  .extras .pill { font-size:clamp(7px,2vw,9px); padding:5px 9px; min-height:23px; }
  .extras h2 { font-size:clamp(26px,7.4vw,36px) !important; line-height:1.04; margin:8px 0 7px; letter-spacing:-.06em; }
  .extras p { font-size:clamp(9px,2.55vw,11px) !important; line-height:1.42; }
  .extras .extras-status { margin-top:9px; font-size:clamp(8px,2.2vw,10px); }
}
@media (max-width:365px) {
  .extras article,.extras article + article { padding:clamp(110px,33vw,123px) 15.5% 4% !important; }
  .extras h2 { font-size:clamp(25px,7.5vw,28px) !important; margin:6px 0; }
  .extras p { font-size:9px !important; line-height:1.38; }
  .extras .extras-status { margin-top:6px; font-size:8px; }
}