/* Holiday stationery: layered die-cut card, corrugated wrapper, printed stock. */

:root{--paper:#f5edd9;--line:#cbb89c;--stock-texture:url('paper-grain.svg');--paper-edge:radial-gradient(circle,#000 68%,#0000 73%) 0 0/26px 26px round,linear-gradient(#000 0 0) center/calc(100% - 26px) calc(100% - 26px) no-repeat}
body{background-color:#793743;background-image:var(--stock-texture),repeating-linear-gradient(90deg,#ffffff0b 0 1px,#3d142212 1px 3px,transparent 3px 7px);background-size:180px 180px,7px 100%;padding:1px 0 18px}
.craft-shell{position:relative;isolation:isolate;max-width:1360px;width:calc(100% - 56px);margin:22px auto 20px;padding:2px 0 12px;background:transparent;filter:drop-shadow(0 7px 7px #33192340)}
.craft-shell:before,.craft-shell:after{content:'';position:absolute;pointer-events:none}
.craft-shell:before{z-index:-1;inset:0;background-color:var(--paper);background-image:var(--stock-texture);background-size:180px 180px;mask:var(--paper-edge)}
.craft-shell:after{z-index:-2;inset:10px -10px -8px 7px;background-color:#bdc6d2;background-image:var(--stock-texture),repeating-linear-gradient(90deg,transparent 0 3px,#283e6820 3px 4px);transform:rotate(-.35deg);border:1px solid #d1d7dc;box-shadow:3px 4px 0 #35293244}
.wrap{width:calc(100% - 64px)}
.site-header{border-bottom:2px solid #8b3b4145;padding-top:20px;padding-bottom:13px}
.hero{position:relative;padding-block:26px 25px;isolation:isolate}
.hero:before{content:'';position:absolute;pointer-events:none;z-index:-1;width:52%;height:90%;right:-8px;top:6%;background:#e9d5b5;background-image:var(--stock-texture),repeating-linear-gradient(90deg,transparent 0 3px,#946d3730 3px 4px,#fff8e91f 4px 5px);clip-path:polygon(3% 2%,96% 0,100% 95%,2% 100%,0 9%);transform:rotate(-2deg)}
.main-portrait{background-color:#e7b9c1;background-image:var(--stock-texture);border:7px solid #fae3d8;border-radius:47% 47% 2px 2px;padding:5px;box-shadow:3px 4px 0 #ab6477,7px 9px 0 #6d4f4938;overflow:visible}
.main-portrait:before{display:block;inset:-15px -14px -12px;z-index:-1;background-color:#c7cfb3;background-image:var(--stock-texture);border:1px solid #a3aa89;border-radius:47% 47% 2px 2px;transform:rotate(-5deg);box-shadow:0 3px 0 #79775f33}
.main-portrait img{mix-blend-mode:multiply}.small-portrait{padding:9px;background-color:#e5e8ed;background-image:var(--stock-texture);border:1px solid #a6b5c8;box-shadow:3px 4px 0 #879bb8,7px 8px 0 #46323a22}
.small-portrait:before{content:'';position:absolute;z-index:1;top:-12px;left:calc(50% - 28px);width:56px;height:23px;background:#d6b783c2;clip-path:polygon(3% 0,96% 3%,100% 100%,4% 96%,0 68%);transform:rotate(4deg);border-top:1px solid #ffedce80}
.scene-bow{z-index:4;color:#823042;width:115px;height:61px;left:15%;top:-4px}.wish-star{color:#f0cb64;filter:drop-shadow(2px 3px 0 #b58f4e)}
.button{position:relative;background-color:#842e40;background-image:var(--stock-texture);border:1px solid #91394a;border-radius:2px;box-shadow:3px 4px 0 #ba8290;transition:transform .2s,box-shadow .2s,background-color .2s}.button:hover{background-color:#752637;box-shadow:2px 2px 0 #ba8290;transform:translate(1px,1px)}
.catalog{border-top:0;padding-top:25px;position:relative}.catalog:before{content:'';position:absolute;pointer-events:none;left:0;right:0;top:0;height:7px;background:linear-gradient(135deg,transparent 45%,#9f5363 46% 55%,transparent 56%) 0 0/16px 8px,linear-gradient(225deg,transparent 45%,#9f5363 46% 55%,transparent 56%) 0 0/16px 8px;opacity:.7}
.product-grid{gap:32px 28px}.product-card{position:relative;isolation:isolate;padding:14px 14px 20px;background:transparent;--card-stock:#e7c1c4;--card-back:#a34e60;--photo-stock:#f5e9d6;transition:transform .25s}
.product-card:before{content:'';position:absolute;z-index:-1;inset:0;background-color:var(--card-stock);background-image:var(--stock-texture);mask:radial-gradient(circle,#000 68%,#0000 73%) 0 0/20px 20px round,linear-gradient(#000 0 0) center/calc(100% - 20px) calc(100% - 20px) no-repeat}
.product-card:after{content:'';display:block;position:absolute;z-index:-2;inset:7px -4px -5px 5px;height:auto;background-color:var(--card-back);background-image:var(--stock-texture);transform:rotate(1.2deg);box-shadow:2px 4px 3px #4d354a26;clip-path:polygon(0 0,100% 1%,99% 99%,1% 100%)}
.product-card:nth-child(3n+2){--card-stock:#c9d6e1;--card-back:#657ca8;--photo-stock:#e1e6df}.product-card:nth-child(3n){--card-stock:#d6dabb;--card-back:#8d9761;--photo-stock:#ece4d5}.product-card:nth-child(even):after{transform:rotate(-1.3deg)}
.product-card .product-photo,.product-card:nth-child(n) .product-photo{border-radius:0;background-color:var(--photo-stock);background-image:var(--stock-texture);border:1px solid #73574926}.product-card:nth-child(3n+2) .product-photo{border-radius:48% 48% 0 0}.product-info{padding-top:16px}.product-card h3{font-size:27px}.product-card:hover{transform:translateY(-3px)}.product-card:hover .product-photo img{transform:scale(1.025)}.view-label{background:var(--paper);box-shadow:2px 2px 0 #76575a33}.product-bottom .price{font-size:23px}.preview-note{margin-top:23px}
.story{border-top:0;background:#e4d8b8;background-image:var(--stock-texture),repeating-linear-gradient(90deg,transparent 0 4px,#9b895219 4px 5px);padding:28px;margin-top:5px;margin-bottom:25px;box-shadow:4px 5px 0 #c7b99b;clip-path:polygon(0 2%,100% 0,99.6% 98%,.4% 100%)}.story-photo{border:5px solid #f6e5c1;box-shadow:3px 4px 0 #b1956e;transform:rotate(-4deg);padding:0}.footer-top{border-top:1px solid #ad917777}.site-footer{padding-bottom:15px}.product-dialog{background-color:var(--paper);background-image:var(--stock-texture);border:8px solid #d8be99;box-shadow:8px 8px 0 #8b5260}.dialog-layout>img{mix-blend-mode:multiply}
@media(min-width:701px) and (max-height:720px){.hero{padding-block:18px 20px}.site-header{padding-block:12px}.hero:before{height:92%;top:5%}}
@media(max-width:1000px){.craft-shell{width:calc(100% - 40px);margin-top:16px}.wrap{width:calc(100% - 48px)}.scene-bow{width:90px;left:11%}.product-grid{gap:25px 20px}.product-card{padding:12px 12px 17px}.product-card h3{font-size:24px}}
@media(max-width:700px){body{padding-bottom:8px}.craft-shell{width:calc(100% - 20px);margin:10px auto 12px;padding-bottom:4px;filter:drop-shadow(0 3px 4px #33192335)}.craft-shell:after{inset:8px -4px -5px 4px;transform:rotate(-.2deg)}.craft-shell:before{mask:radial-gradient(circle,#000 68%,#0000 73%) 0 0/18px 18px round,linear-gradient(#000 0 0) center/calc(100% - 18px) calc(100% - 18px) no-repeat}.wrap{width:calc(100% - 28px)}.site-header{padding-block:7px;min-height:59px;gap:9px}.site-header nav{font-size:15px;gap:13px}.brand{font-size:29px}.hero{padding-top:18px;padding-bottom:22px}.hero:before{width:calc(100% + 6px);height:252px;right:-3px;top:128px;transform:rotate(-2deg)}.theatre{width:min(340px,calc(100% - 6px));margin-top:16px;margin-bottom:16px;height:232px}.main-portrait{height:213px;border-width:5px;padding:2px;right:10%;top:7px}.main-portrait:before{inset:-11px -10px -9px}.small-portrait{padding:6px;width:36%;left:1%;bottom:7px}.small-portrait:before{width:40px;left:calc(50% - 20px);height:19px;top:-9px}.scene-bow{width:77px;height:43px;left:12%;top:0}.wish-star{width:49px;height:49px;bottom:13px;right:0}.hero .button{width:100%;min-height:54px}.catalog{padding-top:22px}.section-top{margin-bottom:18px}.product-grid{gap:24px 16px}.product-card{padding:9px 9px 15px}.product-card:before{mask:radial-gradient(circle,#000 68%,#0000 73%) 0 0/16px 16px round,linear-gradient(#000 0 0) center/calc(100% - 16px) calc(100% - 16px) no-repeat}.product-card:after{inset:5px -3px -4px 4px}.product-card h3{font-size:21px;line-height:1.1}.product-info{padding-top:12px}.product-card .product-photo{border:0}.story{grid-template-columns:105px 1fr;padding:20px 16px;gap:18px;margin-bottom:20px}.story-copy h2{font-size:25px}.story-copy>p:not(.eyebrow):not(.handwritten){font-size:14px}.dialog-copy{padding:23px 18px}}
@media(max-width:360px){.brand{font-size:25px}.site-header nav{font-size:13px;gap:10px}.hero h1{font-size:31px}.intro{font-size:14px}.theatre{height:210px;margin-top:13px;margin-bottom:14px}.main-portrait{height:193px}.hero:before{top:119px;height:228px}.product-card{padding:7px 7px 13px}.product-card h3{font-size:19px}.story{grid-template-columns:82px 1fr;padding:16px 13px;gap:15px}.story-copy h2{font-size:22px}}
@media(prefers-reduced-motion:reduce){.product-card,.button{transition:none}}

.main-portrait:before{background:transparent;border:11px solid #c7cfb3;box-shadow:2px 3px 0 #9b9f7a55}.catalog:before{display:none}

/* Keep transformed images inside their arch when touch browsers composite them. */
.product-card:nth-child(3n+2) .product-photo{clip-path:inset(0 round 48% 48% 0 0);isolation:isolate}
@media(hover:none){
 .product-card:hover{transform:none}
 .product-card:hover .product-photo img{transform:none}
}

/* Let the artwork and its backing follow the actual height of the mobile copy. */
@media(max-width:700px){
 .hero:before{display:none}
 .hero .theatre{isolation:isolate;margin-top:34px;margin-bottom:24px}
 .hero .theatre:before{content:'';position:absolute;pointer-events:none;z-index:-1;width:calc(100% + 6px);height:calc(100% + 16px);right:-3px;top:-8px;background:#e9d5b5;background-image:var(--stock-texture),repeating-linear-gradient(90deg,transparent 0 3px,#946d3730 3px 4px,#fff8e91f 4px 5px);clip-path:polygon(3% 2%,96% 0,100% 95%,2% 100%,0 9%);transform:rotate(-2deg)}
}
