:root { --cream:#fbf5ec; --paper:#fffdf9; --blush:#e5aaa9; --rose:#cb8285; --cocoa:#593427; --ink:#352018; --sage:#747660; --line:rgba(89,52,39,.2); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:"DM Sans",sans-serif; font-size:16px; line-height:1.55; }
.skip-link { position:absolute; left:-999px; top:auto; }
.skip-link:focus { left:1rem; top:1rem; z-index:10; padding:.7rem 1rem; color:#fff; background:var(--cocoa); }
.site-header { display:flex; align-items:center; justify-content:space-between; max-width:1320px; margin:auto; padding:1.5rem 4.5rem; }
.wordmark { color:var(--cocoa); font-family:"Playfair Display",serif; font-size:1.25rem; font-weight:700; letter-spacing:.02em; text-decoration:none; }
.wordmark em { color:var(--rose); font-style:italic; }
.header-social { color:var(--cocoa); font-size:.77rem; font-weight:700; letter-spacing:.11em; text-decoration:none; text-transform:uppercase; }
.header-social span { margin-left:.3rem; color:var(--rose); }
.hero { display:grid; grid-template-columns:1fr 1fr; min-height:650px; max-width:1320px; margin:0 auto; padding:2.8rem 4.5rem 6.5rem; align-items:center; }
.hero-copy { position:relative; z-index:1; max-width:560px; }
.eyebrow { margin:0 0 1rem; color:var(--rose); font-size:.71rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
h1,h2,h3 { font-family:"Playfair Display",serif; font-weight:600; line-height:1.04; }
h1 { max-width:530px; margin:0; font-size:clamp(4rem,8.3vw,7.5rem); letter-spacing:-.06em; }
h1 em { color:var(--rose); font-style:italic; }
.hero-intro { max-width:400px; margin:1.8rem 0 2.2rem; font-size:1.15rem; }
.button { display:inline-flex; gap:.85rem; align-items:center; padding:1rem 1.25rem; color:var(--paper); background:var(--cocoa); font-size:.74rem; font-weight:700; letter-spacing:.12em; text-decoration:none; text-transform:uppercase; transition:transform .2s,background .2s; }
.button:hover { background:var(--rose); transform:translateY(-3px); }
.hero-art { position:relative; justify-self:end; width:min(100%,460px); }
.hero-art img { position:relative; display:block; width:100%; border-radius:50%; box-shadow:0 25px 50px rgba(89,52,39,.13); }
.sunburst { position:absolute; inset:7% -10%; background:repeating-conic-gradient(from 9deg,transparent 0deg 8deg,rgba(229,170,169,.38) 9deg 10deg,transparent 11deg 17deg); border-radius:50%; }
.signature-swirl { position:absolute; width:67%; right:-16%; bottom:-5%; fill:none; stroke:var(--rose); stroke-linecap:round; stroke-linejoin:round; stroke-width:5; transform:rotate(-17deg); }
.intro { max-width:770px; margin:0 auto; padding:7rem 2rem; text-align:center; }
.intro h2 { margin:.1rem 0 1.5rem; font-size:clamp(2.2rem,4.3vw,4.1rem); letter-spacing:-.045em; }
.intro > p:last-child { max-width:590px; margin:auto; color:#664f47; }
.swirls { padding:6rem max(4.5rem,calc((100% - 1230px)/2)); background:var(--paper); }
.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:2.3rem; }
.section-heading h2 { margin:0; font-size:clamp(2.4rem,4vw,4rem); letter-spacing:-.05em; }
.section-heading .eyebrow { margin:0; }
.product-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.product-card { position:relative; min-height:465px; overflow:hidden; padding:2rem; border:1px solid var(--line); }
.product-card.fudge { background:#603d31; color:#fff9f0; }
.product-card.snickerdoodle { background:#eebfa8; color:var(--cocoa); }
.product-art { position:absolute; right:-4rem; bottom:-5rem; width:360px; height:360px; border-radius:50%; transform:rotate(-14deg); }
.fudge .product-art { background:repeating-radial-gradient(circle at 50% 50%,#e9afb2 0 13px,#75463b 15px 27px,#f0c3be 29px 35px,#3b2018 37px 49px); }
.snickerdoodle .product-art { background:repeating-radial-gradient(circle at 50% 50%,#f7e3d0 0 14px,#bc7463 16px 23px,#e9a084 25px 33px,#f6d2b9 35px 46px); }
.product-art span { position:absolute; width:52%; height:25%; border:8px solid rgba(255,255,255,.6); border-left-color:transparent; border-bottom-color:transparent; border-radius:50%; }
.product-art span:nth-child(1) { left:12%; top:15%; transform:rotate(17deg); }
.product-art span:nth-child(2) { right:10%; top:35%; transform:rotate(167deg); }
.product-art span:nth-child(3) { left:23%; bottom:15%; transform:rotate(76deg); }
.product-number { position:relative; margin:0 0 9rem; font-size:.72rem; font-weight:700; letter-spacing:.13em; }
.product-card h3 { position:relative; margin:0 0 .8rem; font-size:clamp(2.3rem,3.7vw,3.9rem); letter-spacing:-.06em; }
.product-card > p:last-child { position:relative; max-width:245px; margin:0; }
.market-note { display:grid; grid-template-columns:260px 1fr; gap:5rem; max-width:1010px; margin:auto; padding:7rem 2rem; align-items:center; }
.note-swirl { display:grid; width:225px; height:225px; place-items:center; border:2px solid var(--blush); border-radius:50%; color:var(--rose); font-family:"Playfair Display",serif; font-size:10rem; font-style:italic; line-height:1; transform:rotate(-14deg); }
.market-note h2 { margin:.1rem 0 1rem; font-size:clamp(2.4rem,4vw,4rem); letter-spacing:-.05em; }
.market-note > div:last-child > p:not(.eyebrow) { max-width:580px; margin:0; }
.social-links { display:grid; gap:.6rem; margin-top:2rem; }
.social-links a { display:flex; gap:.8rem; align-items:baseline; width:max-content; max-width:100%; padding-bottom:.2rem; border-bottom:1px solid var(--rose); color:var(--cocoa); font-size:.84rem; font-weight:700; text-decoration:none; }
.social-links span { color:#80645a; font-weight:500; }
.social-links b { color:var(--rose); }
footer { display:flex; justify-content:space-between; gap:1rem; padding:1.4rem 4.5rem; border-top:1px solid var(--line); color:#735c52; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
@media (max-width:720px) { .site-header { padding:1.2rem 1.5rem; }.header-social { font-size:.63rem; }.hero { grid-template-columns:1fr; min-height:auto; padding:3.5rem 1.5rem 4.5rem; }.hero-art { width:88%; margin:3.5rem auto 0; justify-self:center; }.intro { padding:5rem 1.5rem; }.swirls { padding:4.5rem 1.5rem; }.section-heading { display:block; }.section-heading .eyebrow { margin-bottom:.7rem; }.product-grid { grid-template-columns:1fr; }.product-card { min-height:390px; }.market-note { grid-template-columns:1fr; gap:2.2rem; padding:5rem 1.5rem; }.note-swirl { width:130px; height:130px; font-size:6rem; } footer { flex-wrap:wrap; padding:1.3rem 1.5rem; } }