:root{--cream:#f7f1e7;--paper:#fffaf2;--brown:#342117;--rust:#b6532d;--green:#526b52;--gold:#d5994d}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--brown);font-family:"DM Sans",sans-serif}a{color:inherit;text-decoration:none}.demo-bar{height:34px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;background:#24160f;color:#f6e6d2;font-size:11px}.demo-bar b{color:#e6a15d}.demo-bar a{text-decoration:underline}nav{height:82px;padding:0 6%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e9ddcd;background:rgba(255,250,242,.94);position:sticky;top:0;z-index:10;backdrop-filter:blur(12px)}.brand{display:flex;gap:10px;align-items:center}.brand>span{width:38px;height:38px;border-radius:50% 50% 45% 55%;background:var(--rust);color:white;display:grid;place-items:center;font-family:"Playfair Display";font-size:24px}.brand div{display:flex;flex-direction:column}.brand b{font-family:"Playfair Display";letter-spacing:.12em}.brand small{font-size:7px;letter-spacing:.2em;color:var(--rust)}.links{display:flex;gap:32px;font-size:12px;font-weight:600}.links a:hover{color:var(--rust)}.book,.primary{padding:13px 20px;background:var(--rust);color:white;font-size:12px;font-weight:700;border-radius:99px}.menu{display:none}.hero{min-height:680px;display:grid;grid-template-columns:1fr 1fr;background:var(--cream);overflow:hidden}.hero-copy{padding:110px 5% 80px 12%;position:relative;z-index:2}.kicker{font-size:10px;letter-spacing:.22em;font-weight:700;color:var(--rust)}h1,h2{font-family:"Playfair Display";font-size:67px;line-height:1.02;letter-spacing:-.04em;margin:22px 0}h1 em,h2 em{font-weight:600;color:var(--rust)}.hero-copy>p{max-width:520px;color:#725e50;line-height:1.8;font-size:15px}.actions{display:flex;align-items:center;gap:25px;margin:35px 0}.primary{display:inline-flex;gap:28px;align-items:center}.text-link{font-size:12px;font-weight:700;border-bottom:1px solid var(--brown);padding-bottom:5px}.rating{display:flex;align-items:center;gap:14px;margin-top:45px}.rating>b{font-family:"Playfair Display";font-size:28px}.rating>span{color:var(--gold);letter-spacing:2px;font-size:11px;display:flex;flex-direction:column}.rating small{letter-spacing:0;color:#846f61;font-size:9px;margin-top:3px}.hero-art{position:relative;background:#d9c4a6}.sun{position:absolute;width:460px;height:460px;background:#e9d6bb;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.cup{position:absolute;width:245px;height:260px;border-radius:20px 20px 85px 85px;background:linear-gradient(100deg,#eee0ce,#c8aa88);left:50%;top:52%;transform:translate(-50%,-50%);box-shadow:0 35px 50px #74584455;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:"Playfair Display";font-size:34px;letter-spacing:.12em}.cup:before{content:"";position:absolute;top:-26px;width:238px;height:55px;border-radius:50%;background:#f3e8da;box-shadow:inset 0 0 0 14px #c4a481}.cup:after{content:"";position:absolute;right:-73px;width:100px;height:105px;border:24px solid #c8aa88;border-left:0;border-radius:0 65px 65px 0}.cup small{font:italic 16px "Playfair Display";letter-spacing:.05em;color:var(--rust)}.fresh{position:absolute;right:11%;bottom:13%;width:105px;height:105px;border-radius:50%;background:var(--rust);color:white;display:grid;place-items:center;text-align:center;transform:rotate(9deg);padding:17px}.fresh b{font:26px "Playfair Display"}.fresh small{font-size:7px;letter-spacing:.12em}.bean{position:absolute;width:30px;height:45px;background:#5a3926;border-radius:50%;transform:rotate(35deg)}.bean:after{content:"";position:absolute;left:14px;top:3px;width:2px;height:38px;background:#bc8c6d;border-radius:50%}.b1{left:16%;top:20%}.b2{right:18%;top:19%;transform:rotate(78deg)}.b3{left:22%;bottom:12%;transform:rotate(-20deg)}.leaf{position:absolute;width:130px;height:55px;background:var(--green);border-radius:100% 0 100% 0;opacity:.85}.leaf-a{right:-15px;top:80px;transform:rotate(-25deg)}.leaf-b{left:-25px;bottom:70px;transform:rotate(25deg)}.marquee{height:75px;display:flex;align-items:center;justify-content:space-around;background:var(--brown);color:#f5dfc5;font:11px "DM Sans";letter-spacing:.18em}.marquee i{color:var(--gold)}.story{padding:130px 10%;display:grid;grid-template-columns:1fr 1fr;gap:120px;align-items:center}.story-art{position:relative}.photo{height:490px;background:linear-gradient(145deg,#67745d,#bfa37f);border-radius:150px 150px 8px 8px;position:relative}.photo:before{content:"";position:absolute;inset:30px;background:radial-gradient(circle at 55% 45%,#d9c0a1 0 12%,transparent 13%),linear-gradient(130deg,transparent 40%,#344631 41% 65%,transparent 66%);opacity:.7}.photo span{position:absolute;right:-38px;bottom:50px;width:100px;height:100px;background:var(--rust);color:white;border-radius:50%;display:grid;place-items:center;text-align:center;font-size:9px}.photo b{font:24px "Playfair Display"}.story-art>p{font:italic 18px "Playfair Display";position:absolute;left:-35px;bottom:50px;transform:rotate(-7deg);color:white}.story h2,.menu-section h2,.space h2,.visit h2{font-size:48px}.story-copy>p,.space>div>p{color:#776256;line-height:1.9;font-size:14px}.values{display:flex;gap:45px;margin-top:38px;padding-top:30px;border-top:1px solid #e1d4c4}.values div{display:flex;flex-direction:column}.values b{font:28px "Playfair Display";color:var(--rust)}.values span{font-size:9px;color:#816c5f}.menu-section{text-align:center;background:var(--cream);padding:120px 8%}.menu-section h2{margin-bottom:10px}.intro{color:#806d60}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:55px auto 40px;max-width:1050px}.cards article{background:var(--paper);padding:24px 25px 30px;position:relative;text-align:left;border:1px solid #eadfce}.cards article.featured{transform:translateY(-12px);box-shadow:0 25px 45px #6045251c}.drink{display:block;height:210px;background:#ded0bc;margin-bottom:25px;position:relative;overflow:hidden}.drink:before{content:"";position:absolute;width:110px;height:145px;background:linear-gradient(#f5ebdf 0 25%,#9b6242 26%);border-radius:8px 8px 35px 35px;left:50%;top:35px;transform:translateX(-50%);box-shadow:0 15px 25px #5d402433}.coconut:before{background:linear-gradient(#fff 0 35%,#bd794b 36%)}.filter:before{border-radius:3px 3px 40px 40px;background:linear-gradient(#574034 0 68%,#ecdac2 69%)}.popular{position:absolute;z-index:2;right:12px;top:12px;background:var(--rust);color:white;padding:6px 9px;font-size:7px;letter-spacing:.1em}.cards small{font-size:8px;letter-spacing:.15em;color:var(--rust);font-weight:700}.cards h3{font:22px "Playfair Display";margin:10px 0}.cards p{font-size:11px;color:#806d60}.cards article>b{font:18px "Playfair Display";float:right;color:var(--rust)}.outline{display:inline-block;border:1px solid var(--brown);border-radius:99px;padding:13px 22px;font-size:11px;font-weight:700}.space{padding:130px 10%;display:grid;grid-template-columns:.8fr 1.2fr;gap:100px;align-items:center}.space>div>a{display:inline-block;margin-top:24px;color:var(--rust);font-weight:700;font-size:12px}.space-collage{height:520px;display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:1fr 1fr;gap:12px}.space-collage div{background:linear-gradient(135deg,#6b765e,#d0b99b);border-radius:5px}.space-collage div:first-child{grid-row:1/3}.space-collage div:nth-child(2){background:linear-gradient(145deg,#bd9f7e,#6a4d3b)}.space-collage div:nth-child(3){background:linear-gradient(145deg,#d2bda0,#758069)}.visit{text-align:center;padding:120px 10%;background:var(--green);color:white}.visit .kicker{color:#e7b376}.visit h2{font-size:52px}.visit-grid{max-width:900px;margin:50px auto;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #ffffff33;border-bottom:1px solid #ffffff33;padding:28px 0}.visit-grid div{display:flex;flex-direction:column;gap:10px;border-right:1px solid #ffffff33}.visit-grid div:last-child{border:0}.visit-grid small{font-size:8px;letter-spacing:.18em;color:#e6bc86}.visit-grid b{font:15px "Playfair Display";line-height:1.6}footer{height:110px;padding:0 7%;display:flex;align-items:center;justify-content:space-between;background:#24160f;color:#d6c7b5}footer .brand b{color:white}footer p,footer a{font-size:9px}footer>div{display:flex;gap:20px}
@media(max-width:800px){nav{height:70px}.links,.book{display:none}.menu{display:block;border:0;background:none;font-size:21px}.hero{grid-template-columns:1fr}.hero-copy{padding:80px 8%}.hero-art{height:500px}h1{font-size:50px}.marquee span:nth-of-type(even){display:none}.story,.space{grid-template-columns:1fr;gap:60px;padding:90px 8%}.story-art{max-width:450px;margin:auto}.cards{grid-template-columns:1fr;max-width:420px}.cards article.featured{transform:none}.space-collage{height:400px}.visit-grid{grid-template-columns:1fr;gap:20px}.visit-grid div{border-right:0;border-bottom:1px solid #ffffff33;padding-bottom:20px}.visit-grid div:last-child{border:0}.demo-bar{padding:0 4%}}@media(max-width:520px){h1{font-size:42px}.hero-copy{padding:65px 7%}.hero-art{height:390px}.sun{width:340px;height:340px}.cup{transform:translate(-50%,-50%) scale(.78)}.fresh{right:4%;bottom:5%}.story h2,.menu-section h2,.space h2,.visit h2{font-size:38px}.photo{height:400px}.values{gap:20px}.space-collage{height:320px}.demo-bar span{font-size:9px}footer{height:auto;padding:35px 7%;flex-direction:column;gap:25px}}

/* Original editorial photography */
.hero-art{background-image:linear-gradient(90deg,rgba(52,33,23,.05),rgba(52,33,23,.22)),url("cafe-interior.webp");background-size:cover;background-position:center}.hero-art .sun,.hero-art .cup,.hero-art .bean,.hero-art .leaf{display:none}.hero-art:after{content:"Freshly roasted · Canggu, Bali";position:absolute;left:24px;bottom:22px;color:white;background:rgba(42,27,18,.78);backdrop-filter:blur(8px);padding:10px 13px;border-radius:99px;font-size:8px;letter-spacing:.12em}.fresh{right:7%;bottom:8%}.photo{background-image:linear-gradient(180deg,transparent 45%,rgba(32,22,16,.45)),url("cafe-interior.webp");background-size:cover;background-position:28% center}.photo:before{display:none}.space-collage div{background-image:url("cafe-interior.webp")!important;background-size:cover!important}.space-collage div:first-child{background-position:10% center!important}.space-collage div:nth-child(2){background-position:55% center!important}.space-collage div:nth-child(3){background-position:90% center!important}.drink{box-shadow:inset 0 0 50px rgba(80,53,32,.08)}

/* Real menu photography */
.drink{background-image:url("menu-drinks.webp")!important;background-repeat:no-repeat!important;background-size:300% 100%!important;box-shadow:none!important;transition:transform .35s}.drink:before{display:none}.espresso{background-position:0 center!important}.coconut{background-position:50% center!important}.filter{background-position:100% center!important}.cards article{overflow:hidden;transition:transform .3s,box-shadow .3s}.cards article:hover{transform:translateY(-8px);box-shadow:0 28px 55px rgba(81,52,31,.13)}.cards article:hover .drink{transform:scale(1.035)}.cards article.featured:hover{transform:translateY(-20px)}.cards article>h3{font-size:24px}.menu-section{background-image:radial-gradient(circle at 10% 15%,rgba(182,83,45,.07),transparent 22%),radial-gradient(circle at 90% 85%,rgba(82,107,82,.08),transparent 24%)}
@media(max-width:800px){.cards article.featured:hover{transform:translateY(-8px)}}