:root{
  --green:#0b4037;--off:#f7f2ea;--paper:#fffaf5;--ink:#183b35;
  --terracotta:#a46140;--muted:#6c6963;--line:rgba(11,64,55,.18);
  --shadow:0 22px 70px rgba(42,35,27,.12)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--off);color:var(--ink);font-family:Montserrat,Arial,sans-serif;font-weight:300}
button,a{font:inherit}
.section{max-width:1120px;margin:auto;padding:72px 28px}
.logo{width:min(250px,55vw);height:auto}
.eyebrow{text-transform:uppercase;letter-spacing:.27em;font-size:12px;color:var(--terracotta);font-weight:500}
h1,h2{font-family:"Playfair Display",Georgia,serif;font-weight:400;line-height:.98;margin:16px 0}
h1{font-size:clamp(58px,9vw,108px)}
h2{font-size:clamp(40px,6vw,68px)}
.body-copy{font-size:15px;line-height:1.8;max-width:520px;color:#494c48}
.hero{min-height:90vh;display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center;overflow:hidden}
.hero-subtitle{font-family:"Playfair Display",serif;font-size:28px;line-height:1.25}
.hero-gallery{height:680px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tile{margin:0;border-radius:220px 220px 28px 28px;overflow:hidden;align-self:end;height:78%}
.tile-tall{height:100%;border-radius:0 0 220px 220px;align-self:start}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.origin{text-align:center;border-top:1px solid var(--line)}
.origin h2{max-width:780px;margin:20px auto 36px}
.detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.detail-grid img{width:100%;height:330px;object-fit:cover;border-radius:22px;display:block}
.button{min-height:54px;padding:15px 25px;border-radius:999px;text-transform:uppercase;letter-spacing:.13em;font-size:12px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:18px;cursor:pointer}
.button-primary{background:var(--green);color:white;border:1px solid var(--green)}
.button-outline{background:transparent;color:var(--green);border:1px solid var(--green)}
.origin .button{margin-top:28px}
.coupon{background:rgba(255,255,255,.38);border-radius:34px;margin-top:35px;margin-bottom:35px}
.coupon-intro{font-family:"Playfair Display",serif;font-size:24px}
.coupon-card{display:grid;grid-template-columns:1fr .75fr;gap:42px;align-items:center}
.coupon-code{border:1px dashed rgba(11,64,55,.45);border-radius:22px;padding:30px;text-align:center;background:rgba(255,255,255,.34)}
.coupon-code strong{font-family:"Playfair Display",serif;font-size:clamp(42px,7vw,76px);letter-spacing:.09em;font-weight:400;display:block}
.coupon-code span{font-family:"Playfair Display",serif;color:var(--terracotta);font-size:30px;display:block;margin:8px 0}
.coupon-actions{display:grid;gap:12px}
.copy-status{font-size:12px;min-height:18px;text-align:center;margin:0}
.photobooth-invite{display:grid;grid-template-columns:1fr 360px;gap:60px;align-items:center}
.poster-preview{background:var(--paper);padding:28px;box-shadow:var(--shadow);transform:rotate(2deg);text-align:center}
.poster-preview img{width:120px;display: block;margin: 0 auto;transform: translate(-30px);}
.preview-window{height:310px;background:linear-gradient(135deg,#eae4da,#ddd5c9);margin:20px 0}
.poster-preview p{font-family:"Playfair Display",serif;font-size:20px}
footer{background:var(--green);color:white;padding:22px 28px;display:flex;justify-content:center;gap:40px;letter-spacing:.2em;font-size:12px}
footer a{color:white;text-decoration:none;letter-spacing:.05em}

.photobooth{position:fixed;inset:0;z-index:50;background:radial-gradient(circle at top,#fffaf2 0%,#f4eee2 48%,#e6dac8 100%);overflow:auto}
.photobooth[hidden]{display:none}
.close-booth{position:fixed;right:18px;top:calc(12px + env(safe-area-inset-top));z-index:100;border:0;background:rgba(255,255,255,.9);width:52px;height:52px;border-radius:50%;font-size:34px;color:var(--green);cursor:pointer}
.booth-screen{display:none;min-height:100svh;padding:48px 22px 36px;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:17px;position:relative;overflow:hidden}
.booth-screen.active{display:flex}
.booth-brand{position:relative;z-index:5;display:flex;flex-direction:column;align-items:flex-start;width: 100%;gap:10px;margin-bottom:4px}
.booth-logo{width:min(170px,42vw);height:auto;display:block;margin-left:0;}
.collection-name{margin:0;color:var(--terracotta);text-transform:uppercase;letter-spacing:.18em;font-size:12px;font-weight:500}
.booth-screen h2{font-size:clamp(46px,11vw,72px);z-index:5}
.booth-screen>p,.booth-screen>small,.booth-screen>.button{z-index:5;max-width:430px;line-height:1.6}
.prop{position:absolute;z-index:0;pointer-events:none;opacity:.42}
.prop img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.prop-glasses{width:210px;height:120px;left:-35px;top:80px;transform:rotate(-10deg)}
.prop-phone{width:110px;height:170px;left:12px;bottom:85px;transform:rotate(8deg)}
.prop-ladybug{width:78px;height:78px;left:28px;top:42%}
.prop-shirt{width:170px;height:190px;right:-32px;top:70px}
.prop-bag{width:150px;height:150px;right:-14px;top:44%}
.prop-look{width:120px;height:230px;right:0;bottom:20px}

.camera-screen{background:#092f29;color:white;padding-top:calc(72px + env(safe-area-inset-top))}
.camera-top{position:absolute;top:calc(18px + env(safe-area-inset-top));left:22px;right:22px;display:flex;justify-content:center;align-items:center;text-transform:uppercase;letter-spacing:.1em;font-size:11px}
.camera-top img{width:78px;filter:brightness(0) invert(1)}
.camera-wrap{width:min(92vw,450px);aspect-ratio:3/4;overflow:hidden;border-radius:26px;background:#111;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.35)}
video{width:100%;height:100%;object-fit:cover;transform:none}
video.mirrored{transform:scaleX(-1)}
.live-frame{position:absolute;inset:18px;border:1px solid rgba(255,255,255,.7);border-radius:18px}
.live-frame i{position:absolute;width:38px;height:38px;border-color:white;border-style:solid}
.live-frame i:nth-child(1){top:-1px;left:-1px;border-width:2px 0 0 2px}
.live-frame i:nth-child(2){top:-1px;right:-1px;border-width:2px 2px 0 0}
.live-frame i:nth-child(3){bottom:-1px;left:-1px;border-width:0 0 2px 2px}
.live-frame i:nth-child(4){bottom:-1px;right:-1px;border-width:0 2px 2px 0}
.shutter{width:80px;height:80px;border-radius:50%;background:white;border:6px solid rgba(255,255,255,.55);box-shadow:0 10px 35px rgba(0,0,0,.35)}
.shutter:disabled{opacity:.45;cursor:not-allowed}
.text-button{background:transparent;border:0;text-decoration:underline;text-underline-offset:5px;color:inherit;cursor:pointer}
.result-screen{justify-content:flex-start}
.result-screen canvas{width:min(100%,430px);height:auto;border-radius:20px;box-shadow:var(--shadow);background:var(--paper)}
.result-screen .button{width:min(430px,100%)}
.collection-after{color:var(--green);font-size:13px;margin-top:4px}
.save-hint{min-height:18px;font-size:12px;color:var(--muted)}
.camera-message{width:min(92vw,450px);min-height:20px;margin:0;font-size:12px;line-height:1.5;color:rgba(255,255,255,.78)}
.upload-label{color:#fff;border-color:rgba(255,255,255,.75);width:min(320px,90vw)}
.upload-label input{display:none}

@media(max-width:760px){
 .section{padding:52px 20px}
 .hero{grid-template-columns:1fr;min-height:auto;padding-top:40px}
 .hero-gallery{height:490px}
 .tile{border-radius:120px 120px 22px 22px}
 .tile-tall{border-radius:0 0 120px 120px}
 .detail-grid{grid-template-columns:repeat(2,1fr)}
 .detail-grid img{height:270px}
 .coupon{margin:20px 12px}
 .coupon-card{grid-template-columns:1fr}
 .photobooth-invite{grid-template-columns:1fr;text-align:center}
 .body-copy{margin-left:auto;margin-right:auto}
 .poster-preview{width:min(340px,86vw);margin:auto}
 footer{flex-direction:column;gap:12px;text-align:center}
}

.shutter{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.button,.text-button,.close-booth{touch-action:manipulation}