@import url('https://fonts.googleapis.com/css2?family=Verdana:wght@400;500;600;700&display=swap');

:root{
  --cream:#FFF6E3; --ink:#1A1713; --sold:#B3261E;
  --body:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --display:var(--body);
}
/* Dark theme (default). theme.js sets data-theme on <html>; the light overrides follow. */
body{
  --wall:var(--wd); --text:var(--cream); --textinv:var(--ink); --accent:var(--glow);
  --deep:color-mix(in srgb,var(--wall) 78%,#000); --lift:color-mix(in srgb,var(--wall) 86%,#fff);
  --soft:color-mix(in srgb,var(--text) 78%,var(--wall)); --line:color-mix(in srgb,var(--text) 20%,transparent);
}
html[data-theme="light"] body{
  --wall:var(--wl); --text:var(--ink); --textinv:var(--cream); --accent:#9B2A1B;
  --deep:color-mix(in srgb,var(--wall) 90%,#000); --lift:color-mix(in srgb,var(--wall) 55%,#fff);
}
/* Page colours: --wd dark wall, --wl light wall, --glow highlight */
body.t-home{--wd:#1F3A6E;--wl:#D8E3F5;--glow:#FFD95A}
body.t-hub{--wd:#5B2A1A;--wl:#F1DDD0;--glow:#F6B26B}
body.t-landscape{--wd:#1F4D3A;--wl:#D9EBDD;--glow:#E8D26A}
body.t-cityscape{--wd:#16294D;--wl:#D6E1F2;--glow:#FF8A5C}
body.t-still{--wd:#6A1E2C;--wl:#F2D9DC;--glow:#F7B267}
body.t-portrait{--wd:#44275F;--wl:#E6DAF1;--glow:#FFB8A1}
body.t-animal{--wd:#0F4C52;--wl:#D2ECEE;--glow:#FFD166}
body.t-misc{--wd:#3E3A33;--wl:#E6E3DC;--glow:#E9C46A}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--wall);color:var(--text);font:18px/1.7 var(--body)}
img{max-width:100%;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}

/* header */
header{padding:26px 0;background:var(--deep)}
header .wrap{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.brand{font-weight:700;font-size:1.5rem;text-decoration:none;letter-spacing:.01em}
nav{display:flex;gap:6px;flex-wrap:wrap}
nav a{text-decoration:none;font-weight:600;font-size:.95rem;padding:7px 14px;border-radius:99px}
nav a:hover,nav a[aria-current]{background:var(--text);color:var(--textinv)}

/* type */
h1,h2{font-family:var(--body);font-weight:700;margin:0 0 16px;line-height:1.08;letter-spacing:-.025em}
h1{font-size:clamp(3rem,8vw,6.2rem)}
h2{font-size:clamp(1.9rem,4vw,2.8rem)}
.intro,.lead{max-width:56ch;color:var(--soft);margin:0 0 30px}
.lead{font-size:1.2rem;max-width:36ch}

/* collection pages */
.top{padding:56px 0 40px}
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.tabs a{display:inline-block;padding:8px 20px;border:2px solid var(--text);border-radius:99px;text-decoration:none;font-weight:600;font-size:.95rem}
.tabs a:hover,.tabs a[aria-current]{background:var(--glow);border-color:var(--glow);color:var(--ink)}
.gallery{padding:24px 0 72px}

/* salon-style hang: paintings of every shape sit in staggered columns */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.grid:has(.work){display:block;columns:2;column-gap:48px}
.work{margin:0 0 64px;padding:0;break-inside:avoid}
.framed{background:var(--cream);padding:11px;box-shadow:10px 14px 0 rgba(0,0,0,.28)}
.framed img{width:100%;height:auto}
.works .framed img,.grid>a .framed img{aspect-ratio:4/5;object-fit:cover}
.work:nth-child(3n+2) .framed{transform:rotate(-1.2deg)}
.work:nth-child(3n) .framed{transform:rotate(.9deg)}

/* museum label */
.placard{display:block;background:var(--cream);color:var(--ink);width:88%;margin:-12px 0 0 auto;position:relative;padding:12px 16px;font-size:.88rem;line-height:1.5;box-shadow:4px 5px 0 rgba(0,0,0,.25)}
.placard strong{display:block;font-weight:700;font-size:1.15rem;line-height:1.25}
.sold{color:var(--sold);font-weight:700}
.nfs{color:#6b6459}
.enq{display:inline-block;margin-top:8px;font-weight:700;color:var(--ink);text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--sold)}
.enq:hover{color:var(--sold)}
.note{color:var(--soft);font-size:.95rem;margin:12px 0 0}
.grid>a{text-decoration:none;display:block}
.grid>a:hover .framed{transform:translateY(-4px)}
.framed{transition:transform .2s}

/* buttons */
.btn{display:inline-block;padding:13px 26px;background:var(--glow);color:var(--ink);text-decoration:none;font-weight:700;border:2px solid var(--glow);border-radius:99px}
.btn:hover{background:var(--text);border-color:var(--text);color:var(--textinv)}
.btn.alt{background:transparent;color:var(--text);border-color:var(--text)}
.btn.alt:hover{background:var(--text);color:var(--textinv)}
.btns{display:flex;gap:14px;flex-wrap:wrap}

/* more collections + cta */
.more{padding:56px 0 32px;background:var(--deep)}
.more h2{font-size:1.9rem}
.cta,.band{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;background:var(--deep);padding:30px 34px;border-radius:6px;margin:0 0 56px}
.cta h2,.band h2{font-size:1.8rem;margin:0}
.cta p,.band p{margin:6px 0 0;color:var(--soft);max-width:52ch}

/* home */
.hero{padding:56px 0 96px}
.hero .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}
.hero h1{font-size:clamp(2.8rem,6.4vw,5.4rem)}
.hero .framed{transform:rotate(2.2deg);padding:16px}
.hero .placard{display:inline-block;width:auto;margin:-14px 0 0 24px}
section{padding:84px 0}
section.light{background:var(--lift)}
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.works .work a{text-decoration:none;display:block}
.works .work{margin:0}
.works .work:nth-child(n) .framed{transform:none}
.works .work:nth-child(n) a:hover .framed{transform:translateY(-4px)}
section p.more{margin:44px 0 0;padding:0;background:none}

/* commissions */
.price{width:100%;max-width:640px;border-collapse:collapse;margin:0 0 22px;background:var(--deep);border-radius:6px}
.price caption{text-align:left;font-weight:700;font-size:1.4rem;padding:0 0 10px}
.price th,.price td{text-align:left;padding:13px 20px;border-bottom:1px solid var(--line);font-weight:500}
.price td{text-align:right;font-weight:700;color:var(--accent)}
section#commissions .note{max-width:68ch}

/* how to buy */
.steps{counter-reset:s;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.steps li{counter-increment:s;background:var(--cream);color:var(--ink);padding:22px;border-radius:6px 6px 40px 6px}
.steps li::before{content:counter(s);font-weight:700;font-size:2.4rem;color:var(--sold);display:block;line-height:1;margin-bottom:10px}
.steps b{display:block;margin-bottom:4px;font-size:1.1rem}
.steps span{font-size:.97rem;color:#4a443b}

/* about */
.about{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.about p{margin:0 0 1.1em;max-width:60ch}
blockquote{margin:0 0 30px;padding:24px 26px;background:var(--deep);border-radius:6px}
blockquote p{font-size:.92rem;line-height:1.65;margin:0 0 12px}
blockquote footer{padding:0;font-size:.92rem;color:var(--accent);background:none}

/* contact + footer */
.contact a.big{font-weight:700;font-size:clamp(1.5rem,4.2vw,2.8rem);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:4px;text-underline-offset:8px;word-break:break-all}
.contact p{margin:0 0 24px}
.social{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.social a{padding:8px 20px;border:2px solid var(--text);border-radius:99px;text-decoration:none;font-weight:600}
.social a:hover{background:var(--text);color:var(--textinv)}
footer.site{padding:30px 0 44px;font-size:.9rem;color:var(--soft);background:var(--deep)}

/* theme switch */
.theme-toggle{font:inherit;font-weight:600;font-size:.95rem;padding:7px 14px;border:2px solid var(--text);border-radius:99px;background:transparent;color:var(--text);cursor:pointer}
.theme-toggle:hover{background:var(--text);color:var(--textinv)}

/* portraits hub band sits on a plain section */
section>.wrap>.band{margin:0}

@media (max-width:860px){
  .hero .wrap,.about{grid-template-columns:1fr;gap:40px}
  .works,.grid{grid-template-columns:1fr;gap:44px}
  .grid:has(.work){columns:1}
  .steps{grid-template-columns:1fr 1fr}
  section{padding:60px 0}
  .work .framed{transform:none!important}
}
@media (max-width:480px){.steps{grid-template-columns:1fr}}