@font-face{font-family:'Price Display';src:url('assets/fonts/playfair-prices.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
/* Six photographed paper cutouts share one responsive atlas.
   Each existing collage element keeps its own animation and torn alpha edge. */
:root{--paper-art:url('assets/paper-art-1024.webp')}
@media(max-width:740px){:root{--paper-art:url('assets/paper-art-720.webp')}}

.collage-piece .paper-shape,.coral-disc .piece-float,
.tc-grid,.tc-disc,.tag::after,.tag-paper::before,
.note-paper,.layered-hero .role::before{
  background-color:transparent;
  background-image:var(--paper-art);
  background-size:200% 300%;
  background-position:var(--paper-position,0 0);
  background-repeat:no-repeat;
  background-blend-mode:normal;
  filter:none;
  border-radius:0;
}
.paper-back{--paper-position:100% 100%}
.grid-paper,.tc-grid{--paper-position:100% 50%}
.purple-paper,.bottom-purple,.tag-paper::before{--paper-position:0 0}
.lime-paper,.tape-piece,.tag-lime,.layered-hero .role::before{--paper-position:100% 0}
.coral-disc,.tc-disc{--paper-position:0 100%}
.note-paper,.tag-paper{--paper-position:100% 100%}
.collage-piece .paper-shape,.coral-disc .piece-float{width:112%;height:112%;margin:-6%}
.note-paper{box-shadow:none;padding:2.7cqw 3cqw}
.browser-paper,.tc-photo{
  background-color:#eee7d6;
  background-image:var(--paper-art);
  background-size:230% 345%;
  background-position:96% 96%;
  background-repeat:no-repeat;
}
.layered-hero .role::before{inset:-14px -9% -16px -8%;transform:rotate(-1deg)}
.tag::after{inset:-9% -5% -5%;filter:drop-shadow(0 8px 9px #17171925)}
.tag-paper::after{inset:2% -5% -5%}
.coral-disc .piece-float,.tc-disc{background-size:200% 290%}
.tag-paper::before{left:-2%;right:-2%;top:-24px;height:120px;z-index:-2;transform:rotate(-2deg);filter:drop-shadow(0 3px 3px #17171920)}
.tag-price{font-family:'Price Display',Georgia,serif;font-weight:800;font-variant-numeric:lining-nums proportional-nums;font-size:clamp(92px,11.6vw,180px);line-height:.88;letter-spacing:-.055em;margin:6px 0 16px;transform:scaleX(.72);transform-origin:left center;white-space:nowrap}
.tc-disc,.tc-grid{filter:drop-shadow(0 3px 3px #17171918)}

/* Mountain browser miniatures, matching the original pricing artwork. */
.tc-photo{padding:10cqw 3cqw 4cqw;border:1px solid #bcb5a378;border-radius:1px;box-shadow:0 4px 7px #17171930}
.tc-photo::before{content:'•••';position:absolute;left:3cqw;top:.2cqw;font:700 7cqw/1.1 Arial,sans-serif;letter-spacing:.6cqw;color:#24231e}
.tc-photo::after{content:'';position:absolute;left:0;right:0;top:8cqw;border-top:1px solid #bcb5a378}
.tc-photo img{aspect-ratio:1.25}
.tc-photo-rear{left:17%;top:8%;transform:rotate(3deg)}
.tag-collage-b .tc-photo-back{left:9%;top:25%;transform:rotate(-6deg)}
.tag-collage-b .tc-photo:not(.tc-photo-back):not(.tc-photo-rear){left:36%;top:36%;transform:rotate(5deg)}
.tag-collage-b .tc-grid{right:8%;top:35%;height:62%}
@media(max-width:740px){
  .tag::after{inset:-3% -5%}
  .tag-paper::before{top:-22px;height:100px}
  .tag-price{font-size:clamp(82px,24vw,120px)}
}

/* Price card layout (12 Oct 2026): text on the left, a large collage filling the right,
   matching the concept. Each card is its own container so the price scales with the card. */
.tag{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);grid-template-areas:"title art" "price art" "for art" "detail art" "btn art";grid-template-rows:auto auto auto auto 1fr;column-gap:clamp(12px,2.4cqw,32px);container-type:inline-size;min-height:0}
.tag-title{grid-area:title;max-width:none}
.tag-price{grid-area:price;font-size:clamp(70px,25cqw,200px);margin:4px 0 12px}
.tag-for{grid-area:for;max-width:none}
.tag-detail{grid-area:detail;max-width:none}
.tag .paint-button{grid-area:btn;align-self:end;justify-self:start;margin-top:4px}
.tag .tag-collage{grid-area:art;position:relative;inset:auto;width:124%;max-width:none;margin-right:-18%;margin-left:-6%;align-self:center;aspect-ratio:1}
.tag-paper .tag-collage{margin-top:8px}
@media(max-width:740px){
  .tag{grid-template-columns:minmax(0,1fr) minmax(0,.72fr);grid-template-areas:"title title" "price art" "for for" "detail detail" "btn btn";column-gap:6px}
  .tag-price{font-size:clamp(60px,24cqw,120px)}
  .tag .tag-collage{width:112%;margin:-8% -12% 0 0;align-self:center}
  .tag-paper .tag-collage{margin-top:-2%}
  .tag .tc-doodle{bottom:6%}
}

/* Breathing room inside the price cards (12 Oct 2026): every piece stays inside the paper. */
.tag{padding:clamp(36px,3.8vw,58px) clamp(30px,3.4vw,60px) clamp(36px,3.6vw,58px)}
.tag-paper{padding-top:calc(clamp(36px,3.8vw,58px) + 16px)}
.tag .tag-collage{width:100%;margin:0;justify-self:end}
.tag-collage-b .tc-doodle{right:5%;bottom:3%}
.tag-collage .tc-grid{right:6%}
@media(max-width:740px){
  .tag{padding:40px 26px 34px}
  .tag-paper{padding-top:56px}
  .tag .tag-collage{width:100%;margin:-6% 0 0 0}
}