@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');

:root { --ink:#1d1b19; --paper:#fbfaf7; --sand:#eee8de; --tan:#d6c5ae; --accent:#8d4d22; --muted:#746d65; --line:#d9d4cc; --serif:"Playfair Display", Georgia, serif; --sans:"DM Sans", Arial, sans-serif; --mono:"DM Mono", monospace; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font:15px/1.55 var(--sans); } a { color:inherit; text-decoration:none; } button,input,select { font:inherit; } button { cursor:pointer; } img { max-width:100%; display:block; } .skip-link { position:absolute; left:16px; top:-60px; z-index:50; background:var(--ink); color:#fff; padding:10px 14px; } .skip-link:focus { top:12px; } :focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.promo { min-height:35px; display:flex; align-items:center; justify-content:center; gap:12px; background:var(--ink); color:#fff; font:10px var(--mono); letter-spacing:.06em; text-transform:uppercase; text-align:center; padding:8px 18px; } .promo span { color:#d4b48d; }
.site-header { min-height:77px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 5vw; border-bottom:1px solid var(--line); background:rgba(251,250,247,.96); position:sticky; top:0; z-index:20; backdrop-filter:blur(10px); } .wordmark { font:600 21px/1 var(--sans); letter-spacing:.25em; } .nav { display:flex; gap:29px; align-items:center; font-size:12px; } .nav a { padding:28px 0 24px; border-bottom:2px solid transparent; transition:border .2s,color .2s; } .nav a:hover,.nav a.active { border-color:var(--ink); } .header-tools { justify-self:end; display:flex; align-items:center; gap:3px; } .icon-btn { height:44px; min-width:44px; padding:0; background:transparent; border:0; display:grid; place-items:center; position:relative; } .icon-btn svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; } .bag-number { position:absolute; top:6px; right:3px; font:9px var(--mono); } .mobile-menu { display:none; }
.page { min-height:60vh; } .container { max-width:1360px; margin:0 auto; padding-left:5vw; padding-right:5vw; } .section { padding-top:92px; padding-bottom:92px; } .eyebrow { margin:0 0 14px; font:10px var(--mono); text-transform:uppercase; letter-spacing:.12em; color:var(--muted); } h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:var(--serif); font-weight:500; letter-spacing:-.045em; line-height:.98; } h1 { font-size:clamp(48px,7vw,105px); } h2 { font-size:clamp(36px,4.4vw,64px); } h3 { font-size:15px; font-weight:600; } .button { min-height:45px; display:inline-flex; align-items:center; justify-content:center; gap:24px; padding:12px 18px; border:1px solid var(--ink); background:var(--ink); color:#fff; text-transform:uppercase; font:10px var(--mono); letter-spacing:.09em; transition:transform .2s,background .2s,color .2s; } .button:hover { transform:translateY(-2px); background:var(--accent); border-color:var(--accent); } .button-outline { background:transparent; color:var(--ink); } .button-outline:hover { color:#fff; background:var(--ink); } .button-light { background:#fff; color:var(--ink); border-color:#fff; } .text-link { font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; border-bottom:1px solid var(--ink); padding-bottom:5px; display:inline-flex; gap:16px; }
.home-hero { min-height:calc(100svh - 112px); height:720px; display:flex; align-items:flex-end; color:#fff; padding:clamp(40px,7vw,100px) 8vw; background:linear-gradient(90deg,rgba(21,18,14,.58),rgba(21,18,14,.04) 70%),url('https://images.unsplash.com/photo-1483985988355-763728e1935b?auto=format&fit=crop&w=2000&q=85') center/cover; } .home-hero .intro { max-width:620px; } .home-hero .eyebrow { color:#fff; } .home-hero p:not(.eyebrow) { max-width:385px; margin:24px 0 30px; } .home-hero em { font-weight:500; } .hero-tools { display:flex; gap:13px; flex-wrap:wrap; }
.editorial-intro { display:grid; grid-template-columns:1.1fr .65fr; gap:12vw; align-items:end; background:var(--sand); } .editorial-intro p:not(.eyebrow) { color:#4f4942; margin:0 0 25px; max-width:390px; } .features { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); } .feature { padding:24px 8% 0 0; margin-right:8%; border-right:1px solid var(--line); } .feature:last-child { border:0; } .feature b { font:11px var(--mono); color:var(--accent); } .feature p { color:var(--muted); font-size:13px; margin:8px 0 0; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:34px; } .section-head h1,.section-head h2 { margin-bottom:0; } .product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .product-card { min-width:0; } .product-photo { aspect-ratio:3/4; background:center/cover #ded7cf; position:relative; overflow:hidden; } .product-photo img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; } .product-card:hover .product-photo img { transform:scale(1.025); } .product-tag { position:absolute; top:12px; left:12px; z-index:2; padding:5px 7px; background:var(--paper); font:9px var(--mono); text-transform:uppercase; } .wish { position:absolute; z-index:2; top:7px; right:7px; border:0; background:rgba(251,250,247,.9); width:35px; height:35px; font-size:18px; color:var(--ink); } .quick-add { position:absolute; left:10px; right:10px; bottom:10px; z-index:3; transform:translateY(56px); transition:transform .22s; } .product-card:hover .quick-add { transform:translateY(0); } .product-info { padding:12px 0 1px; display:flex; justify-content:space-between; gap:8px; } .product-info h3 { margin:0; font-size:13px; } .product-info p { margin:3px 0 0; color:var(--muted); font-size:11px; } .price { white-space:nowrap; font-size:13px; } .split-story { display:grid; grid-template-columns:1fr 1fr; min-height:600px; background:#d9cbb8; } .split-story .image { background:url('https://images.unsplash.com/photo-1490481651871-ab68de25d43d?auto=format&fit=crop&w=1200&q=85') center/cover; } .split-story .copy { padding:clamp(60px,9vw,125px) 13%; display:flex; flex-direction:column; justify-content:center; } .split-story .copy p:not(.eyebrow) { max-width:350px; margin:24px 0 28px; }
.page-title { padding:68px 0 48px; border-bottom:1px solid var(--line); } .page-title p { margin:18px 0 0; color:var(--muted); max-width:530px; } .breadcrumbs { font:10px var(--mono); color:var(--muted); margin-bottom:20px; } .breadcrumbs a { color:var(--ink); } .catalog { display:grid; grid-template-columns:235px 1fr; gap:44px; padding-top:30px; padding-bottom:90px; } .filters h3 { margin:0; font:11px var(--mono); text-transform:uppercase; letter-spacing:.08em; } .filter-group { padding:18px 0; border-bottom:1px solid var(--line); } .filter-group label { display:block; margin-top:11px; font-size:12px; color:#4f4942; } .filter-group input { margin:0 7px 0 0; accent-color:var(--ink); } .catalog-bar { display:flex; justify-content:space-between; align-items:center; margin-bottom:19px; font-size:11px; } .catalog-bar select { border:0; background:transparent; padding:6px 0; color:var(--ink); font-size:11px; }
.product-detail { display:grid; grid-template-columns:1.14fr .86fr; gap:6vw; padding-top:35px; padding-bottom:95px; } .gallery { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .gallery img { aspect-ratio:3/4; object-fit:cover; background:var(--sand); } .purchase { position:sticky; top:105px; height:max-content; } .purchase h1 { font-size:clamp(40px,4vw,60px); margin:0 0 13px; } .product-subline { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); padding-bottom:20px; } .product-subline p { color:var(--muted); font-size:12px; margin:0; } .option-label { display:flex; justify-content:space-between; margin:25px 0 10px; font-size:11px; font-weight:600; } .size-list { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; } .size-list button { height:44px; background:transparent; border:1px solid var(--line); font-size:11px; } .size-list button.selected,.size-list button:hover { border-color:var(--ink); background:var(--ink); color:#fff; } .purchase .button { width:100%; margin-top:20px; } .product-notes { list-style:none; padding:18px 0 0; margin:20px 0 0; border-top:1px solid var(--line); } .product-notes li { margin:9px 0; color:#504a44; font-size:12px; } .product-notes li::before { content:'—'; margin-right:8px; color:var(--accent); }
.cart-layout,.checkout-layout { display:grid; grid-template-columns:1fr 350px; gap:6vw; padding-top:38px; padding-bottom:95px; } .cart-item { display:grid; grid-template-columns:130px 1fr auto; gap:19px; padding:0 0 18px; margin-bottom:18px; border-bottom:1px solid var(--line); } .cart-item img { width:130px; aspect-ratio:3/4; object-fit:cover; } .cart-item h2 { font:500 27px/1.05 var(--serif); margin:2px 0 8px; letter-spacing:-.03em; } .cart-item p { color:var(--muted); font-size:12px; margin:3px 0; } .quantity { display:flex; align-items:center; margin-top:16px; width:max-content; border:1px solid var(--line); } .quantity button { width:31px; height:30px; border:0; background:transparent; } .quantity span { min-width:25px; text-align:center; font-size:11px; } .remove { border:0; padding:0; background:transparent; margin-top:13px; font:10px var(--mono); text-decoration:underline; } .order-summary { height:max-content; background:var(--sand); padding:23px; } .order-summary h2 { font:500 29px var(--serif); margin:0 0 20px; } .summary-row { display:flex; justify-content:space-between; font-size:12px; padding:8px 0; } .summary-row.total { border-top:1px solid #c8baaa; margin-top:10px; padding-top:17px; font-weight:600; } .order-summary .button { width:100%; margin-top:17px; } .summary-note { color:var(--muted); font-size:10px; text-align:center; margin:13px 0 0; }
.steps { display:flex; gap:21px; margin:20px 0 33px; font:10px var(--mono); color:var(--muted); text-transform:uppercase; letter-spacing:.05em; } .steps .current { color:var(--ink); border-bottom:1px solid var(--ink); } .form-section { border-top:1px solid var(--line); padding:21px 0; } .form-section h2 { font:500 30px var(--serif); margin:0 0 18px; } .field-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .field.full { grid-column:1/-1; } .field label { display:block; font-size:10px; font-weight:600; letter-spacing:.04em; margin-bottom:6px; } .field input,.field select { width:100%; height:45px; background:transparent; border:1px solid var(--line); padding:10px; border-radius:0; } .payment-option { border:1px solid var(--line); padding:14px; margin:8px 0; display:flex; gap:10px; align-items:center; font-size:12px; } .payment-option input { accent-color:var(--ink); } .error { color:#9d2727; font-size:11px; margin:9px 0 0; }
.account-layout { display:grid; grid-template-columns:220px 1fr; gap:7vw; padding-top:50px; padding-bottom:95px; } .account-nav a { display:block; border-bottom:1px solid var(--line); padding:13px 0; font-size:12px; } .account-nav a.active { font-weight:600; } .account-panel { max-width:680px; } .account-panel h2 { margin-bottom:12px; } .account-panel>p { color:var(--muted); margin-bottom:24px; } .empty { border:1px solid var(--line); padding:28px; background:#fff; } .empty h3 { font:500 28px var(--serif); margin:0 0 7px; } .empty p { color:var(--muted); font-size:12px; margin:0 0 18px; }
.content-page { max-width:800px; padding-top:52px; padding-bottom:95px; } .content-page h1 { margin-bottom:24px; } .content-page h2 { font-size:32px; margin:38px 0 12px; } .content-page p,.content-page li { color:#4f4942; max-width:680px; } .content-page li { margin:7px 0; } .faq { border-top:1px solid var(--line); } .faq details { border-bottom:1px solid var(--line); padding:17px 0; } .faq summary { cursor:pointer; font-weight:600; font-size:13px; } .faq p { margin:13px 0 2px; font-size:13px; }
.newsletter { text-align:center; background:var(--ink); color:#fff; padding:80px 20px; } .newsletter .eyebrow { color:#d2c0a7; } .newsletter h2 { margin-bottom:15px; } .newsletter>p:not(.eyebrow):not(.newsletter-note) { color:#d8d1c8; font-size:13px; } .newsletter-form { display:flex; max-width:470px; margin:25px auto 0; border-bottom:1px solid rgba(255,255,255,.7); } .newsletter-form input { flex:1; min-width:0; border:0; background:transparent; color:#fff; padding:12px 2px; outline:0; } .newsletter-form input::placeholder { color:#c5bdb3; } .newsletter-form button { border:0; background:transparent; color:#fff; padding:5px; font-size:20px; } .newsletter-note { font-size:10px; color:#d8d1c8; min-height:16px; margin:10px 0 0; }
.site-footer { padding:45px 5vw 26px; display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:28px; } .site-footer .wordmark { align-self:start; } .footer-column h3 { font:10px var(--mono); text-transform:uppercase; letter-spacing:.09em; margin:0 0 13px; } .footer-column a { display:block; color:#504a44; margin:7px 0; font-size:11px; } .footer-bottom { grid-column:1/-1; margin-top:22px; padding-top:17px; border-top:1px solid var(--line); display:flex; justify-content:space-between; color:var(--muted); font:9px var(--mono); text-transform:uppercase; }
.ai-bubble { position:fixed; z-index:15; right:22px; bottom:20px; display:flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--paper); padding:10px 12px; box-shadow:0 7px 24px rgba(30,25,20,.12); font-size:11px; } .ai-dot { width:10px; height:10px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#fff6dc 3%,#d2ae71 35%,#8d4d22 75%); } .ai-modal { display:none; position:fixed; z-index:30; inset:0; background:rgba(20,18,16,.48); place-items:end; } .ai-modal.open { display:grid; } .ai-panel { width:min(460px,100%); height:min(620px,100%); background:var(--paper); padding:25px; display:flex; flex-direction:column; box-shadow:-10px 0 35px rgba(0,0,0,.15); } .ai-panel-header { display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:17px; } .ai-panel h2 { font-size:36px; margin:0; } .ai-panel .chat { flex:1; padding:24px 0; overflow:auto; } .message { max-width:86%; margin:0 0 12px; padding:12px; font-size:12px; background:var(--sand); } .message.user { margin-left:auto; background:var(--ink); color:#fff; } .chat-form { display:flex; border:1px solid var(--line); } .chat-form input { border:0; outline:0; padding:13px; flex:1; min-width:0; background:transparent; } .chat-form button { width:45px; background:var(--ink); color:#fff; border:0; } .toast { position:fixed; z-index:50; bottom:24px; left:50%; transform:translate(-50%,80px); color:#fff; background:var(--ink); padding:12px 16px; font-size:11px; transition:transform .23s; } .toast.show { transform:translate(-50%,0); }
@media (max-width:780px) { body { font-size:14px; } .promo { font-size:8px; } .site-header { height:65px; padding:0 16px; grid-template-columns:1fr auto 1fr; } .wordmark { font-size:18px; } .nav { display:none; position:absolute; top:64px; left:0; right:0; background:var(--paper); border-bottom:1px solid var(--line); padding:15px 20px; flex-direction:column; align-items:stretch; gap:0; } .nav.open { display:flex; } .nav a { padding:12px 0; border:0; } .mobile-menu { display:grid; justify-self:start; } .mobile-menu span { display:block; width:19px; height:1px; background:var(--ink); margin:2px; } .search-tool { display:none; } .container { padding-left:22px; padding-right:22px; } .section { padding-top:66px; padding-bottom:66px; } .home-hero { min-height:590px; height:calc(100svh - 100px); padding:42px 25px; background-position:58% center; } .home-hero h1 { font-size:56px; } .editorial-intro { grid-template-columns:1fr; gap:27px; } .features { grid-template-columns:1fr; gap:22px; } .feature { padding:0 0 20px; margin:0; border:0; border-bottom:1px solid var(--line); } .product-grid { grid-template-columns:1fr 1fr; gap:18px 10px; } .product-grid .product-card:nth-child(n+5) { display:none; } .quick-add { display:none; } .split-story { grid-template-columns:1fr; } .split-story .image { min-height:410px; } .split-story .copy { min-height:420px; padding:62px 24px; } .page-title { padding:45px 0 36px; } .catalog { grid-template-columns:1fr; gap:18px; padding-top:20px; } .filters { display:none; } .catalog .product-grid .product-card:nth-child(n+5) { display:block; } .product-detail { grid-template-columns:1fr; gap:27px; padding-top:22px; } .purchase { position:static; } .gallery { gap:6px; } .cart-layout,.checkout-layout { grid-template-columns:1fr; gap:29px; padding-top:25px; } .cart-item { grid-template-columns:92px 1fr; gap:13px; } .cart-item img { width:92px; } .cart-item > .price { grid-column:2; } .account-layout { grid-template-columns:1fr; gap:25px; padding-top:31px; } .account-nav { display:flex; overflow:auto; gap:17px; white-space:nowrap; } .account-nav a { border:0; padding:4px 0; } .field-grid { grid-template-columns:1fr; } .field.full { grid-column:auto; } .site-footer { grid-template-columns:1fr 1fr; padding:34px 22px 22px; } .site-footer .wordmark { grid-column:1/-1; } .footer-bottom { flex-direction:column; gap:7px; } .ai-bubble { right:14px; bottom:14px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }
.logo { display:inline-flex; align-items:center; width:138px; letter-spacing:0; }.logo img { width:138px; height:auto; }.site-footer .logo { align-self:start; }