:root { --ink: #20211e; --paper: #f3efe7; --orange: #d95f3e; --blue: #315c5e; --line: rgba(32,33,30,.22); --display: 'Playfair Display', Georgia, serif; --sans: 'Work Sans', sans-serif; --mono: 'DM Mono', monospace; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 15px; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
.site-header { align-items: center; display: flex; justify-content: space-between; padding: 28px 5.5vw; }
.brand { align-items: center; display: flex; font-family: var(--display); font-size: 15px; line-height: .95; }
.brand em { color: var(--orange); font-weight: 500; }
.brand-mark { align-items: center; border: 1px solid var(--ink); border-radius: 50%; display: flex; font-size: 22px; height: 39px; justify-content: center; margin-right: 10px; width: 39px; }
nav { display: flex; gap: 34px; margin-left: 12%; } nav a, .contact-link, footer { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; } nav a:hover, .contact-link:hover, .text-link:hover { color: var(--orange); }
.contact-link span, .text-link span { color: var(--orange); font-size: 18px; margin-left: 8px; }
.hero { display: grid; gap: 8vw; grid-template-columns: .9fr 1.1fr; margin: 7vh auto 0; max-width: 1280px; padding: 0 5.5vw 12vh; }
.hero-copy { align-self: center; max-width: 425px; padding-bottom: 4vw; }
.eyebrow, .art-number { color: var(--blue); font-family: var(--mono); font-size: 10px; letter-spacing: .09em; margin: 0 0 21px; text-transform: uppercase; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.04; margin: 0; } h1 { font-size: clamp(52px, 7vw, 100px); letter-spacing: -.03em; } h2 { font-size: clamp(43px, 5.2vw, 70px); letter-spacing: -.025em; } h3 { font-size: 22px; }
h1 i, h2 i { color: var(--orange); font-weight: 500; } .intro { font-size: 16px; margin: 34px 0 32px; max-width: 340px; } .text-link { border-bottom: 1px solid var(--ink); display: inline-flex; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; padding-bottom: 8px; text-transform: uppercase; }
.hero-image-wrap { transform: rotate(2deg); } .hero-image { aspect-ratio: 4 / 5; background: #d6b2a1; overflow: hidden; position: relative; } .hero-image img, .art-image img { display: block; height: 100%; object-fit: cover; transition: transform .7s ease; width: 100%; } .hero-image:hover img, .art-card:hover img { transform: scale(1.04); }
.image-watermark:after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='100' viewBox='0 0 180 100'%3E%3Ctext x='0' y='30' fill='white' fill-opacity='.62' font-family='monospace' font-size='10' letter-spacing='2'%3EANNIE'S ART STUDIO%3C/text%3E%3C/svg%3E"); background-size: 180px 100px; content: ''; height: 145%; left: -22%; opacity: .8; pointer-events: none; position: absolute; top: -22%; transform: rotate(-25deg); width: 145%; }
.hero-caption { display: flex; font-family: var(--mono); font-size: 10px; justify-content: space-between; margin-top: 15px; text-transform: uppercase; } .hero-caption span:last-child { color: var(--blue); }
.collection { background: #dce3df; padding: 13vh 5.5vw 14vh; } .section-heading { display: flex; justify-content: space-between; margin: auto; max-width: 1180px; } .section-note { align-self: flex-end; max-width: 270px; }
.carousel { margin: 70px auto 0; max-width: 1180px; overflow: hidden; } .carousel-track { display: flex; gap: 28px; transition: transform .6s cubic-bezier(.2,.8,.2,1); } .art-card { flex: 0 0 calc(50% - 14px); min-width: 0; } .art-image { aspect-ratio: 1 / 1.12; background: #eee; overflow: hidden; position: relative; } .art-meta { align-items: flex-start; display: flex; justify-content: space-between; padding-top: 17px; } .art-number, .art-size { font-size: 9px; margin-bottom: 5px; } .art-size { color: var(--blue); font-family: var(--mono); text-transform: uppercase; }
.carousel-controls { align-items: center; display: flex; gap: 40px; margin-top: 47px; } .progress { background: var(--line); height: 1px; width: 100%; } .progress span { background: var(--orange); display: block; height: 2px; transition: width .5s ease; width: 25%; } .control-buttons { display: flex; gap: 9px; } button { background: transparent; border: 1px solid var(--ink); border-radius: 50%; cursor: pointer; font-size: 20px; height: 44px; transition: background .2s, color .2s; width: 44px; } button:hover { background: var(--orange); border-color: var(--orange); color: white; }
.about { align-items: center; display: grid; gap: 7vw; grid-template-columns: .5fr 1fr 1fr; margin: auto; max-width: 1280px; padding: 15vh 5.5vw; } .about-stamp { align-items: center; border: 1px solid var(--orange); border-radius: 50%; color: var(--orange); display: flex; font-family: var(--display); font-size: 18px; height: 125px; justify-content: center; line-height: 1; text-align: center; transform: rotate(-12deg); width: 125px; } .about-copy { max-width: 310px; } .about-copy p { font-size: 16px; margin: 0 0 27px; }
footer { border-top: 1px solid var(--line); display: flex; justify-content: space-between; margin: 0 5.5vw; padding: 22px 0 28px; } footer a { color: var(--orange); }
@media (max-width: 700px) { .site-header { padding: 20px 6vw; } nav { display: none; } .hero { display: flex; flex-direction: column; margin-top: 6vh; padding-bottom: 11vh; } .hero-copy { padding: 0; } .hero-image-wrap { margin-top: 5vh; } .section-heading, .about { display: flex; flex-direction: column; gap: 28px; } .section-note { align-self: auto; } .collection { padding: 10vh 6vw 11vh; } .carousel { margin-top: 45px; } .art-card { flex-basis: 86%; } .carousel-controls { gap: 16px; margin-top: 34px; } .about { padding: 11vh 6vw; } .about-stamp { align-self: flex-end; margin-bottom: 5px; } footer { align-items: flex-start; flex-direction: column; gap: 13px; margin: 0 6vw; } }