@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Work+Sans:wght@400;500;600;700&display=swap');

:root{
  --bg:#F7F0E1; --panel:#EDE0C4; --ink:#221509; --ink-soft:#5C4A33;
  --gold:#C6912E; --burgundy:#7E1F1A; --line:#D9C49C;
  --terracotta:#C1552C; --indigo:#1E4B52; --green:#3E6B3E;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Work Sans',sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:var(--burgundy);text-decoration:none;transition:color .18s ease;}
a:hover{color:var(--gold);}
h1,h2,h3,h4{font-family:'Cormorant Garamond',serif;margin:0;letter-spacing:.005em;}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px;}
@media (min-width:900px){.wrap{padding:0 56px;}}

/* Art Anywhere Manager brand mark */
.brand-mark{position:fixed;top:0;left:12px;width:68px;height:68px;background:#6B1E23;border-radius:0 0 14px 14px;display:flex;align-items:center;justify-content:center;z-index:200;box-shadow:0 4px 0 rgba(0,0,0,.25);}
.brand-mark svg{display:block;width:65%;height:65%;}
@media (min-width:900px){.brand-mark{width:140px;height:140px;left:40px;border-radius:0 0 22px 22px;}}

/* kente bar + mudcloth motifs */
.kente-bar{height:14px;display:flex;}
.kente-bar span{flex:1;}
.kente-bar span:nth-child(1){background:var(--terracotta);}
.kente-bar span:nth-child(2){background:var(--ink);}
.kente-bar span:nth-child(3){background:var(--gold);}
.kente-bar span:nth-child(4){background:var(--green);}
.kente-bar span:nth-child(5){background:var(--gold);}
.kente-bar span:nth-child(6){background:var(--ink);}
.mudcloth{height:28px;background-color:var(--ink);background-image:
  repeating-linear-gradient(135deg,var(--terracotta) 0 7px,transparent 7px 18px),
  repeating-linear-gradient(45deg,var(--gold) 0 5px,transparent 5px 18px);}

/* nav */
.site-header{background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;}
.nav.wrap{max-width:1600px;}
.nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 32px;padding:18px 24px 14px;padding-left:90px;}
@media (min-width:900px){.nav{padding:22px 64px 16px;padding-left:194px;}}
.logo{font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:600;color:var(--ink);white-space:nowrap;}
@media (min-width:900px){.logo{font-size:24px;}}
.nav-links{display:none;gap:6px;flex-wrap:wrap;justify-content:flex-end;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;padding:10px 0;}
@media (min-width:1300px){.nav-links{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 0 0;}}
.nav-links a{color:var(--ink-soft);font-weight:600;border:1.5px solid var(--line);padding:7px 11px;transition:border-color .15s ease,color .15s ease,background .15s ease;}
.nav-links a:hover{border-color:var(--ink);color:var(--ink);}
.nav-links a.active{background:var(--terracotta);border-color:var(--ink);color:var(--bg);}
.nav-divider{width:1px;align-self:stretch;background:var(--line);margin:4px 4px;}
.nav-cta{font-size:11px;text-transform:uppercase;letter-spacing:.08em;border:2px solid var(--ink);padding:9px 18px;color:var(--ink);font-weight:700;transition:background .18s ease,color .18s ease;}
.nav-cta:hover{background:var(--ink);color:var(--bg);}
.burger{display:flex;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:8px;}
@media (min-width:1300px){.burger{display:none;}}
.burger span{display:block;width:22px;height:2px;background:var(--ink);}
.mobile-menu{display:none;flex-direction:column;padding:0 24px 20px;gap:4px;}
.mobile-menu.open{display:flex;}
@media (min-width:1100px){.mobile-menu{display:none !important;}}
.mobile-menu a{padding:10px 0;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);border-bottom:1px solid var(--line);}

/* kicker / tab / bullets */
.kicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--burgundy);font-weight:600;margin:0 0 10px;}
.tab{display:inline-block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:8px 18px;margin:0 0 16px;border:2px solid var(--ink);box-shadow:3px 3px 0 rgba(34,21,9,.2);}
.tab.tc{background:var(--terracotta);color:var(--bg);}
.tab.gr{background:var(--green);color:var(--bg);}
.tab.in{background:var(--indigo);color:var(--bg);}
.tab.on-dark{border-color:var(--gold);box-shadow:3px 3px 0 rgba(0,0,0,.35);}
ul.bullets{list-style:none;margin:0;padding:0;}
ul.bullets li{position:relative;padding-left:20px;margin-bottom:8px;}
ul.bullets li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;background:var(--terracotta);transform:rotate(45deg);}

/* headings */
.h1{font-size:42px;font-weight:700;text-shadow:2px 2px 0 rgba(34,21,9,.14);margin:0 0 14px;line-height:1.08;}
@media (min-width:900px){.h1{font-size:56px;}}

/* buttons */
.btn{display:inline-block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:14px 28px;font-weight:700;border:2px solid var(--ink);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;}
.btn-primary{background:var(--terracotta);color:var(--bg);box-shadow:4px 4px 0 var(--gold);}
.btn-outline{background:transparent;color:var(--ink);box-shadow:4px 4px 0 var(--gold);}
.btn-light{background:var(--bg);color:var(--ink);border-color:var(--bg);box-shadow:4px 4px 0 var(--terracotta);}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--gold);}
.btn-light:hover{box-shadow:5px 5px 0 var(--terracotta);}

/* hero */
.hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;background-size:cover;background-position:center;color:var(--bg);}
@media (min-width:700px){.hero{min-height:70vh;}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(34,21,9,.75),rgba(34,21,9,.15) 60%);}
.hero-cap{position:relative;z-index:1;padding:48px 24px;max-width:640px;}
@media (min-width:900px){.hero-cap{padding:64px;}}
.hero-kicker{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600;margin:0 0 14px;}
.hero-h1{font-size:44px;font-weight:700;color:var(--bg);margin:0 0 16px;line-height:1.05;text-shadow:3px 3px 0 rgba(0,0,0,.35);}
@media (min-width:900px){.hero-h1{font-size:72px;}}
.hero-sub{opacity:.92;font-size:16px;line-height:1.6;margin:0 0 28px;max-width:520px;}
.hero-portrait{position:absolute;top:16px;right:16px;z-index:2;width:128px;border:3px solid var(--gold);box-shadow:5px 5px 0 rgba(0,0,0,.4);}
.hero-portrait img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;}
@media (min-width:700px){.hero-portrait{width:275px;top:16px;right:48px;}}
@media (min-width:1100px){.hero-portrait{width:420px;top:16px;right:64px;}}

/* sections */
.section{padding:56px 0;border-bottom:1px solid var(--line);}
@media (min-width:900px){.section{padding:80px 0;}}
.section-dark{background:var(--ink);color:var(--bg);}
.section-panel{background:var(--panel);}

/* image placeholders (for pages without a real photo yet) */
.img-ph{background:repeating-linear-gradient(135deg,var(--panel),var(--panel) 10px,rgba(193,85,44,.42) 10px 13px,var(--panel) 13px 22px,rgba(198,145,46,.42) 22px 25px,var(--panel) 25px 34px,rgba(30,75,82,.36) 34px 37px,var(--panel) 37px 46px,rgba(126,31,26,.32) 46px 49px);border:2px solid var(--ink);box-shadow:5px 5px 0 rgba(34,21,9,.18);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ink-soft);font-size:12px;font-style:italic;padding:10px;}
.art-frame{border:2px solid var(--ink);box-shadow:5px 5px 0 rgba(34,21,9,.18);overflow:hidden;transition:box-shadow .2s ease,transform .2s ease;}
.art-frame{background:var(--panel);}
.art-frame img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease;}
/* Uploaded artwork (from storage) is always shown whole, never cropped to the frame. */
.art-frame img[src*="/storage/v1/object/"]{object-fit:contain;}
.card:hover .art-frame{box-shadow:7px 7px 0 rgba(34,21,9,.22);transform:translate(-2px,-2px);}
.card:hover .art-frame img{transform:scale(1.035);}

/* grids */
.grid-2{display:grid;grid-template-columns:1fr;gap:32px;}
@media (min-width:800px){.grid-2{grid-template-columns:1fr 1fr;}}
.grid-3{display:grid;grid-template-columns:1fr;gap:32px;}
@media (min-width:640px){.grid-3{grid-template-columns:1fr 1fr;}}
@media (min-width:1000px){.grid-3{grid-template-columns:1fr 1fr 1fr;}}
.grid-4{display:grid;grid-template-columns:1fr;gap:28px;}
@media (min-width:640px){.grid-4{grid-template-columns:1fr 1fr;}}
@media (min-width:1100px){.grid-4{grid-template-columns:repeat(4,1fr);}}

/* cards */
.card h3{font-size:19px;font-weight:600;margin:8px 0 4px;position:relative;padding-left:18px;}
.card h3::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;background:var(--terracotta);transform:rotate(45deg);}
.card p{font-size:12px;color:var(--ink-soft);margin:0 0 4px;line-height:1.5;}
.card .price{font-size:13px;font-weight:600;color:var(--ink);}
.sold-flag{position:absolute;top:10px;left:10px;background:var(--burgundy);color:var(--bg);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;font-weight:600;z-index:1;}
.card{position:relative;}
a.card{display:block;color:inherit;text-decoration:none;}
.card-links{font-size:12px;margin:0 0 4px;line-height:1.5;}
.card-links a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;}
.card-links a:hover{color:var(--terracotta);}
.status-line{font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft);opacity:.75;margin:4px 0 0;}

/* search */
.search-row{padding-top:24px;}
.search-input{width:100%;max-width:360px;padding:11px 16px;border:2px solid var(--ink);font-size:14px;font-family:inherit;background:var(--bg);color:var(--ink);}
.search-input::placeholder{color:var(--ink-soft);}
.search-input:focus{outline:none;box-shadow:3px 3px 0 var(--gold);}

/* filter chips */
.filterbar{display:flex;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;margin-bottom:32px;}
.chip{font-size:11px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;border:2px solid var(--line);padding:8px 16px;color:var(--ink-soft);background:none;cursor:pointer;transition:border-color .18s ease,color .18s ease;}
.chip:hover{border-color:var(--ink);color:var(--ink);}
.chip.active{border-color:var(--ink);color:var(--bg);background:var(--terracotta);box-shadow:3px 3px 0 var(--gold);}

/* footer */
.site-footer{padding:48px 0 32px;}
.footer-grid{display:grid;grid-template-columns:1fr;gap:32px;}
@media (min-width:800px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr;}}
.footer-grid h4{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--burgundy);margin:0 0 14px;font-family:'Work Sans',sans-serif;font-weight:700;}
.footer-grid a{display:block;font-size:13px;color:var(--ink-soft);margin-bottom:8px;}
.copyright{font-size:11px;color:var(--ink-soft);margin-top:32px;text-align:center;border-top:1px solid var(--line);padding-top:24px;}

/* timeline */
.tl-item{position:relative;padding-left:20px;margin-bottom:20px;}
.tl-item::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;background:var(--terracotta);transform:rotate(45deg);}
.tl-item .yr{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:600;}
.tl-item p{font-size:13px;color:var(--ink-soft);margin:2px 0 0;}

/* steps */
.steps-grid{display:grid;grid-template-columns:1fr;gap:24px;}
@media (min-width:700px){.steps-grid{grid-template-columns:1fr 1fr;}}
@media (min-width:1000px){.steps-grid{grid-template-columns:repeat(4,1fr);}}
.step{border:1px solid var(--line);padding:24px;}
.step .n{font-family:'Cormorant Garamond',serif;font-size:32px;color:var(--gold);margin:0 0 8px;}
.step h4{font-size:14px;margin:0 0 8px;font-family:'Work Sans',sans-serif;font-weight:700;}
.step p{font-size:12.5px;color:var(--ink-soft);line-height:1.6;margin:0;}

/* newsletter popup */
.newsletter-overlay{position:fixed;inset:0;background:rgba(34,21,9,.55);display:none;align-items:center;justify-content:center;z-index:200;padding:20px;}
.newsletter-modal{position:relative;background:var(--bg);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--gold);max-width:420px;width:100%;padding:32px 28px;}
.newsletter-close{position:absolute;top:10px;right:12px;background:none;border:none;font-size:24px;line-height:1;cursor:pointer;color:var(--ink-soft);padding:4px 8px;}
.newsletter-close:hover{color:var(--ink);}
.newsletter-input{width:100%;padding:12px 14px;border:2px solid var(--ink);font-size:14px;margin-bottom:12px;font-family:inherit;box-sizing:border-box;}