/*
Theme Name: Louella's Artistry
Theme URI: https://louellasartistry.com/
Author: APX Design Services
Description: A bespoke portfolio theme for Louella's sculpture and painting practice.
Version: 1.0.3
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: louellas-artistry
*/

:root { --ink:#171713; --paper:#f1eee7; --warm:#c9a268; --line:rgba(23,23,19,.22); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; }
.site-main { overflow:hidden; }
.site-header { height:92px; padding:0 4vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:relative; z-index:2; }
.wordmark,h1,h2,blockquote,.signature { font-family:Georgia,'Times New Roman',serif; }
.wordmark { font-size:clamp(1.25rem,2vw,1.8rem); }
.site-nav { display:flex; gap:clamp(18px,3vw,48px); font-size:.76rem; text-transform:uppercase; letter-spacing:.16em; }
.site-nav a,.text-link { border-bottom:1px solid transparent; transition:border-color .2s; }
.site-nav a:hover,.site-nav a:focus-visible,.text-link:hover,.text-link:focus-visible { border-color:currentColor; }
.hero { min-height:780px; padding:7vw 4vw 5vw; display:grid; grid-template-columns:1.04fr .9fr auto; gap:5vw; align-items:center; }
.eyebrow { font-size:.7rem; text-transform:uppercase; letter-spacing:.2em; margin:0 0 25px; }
h1 { font-size:clamp(3.4rem,7vw,7.3rem); line-height:.88; letter-spacing:-.055em; font-weight:400; max-width:900px; margin:0; }
.dek { font-size:clamp(1rem,1.45vw,1.3rem); line-height:1.6; max-width:520px; margin:40px 0; }
.hero-links { display:flex; align-items:center; gap:30px; }
.button { display:inline-block; background:var(--ink); color:var(--paper); padding:17px 24px; text-transform:uppercase; font-size:.7rem; letter-spacing:.16em; }
.text-link { font-size:.74rem; text-transform:uppercase; letter-spacing:.16em; padding:10px 0; }
.hero-art { margin:0; width:min(100%,460px); justify-self:center; }
.hero-art img,.hero-art video { height:min(66vh,650px); object-fit:contain; background:#292724; }
.hero-art video { width:100%; display:block; }
.hero-art figcaption,.art-card figcaption { display:flex; justify-content:space-between; gap:14px; padding-top:12px; font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; }
.hero-art figcaption span:last-child,.art-card figcaption span:last-child { color:#6f6b62; text-align:right; }
.hero-side { writing-mode:vertical-rl; transform:rotate(180deg); text-transform:uppercase; letter-spacing:.2em; font-size:.65rem; }
.quote { background:var(--ink); color:var(--paper); padding:8vw 7vw; display:grid; grid-template-columns:1fr 5fr 1fr; gap:5vw; align-items:end; }
.quote p { margin:0; font-size:.7rem; text-transform:uppercase; letter-spacing:.16em; line-height:1.8; }
.quote p:last-child { text-align:right; }
.quote p span { color:#9a968d; }
blockquote { margin:0; font-size:clamp(2rem,4.3vw,4.5rem); line-height:1.08; font-weight:400; }
.portfolio { padding:10vw 4vw 11vw; }
.painting-section { background:#ded8cb; }
.section-heading { display:grid; grid-template-columns:1.4fr .7fr; gap:8vw; align-items:end; margin-bottom:6vw; }
h2 { font-size:clamp(3rem,6vw,6.5rem); line-height:.95; letter-spacing:-.045em; font-weight:400; margin:0; }
.section-heading>p { max-width:520px; line-height:1.7; font-size:1.05rem; margin:0; }
.gallery { display:grid; grid-template-columns:repeat(12,1fr); gap:5vw 2vw; }
.art-card { margin:0; grid-column:span 4; }
.art-card:nth-child(5n+2),.art-card:nth-child(5n+4) { transform:translateY(6vw); }
.art-image { display:block; overflow:hidden; background:#d7d1c6; }
.art-card img { aspect-ratio:4/5; object-fit:cover; transition:transform .6s cubic-bezier(.2,.6,.2,1),filter .3s; }
.art-card:hover img { transform:scale(1.025); filter:saturate(1.05); }
.sculpture-gallery .art-card:nth-child(8) { grid-column:span 8; }
.sculpture-gallery .art-card:nth-child(8) img { aspect-ratio:16/10; }
.painting-gallery .art-card:nth-child(1),.painting-gallery .art-card:nth-child(4) { grid-column:span 6; }
.painting-gallery .art-card:nth-child(1) img,.painting-gallery .art-card:nth-child(4) img { aspect-ratio:4/5; }
.about { background:#b99560; display:grid; grid-template-columns:1fr 1fr; }
.about>img { width:75%; height:auto; min-height:0; align-self:center; justify-self:center; object-fit:cover; object-position:center 25%; filter:saturate(.7); }
.about>div { padding:9vw 7vw; display:flex; flex-direction:column; justify-content:center; }
.about h2 { font-size:clamp(2.8rem,5vw,5.4rem); margin-bottom:40px; }
.about>div>p:not(.eyebrow):not(.signature) { font-size:1.05rem; line-height:1.75; max-width:620px; }
.signature { font-size:2.6rem; font-style:italic; margin:30px 0 0; }
.contact { padding:11vw 12vw; text-align:center; background:var(--paper); }
.contact h2 { margin-bottom:32px; }
.contact>p:nth-of-type(2) { max-width:720px; margin:0 auto 38px; line-height:1.7; font-size:1.08rem; }
.contact>a { font-family:Georgia,serif; font-size:clamp(1.3rem,2.3vw,2.3rem); border-bottom:1px solid; }
.site-footer { min-height:150px; padding:35px 4vw; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:end; border-top:1px solid var(--line); font-size:.7rem; text-transform:uppercase; letter-spacing:.13em; }
.site-footer a { font-family:Georgia,serif; font-size:1.25rem; text-transform:none; letter-spacing:0; }
.site-footer p { margin:0; text-align:center; }
.site-footer p:last-child { text-align:right; }
.screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:900px) {
  .site-header { height:auto; min-height:82px; align-items:flex-start; padding-top:22px; padding-bottom:20px; }
  .site-nav { gap:12px; flex-wrap:wrap; justify-content:flex-end; max-width:55%; font-size:.62rem; }
  .hero { grid-template-columns:1fr; padding-top:70px; }
  .hero-art { width:80%; margin-top:30px; }
  .hero-side { display:none; }
  .quote { grid-template-columns:1fr; }
  .quote p:last-child { text-align:left; }
  .section-heading { grid-template-columns:1fr; gap:25px; }
  .art-card { grid-column:span 6; transform:none!important; }
  .sculpture-gallery .art-card:nth-child(8) { grid-column:span 12; }
  .painting-gallery .art-card:nth-child(1),.painting-gallery .art-card:nth-child(4) { grid-column:span 6; }
  .about { grid-template-columns:1fr; }
  .about>img { min-height:0; }
}
@media (max-width:600px) {
  .site-header { flex-direction:column; gap:20px; }
  .site-nav { max-width:none; width:100%; justify-content:space-between; }
  .hero { min-height:auto; padding-bottom:80px; }
  h1 { font-size:3.45rem; }
  .hero-art { width:100%; }
  .hero-art img,.hero-art video { height:min(70vh,560px); }
  .quote,.portfolio { padding:80px 6vw; }
  .art-card,.sculpture-gallery .art-card:nth-child(8),.painting-gallery .art-card:nth-child(1),.painting-gallery .art-card:nth-child(4) { grid-column:span 12; }
  .art-card img,.sculpture-gallery .art-card:nth-child(8) img { aspect-ratio:4/5; }
  .about>img { min-height:0; }
  .about>div { padding:80px 7vw; }
  .contact { padding:90px 6vw; }
  .site-footer { grid-template-columns:1fr; gap:18px; text-align:center; }
  .site-footer p,.site-footer p:last-child { text-align:center; }
}