@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700&display=swap');

:root { --paper:#f6efe2; --paper-deep:#e9dcc8; --ink:#202b2b; --muted:#69716c; --orange:#d76840; --mustard:#e7aa42; --lilac:#c8c2d7; --line:rgba(32,43,43,.18); --white:#fffaf2; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'Manrope',sans-serif; line-height:1.6; }
a { color:inherit; text-decoration:none; } button { font:inherit; }
.site-header { position:sticky; top:0; z-index:20; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; padding:17px 5vw; background:rgba(246,239,226,.88); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.brand,.footer-brand { display:flex; align-items:center; gap:10px; } .brand-mark { display:grid; place-items:center; width:40px; height:40px; border:1.5px solid var(--ink); border-radius:50%; font-family:'DM Mono',monospace; font-size:.78rem; letter-spacing:-.1em; } .brand-copy,.footer-brand span:last-child { display:grid; line-height:1.1; } .brand strong,.footer-brand strong { font-family:'Fraunces',serif; font-size:1.2rem; } .brand small,.footer-brand small { color:var(--muted); font-size:.59rem; letter-spacing:.04em; text-transform:uppercase; }
.nav { display:flex; gap:29px; font-size:.8rem; font-weight:600; } .nav a:hover,.text-link:hover { color:var(--orange); }
.header-actions { display:flex; justify-content:flex-end; align-items:center; gap:12px; } .icon-button,.cart-button { border:0; background:none; color:var(--ink); cursor:pointer; } .icon-button { font-size:1.35rem; } .cart-button { padding:8px 0 8px 15px; border-left:1px solid var(--line); font-size:.78rem; font-weight:700; } .cart-button span { display:inline-grid; place-items:center; width:22px; height:22px; margin-left:5px; background:var(--ink); color:var(--paper); border-radius:50%; font-size:.7rem; }
.page-width { width:min(1180px,90vw); margin:0 auto; } .hero { display:grid; grid-template-columns:1fr 1fr; min-height:650px; align-items:center; gap:70px; } .eyebrow { margin:0 0 15px; color:var(--orange); font:500 .68rem 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:'Fraunces',serif; font-weight:600; line-height:1.02; } h1 { margin-bottom:25px; font-size:clamp(3.7rem,7vw,6.4rem); letter-spacing:-.06em; } h1 em { color:var(--orange); font-style:italic; } .hero-text { max-width:430px; color:var(--muted); font-size:1rem; } .hero-actions { display:flex; align-items:center; gap:25px; margin-top:30px; } .button { display:inline-flex; justify-content:space-between; align-items:center; gap:26px; border:0; cursor:pointer; padding:14px 18px; font-size:.76rem; font-weight:700; } .button-dark { background:var(--ink); color:var(--paper); } .button:hover { background:var(--orange); } .text-link { border-bottom:1px solid var(--ink); padding-bottom:3px; font-size:.77rem; font-weight:700; } .text-link span { padding-left:8px; }
.hero-art { position:relative; height:485px; } .sun-disc { position:absolute; top:18%; left:12%; width:290px; height:290px; border-radius:50%; background:var(--mustard); } .art-print { position:absolute; z-index:1; top:10%; right:9%; width:205px; height:275px; display:flex; flex-direction:column; justify-content:space-between; padding:22px; background:var(--lilac); box-shadow:13px 14px 0 rgba(32,43,43,.13); transform:rotate(7deg); color:var(--ink); } .art-print span { font:600 2.2rem/.88 'Fraunces',serif; } .art-print small,.product-image small { font:500 .6rem 'DM Mono',monospace; text-transform:uppercase; } .mug { position:absolute; z-index:2; left:17%; bottom:7%; width:190px; height:160px; border-radius:15px 15px 50px 50px; background:var(--orange); transform:rotate(-9deg); box-shadow:13px 17px 0 rgba(32,43,43,.12); display:grid; place-items:center; text-align:center; font:600 1.65rem/.85 'Fraunces',serif; } .mug-handle { position:absolute; right:-45px; top:31px; width:60px; height:68px; border:17px solid var(--orange); border-left:0; border-radius:0 50% 50% 0; } .art-note { position:absolute; font:500 .62rem 'DM Mono',monospace; text-transform:uppercase; } .note-one { right:0; bottom:22%; transform:rotate(90deg); } .note-two { top:4%; left:3%; }
.ticker { overflow:hidden; background:var(--ink); color:var(--paper); padding:15px 0; font:500 .68rem 'DM Mono',monospace; text-transform:uppercase; } .ticker-track { display:flex; justify-content:space-around; gap:40px; white-space:nowrap; animation:marquee 26s linear infinite; } .ticker b { color:var(--mustard); } @keyframes marquee { to { transform:translateX(-20%); } }
.shop { padding:125px 0 140px; } .section-heading,.faq { display:flex; justify-content:space-between; align-items:end; gap:35px; } h2 { margin-bottom:0; font-size:clamp(2.5rem,4vw,4rem); letter-spacing:-.05em; } .section-heading > p { max-width:260px; margin-bottom:5px; color:var(--muted); font-size:.88rem; } .filter-bar { display:flex; gap:24px; margin:50px 0 25px; border-bottom:1px solid var(--line); } .filter { border:0; background:none; padding:0 0 12px; color:var(--muted); cursor:pointer; font-size:.76rem; } .filter.active { color:var(--ink); border-bottom:2px solid var(--orange); font-weight:700; } .product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .product-card { min-width:0; } .product-image { position:relative; display:grid; place-items:center; height:290px; overflow:hidden; text-align:center; } .product-image span { font:600 2.6rem/.85 'Fraunces',serif; } .product-image small { position:absolute; bottom:15px; left:15px; } .product-mug { background:#d7c7b0; } .product-mug span { transform:rotate(-8deg); color:var(--orange); } .product-tee { background:#bdc9b7; } .product-tee span { color:var(--ink); transform:rotate(-8deg); } .product-print { background:var(--lilac); } .product-print span { color:var(--orange); } .product-towel { background:var(--mustard); } .product-towel span { color:var(--ink); transform:rotate(8deg); } .product-info { display:flex; justify-content:space-between; gap:10px; padding:16px 0 10px; } .product-info h3 { margin:0 0 3px; font-size:1.15rem; } .product-info p { margin:0; color:var(--muted); font-size:.68rem; } .product-info strong { font:600 1rem 'DM Mono',monospace; } .add-button { display:flex; justify-content:space-between; width:100%; border:0; border-top:1px solid var(--line); background:none; padding:12px 0; cursor:pointer; color:var(--ink); text-align:left; font-size:.72rem; font-weight:700; } .add-button span { font-size:1.1rem; } .add-button:hover { color:var(--orange); }
.story { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:10%; padding:80px 0 150px; } .story-image { position:relative; min-height:470px; background:linear-gradient(140deg,rgba(32,43,43,.12),rgba(32,43,43,.02)), url('https://images.unsplash.com/photo-1513104890138-7c749659a591?auto=format&fit=crop&w=900&q=85') center/cover; } .story-stamp { position:absolute; right:-35px; bottom:-30px; display:grid; place-items:center; width:125px; height:125px; border:1px solid var(--paper); outline:1px solid var(--ink); outline-offset:-9px; border-radius:50%; background:var(--orange); color:var(--paper); text-align:center; font:600 1.7rem/.8 'Fraunces',serif; transform:rotate(12deg); } .story-stamp span { font:500 .48rem 'DM Mono',monospace; text-transform:uppercase; } .story-copy { max-width:420px; } .story-copy h2 { margin-bottom:23px; } .story-copy > p:not(.eyebrow) { color:var(--muted); }
.faq { align-items:start; padding:90px 0 140px; border-top:1px solid var(--line); } .faq-list { width:min(570px,100%); } details { border-bottom:1px solid var(--line); padding:18px 0; } summary { cursor:pointer; list-style:none; font-family:'Fraunces',serif; font-size:1.35rem; } summary::-webkit-details-marker { display:none; } summary:after { float:right; content:'+'; font-family:'Manrope',sans-serif; color:var(--orange); } details[open] summary:after { content:'−'; } details p { max-width:470px; margin:12px 0 0; color:var(--muted); font-size:.83rem; }
.site-footer { display:grid; grid-template-columns:1fr 1fr 1fr; gap:25px; align-items:center; padding:35px 5vw; background:var(--ink); color:var(--paper); } .footer-brand .brand-mark { border-color:var(--paper); } .footer-brand small { color:#aab1a9; } .site-footer > p { max-width:220px; margin:0; color:#aab1a9; font-size:.72rem; } .footer-links { display:flex; justify-content:flex-end; gap:20px; font-size:.68rem; } .footer-links a:hover { color:var(--mustard); }
.cart-drawer { position:fixed; z-index:30; top:0; right:0; display:flex; flex-direction:column; width:min(420px,100%); height:100vh; padding:28px; background:var(--paper); box-shadow:-20px 0 50px rgba(32,43,43,.15); transform:translateX(105%); transition:transform .35s ease; } .cart-drawer.open { transform:translateX(0); } .drawer-head,.cart-footer > div { display:flex; justify-content:space-between; align-items:center; } .drawer-head { border-bottom:1px solid var(--line); padding-bottom:20px; } .drawer-head h2 { font-size:2.3rem; } .close-button { border:0; background:none; font-size:2rem; cursor:pointer; } .cart-items { flex:1; padding-top:20px; } .empty-cart { color:var(--muted); font-size:.85rem; } .cart-row { display:flex; justify-content:space-between; gap:15px; padding:15px 0; border-bottom:1px solid var(--line); font-size:.8rem; } .cart-row button { border:0; background:none; color:var(--orange); cursor:pointer; } .cart-footer { border-top:1px solid var(--line); padding-top:20px; } .cart-footer strong { font:600 1.2rem 'DM Mono',monospace; } .checkout-button { width:100%; margin:20px 0 10px; } .cart-footer small { color:var(--muted); font-size:.65rem; } .drawer-overlay { position:fixed; z-index:25; inset:0; background:rgba(32,43,43,.35); opacity:0; pointer-events:none; transition:opacity .35s ease; } .drawer-overlay.open { opacity:1; pointer-events:auto; }
.reveal { animation:rise .7s both; } .delay-one { animation-delay:.12s; } .delay-two { animation-delay:.24s; } @keyframes rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
body.dark { --paper:#202b2b; --paper-deep:#2b3837; --ink:#f6efe2; --muted:#bdc1b9; --line:rgba(246,239,226,.2); --white:#2a3534; } body.dark .site-header { background:rgba(32,43,43,.9); } body.dark .product-mug { background:#665f57; } body.dark .product-tee { background:#536254; } body.dark .product-print { background:#6a6577; } body.dark .product-towel { background:#977535; }
@media (max-width:800px) { .site-header { grid-template-columns:1fr auto; } .nav { display:none; } .hero { grid-template-columns:1fr; gap:10px; padding-top:65px; } .hero-art { height:390px; transform:scale(.85); transform-origin:top left; width:118%; } .shop { padding-top:45px; } .section-heading,.faq { display:block; } .section-heading > p { margin-top:20px; } .product-grid { grid-template-columns:repeat(2,1fr); gap:28px 12px; } .product-image { height:220px; } .product-image span { font-size:2rem; } .story { grid-template-columns:1fr; gap:60px; padding-top:30px; } .story-image { min-height:340px; } .faq-list { margin-top:35px; } .site-footer { grid-template-columns:1fr; } .footer-links { justify-content:flex-start; } }
@media (max-width:430px) { .brand-copy small { display:none; } .brand strong { font-size:1rem; } .site-header { padding:14px 5vw; } .hero h1 { font-size:3.55rem; } .hero-art { transform:scale(.7); height:315px; width:143%; } .filter-bar { gap:15px; overflow:auto; } .filter { white-space:nowrap; } }