:root{--navy:#0f2240;--navy2:#162d52;--orange:#e8622c;--burnt:#c4501f;--mustard:#e0a330;--cream:#f4e6c8;--ink:#0b1a32}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',system-ui,sans-serif;background:var(--navy);color:var(--cream);line-height:1.6;position:relative}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
h1,h2,h3{font-family:'Abril Fatface',Georgia,serif;font-weight:400;color:var(--cream);line-height:1.1}
a{color:var(--mustard)}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
.stripes{height:36px;background:linear-gradient(var(--orange) 0 25%,var(--burnt) 25% 50%,var(--mustard) 50% 75%,var(--cream) 75%)}
nav{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;max-width:1100px;margin:0 auto;gap:12px;flex-wrap:wrap}
nav .brand{font-family:'Abril Fatface',serif;font-size:1.4rem;color:var(--cream);text-decoration:none}
nav ul{display:flex;gap:22px;list-style:none;flex-wrap:wrap}
nav ul a{color:var(--cream);text-decoration:none;font-weight:600;font-size:.95rem;opacity:.85}
nav ul a:hover{color:var(--mustard);opacity:1}
.hero{text-align:center;padding:70px 0 90px;position:relative;overflow:hidden}
.sun{width:min(340px,70vw);aspect-ratio:1;border-radius:50%;margin:0 auto 34px;background:linear-gradient(var(--orange) 0 22%,var(--navy) 22% 25%,var(--burnt) 25% 45%,var(--navy) 45% 48%,var(--mustard) 48% 66%,var(--navy) 66% 69%,var(--cream) 69% 84%,var(--navy) 84% 87%,var(--cream) 87%);box-shadow:0 0 0 10px var(--navy),0 0 0 14px var(--cream)}
.hero h1{font-size:clamp(2.8rem,8vw,5.6rem);letter-spacing:.01em}
.tagline{font-family:'DM Serif Display',serif;font-size:clamp(1.25rem,3vw,1.8rem);margin:14px auto 22px;max-width:680px}
.verse{display:inline-block;border:2px solid var(--mustard);border-radius:999px;padding:8px 22px;font-size:.95rem;color:var(--mustard);font-style:italic}
section{padding:80px 0}
.eyebrow{text-transform:uppercase;letter-spacing:.25em;font-size:.8rem;color:var(--orange);font-weight:700;margin-bottom:10px}
h2{font-size:clamp(2rem,5vw,3.2rem);margin-bottom:18px}
.about{background:var(--cream);color:var(--ink)}
.about h2,.about h3{color:var(--navy)}
.about .eyebrow{color:var(--burnt)}
.about p{max-width:720px;font-size:1.1rem;margin-bottom:14px}
.pills{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.pill{background:var(--navy);color:var(--cream);border-radius:999px;padding:8px 20px;font-weight:600}
.shop{background:var(--navy2)}
.shop-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.badge{width:100%;max-width:440px;border-radius:50%;display:block;margin:0 auto;box-shadow:0 0 0 8px var(--navy),0 0 0 12px var(--mustard),0 20px 50px rgba(0,0,0,.45)}
.soon{display:inline-block;background:var(--orange);color:var(--cream);border-radius:999px;padding:6px 18px;font-weight:700;margin:6px 0 18px;transform:rotate(-2deg)}
.btn{display:inline-block;background:var(--mustard);color:var(--ink);text-decoration:none;font-weight:700;padding:14px 30px;border-radius:999px;border:3px solid var(--cream);transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.note{font-size:.85rem;opacity:.7;margin-top:10px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px;margin-top:20px}
.card{background:var(--navy2);border:3px solid var(--cream);border-radius:32px;padding:34px;position:relative;overflow:hidden}
.card::after{content:"";position:absolute;right:-50px;top:-50px;width:150px;height:150px;border-radius:50%;background:linear-gradient(var(--orange) 0 33%,var(--burnt) 33% 55%,var(--mustard) 55% 78%,var(--cream) 78%);opacity:.9}
.card h3{font-size:1.7rem;margin-bottom:8px;max-width:80%}
.tag{display:inline-block;border:2px solid var(--mustard);color:var(--mustard);border-radius:999px;padding:2px 14px;font-size:.8rem;font-weight:700;margin-bottom:14px}
footer{text-align:center;padding:34px 24px 40px;font-size:.9rem;opacity:.85}
footer .f-brand{font-family:'Abril Fatface',serif;font-size:1.3rem;margin-bottom:4px}
@media(max-width:760px){.shop-grid{grid-template-columns:1fr;gap:36px;text-align:center}section{padding:60px 0}.hero{padding:40px 0 64px}nav{justify-content:center}nav ul{justify-content:center;gap:16px}}