:root { --cream:#f2efe8; --paper:#f8f6f1; --ink:#26211e; --muted:#746c65; --line:rgba(38,33,30,.22); --olive:#737763; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Sans", Arial, sans-serif; } a { color:inherit; text-decoration:none; } .announcement { background:var(--ink); color:#f6f2e9; height:31px; display:flex; align-items:center; justify-content:center; gap:14px; font:10px/1 "DM Mono", monospace; letter-spacing:.13em; } .announcement span { color:#b7b3a8; }
.nav { height:96px; display:grid; grid-template-columns:1fr 1fr 2fr 1fr 1fr; gap:12px; align-items:center; padding:0 4.4vw; border-bottom:1px solid var(--line); font-size:12px; letter-spacing:.04em; } .nav a:not(.brand) { justify-self:start; } .nav a:nth-last-of-type(2), .nav a:last-of-type { justify-self:end; } .brand { font:40px/.66 Italiana, Georgia, serif; text-align:center; letter-spacing:-.05em; } .brand span { display:block; margin-top:10px; font:9px/1.2 "DM Mono", monospace; letter-spacing:.25em; text-transform:uppercase; } .menu-button { display:none; border:0; background:transparent; font:12px "DM Sans"; }
.hero { min-height:calc(100vh - 127px); position:relative; display:flex; align-items:end; overflow:hidden; background:#d3c9bd; } .hero-photo { position:absolute; inset:0; background:linear-gradient(90deg,rgba(16,13,11,.42),rgba(16,13,11,.03) 65%),url('https://images.unsplash.com/photo-1584917865442-de89df76afd3?auto=format&fit=crop&w=1800&q=85') center 44%/cover; transform:scale(1.002); } .hero-copy { color:#fff; position:relative; margin:0 0 9.5vh 8.4vw; max-width:620px; } .eyebrow { margin:0 0 24px; color:inherit; font:10px/1 "DM Mono",monospace; letter-spacing:.16em; } h1,h2,h3 { font-weight:400; margin:0; } h1,h2 { font:clamp(48px,6.1vw,97px)/.96 Italiana,Georgia,serif; letter-spacing:-.045em; } em { font-style:italic; } .text-link { display:inline-flex; align-items:center; gap:18px; margin-top:38px; font-size:12px; border-bottom:1px solid currentColor; padding-bottom:8px; } .text-link span { font-size:18px; line-height:.5; } .hero-index { color:#fff; position:absolute; right:4.4vw; bottom:38px; font:10px "DM Mono", monospace; letter-spacing:.12em; }
.intro { padding:150px 8.4vw 165px; display:grid; grid-template-columns:31% 1fr; background:var(--cream); } .intro .eyebrow { padding-top:16px; } .intro > div { display:flex; flex-direction:column; align-items:center; text-align:center; } .intro h2 { max-width:800px; font-size:clamp(44px,5.6vw,86px); } .intro div>p { width:min(530px,100%); color:#514a45; } .intro .story-lede { margin:44px 0 0; color:var(--ink); font:clamp(26px,2.4vw,39px)/1.18 Italiana,Georgia,serif; letter-spacing:-.025em; } .intro .story-letter { margin:39px 0 0; font:17px/1.75 "DM Sans",Arial,sans-serif; } .intro .story-rhythm { margin:39px 0 0; color:var(--ink); font:clamp(24px,2vw,33px)/1.26 Italiana,Georgia,serif; letter-spacing:-.02em; } .intro div .signature { margin-top:55px; color:var(--ink); font:clamp(31px,2.8vw,45px)/1.04 Italiana,Georgia,serif; letter-spacing:-.025em; }
.collection { padding:120px 4.4vw 148px; } .section-heading { display:flex; align-items:end; justify-content:space-between; margin:0 4vw 70px; } .section-heading .text-link { margin:0 0 8px; } .product-grid { display:grid; grid-template-columns:1.16fr .84fr; column-gap:26px; row-gap:50px; max-width:1320px; margin:auto; } .product { display:block; } .product-1 { grid-row:span 2; }.product-image { height:480px; background-size:cover; background-position:center; }.large .product-image { height:730px; }.product-1 .product-image { background-image:url('assets/eclat-espresso.png'); }.product-2 .product-image { background-image:url('assets/noir-21.png'); }.product-3 .product-image { background-image:url('assets/bordeaux-27.png'); } .product-label { padding-top:17px; }.product-label span { color:var(--muted); font:9px "DM Mono",monospace; letter-spacing:.12em; }.product h3 { margin-top:7px; font:30px Italiana,Georgia,serif; }.product:hover .product-image { filter:brightness(.91); }
.feature { display:grid; grid-template-columns:1.1fr .9fr; background:#d9d5c8; min-height:670px; }.feature-image { background:url('https://images.unsplash.com/photo-1591561954557-26941169b49e?auto=format&fit=crop&w=1300&q=85') center/cover; }.feature-copy { align-self:center; padding:10% 14%; }.feature-copy h2 { font-size:clamp(43px,4.7vw,72px); }.feature-copy>p:not(.eyebrow) { line-height:1.75; font-size:14px; max-width:360px; margin:32px 0; color:#504d43; }.outline-button { display:inline-block; border:1px solid var(--ink); padding:15px 19px; font-size:11px; letter-spacing:.04em; }.outline-button:hover { color:#fff; background:var(--ink); }
.visit { padding:142px 8.4vw 72px; background:var(--ink); color:#f5f1e9; }.visit h2 { font-size:clamp(49px,5.6vw,88px); }.contact-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; margin:115px 0 72px; }.contact-grid a { position:relative; min-height:96px; padding-top:17px; border-top:1px solid rgba(255,255,255,.34); }.contact-grid span { display:block; color:#c7c1b7; font:9px "DM Mono",monospace; letter-spacing:.14em; }.contact-grid strong { display:block; font:18px/1.35 Italiana,Georgia,serif; font-weight:400; margin-top:13px; }.contact-grid i { position:absolute; right:0; top:15px; font-style:normal; }.visit-note { color:#c7c1b7; font-size:11px; } footer { display:flex; align-items:center; justify-content:space-between; padding:45px 4.4vw; background:var(--ink); color:#f5f1e9; border-top:1px solid rgba(255,255,255,.2); font-size:11px; } footer .brand { text-align:left; font-size:31px; } footer .brand span { margin-top:8px; font-size:7px; }
@media (max-width:700px) { .announcement { font-size:8px; }.nav { height:76px; display:flex; justify-content:space-between; padding:0 20px; }.desktop-link { display:none; }.nav .brand { font-size:31px; }.nav .brand span { font-size:7px; margin-top:8px; }.menu-button { display:block; }.hero { min-height:650px; }.hero-photo { background-position:60% center; }.hero-copy { margin:0 28px 74px; }.hero-index { display:none; }.intro { padding:85px 28px 100px; display:block; }.intro .eyebrow { margin-bottom:55px; }.intro div>p { margin-top:28px; }.collection { padding:82px 20px 90px; }.section-heading { display:block; margin:0 8px 47px; }.section-heading .text-link { margin-top:28px; }.product-grid { display:block; }.product { margin-bottom:42px; }.large .product-image,.product-image { height:460px; }.product-1 .product-image { background-position:center; }.feature { display:block; }.feature-image { height:430px; }.feature-copy { padding:70px 28px 78px; }.visit { padding:90px 28px 48px; }.contact-grid { grid-template-columns:1fr; gap:22px; margin:70px 0 55px; }.contact-grid a { min-height:76px; } footer { padding:32px 20px; }.visit h2 { font-size:53px; } footer p { display:none; } }