:root { --cream:#f5f0e7; --paper:#fffdf8; --sand:#ded1bd; --caramel:#b8794b; --ink:#2d221c; --muted:#756a60; --line:rgba(45,34,28,.16); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:radial-gradient(circle at 86% 8%,#eadac2 0,transparent 28rem),radial-gradient(circle at 6% 37%,#fffaf1 0,transparent 34rem),var(--cream); color:var(--ink); font-family:"DM Sans",sans-serif; font-size:16px; line-height:1.55; } body::before { content:""; position:fixed; inset:0; z-index:20; pointer-events:none; opacity:.19; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E"); mix-blend-mode:multiply; } a { color:inherit; text-decoration:none; } img { width:100%; height:100%; display:block; object-fit:cover; } .site-header { height:86px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,5vw,76px); border-bottom:1px solid var(--line); position:relative; z-index:3; backdrop-filter:blur(12px); background:rgba(245,240,231,.62); } .brand { font:600 24px/1 "Playfair Display",serif; letter-spacing:-1px; white-space:nowrap; } .brand span { color:var(--caramel); font-style:italic; } .nav { display:flex; align-items:center; gap:30px; font-size:14px; } .nav a:not(.nav-order) { transition:color .2s; } .nav a:not(.nav-order):hover { color:var(--caramel); } .nav-order { border:1px solid var(--ink); padding:10px 14px; transition:background .2s,color .2s,transform .2s; } .nav-order:hover { background:var(--ink); color:var(--cream); transform:translateY(-2px); } .menu-toggle { display:none; border:0; background:none; padding:8px; } .menu-toggle span { width:24px; height:1px; background:var(--ink); display:block; margin:5px; }
.hero { display:grid; grid-template-columns: .96fr 1.04fr; min-height:calc(100vh - 86px); position:relative; overflow:hidden; } .hero::after { content:""; position:absolute; width:34vw; height:34vw; min-width:310px; min-height:310px; top:-17vw; left:27%; border:1px solid rgba(184,121,75,.28); border-radius:50%; pointer-events:none; } .hero-copy { align-self:center; padding:clamp(70px,10vw,150px) clamp(24px,8vw,132px); position:relative; z-index:1; } .eyebrow { margin:0 0 18px; text-transform:uppercase; font-size:11px; font-weight:600; letter-spacing:1.8px; color:var(--caramel); } h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:"Playfair Display",serif; letter-spacing:-.045em; font-weight:500; line-height:1.06; } h1 { font-size:clamp(47px,5.2vw,82px); margin-bottom:25px; } h1 em,.intro-text em { font-weight:500; color:var(--caramel); } .hero-text { max-width:390px; color:var(--muted); margin-bottom:32px; } .button { display:inline-flex; gap:28px; align-items:center; background:linear-gradient(125deg,#2d221c,#49342a); box-shadow:0 12px 25px rgba(45,34,28,.16); color:var(--cream); padding:14px 18px; font-size:14px; transition:transform .2s,box-shadow .2s; } .button:hover { transform:translateY(-3px); box-shadow:0 18px 32px rgba(45,34,28,.24); } .hero-image { min-height:480px; position:relative; overflow:hidden; margin:clamp(18px,3vw,42px) clamp(18px,3vw,42px) clamp(18px,3vw,42px) 0; box-shadow:0 24px 45px rgba(71,45,26,.15); } .hero-image::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(45,25,12,.38)); pointer-events:none; } .hero-image img { filter:saturate(.72); transition:transform 1.1s ease; } .hero-image:hover img { transform:scale(1.035); } .image-caption { position:absolute; z-index:1; bottom:19px; left:25px; color:white; font-size:11px; letter-spacing:1px; text-transform:uppercase; text-shadow:0 1px 8px #000; margin:0; } .round-stamp { position:absolute; z-index:1; right:25px; bottom:25px; width:105px; height:105px; display:grid; place-items:center; background:linear-gradient(135deg,#c98d5f,#a8633d); color:var(--paper); border-radius:50%; box-shadow:0 10px 20px rgba(38,19,9,.28); text-align:center; font:italic 15px/1.2 "Playfair Display",serif; transform:rotate(-12deg); }
.section { padding:clamp(80px,11vw,155px) clamp(24px,8vw,132px); } .intro { text-align:center; max-width:960px; margin:auto; } .intro-text { font:500 clamp(30px,4vw,57px)/1.18 "Playfair Display",serif; letter-spacing:-.04em; margin:0; } .section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:46px; } h2 { font-size:clamp(40px,4.3vw,64px); margin:0; } .text-link { display:inline-block; font-size:14px; border-bottom:1px solid var(--ink); padding-bottom:4px; transition:color .2s,border .2s; } .text-link span { margin-left:8px; } .text-link:hover { color:var(--caramel); border-color:var(--caramel); } .products { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .product-image { height:clamp(220px,23vw,350px); overflow:hidden; background:var(--sand); } .product-card img { transition:transform .5s ease; } .product-card:hover img { transform:scale(1.05); } .product-details { padding:15px 2px; position:relative; } h3 { font:500 21px/1.1 "Playfair Display",serif; letter-spacing:-.02em; margin-bottom:7px; } .product-details p { font-size:12px; color:var(--muted); margin:0; } .product-details strong { position:absolute; right:2px; top:16px; font-size:13px; font-weight:500; }
.story { background:linear-gradient(120deg,#ded1bd,#ebdfce); display:grid; grid-template-columns:1fr 1fr; position:relative; } .story-image { min-height:590px; margin:clamp(18px,3vw,42px) 0 clamp(18px,3vw,42px) clamp(18px,3vw,42px); box-shadow:0 20px 40px rgba(74,49,31,.14); } .story-copy { align-self:center; max-width:550px; padding:80px clamp(30px,8vw,135px); } .story-copy h2 { margin-bottom:26px; } .story-copy p:not(.eyebrow) { color:#50463e; max-width:415px; } .story-copy .text-link { margin-top:13px; } .visit { background:radial-gradient(circle at 85% 10%,#4a3024 0,transparent 29rem),linear-gradient(120deg,#2d221c,#241914); color:var(--cream); } .visit-heading { margin-bottom:65px; } .visit-heading h2 { color:var(--paper); } .visit-grid { display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:50px; border-top:1px solid rgba(255,255,255,.25); padding-top:30px; } .visit-grid p:not(.visit-label) { color:#ddd2c4; font-size:15px; } .visit-label { color:var(--caramel); text-transform:uppercase; letter-spacing:1.5px; font-size:10px; font-weight:600; } .visit .text-link { margin-top:5px; border-color:#ddd2c4; } .visit-grid a:not(.text-link) { border-bottom:1px solid rgba(255,255,255,.3); } footer { padding:28px clamp(24px,5vw,76px); display:flex; align-items:center; justify-content:space-between; font-size:12px; } footer .brand { font-size:19px; } footer p { margin:0; color:var(--muted); }
.reveal { opacity:0; transform:translateY(20px); transition:opacity .7s ease,transform .7s ease; } .reveal.is-visible { opacity:1; transform:none; } @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .reveal { opacity:1; transform:none; transition:none; } }
@media (max-width:800px) { .site-header { height:68px; } .menu-toggle { display:block; } .nav { display:none; position:absolute; top:68px; left:0; right:0; padding:24px; background:var(--paper); border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start; gap:20px; } .nav.open { display:flex; } .hero { grid-template-columns:1fr; } .hero-copy { padding:84px 24px 65px; } .hero-image { min-height:450px; } .round-stamp { width:90px; height:90px; right:17px; bottom:17px; font-size:13px; } .section { padding:80px 24px; } .section-heading { align-items:start; gap:20px; flex-direction:column; margin-bottom:32px; } .products { grid-template-columns:repeat(2,1fr); gap:24px 13px; } .product-image { height:45vw; } .story { grid-template-columns:1fr; } .story-image { min-height:380px; } .story-copy { padding:75px 24px; } .visit-grid { grid-template-columns:1fr; gap:25px; } .visit-heading { margin-bottom:44px; } footer { padding:22px 24px; } footer p { display:none; } }
@media (max-width:380px) { .products { grid-template-columns:1fr; } .product-image { height:65vw; } }