:root { --ink: #24211e; --paper: #f2eee6; --lime: #d5dd68; --pink: #bd5a4c; --orange: #d88649; --blue: #365485; --aqua: #95bbb1; }
body { background: var(--paper); }
.grain { opacity: .13; }
.site-header { height: 94px; background: var(--paper); border-bottom: 1px solid rgba(36,33,30,.32); }
.wordmark { font: 600 14px/11px var(--mono); letter-spacing: -.8px; transform: none; }.wordmark span { color: var(--ink); }
.main-nav { gap: 23px; }.main-nav a { padding: 5px 0; border: 0; border-radius: 0; font-weight: 400; color: var(--ink); }.main-nav a:hover, .main-nav a.active { background: transparent; color: var(--ink); border-bottom: 1px solid var(--ink); }
.contact-link { background: transparent; border: 0; border-radius: 0; padding: 5px 0; box-shadow: none; font-weight: 400; }.contact-link:hover { transform: none; box-shadow: none; }
.home-page { background: #e3e0d4; }.hero-grid { gap: 6vw; }.hero-copy { padding-left: 7vw; }.eyebrow { background: transparent; color: var(--ink); border-left: 2px solid var(--pink); padding: 2px 0 2px 10px; transform: none; }.hero-copy h1 { font-family: var(--serif); font-weight: 400; letter-spacing: -.045em; line-height: .9; }.hero-copy h1 em { color: var(--pink); font-family: var(--serif); }.round-link { background: var(--lime); border: 1px solid var(--ink); box-shadow: none; }.round-link:hover { box-shadow: none; transform: rotate(-5deg); }
.hero-art { border: 0; border-radius: 0; box-shadow: none; transform: rotate(1deg); }.hero-art:after { content: ''; position: absolute; inset: 9px; border: 1px solid rgba(255,255,255,.45); pointer-events: none; }.home-footer { border-top: 1px solid rgba(36,33,30,.35); }
.medium-page#sculpture { background: #e5ded4; }.medium-page#photography { background: #d7e1db; }.medium-page#printmaking { background: #e8d8aa; }.medium-page#drawing { background: #d9d6e4; }.medium-intro { border-bottom: 1px solid rgba(36,33,30,.35); }.medium-intro h2, .about-heading h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.055em; line-height: .76; }.section-no { width: auto; height: auto; color: var(--ink); background: transparent; border-radius: 0; justify-content: flex-start; }
.medium-tabs { gap: 0; margin: -12px 0 37px; }.medium-tabs a { background: transparent; border: 1px solid rgba(36,33,30,.42); border-right: 0; border-radius: 0; box-shadow: none; padding: 10px 15px; }.medium-tabs a:last-child { border-right: 1px solid rgba(36,33,30,.42); }.medium-tabs a:hover, .medium-tabs a.active { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: none; transform: none; }
.gallery { gap: 24px; }.gallery .work .art { border: 0; border-radius: 0; box-shadow: none; }.gallery .work:nth-child(2n) .art, .gallery .work:nth-child(3n) .art { border-radius: 0; transform: none; }.gallery .work:hover .art { box-shadow: none; transform: none; filter: saturate(1.08) contrast(1.03); }.gallery figcaption { font-weight: 400; padding-top: 12px; }.gallery figcaption::after { background: transparent; border: 0; border-radius: 0; padding: 0; color: var(--pink); }
.about-page { background: #ddd5cb; }.about-heading { border-bottom: 1px solid rgba(36,33,30,.35); }.about-art { border: 0; border-radius: 0; box-shadow: none; transform: rotate(-1deg); }.about-lead { font-family: var(--serif); font-weight: 400; line-height: .98; }.about-details { border-top: 1px solid rgba(36,33,30,.35); }.about-details a { font-weight: 400; }
footer { background: #292724; color: #f2eee6; } footer a { color: #d5dd68; }.work-viewer { border: 0; border-radius: 0; box-shadow: 0 18px 60px rgba(0,0,0,.28); }.viewer-image { background: #d6d0c4; }.viewer-info { background: var(--paper); }.viewer-info h2 { font-family: var(--serif); font-weight: 400; }.viewer-thumb { border-radius: 0; }.viewer-thumb.active { outline: 1px solid var(--ink); outline-offset: 3px; }
@media (max-width:760px) { .site-header { height: 76px; }.main-nav { border-top: 1px solid rgba(36,33,30,.35); border-bottom: 1px solid rgba(36,33,30,.35); }.main-nav a { width: auto; }.home-page { background: #e3e0d4; }.hero-copy { padding-left: 0; }.hero-art { box-shadow: none; }.round-link { width: 88px; height: 88px; }.medium-tabs { gap: 0; }.medium-tabs a { padding: 9px 9px; }.gallery .work .art { box-shadow: none; border-radius: 0; }.about-page { background: #ddd5cb; } }
@media (min-width: 761px) { .site-header { grid-template-columns: 1fr auto 1fr; }.menu-toggle { display: block; justify-self: center; border: 0; border-bottom: 1px solid var(--ink); padding: 5px 1px; background: transparent; color: var(--ink); cursor: pointer; font: 500 10px var(--mono); text-transform: uppercase; }.menu-toggle i { display: inline-block; width: 6px; height: 6px; border-right: 1px solid; border-bottom: 1px solid; transform: rotate(45deg); margin: 0 0 3px 6px; }.main-nav { position: absolute; top: 67px; left: 50%; z-index: 30; display: none; min-width: 142px; padding: 8px; transform: translateX(-50%); flex-direction: column; gap: 1px; background: var(--paper); border: 1px solid var(--ink); box-shadow: 4px 4px 0 rgba(36,33,30,.16); }.main-nav a { width: 100%; padding: 9px 10px; border: 0; }.main-nav a:hover, .main-nav a.active { border-bottom: 0; background: var(--ink); color: var(--paper); }.menu-toggle:hover + .main-nav, .menu-toggle:focus + .main-nav, .main-nav:hover, .main-nav:focus-within, .main-nav.open { display: flex; } }
.home-page { min-height: 150vh; position: relative; overflow: clip; }.home-page .hero-grid { position: sticky; top: 0; min-height: calc(100vh - 136px); }.home-copy { z-index: 2; }.home-title { position: relative; z-index: 3; margin: 0; font-family: var(--sans); font-size: clamp(104px, 14.8vw, 245px); font-weight: 700; line-height: .72; letter-spacing: -.105em; text-transform: uppercase; white-space: nowrap; }.home-title span { display: block; transform: translate3d(0, calc(var(--scroll-progress, 0) * -55px), 0); transition: transform .08s linear; }.home-title span:last-child { color: var(--blue); padding-left: .26em; transform: translate3d(calc(var(--scroll-progress, 0) * -9vw), calc(var(--scroll-progress, 0) * 55px), 0); }.hero-art { position: absolute; width: min(31vw, 450px); height: min(50vh, 560px); right: 5vw; bottom: 6vh; z-index: 1; transform: rotate(calc(1deg + var(--scroll-progress, 0) * -11deg)) translate3d(0, calc(var(--scroll-progress, 0) * 90px), 0); transition: transform .08s linear; }.home-page .round-link { right: 9%; bottom: 3%; z-index: 5; transform: translate3d(0, calc(var(--scroll-progress, 0) * -50px), 0) rotate(calc(var(--scroll-progress, 0) * 13deg)); }.home-page .home-footer { position: absolute; left: 3vw; right: 3vw; bottom: 20px; z-index: 4; opacity: calc(1 - var(--scroll-progress, 0) * .75); }.home-page .home-topline { position: relative; z-index: 5; }.home-page::after { content: 'SCROLL FOR STATEMENT'; position: absolute; right: 3vw; bottom: 66px; z-index: 5; font: 9px var(--mono); letter-spacing: .12em; writing-mode: vertical-rl; transform: rotate(180deg); opacity: calc(1 - var(--scroll-progress, 0) * 2); }
@media (max-width:760px) { .home-page { min-height: 125vh; }.home-page .hero-grid { min-height: calc(100vh - 118px); }.home-title { font-size: clamp(68px, 18vw, 118px); line-height: .73; letter-spacing: -.1em; }.home-title span:last-child { padding-left: .05em; }.hero-art { width: 63vw; height: 42vh; right: -7vw; bottom: 14vh; }.home-page .round-link { right: 2vw; bottom: 4vh; }.home-page .home-footer { left: 20px; right: 20px; bottom: 16px; }.home-page::after { right: 20px; bottom: 76px; font-size: 7px; } }
@media (min-width: 761px) { .menu-toggle { display: none; }.main-nav { position: static; display: flex; min-width: 0; padding: 0; transform: none; flex-direction: row; gap: 23px; background: transparent; border: 0; box-shadow: none; }.main-nav a { width: auto; padding: 5px 0; }.main-nav a:hover, .main-nav a.active { background: transparent; color: var(--ink); border-bottom: 1px solid var(--ink); } }
.hero-art { transition: opacity .42s cubic-bezier(.22,.61,.36,1), filter .42s cubic-bezier(.22,.61,.36,1), transform .08s linear; }.hero-art.is-changing { opacity: 0; filter: blur(4px); }
.artist-statement { display: none; min-height: 100vh; padding: 9vh 9vw; background: var(--pink); color: #fff9f0; }.home-page.active + .artist-statement { display: grid; grid-template-columns: .75fr 2fr; gap: 8vw; }.statement-label { display: flex; flex-direction: column; gap: 10px; font: 10px var(--mono); text-transform: uppercase; letter-spacing: .06em; }.statement-label span:first-child { width: 32px; height: 32px; display: grid; place-items: center; background: #fff9f0; color: var(--ink); border-radius: 50%; }.statement-copy { max-width: 720px; }.statement-copy h2 { margin: 0 0 44px; font: clamp(58px, 7.2vw, 112px)/.85 var(--serif); font-weight: 400; letter-spacing: -.06em; }.statement-copy h2 em { color: var(--lime); }.statement-copy p { max-width: 515px; margin: 0 0 19px; font: 17px/1.48 var(--sans); }.statement-link { display: inline-flex; gap: 42px; align-items: center; margin-top: 36px; color: var(--ink); background: var(--lime); border: 1px solid var(--ink); border-radius: 999px; padding: 13px 18px; text-decoration: none; font: 10px var(--mono); text-transform: uppercase; box-shadow: 4px 4px 0 var(--ink); }.statement-link:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
@media (max-width:760px) { .home-page.active + .artist-statement { display: block; padding: 70px 20px; min-height: 100vh; }.statement-label { flex-direction: row; align-items: center; margin-bottom: 44px; }.statement-copy h2 { font-size: 62px; margin-bottom: 34px; }.statement-copy p { font-size: 15px; }.statement-link { margin-top: 24px; } }