:root { --ink:#17262a; --muted:#637370; --cream:#f5eee3; --sand:#e6d3b9; --coral:#d56445; --sage:#b8cdbd; --line:rgba(23,38,42,.18); --white:#fffaf3; font-family:Arial,Helvetica,sans-serif; color:var(--ink); background:var(--cream); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); }
a { color:inherit; text-decoration:none; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.page-wrap { overflow:hidden; }
.announcement { align-items:center; background:var(--ink); color:var(--cream); display:flex; font-size:.66rem; font-weight:800; gap:1rem; justify-content:center; letter-spacing:.08em; padding:.65rem 1rem; text-transform:uppercase; }
.announcement a { color:#f5b49d; }
.site-header { align-items:center; display:flex; gap:2rem; justify-content:space-between; margin:0 auto; max-width:1380px; padding:1.35rem clamp(1.25rem,5vw,5rem); position:relative; z-index:10; }
.brand { align-items:center; display:inline-flex; gap:.75rem; }
.brand-mark { align-items:center; background:var(--coral); border-radius:50%; color:var(--white); display:inline-flex; font-size:.63rem; font-weight:900; height:2.65rem; justify-content:center; letter-spacing:.08em; width:2.65rem; }
.brand-copy { display:grid; gap:.18rem; }
.brand-copy strong { font-size:.8rem; letter-spacing:.15em; text-transform:uppercase; }
.brand-copy small { color:var(--muted); font-size:.61rem; letter-spacing:.08em; text-transform:uppercase; }
.nav-links { align-items:center; display:flex; gap:1.55rem; font-size:.72rem; font-weight:800; }
.nav-links a { border-bottom:1px solid transparent; padding-block:.35rem; }
.nav-links a:hover,.nav-links a[aria-current="page"] { border-color:var(--coral); color:var(--coral); }
.nav-cta { border:1px solid var(--ink); border-radius:999px; padding:.75rem 1.05rem !important; }
.nav-cta:hover { background:var(--ink); color:var(--cream) !important; }
.menu-toggle { background:transparent; border:1px solid var(--ink); border-radius:50%; display:none; height:2.6rem; padding:.65rem; width:2.6rem; }
.menu-toggle span { background:var(--ink); display:block; height:1px; margin:4px 0; transition:transform .2s ease; width:100%; }
.hero { display:grid; grid-template-columns:minmax(0,.92fr) minmax(380px,1.08fr); min-height:720px; }
.hero-copy { align-items:flex-start; display:flex; flex-direction:column; justify-content:center; padding:6rem clamp(1.25rem,8vw,9rem); }
.eyebrow { color:var(--coral); font-size:.65rem; font-weight:900; letter-spacing:.2em; margin:0 0 1.3rem; text-transform:uppercase; }
.section-kicker { color:var(--coral); font-size:.68rem; font-weight:900; letter-spacing:.18em; margin:0 0 1.1rem; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(3.4rem,7.5vw,7.5rem); letter-spacing:-.095em; line-height:.86; margin-bottom:1.7rem; max-width:760px; }
h2 { font-size:clamp(2.5rem,5.2vw,5.2rem); letter-spacing:-.08em; line-height:.9; margin-bottom:0; max-width:700px; }
h3 { font-size:1.65rem; letter-spacing:-.055em; line-height:.96; }
.hero-text { color:var(--muted); font-size:1rem; line-height:1.75; max-width:480px; }
.hero-actions { align-items:center; display:flex; flex-wrap:wrap; gap:1.3rem; margin-top:1.2rem; }
.button { align-items:center; border:1px solid transparent; display:inline-flex; font-size:.72rem; font-weight:900; gap:1.3rem; justify-content:center; padding:1rem 1.2rem; }
.button-dark { background:var(--ink); color:var(--cream); }
.button-dark:hover { background:var(--coral); }
.button-light { background:var(--cream); color:var(--ink); }
.button-outline { border-color:var(--ink); }
.button-outline:hover { background:var(--ink); color:var(--cream); }
.button span,.text-link span { color:var(--coral); }
.text-link { border-bottom:1px solid var(--ink); font-size:.72rem; font-weight:900; padding-bottom:.25rem; }
.hero-note { align-items:center; border-top:1px solid var(--line); display:grid; gap:.7rem 1rem; grid-template-columns:1.4rem 1fr 1.4rem 1fr; margin-top:4rem; padding-top:1.1rem; width:100%; max-width:520px; }
.hero-note span { color:var(--coral); font-size:.65rem; font-weight:900; }
.hero-note strong { font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; }
.hero-art { background:var(--sage); min-height:720px; overflow:hidden; position:relative; }
.hero-art > img,.story-image img { height:100%; inset:0; object-fit:cover; position:absolute; width:100%; }
.hero-art::after { background:linear-gradient(180deg,transparent 48%,rgba(23,38,42,.36)); content:""; inset:0; pointer-events:none; position:absolute; }
.hero-stamp { align-items:center; background:var(--cream); border-radius:50%; bottom:3rem; display:flex; flex-direction:column; height:9rem; justify-content:center; position:absolute; right:3rem; text-align:center; width:9rem; z-index:1; }
.hero-stamp strong { font-size:.72rem; letter-spacing:.11em; text-transform:uppercase; }
.hero-stamp small { color:var(--coral); font-size:.57rem; font-weight:900; letter-spacing:.08em; margin-top:.4rem; text-transform:uppercase; }
.store-strip { background:var(--ink); color:var(--cream); display:grid; grid-template-columns:repeat(3,1fr); margin:0 auto; max-width:1380px; }
.store-strip > div { border-right:1px solid rgba(245,238,227,.2); display:grid; gap:.35rem; grid-template-columns:2rem 1fr; padding:2rem clamp(1.25rem,4vw,4rem); }
.store-strip > div:last-child { border-right:0; }
.store-strip span { color:#f5b49d; font-size:.65rem; font-weight:900; }
.store-strip strong { font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; }
.store-strip p { color:#b8c7c1; font-size:.76rem; grid-column:2; line-height:1.5; margin:0; }
.shop-section { margin:0 auto; max-width:1380px; padding:9rem clamp(1.25rem,5vw,5rem); }
.section-heading { align-items:end; display:flex; gap:2rem; justify-content:space-between; margin-bottom:3rem; }
.product-grid { display:grid; gap:1rem; grid-template-columns:repeat(3,1fr); }
.product-grid--catalog { grid-template-columns:repeat(4,1fr); }
.product-card { overflow:hidden; position:relative; }
.product-card--clay { background:#d8b99f; }
.product-card--sage { background:var(--sage); }
.product-card--ink { background:var(--ink); color:var(--cream); }
.product-card--sand { background:var(--sand); }
.product-image { display:block; height:360px; overflow:hidden; position:relative; }
.product-image img { height:100%; object-fit:cover; transition:transform .45s ease; width:100%; }
.product-image:hover img { transform:scale(1.05); }
.product-badge { background:var(--cream); color:var(--ink); font-size:.61rem; font-weight:900; left:1rem; letter-spacing:.08em; padding:.52rem .72rem; position:absolute; text-transform:uppercase; top:1rem; }
.product-card__body { padding:1.45rem 1.45rem 1.6rem; }
.product-card__body > small { color:var(--coral); font-size:.63rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.product-card__body h3 { margin:.8rem 0 .75rem; }
.product-card__body p { color:var(--muted); font-size:.77rem; line-height:1.55; min-height:3.6rem; }
.product-card--ink .product-card__body p { color:#c3d1cc; }
.product-card__buy { align-items:center; border-top:1px solid var(--line); display:flex; justify-content:space-between; margin-top:1.4rem; padding-top:1rem; }
.product-price { font-size:.9rem; letter-spacing:.04em; }
.circle-link { align-items:center; border:1px solid currentColor; border-radius:50%; display:flex; font-size:1.15rem; height:2.55rem; justify-content:center; width:2.55rem; }
.circle-link:hover { background:var(--coral); border-color:var(--coral); color:var(--white); }
.story-section { align-items:stretch; background:var(--sage); display:grid; grid-template-columns:1.05fr .95fr; margin:0 auto; max-width:1380px; min-height:600px; }
.story-section--reverse { grid-template-columns:.95fr 1.05fr; }
.story-image { min-height:600px; overflow:hidden; position:relative; }
.story-copy { display:flex; flex-direction:column; justify-content:center; padding:5rem clamp(1.25rem,8vw,8rem); }
.story-copy h2 { margin-bottom:1.5rem; }
.section-lead { color:var(--muted); font-size:1rem; line-height:1.8; max-width:450px; }
.story-copy .button { align-self:flex-start; margin-top:1rem; }
.category-section { display:grid; gap:5rem; grid-template-columns:.7fr 1.3fr; margin:0 auto; max-width:1380px; padding:9rem clamp(1.25rem,5vw,5rem); }
.category-grid { border-top:1px solid var(--line); }
.category-grid a { align-items:center; border-bottom:1px solid var(--line); display:flex; gap:2rem; justify-content:space-between; padding:1.5rem 0; }
.category-grid a:hover strong { color:var(--coral); }
.category-grid span { color:var(--coral); font-size:.65rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.category-grid strong { font-size:1.2rem; }
.newsletter { align-items:center; background:var(--coral); color:var(--white); display:flex; gap:4rem; justify-content:space-between; margin:0 auto; max-width:1380px; padding:5rem clamp(1.25rem,8vw,8rem); }
.newsletter .eyebrow { color:var(--sand); }
.newsletter h2 { font-size:clamp(2.4rem,4.5vw,4.6rem); margin-bottom:1rem; }
.newsletter p { line-height:1.7; max-width:470px; }
.newsletter-form { display:flex; gap:.7rem; min-width:390px; }
.newsletter-form input,.contact-form input,.contact-form textarea { background:var(--white); border:1px solid rgba(23,38,42,.25); border-radius:0; color:var(--ink); padding:1rem; width:100%; }
.newsletter-form input { min-width:0; }
.newsletter-form .button-dark:hover { background:var(--cream); color:var(--ink); }
.page-hero { background:var(--sand); padding:7rem clamp(1.25rem,8vw,9rem) 6rem; }
.page-hero h1 { max-width:850px; }
.page-hero > p:last-child { color:var(--muted); font-size:1rem; line-height:1.75; max-width:500px; }
.catalog-toolbar { align-items:center; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; margin-bottom:2rem; padding-bottom:1rem; }
.catalog-toolbar .section-kicker { margin:0; }
.catalog-toolbar > div { display:flex; flex-wrap:wrap; gap:.45rem; }
.filter-button { background:transparent; border:1px solid var(--line); color:var(--ink); font-size:.68rem; font-weight:900; padding:.65rem .85rem; }
.filter-button:hover { background:var(--ink); color:var(--cream); }
.contact-layout { display:grid; gap:5rem; grid-template-columns:.85fr 1.15fr; margin:0 auto; max-width:1100px; padding:9rem clamp(1.25rem,5vw,5rem); }
.contact-details { border-top:1px solid var(--line); display:grid; gap:.8rem; margin-top:3rem; padding-top:1.2rem; }
.contact-details a,.contact-details span { font-size:.8rem; font-weight:800; }
.contact-details a:hover { color:var(--coral); }
.contact-form { display:grid; gap:1.3rem; }
.contact-form label { display:grid; gap:.55rem; font-size:.68rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.contact-form textarea { resize:vertical; }
.contact-form .button { justify-self:start; }
.quote-panel { background:var(--sand); margin:0 auto 9rem; max-width:1380px; overflow:hidden; padding:5rem clamp(1.25rem,8vw,8rem); position:relative; }
.quote-panel::before { border:1px solid rgba(23,38,42,.25); border-radius:50%; content:""; height:20rem; position:absolute; right:-5rem; top:-8rem; width:20rem; }
.quote-panel p { font-size:clamp(1.8rem,3.4vw,3.5rem); letter-spacing:-.06em; line-height:.98; max-width:800px; position:relative; }
.contact-banner { align-items:center; background:var(--sage); display:flex; gap:2rem; justify-content:space-between; margin:0 auto; max-width:1380px; padding:5rem clamp(1.25rem,8vw,8rem); }
.contact-banner h2 { font-size:clamp(2.3rem,4.5vw,4.6rem); }
.site-footer { background:var(--ink); color:var(--cream); display:grid; gap:3rem; grid-template-columns:1.4fr repeat(3,1fr); margin-top:7rem; padding:4.5rem clamp(1.25rem,6vw,6rem) 2rem; }
.site-footer__brand p { color:#afc1b8; font-size:.8rem; line-height:1.6; max-width:260px; }
.site-footer__column { align-content:start; display:grid; gap:.7rem; }
.site-footer__column strong { color:#f5b49d; font-size:.65rem; letter-spacing:.15em; margin-bottom:.35rem; text-transform:uppercase; }
.site-footer__column a,.site-footer__column span { color:#d7e2dc; font-size:.75rem; }
.site-footer__column a:hover { color:#f5b49d; }
.site-footer__bottom { border-top:1px solid rgba(245,238,227,.2); color:#9eb7ae; display:flex; font-size:.65rem; grid-column:1 / -1; justify-content:space-between; padding-top:1.4rem; }
.sr-only { height:1px; margin:-1px; overflow:hidden; position:absolute; width:1px; clip:rect(0,0,0,0); }
@media (max-width:900px) { .hero { grid-template-columns:1fr; } .hero-art { min-height:560px; } .store-strip,.product-grid--catalog { grid-template-columns:repeat(2,1fr); } .story-section,.story-section--reverse,.category-section,.contact-layout { grid-template-columns:1fr; } .story-image { min-height:430px; } .story-section--reverse .story-image { order:2; } .newsletter { align-items:flex-start; flex-direction:column; gap:2rem; } .newsletter-form { min-width:0; width:100%; } .site-footer { grid-template-columns:1.4fr repeat(2,1fr); } }
@media (max-width:700px) { .announcement { font-size:.55rem; } .site-header { padding-block:1rem; } .menu-toggle { display:block; position:relative; z-index:12; } .nav-links { align-items:stretch; background:var(--cream); border-bottom:1px solid var(--line); display:none; flex-direction:column; gap:.5rem; left:0; padding:5rem 1.25rem 1.5rem; position:absolute; right:0; top:0; } .nav-links.is-open { display:flex; } .nav-links a { padding:.7rem 0; } .nav-cta { border-radius:0; text-align:center; } .hero-copy { padding-block:5rem; } .hero-art { min-height:480px; } .hero-stamp { bottom:1.5rem; right:1.5rem; transform:scale(.82); transform-origin:bottom right; } .hero-note { grid-template-columns:1.4rem 1fr; } .hero-note span:nth-of-type(2),.hero-note strong:nth-of-type(2) { display:none; } .store-strip,.product-grid,.product-grid--catalog { grid-template-columns:1fr; } .store-strip > div { border-bottom:1px solid rgba(245,238,227,.2); border-right:0; } .shop-section,.category-section,.contact-layout { padding-block:6rem; } .section-heading,.catalog-toolbar,.contact-banner { align-items:flex-start; flex-direction:column; } .product-image { height:330px; } .story-image { min-height:350px; } .newsletter-form { flex-direction:column; } .site-footer { grid-template-columns:1fr 1fr; } .site-footer__brand,.site-footer__bottom { grid-column:1 / -1; } .site-footer__bottom { gap:1rem; flex-direction:column; } }