@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;1,9..144,400&family=Space+Grotesk:wght@400;500;700&family=Permanent+Marker&display=swap');

:root{
  --bg:#0a0a0a; --bg-alt:#131313;
  --fg:#f2f2f0; --fg-muted:#95958e;
  --lime:#8ace00; --gold-1:#b8860b; --gold-2:#f4d160;
  --error:#e2665c;
  --line:rgba(255,255,255,0.09);
  --font-display:'Fraunces',serif;
  --font-body:'Space Grotesk',sans-serif;
  --font-script:'Permanent Marker',cursive;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--fg);font-family:var(--font-body);line-height:1.55;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.eyebrow{font-size:0.72rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--gold-2);}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:1.4rem clamp(1.2rem,4vw,3.5rem);background:linear-gradient(to bottom,rgba(10,10,10,0.92),transparent);
  transition:background .4s ease,padding .4s ease;}
.nav.scrolled{background:rgba(10,10,10,0.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding-top:.9rem;padding-bottom:.9rem;}
.nav-logo{font-family:var(--font-script);font-size:1.6rem;color:var(--lime);}
.nav-links{display:flex;gap:2.2rem;list-style:none;}
.nav-links a{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-muted);position:relative;padding-bottom:4px;}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--lime);transition:width .3s ease;}
.nav-links a:hover{color:var(--fg);}
.nav-links a:hover::after{width:100%;}
.nav-cta{border:1px solid var(--gold-2);color:var(--gold-2);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.6rem 1.3rem;border-radius:2px;transition:all .3s ease;white-space:nowrap;}
.nav-cta:hover{background:var(--gold-2);color:#0a0a0a;}
.nav-toggle{display:none;background:none;border:none;color:var(--fg);font-size:1.5rem;cursor:pointer;}

/* HERO */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;position:relative;
  padding:6rem clamp(1.2rem,6vw,6rem) 0;
  background:radial-gradient(circle at 18% 25%,rgba(138,206,0,.10),transparent 45%),
             radial-gradient(circle at 82% 70%,rgba(244,209,96,.10),transparent 45%),var(--bg);}
.hero h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2.5rem,7vw,5.2rem);line-height:1.08;max-width:17ch;margin-top:1.2rem;}
.hero h1 em{font-style:italic;font-weight:300;color:var(--lime);}
.hero-sub{margin-top:1.5rem;max-width:40ch;color:var(--fg-muted);font-size:1rem;}
.hero-stroke{margin:2rem 0 2.4rem;width:min(400px,60vw);}
.hero-stroke path{stroke-dasharray:600;stroke-dashoffset:600;animation:draw 1.6s ease forwards .3s;}
@keyframes draw{to{stroke-dashoffset:0;}}
.hero-actions{display:flex;gap:1.1rem;flex-wrap:wrap;}
.btn{font-family:var(--font-body);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.95rem 1.8rem;border-radius:2px;transition:all .3s ease;display:inline-block;}
.btn-primary{background:var(--lime);color:#0a0a0a;}
.btn-primary:hover{background:#a3e300;transform:translateY(-2px);}
.btn-ghost{border:1px solid var(--line);color:var(--fg);}
.btn-ghost:hover{border-color:var(--gold-2);color:var(--gold-2);}
button.btn{cursor:pointer;border:none;font:inherit;}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;}
.hero-scroll{margin:3.4rem 0 2.2rem;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-muted);
  display:flex;align-items:center;gap:.7rem;}
.hero-scroll::after{content:'';width:1px;height:30px;background:var(--fg-muted);animation:scrolldrop 1.8s ease infinite;}
@keyframes scrolldrop{0%{transform:scaleY(0);transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}51%{transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}

/* MARQUEE */
.marquee-wrap{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:1.1rem 0;background:var(--bg-alt);}
.marquee{display:flex;width:max-content;animation:scrollx 42s linear infinite;}
.marquee span{font-family:var(--font-display);font-style:italic;font-size:1.25rem;color:var(--fg-muted);padding:0 2rem;white-space:nowrap;}
.marquee span.accent{color:var(--gold-2);font-style:normal;font-family:var(--font-body);font-size:.8rem;letter-spacing:.2em;}
@keyframes scrollx{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* SECTION shared */
.section{padding:clamp(4.5rem,10vw,7.5rem) clamp(1.2rem,6vw,6rem);}
.section-head{max-width:640px;margin-bottom:3.2rem;}
.section-head .eyebrow{display:block;margin-bottom:.9rem;}
.section-head h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,4vw,3rem);}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease;}
.reveal.in{opacity:1;transform:none;}

/* GALLERY */
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;}
.art-card{position:relative;border-radius:3px;overflow:hidden;grid-column:span 1;aspect-ratio:4/5;display:block;}
.art-card.wide{grid-column:span 2;}
@media (min-width:820px){
  .gallery-grid{grid-template-columns:repeat(6,1fr);gap:1.1rem;}
  .art-card{grid-column:span 2;}
  .art-card.wide{grid-column:span 4;}
  .art-card.tall{grid-row:span 2;aspect-ratio:4/5.6;}
}
.art-surface{position:absolute;inset:0;transition:transform .6s ease;}
.art-card:hover .art-surface{transform:scale(1.045);}
/* placeholder textures — replace with real photos of your paintings (see README notes at bottom of index.html) */
.art-card:nth-of-type(1) .art-surface{background:conic-gradient(from 120deg at 30% 30%,#8ace00,#0a0a0a 40%,#f4d160 70%,#0a0a0a);}
.art-card:nth-of-type(2) .art-surface{background:radial-gradient(circle at 70% 30%,#f4d160,transparent 55%),radial-gradient(circle at 30% 75%,#8ace00,transparent 50%),#111;}
.art-card:nth-of-type(3) .art-surface{background:linear-gradient(135deg,#0a0a0a 0%,#2b2b2b 40%,#b8860b 70%,#0a0a0a 100%);}
.art-card:nth-of-type(4) .art-surface{background:conic-gradient(from 200deg at 60% 40%,#111,#8ace00 30%,#111 55%,#f4d160 80%,#111);}
.art-card:nth-of-type(5) .art-surface{background:radial-gradient(circle at 50% 20%,#f4d160 0%,transparent 40%),linear-gradient(160deg,#151515,#0a0a0a);}
.art-card:nth-of-type(6) .art-surface{background:conic-gradient(from 40deg at 40% 60%,#8ace00,#0a0a0a 35%,#8ace00 60%,#0a0a0a);}
.art-card:nth-of-type(7) .art-surface{background:linear-gradient(200deg,#0a0a0a,#3a2f06 45%,#f4d160 75%,#0a0a0a);}
.art-card:nth-of-type(8) .art-surface{background:radial-gradient(circle at 25% 25%,#8ace00,transparent 45%),radial-gradient(circle at 75% 75%,#f4d160,transparent 45%),#0d0d0d;}
.art-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:1.1rem;
  background:linear-gradient(to top,rgba(0,0,0,.88),transparent 55%);opacity:0;transition:opacity .35s ease;}
.art-card:hover .art-overlay,.art-card:focus-visible .art-overlay{opacity:1;}
.art-title{font-family:var(--font-display);font-size:1.02rem;}
.art-meta{font-size:.72rem;color:var(--gold-2);letter-spacing:.05em;margin-top:.25rem;}

/* ABOUT */
.about{display:grid;grid-template-columns:1fr;gap:2.8rem;align-items:center;}
@media (min-width:860px){.about{grid-template-columns:.9fr 1.1fr;}}
.about-portrait{aspect-ratio:4/5;border-radius:4px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  text-align:center;padding:2rem;font-family:var(--font-script);color:var(--fg-muted);font-size:1.3rem;
  background:radial-gradient(circle at 30% 20%,rgba(138,206,0,.3),transparent 60%),linear-gradient(160deg,#151515,#0a0a0a);}
.about-copy p{color:var(--fg-muted);margin-bottom:1.1rem;max-width:56ch;}
.about-copy p:first-of-type{color:var(--fg);font-family:var(--font-display);font-size:1.3rem;line-height:1.5;}
.about-signature{margin-top:1.4rem;font-family:var(--font-script);color:var(--lime);font-size:1.6rem;}

/* PROCESS */
.process-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;}
.process-item{border-top:1px solid var(--line);padding-top:1.3rem;}
.process-icon{width:32px;height:32px;margin-bottom:1rem;color:var(--lime);}
.process-item h3{font-family:var(--font-display);font-weight:400;font-size:1.12rem;margin-bottom:.4rem;}
.process-item p{color:var(--fg-muted);font-size:.87rem;}

/* CTA band */
.cta-band{text-align:center;padding:clamp(4rem,9vw,6.5rem) 1.5rem;background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.cta-band h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.8rem,4.4vw,3.1rem);max-width:20ch;margin:1rem auto 1.4rem;}
.cta-band p{color:var(--fg-muted);max-width:46ch;margin:0 auto 2rem;}

/* CONTACT PAGE */
.contact-wrap{padding:clamp(7rem,12vw,9rem) clamp(1.2rem,6vw,6rem) clamp(4rem,8vw,6rem);}
.contact-intro{max-width:640px;margin-bottom:3.5rem;}
.contact-intro h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2.2rem,5vw,3.6rem);margin-top:.8rem;}
.contact-intro p{color:var(--fg-muted);margin-top:1.2rem;max-width:52ch;}
.contact-grid{display:grid;grid-template-columns:1fr;gap:3rem;}
@media (min-width:900px){.contact-grid{grid-template-columns:1.2fr .8fr;gap:4rem;}}

.form-row{display:grid;grid-template-columns:1fr;gap:1.4rem;}
@media (min-width:600px){.form-row.two{grid-template-columns:1fr 1fr;}}
.form-field{margin-bottom:1.4rem;}
.form-field label{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:.5rem;}
.form-field input,.form-field textarea{
  width:100%;background:var(--bg-alt);border:1px solid var(--line);color:var(--fg);
  padding:.9rem 1rem;font-family:var(--font-body);font-size:.95rem;border-radius:2px;
  transition:border-color .3s ease;}
.form-field input:focus,.form-field textarea:focus{outline:none;border-color:var(--lime);}
.form-field textarea{resize:vertical;min-height:140px;}
.form-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-submit{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-top:.5rem;}
.form-status{font-size:.85rem;max-width:34ch;}
.form-status.success{color:var(--lime);}
.form-status.error{color:var(--error);}

.info-panel{display:flex;flex-direction:column;gap:1.6rem;}
.info-item{display:flex;gap:1rem;align-items:flex-start;padding-top:1.4rem;border-top:1px solid var(--line);}
.info-icon{width:22px;height:22px;color:var(--lime);flex-shrink:0;margin-top:.15rem;}
.info-item h3{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:.35rem;}
.info-item p,.info-item a{font-family:var(--font-display);font-size:1.15rem;color:var(--fg);}
.info-item a:hover{color:var(--gold-2);}

/* FOOTER */
footer{padding:clamp(3rem,6vw,4.5rem) clamp(1.2rem,6vw,6rem) 2rem;}
.footer-top{display:flex;flex-wrap:wrap;gap:2.5rem;justify-content:space-between;padding-bottom:2.4rem;border-bottom:1px solid var(--line);}
.footer-logo{font-family:var(--font-script);font-size:1.8rem;color:var(--lime);}
.footer-blurb{color:var(--fg-muted);font-size:.82rem;margin-top:.6rem;max-width:26ch;}
.footer-links{display:flex;gap:2.1rem;flex-wrap:wrap;list-style:none;align-content:flex-start;}
.footer-links a{font-size:.78rem;color:var(--fg-muted);letter-spacing:.08em;text-transform:uppercase;}
.footer-links a:hover{color:var(--gold-2);}
.footer-social{display:flex;gap:.9rem;align-content:flex-start;height:36px;}
.footer-social a{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s ease;}
.footer-social a:hover{border-color:var(--lime);color:var(--lime);}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem;padding-top:1.5rem;font-size:.74rem;color:var(--fg-muted);}

a:focus-visible,button:focus-visible{outline:2px solid var(--lime);outline-offset:3px;}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}

@media (max-width:760px){
  .nav-links,.nav-cta{display:none;}
  .nav-toggle{display:block;}
  .nav-links.open{display:flex;flex-direction:column;position:fixed;inset:0;background:var(--bg);align-items:center;justify-content:center;gap:2rem;z-index:99;}
  .nav-links.open a{font-size:1.15rem;}
}