@font-face {
font-family: "Geist Sans";
src: url(//svgallery.art/wp-content/themes/art-gallery-theme/assets/fonts/geist-400.woff2) format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Geist Sans";
src: url(//svgallery.art/wp-content/themes/art-gallery-theme/assets/fonts/geist-500.woff2) format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Geist Sans";
src: url(//svgallery.art/wp-content/themes/art-gallery-theme/assets/fonts/geist-700.woff2) format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
:root { --ink: #1b1712;
--paper: #F2F0EF;
--paper-deep: #F2F0EF;
--white: #ffffff;
--accent: #F38D11;
--line: rgba(27, 23, 18, 0.16);
--muted: #6b655a; --display: "Geist Sans", -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
--serif: "Geist Sans", -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
--sans: "Geist Sans", -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
--space: clamp(1.25rem, 3vw, 3rem);
--page: min(1440px, calc(100% - (var(--space) * 2)));
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth; overflow-x: clip;
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
body.menu-open {
overflow: hidden;
}
a {
color: inherit;
text-decoration: none;
}
a:hover,
a:focus-visible {
color: var(--accent);
}
::selection {
background: var(--accent);
color: var(--white);
}
img {
display: block;
max-width: 100%;
height: auto;
}
button,
input,
select,
textarea {
font: inherit;
}
.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;
}
.skip-link:focus,
.skip-link:focus-visible {
position: fixed;
top: 1rem;
left: 1rem;
z-index: 100;
width: auto;
height: auto;
margin: 0;
padding: 0.75rem 1.25rem;
clip: auto;
overflow: visible;
background: var(--ink);
color: var(--white);
text-decoration: none;
}
.site-shell {
width: var(--page);
margin-inline: auto;
}
.site-header {
--header-stick-offset: calc(1.2rem + clamp(2rem, 4.5vw, 3.25rem) + clamp(0.75rem, 1.5vw, 1.25rem));
position: sticky;
top: calc(-1 * var(--header-stick-offset));
z-index: 20;
width: var(--page);
margin-inline: auto;
padding: 1.2rem 0;
}
.site-header::after {
position: absolute;
inset: 0 calc(50% - 50vw);
z-index: -1;
background: var(--paper);
border-bottom: 1px solid var(--line);
content: "";
}
.header-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 1.5rem;
row-gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.site-brand {
flex: 1 1 auto;
font-family: var(--display);
font-size: clamp(2rem, 4.5vw, 3.25rem);
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1;
text-transform: none;
}
.site-brand span {
display: block;
}
.header-bar {
display: flex;
flex: 1 0 100%;
flex-wrap: wrap;
align-items: center;
gap: 1rem 2.25rem;
}
.site-logo {
flex: 1 1 auto;
line-height: 0;
}
.site-logo .custom-logo-link {
display: inline-block;
}
.site-logo img {
width: auto;
max-height: 65px;
}
.main-nav ul {
display: flex;
gap: 1.8rem; align-items: baseline;
padding: 0;
margin: 0;
list-style: none;
}
.main-nav a,
.search-toggle,
.header-bids-link {
font-size: 1.1rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.main-nav a {
padding-bottom: 0.25rem;
border-bottom: 1px solid transparent;
transition: border-color 150ms ease, color 150ms ease;
}
.main-nav a:hover,
.main-nav a:focus-visible {
border-bottom-color: currentColor;
}
.main-nav .current-menu-item > a,
.main-nav .current-menu-ancestor > a,
.main-nav .current_page_item > a,
.main-nav .current_page_parent > a,
.main-nav a[aria-current="page"] {
color: var(--accent); border-bottom: 3px solid currentColor;
} .main-nav li {
position: relative;
}
.main-nav .menu-item-has-children {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.submenu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.25rem;
margin: 0;
border: 0;
background: none;
color: inherit;
line-height: 0;
cursor: pointer;
}
.submenu-chevron {
width: 1.15rem;
height: 1.15rem;
transition: transform 150ms ease;
}
.submenu-toggle[aria-expanded="true"] .submenu-chevron {
transform: rotate(180deg);
}
.submenu-toggle:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
} .footer-column .submenu-toggle {
display: none;
}
.main-nav .sub-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 30;
display: flex;
flex-direction: column;
gap: 0;
min-width: 13rem;
margin: 0;
padding: 0.5rem 0;
list-style: none;
background: var(--paper);
border: 1px solid var(--line);
box-shadow: 0 20px 44px rgba(27, 23, 18, 0.14);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
}
.main-nav .menu-item-has-children:hover > .sub-menu,
.main-nav .menu-item-has-children.is-expanded > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.main-nav .sub-menu li {
margin: 0;
}
.main-nav .sub-menu a {
display: block;
padding: 0.55rem 1.3rem;
border-bottom: 0;
font-size: 0.82rem;
letter-spacing: 0.1em;
white-space: nowrap;
}
.main-nav .sub-menu a:hover,
.main-nav .sub-menu a:focus-visible {
color: var(--accent);
border-bottom: 0;
} .artist-listing-page .page-title {
max-width: none;
} .artist-listing-intro {
max-width: 62ch;
margin: 0 0 clamp(2rem, 4vw, 3rem);
color: var(--muted);
font-size: 1.05rem;
line-height: 1.7;
}
.artist-listing-intro p {
margin: 0 0 1rem;
}
.header-bids-link {
margin-left: auto;
}
.header-icon-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.6rem;
height: 2.6rem;
border: 1px solid var(--line);
border-radius: 50%;
color: var(--ink);
transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.header-icon-link + .header-icon-link {
margin-left: 0.6rem;
}
.header-icon-link:hover,
.header-icon-link:focus-visible {
color: var(--accent);
border-color: var(--accent);
}
.auth-icon {
width: 1.15rem;
height: 1.15rem;
flex-shrink: 0;
}
.search-toggle {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0;
border: 0;
background: transparent;
color: var(--ink);
cursor: pointer;
}
.search-icon {
width: 1.05em;
height: 1.05em;
flex-shrink: 0;
}
.search-toggle:hover,
.search-toggle:focus-visible {
color: var(--accent);
}
.header-search {
border-top: 1px solid var(--line);
margin-top: 1.2rem;
padding-top: 1.2rem;
}
.header-search[hidden] {
display: none;
}
.header-search-form {
display: flex;
gap: 1rem;
align-items: center;
}
.header-search-form input[type="search"] {
flex: 1;
padding: 0.65rem 0;
border: 0;
border-bottom: 1px solid var(--line);
background: transparent;
color: var(--ink);
font-family: var(--serif);
font-size: clamp(1.1rem, 2vw, 1.5rem);
}
.header-search-form input[type="search"]:focus {
outline: none;
border-bottom-color: var(--ink);
}
.header-search-form button {
padding: 0;
border: 0;
background: transparent;
color: var(--ink);
cursor: pointer;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.header-search-form button:hover,
.header-search-form button:focus-visible {
color: var(--accent);
}
.menu-toggle {
display: none;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
background: transparent;
color: var(--ink);
cursor: pointer;
line-height: 0;
}
.menu-toggle-icon {
display: block;
}
.menu-toggle-line {
transform-origin: center;
transition: transform 200ms ease, opacity 150ms ease;
}
.menu-toggle[aria-expanded="true"] .menu-toggle-line--top {
transform: translateY(6px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle-line--mid {
opacity: 0;
}
.menu-toggle[aria-expanded="true"] .menu-toggle-line--bottom {
transform: translateY(-6px) rotate(-45deg);
}
.hero { --accent: #e8c9b8;
position: relative;
display: flex;
min-height: min(70vh, 720px);
margin-bottom: clamp(4rem, 3vw, 8rem);
padding: clamp(1.75rem, 3.5vw, 3rem) 0;
overflow: hidden;
color: var(--white);
background: var(--ink);
}
.hero-media {
position: absolute;
inset: 0;
z-index: 0;
}
.hero-media img,
.hero-media .art-placeholder {
width: 100%;
height: 100%;
min-height: 0;
object-fit: cover;
}
.hero::after {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
to top,
rgba(15, 15, 15, 0.88) 0%,
rgba(15, 15, 15, 0.4) 45%,
rgba(15, 15, 15, 0.12) 100%
);
content: "";
}
.hero-inner {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 2rem;
width: var(--page);
margin-inline: auto;
}
.hero-top {
display: flex;
justify-content: flex-end;
}
.hero-current {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.6rem;
text-align: right;
} .hero-current .exhibition-badge--present {
border-color: var(--paper);
background: var(--paper);
color: #8c2f24;
}
.hero-current-title {
font-family: var(--serif);
font-size: clamp(1.1rem, 1.5vw, 1.4rem);
}
.hero-current-dates {
font-size: 0.68rem;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.8;
}
.hero-content {
max-width: 42rem;
}
.hero-content .eyebrow {
color: var(--white);
opacity: 0.85;
}
.eyebrow,
.section-kicker,
.meta-label {
margin: 0 0 1.25rem;
color: var(--accent);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.hero h1,
.page-title,
.single-title {
max-width: 11ch;
margin: 0;
font-family: var(--display);
font-size: clamp(3.5rem, 8vw, 7.5rem);
font-weight: 500;
letter-spacing: -0.02em;
line-height: 0.92;
}
.single-post .single-title,
.single-artist .single-title,
.single-artwork .single-title,
.single-exhibition .single-title,
.about-page .single-title,
.contact-page .single-title {
max-width: 18ch;
font-size: clamp(2.4rem, 4.5vw, 4rem);
letter-spacing: -0.015em;
line-height: 1;
}
.hero h1 em {
color: var(--accent);
font-weight: 400;
}
.hero h1 {
margin-bottom: 1.5rem;
}
.hero-links {
display: flex;
flex-wrap: wrap;
gap: 1.25rem 2.5rem;
margin-top: 2rem;
}
.hero-intro {
max-width: 34rem;
margin: 0;
font-family: var(--serif);
font-size: clamp(1.15rem, 1.8vw, 1.6rem);
line-height: 1.3;
} .hero-slider {
padding: 0;
} .hero-slider::after {
content: none;
}
.hero-slides {
position: absolute;
inset: 0;
z-index: 0;
}
.hero-slide {
position: absolute;
inset: 0;
display: flex;
padding: clamp(1.75rem, 3.5vw, 3rem) 0;
opacity: 0;
visibility: hidden;
transition: opacity 400ms ease, visibility 400ms ease;
}
.hero-slide.is-active {
opacity: 1;
visibility: visible;
}
.hero-slide::after {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
to top,
rgba(15, 15, 15, 0.88) 0%,
rgba(15, 15, 15, 0.4) 45%,
rgba(15, 15, 15, 0.12) 100%
);
content: "";
}
.hero-slide .hero-inner {
justify-content: flex-end;
}
.hero-nav {
position: absolute;
top: 50%;
z-index: 4;
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
transform: translateY(-50%);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 50%;
background: rgba(15, 15, 15, 0.35);
color: var(--white);
font-size: 1.1rem;
cursor: pointer;
transition: background 150ms ease, border-color 150ms ease;
}
.hero-nav:hover,
.hero-nav:focus-visible {
background: rgba(15, 15, 15, 0.7);
border-color: var(--white);
}
.hero-prev {
left: clamp(0.75rem, 2vw, 1.5rem);
}
.hero-next {
right: clamp(0.75rem, 2vw, 1.5rem);
}
.hero-dots {
position: absolute;
bottom: clamp(1rem, 2vw, 1.75rem);
left: 50%;
z-index: 4;
display: flex;
gap: 0.6rem;
transform: translateX(-50%);
}
.hero-dot {
width: 0.7rem;
height: 0.7rem;
padding: 0;
border: 1px solid var(--white);
border-radius: 50%;
background: transparent;
cursor: pointer;
transition: background 150ms ease;
}
.hero-dot[aria-current="true"] {
background: var(--white);
}
.hero-dot:focus-visible,
.hero-nav:focus-visible {
outline: 2px solid var(--white);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.hero-slide {
transition: none;
}
}
.text-link,
.arrow-link {
display: inline-flex;
gap: 0.75rem;
align-items: center;
width: fit-content;
padding-bottom: 0.3rem;
border-bottom: 1px solid currentColor;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.art-placeholder {
position: relative;
min-height: 360px;
overflow: hidden;
background:
linear-gradient(118deg, transparent 0 38%, rgba(121, 121, 121, 0.92) 39% 58%, transparent 59%),
radial-gradient(circle at 24% 32%, #e5e5e5 0 12%, transparent 13%),
linear-gradient(28deg, #313131 0 35%, #afafaf 36% 62%, #343434 63%);
}
.art-placeholder::after {
position: absolute;
inset: 14% 9%;
border: 1px solid rgba(255, 255, 255, 0.55);
content: "";
transform: rotate(-3deg);
}
.art-placeholder.palette-2 {
background:
radial-gradient(ellipse at 65% 30%, rgba(238, 238, 238, 0.95) 0 17%, transparent 18%),
linear-gradient(145deg, transparent 0 45%, #575757 46% 69%, transparent 70%),
linear-gradient(32deg, #232323, #757575 52%, #a8a8a8);
}
.art-placeholder.palette-3 {
background:
linear-gradient(90deg, transparent 0 22%, rgba(32, 32, 32, 0.9) 23% 43%, transparent 44%),
radial-gradient(circle at 70% 72%, #757575 0 14%, transparent 15%),
linear-gradient(150deg, #cdcdcd, #888888 48%, #b6b6b6);
}
.art-placeholder.palette-4 {
background:
radial-gradient(circle at 34% 38%, #191919 0 9%, transparent 10%),
radial-gradient(circle at 58% 56%, #808080 0 19%, transparent 20%),
linear-gradient(120deg, #bfbfbf, #e7e7e7 50%, #6a6a6a);
}
.section {
padding: clamp(3rem, 3vw, 6rem) 0;
border-top: 1px solid var(--line);
}
.section-heading {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 2rem;
align-items: end;
margin-bottom: clamp(1.75rem, 3.5vw, 3.5rem);
}
.section-heading h2,
.statement h2,
.newsletter h2 {
max-width: 12ch;
margin: 0;
font-family: var(--display);
font-size: clamp(3rem, 6.5vw, 6.4rem);
font-weight: 500;
letter-spacing: -0.015em;
line-height: 0.98;
}
.section-heading h2 {
max-width: none;
font-size: clamp(2.2rem, 3.6vw, 3.6rem);
letter-spacing: -0.01em;
line-height: 1.02;
white-space: nowrap;
}
.section-heading .arrow-link {
justify-self: end;
}
.home-exhibitions {
overflow: hidden;
}
.exhibition-carousel-header {
display: flex;
gap: 2rem;
align-items: end;
justify-content: space-between;
margin-bottom: clamp(1.75rem, 3.5vw, 3.5rem);
}
.exhibition-carousel-header h2 {
margin: 0;
font-family: var(--display);
font-size: clamp(2.2rem, 3.6vw, 3.6rem);
font-weight: 500;
letter-spacing: -0.01em;
line-height: 1.02;
}
.exhibition-carousel-actions {
display: flex;
gap: clamp(1.5rem, 3vw, 3rem);
align-items: center;
}
.exhibition-carousel-actions > a {
padding-bottom: 0.2rem;
border-bottom: 1px solid currentColor;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.exhibition-carousel-controls {
display: flex;
gap: 0.65rem;
}
.exhibition-carousel-controls button {
display: grid;
width: 3rem;
height: 3rem;
padding: 0;
border: 1px solid var(--ink);
border-radius: 50%;
background: transparent;
color: var(--ink);
cursor: pointer;
font-size: 1.5rem;
line-height: 1;
place-items: center;
}
.exhibition-carousel-controls button:hover,
.exhibition-carousel-controls button:focus-visible {
background: var(--ink);
color: var(--white);
}
.exhibition-carousel-controls button:disabled {
border-color: var(--line);
color: var(--muted);
cursor: default;
opacity: 0.45;
}
.exhibition-carousel-controls button:disabled:hover {
background: transparent;
color: var(--muted);
}
.exhibition-carousel {
display: grid;
grid-auto-columns: calc((100% - (var(--space) * 2)) / 3);
grid-auto-flow: column;
gap: var(--space);
overflow-x: auto;
padding-bottom: 1rem;
outline: 0;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.exhibition-carousel::-webkit-scrollbar {
display: none;
}
.exhibition-carousel:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 0.5rem;
}
.exhibition-carousel-card {
min-width: 0;
scroll-snap-align: start;
}
.exhibition-carousel-card figure {
position: relative;
overflow: hidden;
margin: 0 0 1.2rem;
aspect-ratio: 1 / 1;
background: var(--paper-deep);
}
.exhibition-card-badge {
position: absolute;
top: 0.85rem;
left: 0.85rem;
border-color: transparent;
background: rgba(0, 0, 0, 0.85);
color: var(--white);
}
.exhibition-card-badge.exhibition-badge--present {
background: var(--white);
color: var(--accent);
}
.exhibition-card-badge.exhibition-badge--future,
.exhibition-card-badge.exhibition-badge--past {
border-color: transparent;
color: var(--white);
}
.exhibition-carousel-card figure img,
.exhibition-carousel-card figure .art-placeholder {
width: 100%;
height: 100%;
min-height: 0;
object-fit: cover;
transition: transform 250ms ease;
}
.exhibition-carousel-card a:hover figure img,
.exhibition-carousel-card a:hover figure .art-placeholder {
transform: scale(1.025);
}
.exhibition-carousel-card h3 {
max-width: 18ch;
margin: 0;
font-family: var(--display);
font-size: clamp(1.45rem, 2.2vw, 2.25rem);
font-weight: 500;
letter-spacing: -0.01em;
line-height: 1.05;
}
.exhibition-carousel-card p {
margin: 0.8rem 0 0;
color: var(--muted);
font-size: 0.75rem;
font-weight: 700;
}
.artist-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: clamp(1.5rem, 3vw, 3rem);
}
.artist-card {
grid-column: span 4;
}
.artist-card:nth-child(3n + 2) {
margin-top: 7rem;
}
.artist-card figure,
.article-card figure {
margin: 0 0 1.25rem;
overflow: hidden;
background: var(--paper-deep);
}
.artist-card figure {
aspect-ratio: 3 / 4;
}
.artist-card img,
.article-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 500ms ease;
}
.artist-card:hover img,
.article-card:hover img {
transform: scale(1.025);
}
.artist-portrait {
height: 100%;
min-height: 420px;
background:
radial-gradient(ellipse at 48% 27%, #989898 0 12%, transparent 12.5%),
radial-gradient(ellipse at 50% 44%, #303030 0 22%, transparent 22.5%),
linear-gradient(140deg, #9d9d9d, #d8d8d8 50%, #6b6b6b);
}
.artist-card:nth-child(2) .artist-portrait {
background:
radial-gradient(ellipse at 48% 29%, #5c5c5c 0 12%, transparent 12.5%),
radial-gradient(ellipse at 50% 45%, #b4b4b4 0 23%, transparent 23.5%),
linear-gradient(140deg, #2f2f2f, #979797 50%, #bababa);
}
.artist-card:nth-child(3) .artist-portrait {
background:
radial-gradient(ellipse at 52% 28%, #b3b3b3 0 11%, transparent 11.5%),
radial-gradient(ellipse at 50% 43%, #1f1f1f 0 24%, transparent 24.5%),
linear-gradient(140deg, #a9a9a9, #e3e3e3 50%, #666666);
}
.card-title {
margin: 0.3rem 0;
font-family: var(--display);
font-size: clamp(1.7rem, 2.5vw, 2.6rem);
font-weight: 500;
letter-spacing: -0.01em;
line-height: 1.05;
}
.card-meta {
margin: 0;
color: var(--muted);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.artist-card figure {
position: relative;
}
.artist-card-cue,
.artwork-card-cue {
position: absolute;
left: 1rem;
bottom: 1rem;
padding: 0.5rem 0.9rem;
background: var(--ink);
color: var(--white);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
opacity: 0;
transform: translateY(0.5rem);
transition: opacity 300ms ease, transform 300ms ease;
}
.artist-card:hover .artist-card-cue,
.artist-card a:focus-visible .artist-card-cue,
.artwork-card:hover .artwork-card-cue,
.artwork-card a:focus-visible .artwork-card-cue {
opacity: 1;
transform: translateY(0);
}
.artist-card-facts {
margin: 0.45rem 0 0;
color: var(--ink);
font-size: 0.85rem;
}
.artist-card-bio {
display: -webkit-box;
margin: 0.6rem 0 0;
max-width: 36ch;
overflow: hidden;
color: var(--muted);
font-size: 0.9rem;
line-height: 1.5;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.home-artists .section-heading {
margin-bottom: clamp(1.75rem, 3.5vw, 3.5rem);
}
.home-artists .section-heading h2 {
max-width: 16ch;
}
.home-artists .artist-grid {
max-width: 1020px;
margin-inline: auto;
gap: clamp(1.5rem, 2.5vw, 2.5rem);
}
.home-artists .artist-card:nth-child(3n + 2) {
margin-top: 3rem;
}
.home-artists .artist-card figure {
aspect-ratio: 4 / 5;
}
.home-artists .artist-portrait {
min-height: 0;
}
.home-artists .card-title {
font-size: clamp(1.3rem, 1.6vw, 1.75rem);
line-height: 1.05;
}
.home-artists .card-meta {
font-size: 0.63rem;
}
.home-artists .artist-card-bio {
display: none;
}
.home-artworks .section-heading {
margin-bottom: clamp(1.75rem, 3.5vw, 3.5rem);
}
.home-artworks .section-heading h2 {
max-width: 16ch;
}
.home-artworks .artwork-grid {
max-width: 1020px;
margin-inline: auto;
gap: clamp(1.5rem, 2.5vw, 2.5rem);
}
.home-artworks .artwork-card:nth-child(even) {
margin-top: 3rem;
}
.home-artworks .card-title {
font-size: clamp(1.3rem, 1.6vw, 1.75rem);
line-height: 1.05;
}
.home-artworks .card-meta {
font-size: 0.63rem;
}
.statement {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 2rem;
padding: clamp(5rem, 3vw, 11rem) 0;
border-top: 1px solid var(--line);
}
.statement h2 {
grid-column: 2;
max-width: 14ch;
}
.statement h2 em {
color: var(--accent);
font-weight: 400;
}
.article-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space);
} .site-shell > .article-grid:last-child,
.site-shell > .artwork-grid:last-child {
padding-bottom: clamp(4rem, 8vw, 8rem);
}
.article-card:first-child {
grid-column: span 2;
}
.home-journal .section-heading h2 {
max-width: 16ch;
} .article-card > a {
display: flex;
flex-direction: column;
height: 100%;
}
.article-card figure {
aspect-ratio: 4 / 3;
}
.article-card-label {
display: flex;
flex-direction: column;
flex: 1;
}
.article-card .card-meta {
margin-bottom: 0.7rem;
}
.card-topic {
color: var(--accent);
font-weight: 700;
}
.article-card .card-title {
max-width: 22ch;
margin-top: 0;
font-size: clamp(1.25rem, 1.4vw, 1.7rem);
line-height: 1.12;
transition: color 250ms ease;
}
.card-excerpt {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
max-width: 52ch;
margin: 0.35rem 0 1.1rem;
color: var(--muted);
font-family: var(--serif);
font-size: 0.92rem;
line-height: 1.55;
}
.card-foot {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
margin: auto 0 0;
padding-top: 0.75rem;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.card-read {
color: var(--ink);
}
.card-read span {
display: inline-block;
transition: transform 250ms ease;
}
.article-card:hover .card-read,
.article-card a:focus-visible .card-read {
color: var(--accent);
}
.article-card:hover .card-read span,
.article-card a:focus-visible .card-read span {
transform: translateX(0.3rem);
}
.article-card:hover .card-title {
color: var(--accent);
} .article-card:first-child > a {
display: grid;
grid-template-columns: 3fr 2fr;
gap: clamp(1.25rem, 2.5vw, 2.5rem);
align-items: stretch;
}
.article-card:first-child figure {
height: 100%;
margin: 0;
aspect-ratio: auto;
}
.article-card:first-child .article-card-label {
flex: none;
justify-content: flex-end;
padding-bottom: 0.25rem;
}
.article-card:first-child .card-foot {
margin-top: 0;
}
.article-card:first-child .card-title {
max-width: 16ch;
font-size: clamp(1.6rem, 2.4vw, 2.4rem);
line-height: 1.05;
}
.article-card:first-child .card-excerpt {
-webkit-line-clamp: 3;
max-width: 44ch;
} .home-journal .article-card:first-child {
grid-column: auto;
}
.home-journal .article-card:first-child > a {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
}
.home-journal .article-card:first-child figure {
height: auto;
margin: 0 0 1.25rem;
aspect-ratio: 4 / 3;
}
.home-journal .article-card:first-child .article-card-label {
flex: 1;
padding-bottom: 0;
}
.home-journal .article-card:first-child .card-title {
max-width: 22ch;
font-size: clamp(1.25rem, 1.4vw, 1.7rem);
line-height: 1.12;
}
.home-journal .article-card:first-child .card-excerpt {
-webkit-line-clamp: 2;
max-width: 52ch;
}
.archive-hero,
.single-hero {
padding: clamp(4rem, 8vw, 8rem) 0;
}
.single-post .single-hero,
.single-artist .single-hero,
.single-artwork .single-hero,
.single-exhibition .single-hero {
padding: clamp(2rem, 4vw, 3.5rem) 0;
}
.blog .archive-hero,
.post-type-archive .archive-hero,
.auction-dashboard .archive-hero,
.artist-listing-page .archive-hero {
padding: clamp(1rem, 2vw, 1.75rem) 0;
min-height: 0;
align-content: start;
gap: 1rem 2rem;
}
.contact-page .single-hero {
padding: clamp(1.5rem, 3vw, 2.75rem) 0;
}
.about-page .single-hero {
display: block;
padding: clamp(1.5rem, 3vw, 2.75rem) 0;
}
.about-page .single-hero .section-kicker {
margin: 0 0 1.1rem;
}
.about-page .single-title {
grid-column: auto;
max-width: 16ch;
font-size: clamp(2.6rem, 5vw, 4.6rem);
line-height: 0.98;
}
.about-page .single-subtitle {
grid-column: auto;
max-width: 44rem;
margin: 1.5rem 0 0;
color: var(--muted);
}
.blog .page-title,
.post-type-archive .page-title,
.auction-dashboard .page-title,
.artist-listing-page .page-title {
font-size: clamp(2.6rem, 5vw, 4.5rem);
letter-spacing: -0.015em;
line-height: 1;
}
.breadcrumbs {
padding-top: clamp(1.5rem, 3vw, 2.5rem);
}
.blog .breadcrumbs,
.single-post .breadcrumbs,
.post-type-archive .breadcrumbs,
.single-artist .breadcrumbs,
.single-artwork .breadcrumbs,
.single-exhibition .breadcrumbs,
.about-page .breadcrumbs,
.contact-page .breadcrumbs,
.auction-dashboard .breadcrumbs,
.artist-listing-page .breadcrumbs {
padding-top: clamp(0.75rem, 1.5vw, 1.25rem);
}
.breadcrumbs ol {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
padding: 0;
margin: 0;
color: var(--muted);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
list-style: none;
text-transform: uppercase;
}
.breadcrumbs li {
display: inline-flex;
gap: 0.45rem;
align-items: center;
}
.breadcrumbs li:not(:last-child)::after {
color: var(--accent);
content: "→";
}
.breadcrumbs a {
color: var(--ink);
}
.breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
color: var(--accent);
}
.breadcrumbs [aria-current="page"] {
overflow: hidden;
max-width: min(42ch, 60vw);
text-overflow: ellipsis;
white-space: nowrap;
}
.archive-hero {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 2rem;
min-height: 52vh;
align-items: end;
}
.archive-hero .page-title {
grid-column: 2;
}
.archive-description {
grid-column: 2;
max-width: 45rem;
font-family: var(--serif);
font-size: 1.4rem;
}
.archive-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: clamp(3rem, 6vw, 7rem) var(--space);
padding-bottom: clamp(5rem, 3vw, 10rem);
}
.artist-filters {
margin-bottom: clamp(4rem, 7vw, 7rem);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.artist-search {
display: flex;
align-items: center;
border-bottom: 1px solid var(--line);
}
.artist-search input {
flex: 1;
min-width: 0;
padding: 1.35rem 0;
border: 0;
outline: 0;
background: transparent;
color: var(--ink);
font-family: var(--serif);
font-size: clamp(1.35rem, 2.2vw, 2rem);
}
.artist-search input:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.artist-search input::placeholder {
color: var(--muted);
}
.artist-search button {
padding: 1rem 0 1rem 2rem;
border: 0;
background: transparent;
color: var(--ink);
cursor: pointer;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.artist-search button:hover,
.artist-search button:focus-visible {
color: var(--accent);
}
.artist-alphabet {
display: grid;
grid-template-columns: 2fr repeat(26, 1fr);
align-items: center;
}
.artist-alphabet a,
.artist-alphabet span {
display: grid;
min-height: 3.5rem;
place-items: center;
border-right: 1px solid var(--line);
font-size: 0.7rem;
font-weight: 700;
}
.artist-alphabet > :first-child {
justify-items: center;
}
.artist-alphabet > :last-child {
border-right: 0;
}
.artist-alphabet a.is-active {
background: var(--ink);
color: var(--white);
}
.artist-alphabet .is-empty {
color: var(--muted);
opacity: 0.4;
cursor: default;
}
.artist-disciplines {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.6rem;
padding: 1.25rem 0;
border-bottom: 1px solid var(--line);
}
.artist-disciplines a {
padding: 0.45rem 0.95rem;
border: 1px solid var(--line);
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.artist-disciplines a:hover,
.artist-disciplines a:focus-visible {
border-color: var(--ink);
color: var(--ink);
}
.artist-disciplines a.is-active {
border-color: var(--ink);
background: var(--ink);
color: var(--white);
}
.filter-summary {
display: flex;
justify-content: space-between;
padding: 0.9rem 0;
color: var(--muted);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.filter-summary p {
margin: 0;
}
.filter-summary a {
color: var(--ink);
}
.archive-grid .artist-card {
grid-column: auto;
margin-top: 0;
}
.timeline-section {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 2rem;
padding: 3rem 0 7rem;
border-top: 1px solid var(--line);
}
.timeline-list {
grid-column: 2;
}
.timeline-item {
display: grid;
grid-template-columns: 0.7fr 1.5fr 1fr auto;
gap: 1.5rem;
align-items: baseline;
padding: 1.4rem 0;
border-top: 1px solid var(--line);
}
.timeline-item:last-child {
border-bottom: 1px solid var(--line);
}
.timeline-count {
display: inline-block;
margin-top: 0.5rem;
color: var(--muted);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
}
.timeline-item-main {
min-width: 0;
}
.timeline-item h3 {
margin: 0;
font-family: var(--display);
font-size: clamp(1.6rem, 3vw, 3rem);
font-weight: 500;
letter-spacing: -0.01em;
transition: color 200ms ease;
}
.timeline-item:hover h3 a {
color: var(--accent);
}
.timeline-excerpt {
max-width: 52ch;
margin: 0.5rem 0 0;
color: var(--muted);
font-size: 0.85rem;
line-height: 1.5;
}
.timeline-item .exhibition-badge {
justify-self: start;
}
.single-hero {
display: grid;
grid-template-columns: 0.75fr 2.25fr;
gap: 2rem;
align-items: end;
}
.single-title {
grid-column: 2;
max-width: 12ch;
}
.single-subtitle {
grid-column: 2;
max-width: 48rem;
margin: 1.5rem 0 0;
font-family: var(--serif);
font-size: clamp(1.25rem, 2vw, 1.8rem);
}
.artwork-badge,
.exhibition-badge {
display: inline-block;
padding: 0.4rem 0.85rem;
border: 1px solid var(--line);
color: var(--muted);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.artwork-badge--on-view,
.exhibition-badge--present {
border-color: var(--accent);
background: var(--accent);
color: var(--white);
}
.exhibition-badge--future {
border-color: var(--ink);
color: var(--ink);
}
.exhibition-badge--past {
opacity: 0.7;
}
.exhibition-dates {
color: var(--muted);
font-size: 0.8rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.exhibition-map {
margin-top: 1.5rem;
border: 1px solid var(--line);
line-height: 0;
}
.exhibition-map iframe {
display: block;
width: 100%;
filter: grayscale(1);
}
.artwork-zoom {
display: block;
padding: 0;
border: 0;
background: none;
cursor: zoom-in;
}
.artwork-caption {
max-width: 60ch;
margin: 1.25rem auto 0;
color: var(--muted);
font-size: 0.8rem;
letter-spacing: 0.02em;
text-align: center;
}
.artwork-caption em {
color: var(--ink);
font-style: italic;
}
.artwork-enquire {
display: inline-block;
margin-top: 1.75rem;
padding: 0.85rem 1.5rem;
background: var(--ink);
color: var(--white);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.artwork-enquire:hover,
.artwork-enquire:focus-visible {
background: var(--accent);
color: var(--white);
}
.artist-actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
margin-top: 1.75rem;
}
.artist-link {
padding-bottom: 0.2rem;
border-bottom: 1px solid currentColor;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.artist-actions .artwork-enquire {
margin-top: 0.25rem;
}
body.lightbox-open {
overflow: hidden;
}
.artwork-lightbox {
position: fixed;
inset: 0;
z-index: 200;
display: grid;
place-items: center;
padding: clamp(1.5rem, 5vw, 4rem);
background: rgba(0, 0, 0, 0.94);
}
.artwork-lightbox[hidden] {
display: none;
}
.artwork-lightbox-figure {
max-width: 100%;
max-height: 100%;
margin: 0;
text-align: center;
}
.artwork-lightbox-figure img {
max-width: 100%;
max-height: 82vh;
object-fit: contain;
}
.artwork-lightbox-figure figcaption {
margin-top: 1rem;
color: rgba(255, 255, 255, 0.8);
font-size: 0.8rem;
letter-spacing: 0.04em;
}
.artwork-lightbox-close {
position: absolute;
top: clamp(1rem, 3vw, 2rem);
right: clamp(1rem, 3vw, 2rem);
width: 2.75rem;
height: 2.75rem;
border: 1px solid rgba(255, 255, 255, 0.4);
background: none;
color: var(--white);
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
}
.artwork-lightbox-close:hover,
.artwork-lightbox-close:focus-visible {
background: var(--accent);
border-color: var(--accent);
}
.single-layout {
display: grid;
grid-template-columns: 0.75fr 1.5fr 0.75fr;
gap: var(--space);
padding-bottom: clamp(6rem, 4vw, 12rem);
}
.single-content {
grid-column: 2;
font-family: var(--serif);
font-size: clamp(1.15rem, 1.8vw, 1.45rem);
line-height: 1.65;
}
.single-content > p:first-child {
font-size: 1.35em;
line-height: 1.45;
}
.single-content h2,
.single-content h3 {
margin-top: 2.5em;
font-family: var(--sans);
} .about-intro {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
gap: var(--space);
align-items: start;
padding-bottom: clamp(4rem, 6vw, 7rem);
}
.about-intro-copy {
font-family: var(--serif);
font-size: clamp(1.2rem, 1.9vw, 1.65rem);
line-height: 1.6;
}
.about-intro-copy > *:first-child {
font-size: clamp(1.45rem, 2.4vw, 2.05rem);
line-height: 1.4;
letter-spacing: -0.01em;
}
.about-intro-copy > * {
max-width: 46rem;
}
.about-intro-copy > *:first-child {
margin-top: 0;
}
.about-intro-copy > *:last-child {
margin-bottom: 0;
}
.about-profile-card {
padding: clamp(1.75rem, 3vw, 2.5rem);
border: 1px solid var(--line);
border-top: 2px solid var(--ink);
background: var(--paper);
position: sticky;
top: 7rem;
}
.about-profile-card .section-kicker {
margin-bottom: 0.5rem;
}
.about-stats {
display: grid;
gap: 0;
margin: 0;
border-top: 1px solid var(--line);
}
.about-stats div {
padding: 1rem 0;
border-bottom: 1px solid var(--line);
}
.about-stats dt {
margin-bottom: 0.45rem;
color: var(--muted);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.about-stats dd {
margin: 0;
font-family: var(--serif);
font-size: clamp(1.15rem, 2vw, 1.55rem);
line-height: 1.2;
}
.about-story {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(2rem, 5vw, 5rem);
align-items: start;
padding: clamp(3.5rem, 6vw, 6rem) 0;
border-top: 1px solid var(--line);
}
.about-story h2 {
max-width: 16ch;
margin: 0.35rem 0 0;
font-family: var(--display);
font-size: clamp(2rem, 3.4vw, 3.3rem);
font-weight: 500;
letter-spacing: -0.01em;
line-height: 1.08;
text-wrap: balance;
}
.about-story-copy {
align-self: start;
max-width: 40rem;
padding-top: 0.4rem;
color: var(--muted);
font-size: clamp(1.02rem, 1.3vw, 1.18rem);
line-height: 1.75;
}
.about-story-copy > *:first-child {
margin-top: 0;
}
.about-story-copy > *:last-child {
margin-bottom: 0;
}
.about-values {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
padding: clamp(4rem, 5vw, 7rem) 0;
border-top: 1px solid var(--line);
}
.about-value {
position: relative;
min-height: 22rem;
padding: clamp(1.5rem, 2.5vw, 2.25rem);
border-right: 1px solid var(--line);
display: flex;
flex-direction: column;
overflow: hidden;
transition: background-color 250ms ease;
}
.about-value:first-child {
border-left: 1px solid var(--line);
} .about-value::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: var(--ink);
transform: scaleX(0);
transform-origin: left;
transition: transform 300ms ease;
}
.about-value-index {
display: block;
font-family: var(--display);
font-size: clamp(2.5rem, 4vw, 3.5rem);
font-weight: 500;
line-height: 1;
letter-spacing: -0.01em;
color: var(--line);
transition: color 250ms ease;
}
.about-value h2 {
margin: 1.25rem 0 1rem;
font-family: var(--display);
font-size: clamp(1.5rem, 2.5vw, 2.25rem);
font-weight: 500;
letter-spacing: -0.005em;
line-height: 1.05;
}
.about-value p:last-child {
margin: auto 0 0;
max-width: 32ch;
color: var(--muted);
font-size: 0.95rem;
line-height: 1.6;
}
@media (hover: hover) {
.about-value:hover {
background-color: var(--paper-deep);
}
.about-value:hover::before {
transform: scaleX(1);
}
.about-value:hover .about-value-index {
color: var(--ink);
}
}
@media (prefers-reduced-motion: reduce) {
.about-value,
.about-value::before,
.about-value-index {
transition: none;
}
}
.about-cta {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
padding: clamp(4rem, 7vw, 7rem) 0;
border-top: 1px solid var(--line);
text-align: center;
}
.about-cta h2 {
max-width: 16ch;
margin: 0;
font-family: var(--display);
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 500;
letter-spacing: -0.015em;
line-height: 1;
}
.about-cta-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.25rem 2.5rem;
margin-top: 0.75rem;
} .contact-layout {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr);
gap: var(--space);
align-items: start;
padding-bottom: clamp(6rem, 4vw, 12rem);
}
.contact-info-panel {
grid-column: 1;
display: grid;
gap: clamp(2rem, 4vw, 4rem);
}
.contact-form-wrap {
grid-column: 2;
padding: clamp(1.5rem, 3vw, 2.5rem);
border: 1px solid var(--line);
background:
linear-gradient(135deg, rgba(27, 23, 18, 0.04), transparent 38%),
var(--paper);
position: sticky;
top: 7rem;
}
.contact-content {
margin-bottom: 0;
font-family: var(--serif);
font-size: clamp(1.2rem, 1.9vw, 1.65rem);
line-height: 1.6;
}
.contact-content > *:first-child {
margin-top: 0;
}
.contact-content > *:last-child {
margin-bottom: 0;
}
.contact-routes {
display: grid;
gap: 0;
border-top: 1px solid var(--line);
}
.contact-route {
display: grid;
grid-template-columns: 3.5rem minmax(0, 1fr);
gap: 1rem;
padding: 1.25rem 0;
border-bottom: 1px solid var(--line);
}
.contact-route span {
color: var(--accent);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.14em;
}
.contact-route h2 {
margin: 0 0 0.45rem;
font-family: var(--display);
font-size: clamp(1.25rem, 2vw, 1.8rem);
font-weight: 500;
letter-spacing: -0.005em;
line-height: 1.05;
}
.contact-route p {
grid-column: 2;
max-width: 36rem;
margin: 0;
color: var(--muted);
font-size: 0.95rem;
line-height: 1.6;
}
.contact-form-heading {
margin-bottom: 2rem;
}
.contact-form-heading h2 {
margin: 0;
font-family: var(--display);
font-size: clamp(2rem, 4vw, 3.25rem);
font-weight: 500;
letter-spacing: -0.015em;
line-height: 1;
}
.contact-form-heading p:last-child {
max-width: 32rem;
margin: 1rem 0 0;
color: var(--muted);
font-size: 0.95rem;
line-height: 1.6;
}
.contact-notice {
margin: 0 0 2rem;
padding: 1rem 1.25rem;
border: 1px solid var(--line);
font-size: 0.9rem;
}
.contact-notice--ok {
background: rgba(0, 0, 0, 0.04);
border-color: var(--ink);
}
.contact-notice--error {
background: rgba(140, 47, 36, 0.06);
color: var(--accent);
border-color: var(--accent);
}
.contact-form {
display: grid;
gap: 1.2rem;
}
.contact-field {
display: grid;
gap: 0.5rem;
margin: 0;
}
.contact-field label {
color: var(--muted);
font-size: 0.62rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.contact-field input,
.contact-field textarea {
width: 100%;
padding: 0.95rem 1rem;
border: 1px solid var(--line);
outline: 0;
background: rgba(255, 255, 255, 0.72);
color: var(--ink);
font-family: var(--serif);
font-size: 1.1rem;
transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-field input::placeholder,
.contact-field textarea::placeholder {
color: rgba(0, 0, 0, 0.38);
}
.contact-field textarea {
min-height: 11rem;
resize: vertical;
line-height: 1.5;
}
.contact-field input:focus,
.contact-field textarea:focus {
border-color: var(--ink);
background: var(--paper);
box-shadow: 0 0 0 3px rgba(27, 23, 18, 0.07);
}
.contact-submit {
justify-self: stretch;
margin-top: 0.5rem;
padding: 1rem 1.25rem;
border: 1px solid var(--ink);
background: var(--ink);
color: var(--paper);
cursor: pointer;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.contact-submit:hover,
.contact-submit:focus-visible {
background: var(--paper);
color: var(--ink);
border-color: var(--ink);
}
.related-works {
padding: clamp(4rem, 4vw, 4rem) 0;
border-top: 1px solid var(--line);
}
.artwork-filters {
margin-bottom: clamp(3rem, 6vw, 6rem);
padding: clamp(1.75rem, 3.5vw, 3rem) 0;
border-top: 1px solid var(--ink);
border-bottom: 1px solid var(--line);
} .artwork-filter-search {
display: flex;
align-items: center;
gap: 1rem;
padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
border-bottom: 1px solid var(--line);
}
.artwork-filter-search input {
flex: 1;
min-width: 0;
padding: 0.3rem 0;
border: 0;
outline: 0;
background: transparent;
color: var(--ink);
font-family: var(--serif);
font-size: clamp(1.4rem, 2.6vw, 2.25rem);
letter-spacing: -0.01em;
}
.artwork-filter-search input::placeholder {
color: var(--muted);
opacity: 1;
}
.artwork-filter-search button {
display: grid;
flex-shrink: 0;
width: 2.75rem;
height: 2.75rem;
padding: 0;
border: 0;
background: transparent;
color: var(--ink);
cursor: pointer;
place-items: center;
}
.artwork-filter-search button:hover,
.artwork-filter-search button:focus-visible {
color: var(--accent);
}
.artwork-filter-search svg {
width: 1.5rem;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-width: 2;
}
.artwork-filter-options {
display: flex;
flex-direction: column;
gap: clamp(1.25rem, 2.5vw, 1.75rem);
padding-top: clamp(1.5rem, 3vw, 2rem);
} .artwork-filter-checks {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.artwork-filter-checks label {
display: inline-flex;
align-items: center;
padding: 0.55rem 1.05rem;
border: 1px solid var(--line);
cursor: pointer;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
transition:
color 150ms ease,
background-color 150ms ease,
border-color 150ms ease;
}
.artwork-filter-checks label:hover {
border-color: var(--ink);
}
.artwork-filter-checks input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.artwork-filter-checks label:has(input:checked) {
border-color: var(--ink);
background: var(--ink);
color: var(--white);
}
.artwork-filter-checks label:has(input:focus-visible) {
outline: 2px solid var(--accent);
outline-offset: 3px;
} .artwork-filter-selects {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem clamp(0.75rem, 1.5vw, 1.25rem);
}
.artwork-filter-selects label {
flex: 1 1 11rem;
min-width: 0;
}
.artwork-filter-selects select {
width: 100%;
min-height: 3rem;
padding: 0.6rem 2.5rem 0.6rem 0.95rem;
border: 1px solid var(--line);
border-radius: 0;
appearance: none;
background:
linear-gradient(45deg, transparent 50%, var(--ink) 50%) calc(100% - 18px) 55% / 7px 7px no-repeat,
linear-gradient(135deg, var(--ink) 50%, transparent 50%) calc(100% - 13px) 55% / 7px 7px no-repeat,
var(--paper);
color: var(--ink);
font-size: 0.92rem;
cursor: pointer;
transition: border-color 150ms ease;
}
.artwork-filter-selects select:hover {
border-color: var(--ink);
}
.filter-through {
flex: 0 0 auto;
color: var(--muted);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.artwork-filter-submit {
flex: 0 0 auto;
min-height: 3rem;
margin-left: auto;
padding: 0.7rem 1.75rem;
border: 1px solid var(--ink);
background: var(--ink);
color: var(--white);
cursor: pointer;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
transition:
color 150ms ease,
background-color 150ms ease;
}
.artwork-filter-submit:hover {
background: var(--paper);
color: var(--ink);
}
.artwork-filter-search input:focus-visible,
.artwork-filter-selects select:focus-visible,
.artwork-filter-submit:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.artwork-filters .filter-summary {
margin-top: clamp(1.5rem, 3vw, 2rem);
padding: clamp(1.25rem, 2.5vw, 1.5rem) 0 0;
border-top: 1px solid var(--line);
}
.artwork-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space);
}
.artwork-card figure {
position: relative;
overflow: hidden;
margin: 0 0 1rem;
border: 1px solid var(--line);
aspect-ratio: 4 / 5;
background: var(--paper-deep);
}
.artwork-card {
position: relative;
}
.artwork-card figure img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 500ms ease;
}
.artwork-card:hover figure img {
transform: scale(1.03);
}
.artwork-card:nth-child(even) {
margin-top: 5rem;
}
.artwork-card .art-placeholder {
aspect-ratio: 4 / 5;
}
.artwork-card-categories {
margin: 0.55rem 0 0;
color: var(--accent);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.artwork-auction-badge {
position: absolute;
top: 0.85rem;
left: 0.85rem;
z-index: 2;
padding: 0.45rem 0.7rem;
background: var(--paper);
color: var(--ink);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.artwork-auction-badge--live {
background: var(--accent);
color: var(--white);
} .artwork-auction-badge--live::before,
.auction-status--live::before {
content: "";
display: inline-block;
width: 0.5em;
height: 0.5em;
margin-right: 0.5em;
border-radius: 50%;
background: currentColor;
vertical-align: 0.05em;
}
@media (prefers-reduced-motion: no-preference) {
.artwork-auction-badge--live::before,
.auction-status--live::before {
animation: auction-pulse 2s ease-in-out infinite;
}
@keyframes auction-pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.35;
}
}
}
.artwork-card-auction {
display: flex;
justify-content: space-between;
gap: 1rem;
margin: 0.8rem 0 0;
padding-top: 0.65rem;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 0.75rem;
}
.artwork-card-auction strong {
color: var(--ink);
}
.artwork-card-auction > span {
display: grid;
gap: 0.15rem;
}
.artwork-card-auction small {
color: var(--ink);
font-size: 0.68rem;
font-weight: 700;
}
.newsletter {
padding: clamp(4.5rem, 3vw, 8rem) 0;
border-top: 1px solid var(--line);
background: var(--paper-deep);
}
.newsletter-inner {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 2rem;
align-items: start;
}
.newsletter-note {
max-width: 32ch;
margin: 0;
color: var(--muted);
font-size: 0.88rem;
line-height: 1.7;
}
.newsletter h2 {
margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.newsletter-links {
display: flex;
flex-wrap: wrap;
gap: 1rem 2.5rem;
margin-top: clamp(2.25rem, 4vw, 3rem);
}
.newsletter-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding-bottom: 0.35rem;
border-bottom: 1px solid var(--ink);
color: var(--ink);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.newsletter-link:hover,
.newsletter-link:focus-visible {
color: var(--accent);
border-bottom-color: var(--accent);
}
.newsletter-icon {
flex-shrink: 0;
}
.site-footer {
background: #0f0f0f;
color: var(--white);
}
.footer-wordmark {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem 3rem;
padding: clamp(2.25rem, 4vw, 3.5rem) 0 clamp(1.5rem, 2.5vw, 2.25rem);
}
.footer-brand {
margin: 0;
font-family: var(--display);
font-size: clamp(2.25rem, 7vw, 5rem);
font-weight: 500;
letter-spacing: -0.015em;
line-height: 0.98;
}
.footer-logo {
line-height: 0;
}
.footer-logo .custom-logo-link {
display: inline-block;
}
.footer-logo img {
width: auto;
max-height: clamp(56px, 9vw, 88px);
} .footer-logo--invert img {
filter: brightness(0) invert(1);
}
.footer-tagline {
max-width: 26ch;
margin: 0 0 0.4rem;
color: rgba(255, 255, 255, 0.7);
font-size: 0.95rem;
line-height: 1.5;
}
.footer-inner {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3rem;
padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2.5rem, 4vw, 4rem);
border-top: 1px solid rgba(255, 255, 255, 0.17);
}
.footer-column h2 {
margin: 0 0 1.4rem;
color: #999999;
font-size: 0.65rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.footer-column p,
.footer-column ul {
padding: 0;
margin: 0;
list-style: none;
font-size: 0.9rem;
line-height: 1.7;
}
.footer-column p + p {
margin-top: 0.6rem;
} .footer-contact {
display: flex;
gap: 0.6rem;
align-items: flex-start;
}
.footer-contact-icon {
flex: 0 0 auto;
margin-top: 0.18rem;
color: rgba(255, 255, 255, 0.55);
}
.footer-contact-icon svg {
display: block;
width: 15px;
height: 15px;
}
.footer-column li {
margin-bottom: 0.5rem;
break-inside: avoid;
} .footer-column ul {
columns: 2;
column-gap: 2rem;
}
.footer-column a {
color: rgba(255, 255, 255, 0.85);
transition: color 0.2s ease;
}
.footer-column a:hover,
.footer-column a:focus-visible {
color: var(--white);
}
.footer-column .footer-social-label {
margin: 1.6rem 0 0;
color: rgba(255, 255, 255, 0.72);
}
.footer-social {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: 0.85rem;
}
.footer-social li {
margin-bottom: 0;
}
.footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 50%;
color: rgba(255, 255, 255, 0.85);
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.footer-social a:hover,
.footer-social a:focus-visible {
color: var(--ink);
background: var(--white);
border-color: var(--white);
}
.footer-social-icon {
display: block;
width: 18px;
height: 18px;
}
.footer-bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem 1.5rem;
padding: 1.5rem 0;
border-top: 1px solid rgba(255, 255, 255, 0.17);
color: #999999;
font-size: 0.65rem;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.footer-credit-inline {
margin-right: auto;
}
.footer-credit-inline a {
color: #c2c2c2;
transition: color 0.2s ease;
}
.footer-credit-inline a:hover,
.footer-credit-inline a:focus-visible {
color: var(--white);
}
.footer-top-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: #999999;
transition: color 0.2s ease;
}
.footer-top-link:hover,
.footer-top-link:focus-visible {
color: var(--white);
}
.footer-top-link span {
display: inline-block;
transition: transform 0.2s ease;
}
.footer-top-link:hover span,
.footer-top-link:focus-visible span {
transform: translateY(-3px);
} .pagination {
margin-top: clamp(2.5rem, 5vw, 4.5rem);
padding: 1.75rem 0 clamp(3rem, 6vw, 4.5rem);
border-top: 1px solid var(--line);
}
.pagination .nav-links {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
gap: 0.4rem 0.5rem;
}
.pagination .page-numbers {
min-width: 2.2rem;
padding: 0.3rem 0.35rem;
color: var(--ink);
font-family: var(--display);
font-size: 1.35rem;
font-weight: 500;
line-height: 1;
text-align: center;
}
.pagination .dots {
color: var(--muted);
}
.pagination .current {
color: var(--accent);
border-bottom: 1px solid var(--accent);
}
.pagination .prev,
.pagination .next {
min-width: 0;
padding: 0.3rem 0;
font-family: var(--sans);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.pagination .prev {
margin-right: 1.5rem;
}
.pagination .next {
margin-left: 1.5rem;
}
.empty-state {
grid-column: 1 / -1;
padding: 5rem 0;
color: var(--muted);
font-family: var(--serif);
font-size: 1.5rem;
}
.comments {
margin-top: clamp(3rem, 6vw, 5rem);
padding-top: clamp(2rem, 4vw, 3rem);
border-top: 1px solid var(--line);
}
.comments-title,
.comment-reply-title {
font-family: var(--display);
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 500;
margin: 0 0 1.5rem;
}
.comment-list {
list-style: none;
margin: 0 0 2.5rem;
padding: 0;
}
.comment-list ol.children {
list-style: none;
margin: 1.5rem 0 0;
padding-left: clamp(1rem, 3vw, 2.5rem);
}
.comment-list li.comment {
padding: 1.5rem 0;
border-top: 1px solid var(--line);
}
.comment-list .comment-author {
display: flex;
align-items: baseline;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.comment-list .comment-author .fn {
font-style: normal;
font-weight: 700;
}
.comment-list .comment-metadata,
.comment-list .comment-metadata a {
color: var(--muted);
font-size: 0.8125rem;
}
.comment-list .comment-content {
color: var(--ink);
}
.comment-list .reply {
margin-top: 0.5rem;
font-size: 0.875rem;
}
.comment-respond {
margin-top: 2.5rem;
}
.comment-form-comment textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
width: 100%;
max-width: 100%;
padding: 0.75rem 1rem;
border: 1px solid var(--line);
background: var(--white);
color: var(--ink);
}
.comment-form p {
margin: 0 0 1.25rem;
}
.comment-form label {
display: block;
margin-bottom: 0.4rem;
font-size: 0.8125rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
}
.comment-form .form-submit input {
padding: 0.85rem 1.75rem;
border: 0;
background: var(--ink);
color: var(--white);
cursor: pointer;
}
.comment-form .form-submit input:hover,
.comment-form .form-submit input:focus-visible {
background: var(--accent);
}
.no-comments {
color: var(--muted);
}
@media (max-width: 900px) {
.site-header {
--header-stick-offset: 0px;
padding: 0.7rem 0;
} .site-header.is-scrolled::after {
background: color-mix(in srgb, var(--paper) 72%, transparent);
border-bottom-color: color-mix(in srgb, var(--line) 60%, transparent);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
@supports not (backdrop-filter: blur(12px)) { .site-header.is-scrolled::after {
background: color-mix(in srgb, var(--paper) 90%, transparent);
}
}
.header-inner {
column-gap: 1.5rem;
}
.site-brand,
.site-logo {
flex: 1 1 auto;
font-size: clamp(1.6rem, 7vw, 2.25rem);
}
.site-logo img {
max-height: 42px;
}
.header-bar {
display: contents;
}
.search-toggle {
order: 2;
}
.header-bids-link {
order: 1;
margin-left: auto;
font-size: 0.8rem;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.menu-toggle {
order: 3;
display: inline-flex;
}
.main-nav {
position: fixed;
inset: 0;
z-index: -1;
order: 4;
display: grid;
place-items: center;
visibility: hidden;
background: var(--paper);
opacity: 0;
transition: opacity 200ms ease, visibility 200ms ease;
}
.main-nav.is-open {
visibility: visible;
opacity: 1;
}
.main-nav ul {
flex-direction: column; align-items: center;
}
.main-nav a {
font-family: var(--sans);
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
border-bottom: 0;
} .main-nav .sub-menu {
position: static;
transform: none;
min-width: 0;
max-height: 0;
padding: 0;
overflow: hidden;
background: transparent;
border: 0;
box-shadow: none;
text-align: center;
transition: max-height 220ms ease, visibility 220ms ease;
}
.main-nav .menu-item-has-children.is-expanded > .sub-menu {
max-height: 50vh;
padding: 0.4rem 0 0.6rem;
visibility: visible;
}
.main-nav .sub-menu a {
font-size: 0.95rem;
opacity: 0.85;
} .main-nav .menu-item-has-children {
flex-wrap: wrap;
justify-content: center;
row-gap: 0;
}
.main-nav .menu-item-has-children > .sub-menu {
flex-basis: 100%;
}
.hero h1,
.page-title {
font-size: clamp(3.2rem, 13vw, 6rem);
} .single-post .single-title,
.single-artist .single-title,
.single-artwork .single-title,
.single-exhibition .single-title,
.about-page .single-title,
.contact-page .single-title {
font-size: clamp(2.4rem, 6vw, 3.8rem);
}
.section-heading,
.statement,
.newsletter-inner,
.archive-hero,
.single-hero {
grid-template-columns: 1fr;
}
.section-heading .arrow-link {
justify-self: start;
}
.section-heading h2 {
white-space: normal;
}
.statement h2,
.archive-hero .page-title,
.archive-description,
.single-title,
.single-subtitle {
grid-column: 1;
}
.exhibition-carousel {
grid-auto-columns: calc((100% - var(--space)) / 2);
}
.artist-card {
grid-column: span 6;
}
.artist-card:nth-child(3n + 2) {
margin-top: 0;
}
.artist-card:nth-child(even) {
margin-top: 4rem;
}
.article-grid,
.archive-grid,
.artwork-grid {
grid-template-columns: repeat(2, 1fr);
}
.about-values {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.about-intro,
.about-story {
grid-template-columns: 1fr;
}
.about-profile-card {
position: static;
}
.about-story h2 {
max-width: 20ch;
}
.about-story-copy {
padding-top: 0;
}
.about-values {
gap: 0;
}
.about-value,
.about-value:first-child {
min-height: 0;
border-right: 0;
border-left: 0;
border-top: 1px solid var(--line);
}
.about-value:first-child {
border-top: 0;
}
.about-cta {
padding-top: clamp(3rem, 8vw, 5rem);
}
.contact-layout {
grid-template-columns: 1fr;
gap: 3rem;
}
.contact-info-panel,
.contact-content,
.contact-form-wrap {
grid-column: 1;
}
.contact-form-wrap {
position: static;
}
.artwork-filter-submit {
width: 100%;
margin-left: 0;
}
.artist-alphabet {
display: flex;
overflow-x: auto;
scrollbar-width: thin;
}
.artist-alphabet a,
.artist-alphabet span {
flex: 0 0 3.25rem;
}
.artist-alphabet > :first-child {
flex-basis: 4.5rem;
justify-items: center;
}
.article-card:first-child {
grid-column: span 2;
}
.timeline-section {
grid-template-columns: 1fr;
}
.timeline-list {
grid-column: 1;
}
.timeline-item {
grid-template-columns: 0.6fr 1.4fr auto;
}
.timeline-item .timeline-location {
display: none;
}
.single-layout {
grid-template-columns: 1fr 2fr;
}
.single-content {
grid-column: 2;
}
}
@media (max-width: 620px) {
.footer-inner {
grid-template-columns: 1fr;
}
.hero h1,
.page-title {
font-size: clamp(2.8rem, 16vw, 5rem);
}
.single-post .single-title,
.single-artist .single-title,
.single-artwork .single-title,
.single-exhibition .single-title,
.about-page .single-title,
.contact-page .single-title {
font-size: clamp(2rem, 8.5vw, 3.2rem);
}
.hero-top {
justify-content: flex-start;
}
.hero-current {
align-items: flex-start;
text-align: left;
}
.exhibition-carousel-header {
align-items: start;
}
.exhibition-carousel-actions {
align-items: flex-end;
flex-direction: column;
gap: 1rem;
}
.exhibition-carousel-actions > a {
display: none;
}
.exhibition-carousel-controls button {
width: 2.75rem;
height: 2.75rem;
}
.exhibition-carousel {
grid-auto-columns: 86%;
}
.artist-grid,
.article-grid,
.archive-grid,
.artwork-grid {
grid-template-columns: 1fr;
}
.artist-card,
.article-card:first-child {
grid-column: 1;
}
.article-card:first-child > a {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
}
.article-card:first-child figure {
height: auto;
margin: 0 0 1.25rem;
aspect-ratio: 4 / 3;
}
.artist-card:nth-child(even),
.artwork-card:nth-child(even),
.home-artworks .artwork-card:nth-child(even) {
margin-top: 0;
}
.artwork-filters {
padding: clamp(1.25rem, 4vw, 1.75rem) 0;
}
.artwork-filter-selects label {
flex-basis: 100%;
}
.filter-through {
flex-basis: 100%;
}
.artwork-filter-submit {
width: 100%;
margin-left: 0;
}
.timeline-item {
grid-template-columns: 1fr auto;
}
.timeline-item .timeline-date {
grid-column: 1 / -1;
}
.timeline-item .timeline-excerpt {
display: none;
}
.single-layout {
grid-template-columns: 1fr;
}
.single-content {
grid-column: 1;
}
.footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.footer-tagline-bottom {
margin-right: 0;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
} .single-artist-profile {
padding-bottom: clamp(5rem, 10vw, 11rem);
}
.artist-masthead {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr);
gap: clamp(2rem, 5vw, 5.5rem);
align-items: start;
margin-top: clamp(1.5rem, 4vw, 3.25rem);
} .artist-portrait-frame {
position: relative;
margin: 0;
padding: clamp(0.55rem, 1vw, 0.9rem);
border: 1px solid var(--line);
background: var(--paper);
}
.artist-portrait-frame::after {
position: absolute;
inset: clamp(0.55rem, 1vw, 0.9rem);
border: 1px solid var(--line);
content: "";
pointer-events: none;
}
.artist-portrait-image,
.artist-portrait--frame {
display: block;
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
}
.artist-portrait--frame {
min-height: 0;
}
.artist-intro {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
}
.single-artist .artist-name {
max-width: 15ch;
font-size: clamp(2.8rem, 6vw, 5.6rem);
letter-spacing: -0.015em;
line-height: 0.98;
}
.artist-disciplines {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.2rem 0.65rem;
margin: 1.5rem 0 0;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.artist-disciplines a {
padding-bottom: 0.15rem;
border-bottom: 1px solid transparent;
}
.artist-disciplines a:hover,
.artist-disciplines a:focus-visible {
border-color: currentColor;
}
.artist-disciplines-sep {
color: rgba(0, 0, 0, 0.32);
}
.artist-lead {
max-width: 38rem;
margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
font-family: var(--serif);
font-size: clamp(1.3rem, 2.1vw, 1.95rem);
line-height: 1.28;
}
.artist-facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: clamp(1.5rem, 4vw, 3.5rem);
width: 100%;
margin: clamp(2rem, 4vw, 3.25rem) 0 0;
}
.artist-fact {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 0.95rem 0;
border-top: 1px solid var(--line);
}
.artist-fact dt {
color: var(--muted);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.artist-fact dd {
margin: 0;
font-family: var(--serif);
font-size: 1.15rem;
}
.artist-masthead-actions {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 1rem 1.75rem;
margin-top: clamp(2rem, 4vw, 3rem);
} .artist-biography {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr);
gap: clamp(2rem, 5vw, 5.5rem);
margin-top: clamp(4rem, 8vw, 8rem);
padding-top: clamp(2.5rem, 5vw, 4rem);
border-top: 1px solid var(--line);
}
.artist-biography-label {
margin: 0;
}
.artist-biography-body {
max-width: 70ch;
font-family: var(--serif);
font-size: clamp(1.15rem, 1.8vw, 1.45rem);
line-height: 1.65;
}
.artist-biography-body > :first-child {
margin-top: 0;
}
.artist-biography-body > p:first-child {
font-size: 1.3em;
line-height: 1.45;
}
.artist-biography-body h2,
.artist-biography-body h3 {
margin-top: 2.2em;
font-family: var(--sans);
}
.single-artist-profile .related-works {
margin-top: clamp(4rem, 8vw, 8rem);
}
@media (prefers-reduced-motion: no-preference) {
.artist-masthead > * {
animation: artist-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.artist-intro {
animation-delay: 0.09s;
}
@keyframes artist-rise {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: none;
}
}
}
@media (max-width: 900px) {
.artist-masthead,
.artist-biography {
grid-template-columns: 1fr;
}
.artist-portrait-frame {
max-width: 26rem;
}
.artist-biography {
margin-top: clamp(3rem, 7vw, 5rem);
}
}
@media (max-width: 620px) {
.artist-portrait-frame {
max-width: none;
}
.artist-facts {
grid-template-columns: 1fr;
}
.artist-masthead-actions .artwork-enquire {
width: 100%;
text-align: center;
}
} .single-artwork-detail {
padding-bottom: clamp(2rem, 2vw, 2rem);
}
.artwork-header {
margin-top: clamp(1.5rem, 4vw, 3.25rem);
}
.single-artwork .artwork-subtitle {
max-width: 40rem;
margin: 1.25rem 0 0;
font-family: var(--serif);
font-size: clamp(1.2rem, 2vw, 1.7rem);
}
.artwork-subtitle a {
padding-bottom: 0.1rem;
border-bottom: 1px solid var(--line);
}
.artwork-subtitle a:hover,
.artwork-subtitle a:focus-visible {
border-color: currentColor;
}
.artwork-flags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 1.5rem 0 0;
} .artwork-stage {
display: grid;
width: min(980px, 86vw);
margin: clamp(2.5rem, 5vw, 4.5rem) auto clamp(1.75rem, 3vw, 2.75rem);
place-items: center;
}
.artwork-stage .artwork-zoom {
display: block;
padding: 0;
border: 0;
background: none;
cursor: zoom-in;
}
.artwork-stage img {
width: auto;
max-width: 100%;
max-height: 72vh;
border: 1px solid var(--line);
object-fit: contain;
}
.artwork-stage .art-placeholder {
width: 100%;
min-height: min(70vh, 720px);
border: 1px solid var(--line);
}
.single-artwork .artwork-caption {
max-width: 56ch;
margin: 0 auto;
color: var(--muted);
font-size: 0.82rem;
letter-spacing: 0.02em;
text-align: center;
}
.single-artwork .artwork-caption em {
color: var(--ink);
font-style: italic;
} .artwork-detail {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.95fr);
gap: clamp(2rem, 6vw, 6rem);
margin-top: clamp(2.5rem, 5vw, 4rem);
padding-top: clamp(2.5rem, 5vw, 4rem);
border-top: 1px solid var(--line);
}
.artwork-detail-content {
font-family: var(--serif);
font-size: clamp(1.15rem, 1.8vw, 1.45rem);
line-height: 1.65;
}
.artwork-detail-content > :first-child {
margin-top: 0;
}
.artwork-detail-content > p:first-child {
font-size: 1.3em;
line-height: 1.45;
}
.artwork-detail-content h2,
.artwork-detail-content h3 {
margin-top: 2.2em;
font-family: var(--sans);
}
.artwork-detail-aside {
position: sticky;
top: clamp(1.5rem, 4vw, 2.5rem);
align-self: start;
}
.auction-panel {
margin-bottom: 2.5rem;
padding: clamp(1.25rem, 3vw, 2rem);
border: 1px solid var(--ink);
}
.auction-panel .meta-label {
margin-bottom: 0.75rem;
}
.auction-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.auction-heading-actions,
.auction-dashboard-card-actions {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 0.5rem;
}
.auction-watch-button {
display: inline-flex;
z-index: 3;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.55rem;
border: 1px solid var(--line);
background: var(--paper);
color: var(--ink);
cursor: pointer;
font-size: 0.65rem;
}
.auction-watch-button span {
font-size: 1rem;
line-height: 1;
}
.auction-watch-button em {
font-style: normal;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.auction-watch-button:hover,
.auction-watch-button:focus-visible,
.auction-watch-button.is-watched {
border-color: var(--ink);
}
.auction-watch-button:disabled {
cursor: wait;
opacity: 0.55;
}
.auction-watch-button--card {
position: absolute;
top: 0.75rem;
right: 0.75rem;
}
.auction-watch-button--card em {
display: none;
}
.auction-watch-button--card + a .artwork-auction-badge {
max-width: calc(100% - 4rem);
}
.auction-heading h2 {
margin: 0;
font-family: var(--display);
font-size: clamp(1.5rem, 2.5vw, 2.15rem);
font-weight: 500;
}
.auction-status {
flex: 0 0 auto;
padding: 0.3rem 0.55rem;
border: 1px solid var(--line);
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.auction-status--live {
border-color: var(--accent);
background: var(--accent);
color: var(--white);
}
.auction-notice {
margin: 1rem 0 0;
padding: 0.75rem;
border: 1px solid currentColor;
font-size: 0.85rem;
}
.auction-notice--success {
color: #176b3a;
}
.auction-notice--error {
color: var(--accent);
}
.auction-price {
display: grid;
gap: 0.15rem;
margin-top: 1.5rem;
padding: 1.25rem 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.auction-price > span,
.auction-timing > span,
.auction-bid-form label {
color: var(--muted);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.auction-price strong {
font-family: var(--display);
font-size: clamp(1.8rem, 3vw, 2.5rem);
font-weight: 500;
font-variant-numeric: lining-nums;
}
.auction-price small,
.auction-bid-form small {
color: var(--muted);
}
.auction-timing {
display: grid;
gap: 0.3rem;
margin: 1.25rem 0 0;
}
.auction-countdown {
font-variant-numeric: tabular-nums;
}
.auction-bid-form {
margin-top: 1.5rem;
}
.auction-your-maximum {
margin: 0.4rem 0 0;
color: var(--ink);
font-size: 0.82rem;
font-weight: 700;
}
.auction-bid-form > div {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
margin: 0.45rem 0;
}
.auction-bid-form > div.auction-bid-phone {
display: block;
margin: 0.85rem 0 0;
}
.auction-bid-phone label {
display: block;
margin-bottom: 0.3rem;
}
.auction-bid-phone input {
width: 100%;
border: 1px solid var(--ink);
}
.auction-bid-form input {
min-width: 0;
padding: 0.75rem;
border: 1px solid var(--ink);
border-right: 0;
background: var(--paper);
}
.auction-bid-form button,
.auction-login {
display: inline-block;
padding: 0.8rem 1rem;
border: 1px solid var(--ink);
background: var(--ink);
color: var(--white);
cursor: pointer;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.auction-bid-form button:hover,
.auction-bid-form button:focus-visible,
.auction-login:hover,
.auction-login:focus-visible {
background: var(--accent);
color: var(--white);
}
.auction-login {
margin-top: 1.5rem;
}
.auction-auth-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.5rem;
}
.auction-auth-actions .auction-login {
margin-top: 0;
}
.auction-login--secondary {
background: var(--paper);
color: var(--ink);
}
.auction-login--secondary:hover,
.auction-login--secondary:focus-visible {
background: var(--ink);
color: var(--white);
} .auction-register .breadcrumbs {
padding-top: clamp(0.75rem, 1.5vw, 1.25rem);
}
.auction-register .archive-hero {
display: block;
min-height: 0;
padding: clamp(1rem, 2vw, 1.75rem) 0;
text-align: center;
}
.auction-register .section-kicker {
margin-bottom: 0.75rem;
}
.auction-register .page-title {
max-width: none;
margin: 0 auto;
grid-column: auto;
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1;
}
.auction-register .archive-description {
grid-column: auto;
max-width: 34rem;
margin: 1rem auto 0;
font-size: 1.15rem;
}
.auction-register-panel {
max-width: 32rem;
margin: clamp(2rem, 5vw, 4rem) auto;
padding: clamp(1.5rem, 4vw, 3rem);
border: 1px solid var(--line);
}
.auction-register-form {
margin-top: 0;
}
.auction-register-form > div.auction-register-field {
display: block;
margin: 1rem 0 0;
}
.auction-register-field label {
display: block;
margin-bottom: 0.3rem;
color: var(--muted);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.auction-register-field input {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--ink);
background: var(--paper);
}
.auction-register-form button {
margin-top: 1.25rem;
}
.auction-register-form small {
display: block;
margin-top: 0.75rem;
color: var(--muted);
} .auction-register-website {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.auction-register-remember {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
font-size: 0.85rem;
cursor: pointer;
}
.auction-register-remember input {
width: auto;
margin: 0;
}
.auction-register-signin {
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--line);
font-size: 0.85rem;
}
.auction-history {
margin-top: 1.5rem;
border-top: 1px solid var(--line);
}
.auction-history summary {
padding: 0.9rem 0 0;
cursor: pointer;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
}
.auction-history ul {
padding: 0;
margin: 0.75rem 0 0;
list-style: none;
}
.auction-history li {
display: grid;
grid-template-columns: 1fr auto;
gap: 0.1rem 1rem;
padding: 0.55rem 0;
border-top: 1px solid var(--line);
font-size: 0.85rem;
}
.auction-history time {
grid-column: 1 / -1;
color: var(--muted);
font-size: 0.72rem;
}
.auction-dashboard-link {
display: inline-block;
margin-top: 1.35rem;
padding-bottom: 0.15rem;
border-bottom: 1px solid var(--line);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.auction-dashboard {
padding-bottom: clamp(5rem, 9vw, 9rem);
}
.auction-dashboard-summary {
display: grid;
grid-template-columns: repeat(4, 1fr);
margin-top: clamp(2rem, 4vw, 3rem);
border-top: 1px solid var(--ink);
border-bottom: 1px solid var(--ink);
}
.auction-dashboard-summary div {
display: grid;
gap: 0.25rem;
padding: clamp(1rem, 3vw, 2rem);
}
.auction-dashboard-summary div + div {
border-left: 1px solid var(--line);
}
.auction-dashboard-summary strong {
font-family: var(--display);
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 500;
line-height: 1;
}
.auction-dashboard-summary span {
color: var(--muted);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.auction-dashboard-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.5rem;
}
.auction-dashboard-tabs a {
padding: 0.65rem 0.9rem;
border: 1px solid var(--line);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.auction-dashboard-tabs a:hover,
.auction-dashboard-tabs a:focus-visible {
border-color: var(--ink);
}
.auction-dashboard-tabs span {
margin-left: 0.35rem;
color: var(--muted);
}
.auction-dashboard-section {
scroll-margin-top: 5rem;
margin-top: clamp(3rem, 7vw, 6rem);
}
.auction-dashboard-grid {
display: grid;
gap: 1.5rem;
margin-top: 1.5rem;
}
.auction-dashboard-card {
display: grid;
grid-template-columns: minmax(140px, 0.35fr) minmax(0, 1fr);
border-top: 1px solid var(--ink);
}
.auction-dashboard-image {
min-height: 220px;
background: var(--paper-deep);
}
.auction-dashboard-image img,
.auction-dashboard-image .art-placeholder {
width: 100%;
height: 100%;
min-height: 220px;
object-fit: cover;
}
.auction-dashboard-card-body {
padding: clamp(1.25rem, 3vw, 2.5rem);
}
.auction-dashboard-card-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.auction-dashboard-card-heading h3 {
margin: 0;
font-family: var(--display);
font-size: clamp(1.5rem, 3vw, 2.5rem);
font-weight: 500;
line-height: 1.05;
}
.auction-position {
flex: 0 0 auto;
padding: 0.35rem 0.6rem;
border: 1px solid var(--line);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.auction-position--leading,
.auction-position--won {
border-color: var(--ink);
background: var(--ink);
color: var(--white);
}
.auction-position--watching {
border-color: var(--ink);
}
.auction-position--outbid {
border-color: var(--accent);
color: var(--accent);
}
.auction-dashboard-card dl {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
margin: 2rem 0;
}
.auction-dashboard-card dl div {
padding-top: 0.75rem;
border-top: 1px solid var(--line);
}
.auction-dashboard-card dt {
color: var(--muted);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.auction-dashboard-card dd {
margin: 0.35rem 0 0;
font-family: var(--serif);
font-size: 1.1rem;
}
.auction-dashboard-empty {
margin: clamp(2rem, 5vw, 4rem) 0;
padding: clamp(1.5rem, 4vw, 3rem);
border: 1px solid var(--line);
}
@media (max-width: 700px) {
.auction-dashboard-summary {
grid-template-columns: 1fr;
}
.auction-dashboard-summary div + div {
border-top: 1px solid var(--line);
border-left: 0;
}
.auction-dashboard-card {
grid-template-columns: 1fr;
}
.auction-dashboard-image {
max-height: 360px;
}
.auction-dashboard-card dl {
grid-template-columns: 1fr;
}
}
.artwork-detail-content + .artwork-detail-aside {
grid-column: 2;
}
.artwork-specs {
margin: 0;
padding: 0;
}
.artwork-spec {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 0.95rem 0;
border-top: 1px solid var(--line);
}
.artwork-spec dt {
color: var(--muted);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.artwork-spec dd {
margin: 0;
font-family: var(--serif);
font-size: 1.08rem;
line-height: 1.45;
}
.artwork-spec dd a {
border-bottom: 1px solid var(--line);
}
.artwork-spec dd a:hover,
.artwork-spec dd a:focus-visible {
border-color: currentColor;
}
.artwork-detail-aside .artwork-enquire {
display: block;
margin-top: 1.75rem;
text-align: center;
}
.single-artwork-detail .related-works {
margin-top: clamp(2rem, 2vw, 2rem);
}
@media (prefers-reduced-motion: no-preference) {
.single-artwork-detail .artwork-header {
animation: artist-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
}
@media (max-width: 900px) {
.artwork-detail {
grid-template-columns: 1fr;
}
.artwork-detail-content + .artwork-detail-aside {
grid-column: 1;
}
.artwork-detail-aside {
position: static;
}
.artwork-detail-aside .artwork-enquire {
width: fit-content;
}
} .single-exhibition-detail {
margin-top: 0;
}
.exhibition-hero {
position: relative;
display: flex;
align-items: flex-end;
min-height: min(70vh, 680px);
margin: clamp(1.25rem, 3vw, 2.5rem) 0 clamp(3rem, 6vw, 6rem);
padding: clamp(2.5rem, 6vw, 5rem) 0;
overflow: hidden;
color: var(--white);
background: var(--ink);
}
.exhibition-hero-media {
position: absolute;
inset: 0;
z-index: 0;
}
.exhibition-hero-media img,
.exhibition-hero-media .art-placeholder {
width: 100%;
height: 100%;
min-height: 0;
object-fit: cover;
}
.exhibition-hero::after {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
to top,
rgba(15, 15, 15, 0.9) 0%,
rgba(15, 15, 15, 0.4) 50%,
rgba(15, 15, 15, 0.12) 100%
);
content: "";
}
.exhibition-hero-inner {
position: relative;
z-index: 2;
width: var(--page);
margin-inline: auto;
}
.exhibition-hero-content {
max-width: 46rem;
}
.exhibition-hero .meta-label {
color: rgba(255, 255, 255, 0.82);
}
.exhibition-hero .single-title {
max-width: 20ch;
color: var(--white);
font-size: clamp(2.8rem, 7vw, 6rem);
letter-spacing: -0.015em;
line-height: 0.98;
}
.exhibition-hero-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.85rem;
margin: clamp(1.5rem, 3vw, 2rem) 0 0;
}
.exhibition-hero .exhibition-badge {
border-color: rgba(255, 255, 255, 0.55);
color: var(--white);
}
.exhibition-hero .exhibition-badge--present {
border-color: var(--white);
background: var(--white);
color: #8c2f24;
}
.exhibition-hero .exhibition-dates {
color: rgba(255, 255, 255, 0.82);
}
.exhibition-hero-lead {
max-width: 40rem;
margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
color: rgba(255, 255, 255, 0.92);
font-family: var(--serif);
font-size: clamp(1.2rem, 2vw, 1.7rem);
line-height: 1.3;
} .exhibition-body {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.95fr);
gap: clamp(2rem, 6vw, 6rem);
padding-bottom: clamp(5rem, 10vw, 11rem);
}
.exhibition-prose {
font-family: var(--serif);
font-size: clamp(1.15rem, 1.8vw, 1.45rem);
line-height: 1.65;
}
.exhibition-prose > :first-child {
margin-top: 0;
}
.exhibition-prose > p:first-child {
font-size: 1.3em;
line-height: 1.45;
}
.exhibition-prose h2,
.exhibition-prose h3 {
margin-top: 2.2em;
font-family: var(--sans);
}
.exhibition-gallery {
grid-column: 1;
margin-top: clamp(1.75rem, 4vw, 3.5rem);
}
.exhibition-gallery-slider {
position: relative;
overflow: hidden;
outline: none;
background: var(--ink);
aspect-ratio: 16 / 10;
}
.exhibition-gallery-slides {
height: 100%;
}
.exhibition-gallery-slide {
position: relative;
display: none;
flex-direction: column;
justify-content: flex-end;
width: 100%;
height: 100%;
margin: 0;
transition: opacity 480ms ease;
}
.exhibition-gallery-slide.is-active {
display: flex;
}
.exhibition-gallery-slide img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.exhibition-gallery-slide figcaption {
position: relative;
z-index: 1;
margin: 0;
padding: 0.85rem 1rem;
color: rgba(255, 255, 255, 0.84);
font-size: 0.78rem;
background: linear-gradient(to top, rgba(15, 15, 15, 0.7), transparent);
}
.exhibition-gallery-controls {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.75rem;
margin-top: 1rem;
}
.exhibition-gallery-prev,
.exhibition-gallery-next,
.exhibition-gallery-dot {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--line-strong);
background: var(--white);
color: var(--ink);
cursor: pointer;
}
.exhibition-gallery-prev,
.exhibition-gallery-next {
width: 2.45rem;
height: 2.45rem;
font-size: 1rem;
}
.exhibition-gallery-dots {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.exhibition-gallery-dot {
width: 0.55rem;
height: 0.55rem;
padding: 0;
border-radius: 999px;
}
.exhibition-gallery-dot[aria-current="true"] {
background: var(--ink);
}
.exhibition-gallery-prev:hover,
.exhibition-gallery-next:hover,
.exhibition-gallery-prev:focus-visible,
.exhibition-gallery-next:focus-visible,
.exhibition-gallery-dot:hover,
.exhibition-gallery-dot:focus-visible {
border-color: var(--ink);
}
.exhibition-visit {
position: sticky;
top: clamp(1.5rem, 4vw, 2.5rem);
grid-column: 2;
align-self: start;
}
.visit-list {
margin: 0;
padding: 0;
}
.visit-item {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 0.95rem 0;
border-top: 1px solid var(--line);
}
.visit-item dt {
color: var(--muted);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.visit-item dd {
margin: 0;
font-family: var(--serif);
font-size: 1.08rem;
line-height: 1.45;
}
.exhibition-directions {
display: inline-block;
margin-top: 1.5rem;
}
@media (prefers-reduced-motion: no-preference) {
.exhibition-hero-content {
animation: artist-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
}
@media (max-width: 900px) {
.exhibition-body {
grid-template-columns: 1fr;
}
.exhibition-visit {
position: static;
grid-column: 1;
}
}
@media (max-width: 620px) {
.exhibition-hero {
min-height: min(62vh, 520px);
}
.exhibition-gallery-slider {
aspect-ratio: 4 / 3;
}
.exhibition-gallery-controls {
justify-content: flex-start;
}
} .single-article {
padding-bottom: clamp(5rem, 10vw, 11rem);
}
.article-header {
max-width: 50rem;
margin: clamp(1.5rem, 4vw, 3.5rem) auto 0;
text-align: center;
}
.single-post .article-headline {
max-width: 22ch;
margin: 0 auto;
font-family: var(--display);
font-size: clamp(2.6rem, 5.5vw, 5rem);
font-weight: 500;
letter-spacing: -0.015em;
line-height: 1.02;
}
.article-standfirst {
max-width: 40rem;
margin: clamp(1.25rem, 2.5vw, 1.75rem) auto 0;
font-family: var(--serif);
font-size: clamp(1.3rem, 2.1vw, 1.85rem);
line-height: 1.32;
}
.article-byline {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem 1rem;
width: fit-content;
margin: clamp(1.75rem, 3vw, 2.5rem) auto 0;
padding-top: 1.25rem;
border-top: 1px solid var(--line);
color: var(--accent);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.article-byline-sep {
color: var(--line);
}
.article-lead-image {
width: min(1080px, 100%);
margin: clamp(2.5rem, 5vw, 4rem) auto clamp(0.5rem, 1vw, 1rem);
}
.article-lead-image img {
width: 100%;
}
.article-lead-image figcaption {
max-width: 40rem;
margin: 1rem auto 0;
color: var(--muted);
font-size: 0.82rem;
letter-spacing: 0.02em;
text-align: center;
}
.article-body {
max-width: 42rem;
margin: clamp(2.5rem, 5vw, 4rem) auto 0;
font-family: var(--serif);
font-size: clamp(1.18rem, 1.6vw, 1.4rem);
line-height: 1.7;
}
.article-body > :first-child {
margin-top: 0;
} .article-body > p:first-of-type::first-letter {
float: left;
margin: 0.04em 0.12em 0 0;
color: var(--accent);
font-family: var(--display);
font-size: 3.6em;
font-weight: 500;
line-height: 0.74;
}
.article-body h2,
.article-body h3 {
margin-top: 2em;
font-family: var(--sans);
line-height: 1.18;
}
.article-body img {
margin: 2rem auto;
}
.article-body blockquote {
margin: 2.25rem 0;
padding-left: 1.25rem;
border-left: 2px solid var(--ink);
font-size: 1.1em;
font-style: italic;
}
.article-body a {
border-bottom: 1px solid var(--line);
}
.article-body a:hover,
.article-body a:focus-visible {
border-color: currentColor;
}
.article-comments {
max-width: 46rem;
margin-inline: auto;
}
@media (prefers-reduced-motion: no-preference) {
.single-article .article-header {
animation: artist-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
}