/* ============ VERDANT — shared prototype stylesheet ============ */
:root{
  /* Colorscapes — earthy, muted, warm gallery palette.
     Warm neutral walls; Ria's colourful paintings provide the colour. */
  --bone:#F3EDE1; --bone-deep:#E7DECC; --paper:#FBF8F1;
  --clay:#B15539; --clay-deep:#8E3F27;         /* warm terracotta accent */
  --moss:#535E3C; --moss-deep:#39422A;         /* muted olive — dark blocks */
  --ochre:#C6952F; --bark:#241F1A; --ink:#463E34;
  --line:rgba(36,31,26,.14);
  --shadow:0 30px 60px -30px rgba(36,31,26,.45);
  --shadow-sm:0 20px 40px -26px rgba(36,31,26,.5);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bone);color:var(--bark);font-family:'Inter',system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;font-weight:800;line-height:1.03;letter-spacing:-.015em;color:var(--bark)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1280px;margin:0 auto;padding:0 40px}
.eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--clay)}
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--clay);color:var(--bone);padding:16px 30px;border-radius:100px;font-weight:600;font-size:15px;transition:transform .25s,background .25s;box-shadow:var(--shadow);border:none;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--clay-deep);transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--bark);box-shadow:none;padding-left:6px}
.btn.ghost:hover{transform:translateX(4px)}
.btn[disabled]{background:var(--bark);opacity:.35;cursor:not-allowed;box-shadow:none}
.btn.block{display:flex;width:100%;justify-content:center}

/* ticker + header */
.ticker{background:var(--moss-deep);color:var(--bone);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;text-align:center;padding:9px;font-weight:500}
.ticker b{color:var(--ochre);font-weight:600}
header{position:sticky;top:0;z-index:100;backdrop-filter:blur(8px);background:rgba(243,237,225,.82);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{font-family:'Fraunces',serif;font-weight:900;font-size:26px;letter-spacing:.02em}
.brand span{color:var(--clay)}
.menu{display:flex;gap:36px;align-items:center}
.menu a{font-size:14px;font-weight:500;color:var(--ink);position:relative}
.menu a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--clay);transition:width .3s}
.menu a:hover::after,.menu a.on::after{width:100%}
.cart{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px}
.cart .bag{width:34px;height:34px;border:1px solid var(--bark);border-radius:50%;display:grid;place-items:center}

/* marquee */
.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:var(--bone-deep)}
.band .row{display:flex;gap:56px;padding:18px 0;white-space:nowrap;font-family:'Fraunces',serif;font-weight:700;font-size:22px;color:var(--moss-deep);width:max-content;animation:slide 30s linear infinite}
.band .row span{display:inline-flex;gap:56px}
.band .dot{color:var(--clay)}
@keyframes slide{to{transform:translateX(-50%)}}

/* hero */
.hero{padding:70px 0 88px;display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.hero h1{font-size:clamp(52px,7vw,92px);font-weight:900}
.hero h1 em{font-style:italic;font-weight:400;color:var(--clay)}
.hero p{max-width:440px;margin:26px 0 34px;color:var(--ink);font-size:18px}
.hero-cta{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.hero-art{position:relative}
.frame{background:var(--paper);padding:20px;border-radius:4px;box-shadow:var(--shadow);transform:rotate(-1.4deg);border:1px solid var(--line)}
.frame img{width:100%;aspect-ratio:4/5;object-fit:contain;border-radius:2px}
.frame .plate{display:flex;justify-content:space-between;align-items:baseline;padding:14px 4px 2px}
.frame .plate .t{font-family:'Fraunces',serif;font-weight:700;font-size:16px}
.frame .plate .m{font-size:12px;color:var(--ink)}
.tag{position:absolute;top:-16px;right:-14px;background:var(--ochre);color:var(--bark);font-family:'Fraunces',serif;font-weight:800;font-size:14px;padding:12px 18px;border-radius:100px;transform:rotate(6deg);box-shadow:var(--shadow)}

/* section heads */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:44px;gap:24px}
.sec-head h2{font-size:clamp(34px,4.4vw,54px)}
.sec-head p{max-width:360px;color:var(--ink);font-size:15px}
.page-head{padding:64px 0 20px;text-align:center;max-width:760px;margin:0 auto}
.page-head h1{font-size:clamp(44px,6vw,78px);font-weight:900}
.page-head h1 em{font-style:italic;font-weight:400;color:var(--clay)}
.page-head p{color:var(--ink);margin-top:18px;font-size:18px}

/* product grid / cards */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 30px}
.card{cursor:pointer;display:block}
.card .art{width:100%;border-radius:3px;box-shadow:var(--shadow-sm);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;overflow:hidden;background:var(--paper);padding:14px}
.card .art img{width:100%;aspect-ratio:4/5;object-fit:contain;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.card:hover .art{transform:translateY(-8px);box-shadow:0 34px 60px -30px rgba(36,31,26,.6)}
.card:hover .art img{transform:scale(1.04)}
.card .meta{display:flex;justify-content:space-between;align-items:baseline;padding:16px 2px 0;gap:12px}
.card .meta h3{font-size:20px;font-weight:700;letter-spacing:-.01em}
.card .price{font-family:'Fraunces',serif;font-weight:700;color:var(--clay);font-size:18px;white-space:nowrap}
.card .price.sold{color:var(--ink)}
.card .sub{font-size:13px;color:var(--ink);letter-spacing:.02em;padding:4px 2px 0}
.art{position:relative}
.badge-sold{position:absolute;top:14px;left:14px;background:var(--bark);color:var(--bone);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:100px;z-index:2}

/* category strip */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin:8px 0 20px}
.cat{position:relative;border-radius:5px;overflow:hidden;aspect-ratio:3/4;box-shadow:var(--shadow-sm);background:var(--paper)}
.cat img{width:100%;height:100%;object-fit:contain;transition:transform .6s}
.cat:hover img{transform:scale(1.05)}
.cat .lbl{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;background:linear-gradient(180deg,transparent 40%,rgba(36,31,26,.75));color:var(--bone)}
.cat .lbl h3{color:var(--bone);font-size:24px}
.cat .lbl span{font-size:12px;opacity:.85;margin-top:4px}

/* story */
.story{margin:104px 0;background:var(--moss-deep);color:var(--bone);border-radius:8px;overflow:hidden;display:grid;grid-template-columns:.9fr 1.1fr}
.story .portrait{min-height:520px;position:relative}
.story .portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.story .txt{padding:70px 66px}
.story .eyebrow{color:var(--ochre)}
.story blockquote{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(27px,3.1vw,38px);line-height:1.18;margin:20px 0 28px}
.story blockquote em{font-style:italic;color:var(--ochre)}
.story p{color:rgba(243,237,225,.82);max-width:460px;font-size:16px;margin-bottom:26px}
.story .btn{background:var(--ochre);color:var(--bark)}
.story .btn:hover{background:#dcae4a}

/* values */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:16px 0 96px}
.val{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:36px 32px}
.val .n{font-family:'Fraunces',serif;font-weight:800;font-size:15px;color:var(--clay)}
.val h4{font-size:22px;margin:12px 0 8px}
.val p{font-size:15px;color:var(--ink)}

/* newsletter */
.news{background:var(--clay);color:var(--bone);border-radius:8px;padding:70px 60px;text-align:center;margin-bottom:96px}
.news h2{color:var(--bone);font-size:clamp(32px,4.2vw,50px);max-width:720px;margin:0 auto 12px}
.news h2 em{font-style:italic;font-weight:400;color:var(--ochre)}
.news p{color:rgba(243,237,225,.85);margin-bottom:28px}
.news .form{display:flex;gap:12px;max-width:460px;margin:0 auto}
.news input{flex:1;border:none;border-radius:100px;padding:15px 22px;font-family:inherit;font-size:15px;background:var(--bone);color:var(--bark)}
.news button{background:var(--bark);color:var(--bone);border:none;border-radius:100px;padding:15px 28px;font-weight:600;font-family:inherit;cursor:pointer}

/* footer */
footer{border-top:1px solid var(--line);padding:64px 0 40px}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.foot .brand{font-size:30px;margin-bottom:14px}
.foot p{font-size:14px;color:var(--ink);max-width:260px}
.foot h5{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);margin-bottom:16px;font-weight:600}
.foot ul{list-style:none}
.foot ul li{margin-bottom:11px;font-size:14px;color:var(--ink)}
.foot ul li a:hover{color:var(--clay)}
.legal{display:flex;justify-content:space-between;margin-top:52px;padding-top:24px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink)}

/* shop filters */
.filters{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:34px 0 56px}
.filters a{font-size:14px;font-weight:600;color:var(--ink);padding:9px 20px;border:1px solid var(--line);border-radius:100px;transition:.2s}
.filters a:hover,.filters a.on{background:var(--bark);color:var(--bone);border-color:var(--bark)}
.cat-block{margin-bottom:76px;scroll-margin-top:100px}
.cat-block .ch{display:flex;align-items:baseline;gap:16px;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:40px}
.cat-block .ch h2{font-size:clamp(28px,3.4vw,42px)}
.cat-block .ch span{color:var(--ink);font-size:14px}

/* product detail */
.pdp{display:grid;grid-template-columns:1.25fr .75fr;gap:60px;padding:30px 0 80px;align-items:start}
.crumbs{padding:26px 0 0;font-size:13px;color:var(--ink)}
.crumbs a:hover{color:var(--clay)}
.stage{position:sticky;top:96px}
.mainart{background:var(--paper);padding:26px;border-radius:4px;box-shadow:var(--shadow);border:1px solid var(--line);position:relative}
.mainart img{width:100%;border-radius:2px;object-fit:contain;max-height:74vh;background:var(--paper)}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.thumbs img{width:100%;aspect-ratio:1;min-width:0;object-fit:contain;background:var(--paper);border-radius:3px;cursor:pointer;border:2px solid transparent;opacity:.7;transition:.2s;padding:6px}
.thumbs img:hover,.thumbs img.on{opacity:1;border-color:var(--clay)}
.detail h1{font-size:clamp(36px,4.2vw,54px);font-weight:900;margin-top:8px}
.orig{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:13px;font-weight:600;color:var(--moss-deep);background:rgba(83,94,60,.12);padding:7px 14px;border-radius:100px}
.orig.sold{color:var(--bone);background:var(--bark)}
.dprice{font-family:'Fraunces',serif;font-weight:800;font-size:36px;color:var(--clay);margin:24px 0 2px}
.dprice.sold{color:var(--ink)}
.specs{border-top:1px solid var(--line);margin:26px 0}
.specs .r{display:flex;justify-content:space-between;padding:13px 0;font-size:15px;border-bottom:1px solid var(--line);gap:20px}
.specs .r span:first-child{color:var(--ink)}
.specs .r span:last-child{font-weight:600;font-family:'Fraunces',serif;text-align:right}
.desc{margin-top:28px;color:var(--ink);font-size:16px}
.assure{display:flex;gap:22px;flex-wrap:wrap;margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
.assure .a{font-size:13px;color:var(--ink);max-width:150px}
.assure .a b{display:block;font-family:'Fraunces',serif;color:var(--bark);font-size:14px;margin-bottom:2px}
.more{padding:10px 0 90px}
.more h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:34px}

/* about */
.about-hero{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:60px 0 80px}
.about-hero .p{border-radius:6px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/5;background:var(--paper)}
.about-hero .p img{width:100%;height:100%;object-fit:contain}
.about-hero h1{font-size:clamp(44px,5.5vw,74px);font-weight:900}
.about-hero h1 em{font-style:italic;font-weight:400;color:var(--clay)}
.about-hero p{margin-top:22px;color:var(--ink);font-size:18px;max-width:460px}
.about-band{background:var(--moss-deep);color:var(--bone);border-radius:8px;padding:76px 0;margin:20px 0 90px}
.about-band .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.about-band img{border-radius:6px;box-shadow:var(--shadow);aspect-ratio:3/2;object-fit:contain;width:100%;background:var(--paper);padding:10px}
.about-band .eyebrow{color:var(--ochre)}
.about-band h2{color:var(--bone);font-size:clamp(30px,3.6vw,44px);margin:16px 0 18px}
.about-band p{color:rgba(243,237,225,.84);margin-bottom:16px;max-width:520px}
.about-quote{text-align:center;max-width:900px;margin:0 auto 96px;font-family:'Fraunces',serif;font-weight:500;font-size:clamp(28px,3.6vw,44px);line-height:1.22}
.about-quote em{font-style:italic;color:var(--clay)}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:70px;padding:40px 0 96px;align-items:start}
.contact .info h3{font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--clay);margin:28px 0 8px}
.contact .info p{color:var(--ink);font-size:16px}
.contact .info a:hover{color:var(--clay)}
.cform{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:40px}
.cform label{display:block;font-size:13px;font-weight:600;letter-spacing:.03em;margin:18px 0 7px;color:var(--ink)}
.cform input,.cform textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:13px 16px;font-family:inherit;font-size:15px;background:var(--bone);color:var(--bark)}
.cform textarea{min-height:130px;resize:vertical}
.cform .btn{margin-top:24px}

.placeholder-note{position:fixed;bottom:16px;left:16px;z-index:10000;background:var(--bark);color:var(--ochre);font-size:11px;padding:8px 14px;border-radius:100px;letter-spacing:.04em;opacity:.92}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:40px}.story{grid-template-columns:1fr}
  .values,.cats{grid-template-columns:1fr 1fr}.foot{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:1fr 1fr}.pdp{grid-template-columns:1fr;gap:36px}.stage{position:static}
  .about-hero,.about-band .wrap,.contact{grid-template-columns:1fr}
}