:root{
  --navy: #16283b;
  --navy-deep: #0e1c2a;
  --teal: #4f7570;
  --linen: #f7f4ec;
  --sand: #ece4d2;
  --driftwood: #b9a888;
  --brass: #ab8a53;
  --ink: #1c2530;
  --slate: #5c6670;
  --line: rgba(22,40,59,0.13);
  --radius: 1px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--linen);
  color:var(--ink);
  font-family:'Jost', sans-serif;
  font-weight:400;
  line-height:1.65;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
}
h1,h2,h3,.display{
  font-family:'Cormorant Garamond', serif;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--navy);
  margin:0;
}
.script{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-weight:500;
  color:var(--brass);
  line-height:1;
}
a{color:inherit;}
img{max-width:100%; display:block;}
.container{max-width:1180px;margin:0 auto;padding:0 32px;}
@media(max-width:640px){.container{padding:0 20px;}}

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(247,244,236,0.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 0; flex-wrap:wrap; gap:12px 24px;
}
.brand{
  font-family:'Cormorant Garamond', serif; font-size:clamp(20px, 5.5vw, 24px); font-weight:600;
  letter-spacing:0.01em; white-space:nowrap; color:var(--navy);
}
.brand em{font-style:italic; color:var(--brass); font-weight:500;}
nav.links{display:flex; gap:24px; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; flex-wrap:wrap;}
nav.links a{text-decoration:none; opacity:0.75; transition:opacity .2s; white-space:nowrap; color:var(--navy);}
nav.links a:hover, nav.links a:focus-visible, nav.links a.current{opacity:1;}
@media(max-width:520px){
  .nav{justify-content:center; text-align:center;}
  .brand{width:100%; text-align:center;}
  nav.links{justify-content:center; width:100%; gap:18px;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; padding:14px 30px; font-size:12px;
  letter-spacing:0.1em; text-transform:uppercase; text-decoration:none;
  border-radius:var(--radius); border:1px solid var(--navy);
  background:var(--navy); color:var(--linen); cursor:pointer;
  font-family:'Jost', sans-serif; font-weight:500; transition:transform .15s ease, background .2s, border-color .2s;
}
.btn:hover{background:var(--brass); border-color:var(--brass); transform:translateY(-1px);}
.btn.ghost{background:transparent; color:var(--navy); border-color:var(--navy);}
.btn.ghost:hover{background:var(--navy); color:var(--linen);}
.btn.small{padding:11px 20px; font-size:11px;}

/* ---------- Page hero (used on inner pages) ---------- */
.page-hero{padding:80px 0 56px; border-bottom:1px solid var(--line); background:var(--sand);}
.page-hero .eyebrow{font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--teal); margin-bottom:16px; display:block;}
.page-hero h1{font-size:clamp(36px,6vw,58px); max-width:760px;}
.page-hero p.lede{max-width:560px; margin-top:20px; font-size:17px; color:var(--slate);}

/* ---------- Paint-swipe hero (homepage) ---------- */
.paint-hero{
  position:relative; width:100%; height:88vh; min-height:520px; max-height:820px;
  overflow:hidden; background:var(--navy-deep); touch-action:pan-y; cursor:grab; user-select:none;
}
.paint-hero.is-dragging{cursor:grabbing;}
.paint-noise{
  position:absolute; inset:0; pointer-events:none; opacity:0.05; z-index:5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.paint-slide{position:absolute; inset:0; z-index:1;}
.paint-slide-next{z-index:2; transform:translateX(-100%);}
.paint-slide-art{position:absolute; inset:0; clip-path:url(#brushClip);}
.paint-overlay{
  position:absolute; inset:0; z-index:6; display:flex; align-items:flex-end; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(9,17,26,0.6) 100%);
}
.paint-overlay-inner{width:100%; padding-bottom:64px; pointer-events:auto;}
.paint-eyebrow{font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:var(--linen); opacity:0.8; display:block; margin-bottom:12px;}
.paint-name{font-family:'Cormorant Garamond', serif; font-weight:600; color:var(--linen); font-size:clamp(38px, 7vw, 76px); line-height:1; margin:0;}
.paint-tag{color:var(--linen); opacity:0.85; font-size:15px; margin:12px 0 20px;}
.paint-link{color:var(--linen); text-decoration:none; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; border-bottom:1px solid var(--brass); padding-bottom:3px;}
.paint-dots{position:absolute; bottom:28px; right:32px; z-index:7; display:flex; gap:10px; cursor:pointer;}
.paint-dot{width:8px; height:8px; border-radius:50%; background:rgba(247,244,236,0.4); transition:background .2s, transform .2s;}
.paint-dot.active{background:var(--brass); transform:scale(1.3);}
.swipe-hint{position:absolute; top:28px; right:32px; z-index:7; color:var(--linen); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; opacity:0.85; transition:opacity .4s;}
.swipe-hint.hidden{opacity:0; pointer-events:none;}
@media(max-width:640px){
  .paint-hero{height:78vh;}
  .swipe-hint{top:auto; bottom:28px; left:20px; right:auto;}
  .paint-dots{bottom:28px; right:20px;}
}

/* ---------- Section scaffolding ---------- */
.section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:48px; gap:20px; flex-wrap:wrap;}
.section-head h2{font-size:clamp(28px,4vw,42px); font-weight:500;}
.section-head p{color:var(--slate); max-width:360px; margin:0;}
.eyebrow-sm{font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--teal); display:block; margin-bottom:10px;}

/* ---------- Why / about stats ---------- */
.why{padding:84px 0; border-bottom:1px solid var(--line);}
.why-grid{display:grid; grid-template-columns: 1fr 1.4fr; gap:64px; align-items:start;}
@media(max-width:800px){.why-grid{grid-template-columns:1fr; gap:32px;}}
.why h2{font-size:clamp(28px,4vw,40px); max-width:400px; font-weight:500;}
.why-stats{display:flex; flex-direction:column; gap:28px;}
.stat{border-top:1px solid var(--line); padding-top:16px;}
.stat .num{font-family:'Cormorant Garamond'; font-size:36px; color:var(--teal); font-weight:600;}
.stat p{margin:6px 0 0; color:var(--slate); font-size:15px; max-width:420px;}
.why-copy p{color:var(--slate); font-size:16px; max-width:560px;}

/* ---------- Featured exhibition cards (Artists page) ---------- */
.featured{padding:84px 0;}
.exhibit-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media(max-width:900px){.exhibit-grid{grid-template-columns:1fr;}}
.exhibit-card{position:relative; display:block; aspect-ratio:3/4; overflow:hidden; text-decoration:none; color:inherit;
  background:linear-gradient(135deg, var(--sand) 0%, #ddd0af 100%);}
.exhibit-art{position:absolute; inset:0;
  background:repeating-linear-gradient(135deg, var(--sand), var(--sand) 12px, #e2d6b4 12px, #e2d6b4 24px);
  transition:transform .6s cubic-bezier(.22,.61,.36,1);}
.exhibit-card:hover .exhibit-art{transform:scale(1.06);}
.exhibit-info{position:absolute; left:0; right:0; bottom:0; padding:24px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(14,28,42,0.6) 100%);}
.exhibit-info h3{color:var(--linen); font-size:26px;}
.exhibit-enter{display:block; margin-top:8px; font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--linen); opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s;}
.exhibit-card:hover .exhibit-enter{opacity:0.9; transform:translateY(0);}

/* ---------- Gallery grid (Gallery page, with enquire) ---------- */
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:20px;}
@media(max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.gallery-grid{grid-template-columns:1fr; grid-auto-rows:240px;}}
.gallery-piece{position:relative; overflow:hidden; grid-column:span 1; grid-row:span 1; background:var(--linen); border:1px solid var(--line); display:flex; flex-direction:column;}
.gallery-piece.span-2{grid-column:span 2;}
.gallery-piece.tall{grid-row:span 2;}
@media(max-width:560px){.gallery-piece.span-2,.gallery-piece.tall{grid-column:span 1; grid-row:span 1;}}
.gallery-art{flex:1; position:relative;
  background:repeating-linear-gradient(135deg, var(--sand), var(--sand) 10px, #e2d6b4 10px, #e2d6b4 20px);}
.gallery-info{padding:14px 16px; border-top:1px solid var(--line); background:var(--linen);}
.gallery-info h4{font-family:'Cormorant Garamond'; font-size:17px; font-weight:600;}
.gallery-info .by{font-size:12px; color:var(--teal); text-transform:uppercase; letter-spacing:0.05em; margin-top:2px;}
.gallery-info .price{font-size:13px; color:var(--slate); margin-top:6px;}
.gallery-info .btn{margin-top:10px; width:100%; text-align:center;}

/* ---------- Buyers page: how it works ---------- */
.how{padding:84px 0; border-bottom:1px solid var(--line);}
.how-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:40px;}
@media(max-width:800px){.how-grid{grid-template-columns:1fr;}}
.how-step .mark{font-family:'Cormorant Garamond'; font-style:italic; color:var(--brass); font-size:26px; font-weight:600;}
.how-step h3{margin-top:10px; font-size:20px;}
.how-step p{color:var(--slate); font-size:15px; margin-top:8px;}

/* ---------- For Artists ---------- */
.for-artists{padding:84px 0; border-bottom:1px solid var(--line); background:var(--sand);}
.for-artists-inner{text-align:center; max-width:520px; margin:0 auto;}
.for-artists-script{display:block; font-size:28px; margin-bottom:10px;}
.for-artists-inner h2{font-size:clamp(26px,4vw,36px); font-weight:500;}
.for-artists-inner p{color:var(--slate); margin:18px 0 28px; font-size:15px;}

/* ---------- Contact page ---------- */
.contact-wrap{padding:84px 0; display:grid; grid-template-columns:1fr 1fr; gap:64px;}
@media(max-width:800px){.contact-wrap{grid-template-columns:1fr; gap:36px;}}
.contact-card{border:1px solid var(--line); padding:32px; background:var(--sand);}
.contact-card h3{font-size:22px; margin-bottom:10px;}
.contact-card p{color:var(--slate); font-size:15px; margin-bottom:20px;}

/* ---------- Artist detail page (standalone page) ---------- */
.detail-topbar{padding:24px 0 0;}
.back{font-size:13px; text-transform:uppercase; letter-spacing:0.05em; color:var(--teal); text-decoration:none; display:inline-block;}

.detail-hero{
  position:relative; width:100%; height:56vw; min-height:340px; max-height:560px;
  margin-top:20px;
  background:linear-gradient(120deg, #b8c4c1 0%, #ddd0af 35%, #c9b98f 60%, #9fb0ae 100%);
  overflow:hidden;
}
.detail-hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,28,42,0.05) 0%, rgba(14,28,42,0.4) 100%);}
.detail-hero-content{position:absolute; inset:0; padding:36px; display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; text-align:right;}
.detail-hero-name{font-size:clamp(42px, 7vw, 80px); color:var(--linen); line-height:1; text-shadow:0 2px 18px rgba(0,0,0,0.25);}
.detail-hero-tag{color:var(--linen); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; opacity:0.9; margin-top:8px;}
.btn.ghost.light{border-color:var(--linen); color:var(--linen); background:transparent;}
.btn.ghost.light:hover{background:var(--linen); color:var(--navy);}

.detail-intro{max-width:640px; margin:0 auto; padding:60px 32px 68px; text-align:center;}
.detail-intro-name{font-size:clamp(32px,5vw,44px); display:block; margin-bottom:16px;}
.detail-intro-quote{color:var(--slate); font-size:17px; line-height:1.75;}
.detail-intro .contact-note{margin:28px auto 0; font-size:13px; color:var(--slate); border-left:2px solid var(--brass); padding-left:12px; max-width:420px; text-align:left;}

.detail-works{padding:0 0 84px;}
.work-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px;}
@media(max-width:800px){.work-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.work-grid{grid-template-columns:1fr;}}
.work-card{background:var(--linen); border:1px solid var(--line); padding:18px; display:flex; flex-direction:column; gap:12px;}
.work-photo{width:100%; aspect-ratio:1; background:repeating-linear-gradient(135deg, var(--sand), var(--sand) 8px, #e2d6b4 8px, #e2d6b4 16px);
  display:flex; align-items:center; justify-content:center; color:var(--slate); font-size:11px; text-transform:uppercase;}
.work-card h4{font-size:17px; font-family:'Cormorant Garamond'; font-weight:600;}
.work-card .price{font-size:14px; color:var(--teal);}
.work-card .btn{width:100%; text-align:center;}
.work-card .btn.ghost{border-color:var(--navy); color:var(--navy); background:transparent;}
.work-card .btn.ghost:hover{background:var(--navy); color:var(--linen);}
.work-card .ask-link{display:block; text-align:center; font-size:12px; color:var(--slate); text-decoration:underline; margin-top:2px;}

.reviews{margin-top:10px;}
.review{border-top:1px solid var(--line); padding-top:14px; margin-top:14px;}
.review .stars{color:var(--brass); font-size:13px; letter-spacing:2px;}
.review p{margin:6px 0 0; font-size:14px; color:var(--slate); font-style:italic; max-width:480px;}
.review .who{margin-top:4px; font-size:12px; color:var(--teal); text-transform:uppercase; letter-spacing:0.05em; font-style:normal;}

/* ---------- Footer ---------- */
footer{padding:56px 0; background:var(--navy-deep);}
.footer-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; align-items:center;}
footer .brand{font-size:19px; color:var(--linen);}
footer .brand em{color:var(--brass);}
footer p{color:rgba(247,244,236,0.6); font-size:13px; margin:0;}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; scroll-behavior:auto !important;}
}