/* Self-hosted fonts from the approved reference; licenses in assets/fonts/. */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-regular.ttf') format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/instrument-serif-regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/instrument-serif-italic.ttf') format('truetype');
}
/* Approved visual system and responsive layout. */
:root {
  --paper:#f4f1e9;
  --ink:#171717;
  --muted:#66645f;
  --line:#cbc8bf
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.55 'DM Sans',Arial,sans-serif
}
a {
  color:inherit;
  text-decoration:none
}
a:hover {
  text-decoration:underline;
  text-underline-offset:5px
}
button {
  font:inherit;
  color:inherit
}
img {
  display:block;
  max-width:100%;
  height:auto
}
header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:29px 4.5%;
  border-bottom:1px solid var(--line)
}
.brand {
  font-size:16px;
  letter-spacing:.08em
}
header nav {
  display:flex;
  gap:36px
}
header nav a {
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em
}
header nav a[aria-current] {
  text-decoration:underline;
  text-underline-offset:6px
}
.menu {
  display:none
}
.skip {
  position:absolute;
  left:10px;
  top:-100px;
  background:var(--paper);
  padding:10px;
  z-index:5
}
.skip:focus {
  top:10px
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3,.serif {
  font-family:'Instrument Serif',Georgia,serif;
  font-weight:400
}
h2 {
  font-size:clamp(40px,5vw,70px);
  line-height:1.05
}
.hero {
  min-height:810px;
  position:relative;
  padding:64px 4.5% 60px;
  display:grid;
  grid-template-columns:38% 62%;
  align-items:center
}
.hero h1 {
  font-size:clamp(70px,8.8vw,142px);
  line-height:.86;
  letter-spacing:-.035em;
  position:relative;
  z-index:1
}
.hero h1 span {
  display:block
}
.hero-copy {
  align-self:center;
  padding-bottom:80px
}
.eyebrow {
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.13em
}
.hero-copy .eyebrow {
  margin-top:32px
}
.hero-work {
  justify-self:center;
  width:100%;
  max-width:660px
}
.hero-work img {
  max-height:690px;
  width:100%;
  object-fit:contain
}
.caption {
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:12px;
  color:var(--muted);
  margin-top:13px
}
.hero-foot {
  position:absolute;
  bottom:30px;
  left:4.5%;
  font-size:13px
}
.intro {
  border-top:1px solid var(--line);
  padding:105px 12% 115px 21%;
  position:relative
}
.intro .eyebrow {
  position:absolute;
  left:4.5%;
  top:114px
}
.intro p {
  font-family:'Instrument Serif',Georgia,serif;
  font-size:clamp(28px,3.4vw,47px);
  line-height:1.2;
  max-width:1000px
}
.section {
  padding:70px 7%
}
.section-head {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:70px
}
.textlink {
  font-size:14px;
  border-bottom:1px solid var(--ink);
  padding-bottom:5px
}
.gallery {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:95px 7%
}
.art {
  grid-column:span 5;
  align-self:start
}
.art:nth-child(4n+1) {
  grid-column:1 / span 6
}
.art:nth-child(4n+2) {
  grid-column:9 / span 4;
  margin-top:140px
}
.art:nth-child(4n+3) {
  grid-column:2 / span 4
}
.art:nth-child(4n) {
  grid-column:7 / span 6;
  margin-top:110px
}
.art img {
  width:100%;
  transition:opacity .2s
}
.art:hover img {
  opacity:.91
}
.art .caption span:first-child {
  color:var(--ink)
}
.interlude {
  margin:110px auto 140px;
  width:78%;
  display:flex;
  justify-content:center
}
.interlude img {
  max-height:760px;
  object-fit:contain
}
.about-preview {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15%;
  align-items:center;
  border-top:1px solid var(--line);
  padding:100px 9%
}
.about-preview h2 {
  margin:25px 0
}
.about-preview p {
  margin-bottom:28px;
  max-width:460px
}
.about-preview img {
  width:100%
}
.exhibitions {
  padding:90px 9% 120px
}
.ex-row {
  border-top:1px solid var(--line);
  padding:24px 0;
  display:grid;
  grid-template-columns:15% 1fr;
  gap:20px
}
.ex-row h3 {
  font-size:29px
}
.ex-row p {
  font-size:14px;
  color:var(--muted)
}
.exhibitions h2 {
  margin-bottom:50px
}
.closing {
  border-top:1px solid var(--line);
  padding:75px 9% 85px
}
.closing h2 {
  max-width:850px;
  margin:20px 0 35px
}
.closing a {
  font-size:18px
}
footer {
  border-top:1px solid var(--line);
  padding:30px 4.5%;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:12px
}
.page-head {
  padding:75px 7% 55px
}
.page-head h1 {
  font-size:clamp(70px,10vw,130px);
  line-height:1.05
}
.page-head p {
  margin-top:20px;
  max-width:580px
}
.filters {
  display:flex;
  gap:25px;
  flex-wrap:wrap;
  padding:0 7% 50px
}
.filters button {
  border:0;
  background:none;
  padding:8px 0;
  cursor:pointer;
  color:var(--muted)
}
.filters button[aria-pressed=true] {
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:6px
}
.work-grid {
  padding:0 7% 100px;
  columns:3;
  column-gap:6%
}
.work-grid .art {
  break-inside:avoid;
  display:block;
  margin:0 0 65px
}
.work-grid .art[hidden] {
  display:none
}
.detail {
  padding:70px 6%;
  display:grid;
  grid-template-columns:65% 1fr;
  gap:7%;
  align-items:start
}
.detail-image {
  background:none;
  border:0;
  padding:0;
  cursor:zoom-in
}
.detail-image img {
  max-height:85vh;
  width:100%;
  object-fit:contain
}
.detail-info {
  padding-top:40px
}
.detail h1 {
  font-size:64px;
  line-height:1.05;
  margin:22px 0 32px
}
.detail dl {
  font-size:14px
}
.detail dt {
  color:var(--muted);
  margin-top:20px
}
.detail dd {
  margin:2px 0
}
.pager {
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--line);
  margin:30px 7% 90px;
  padding-top:25px
}
.bio {
  padding:0 9% 100px
}
.bio-lead {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12%;
  align-items:center
}
.bio-lead .serif {
  font-size:40px;
  line-height:1.18
}
.bio-copy {
  max-width:680px;
  margin:90px 0 90px 28%
}
.bio-copy p {
  margin:25px 0
}
.bio-art {
  width:42%;
  margin-left:8%
}
.statement {
  margin:90px 10% 0 28%
}
.statement p {
  margin-top:25px;
  font-size:23px
}
.contact-layout {
  min-height:62vh;
  padding:0 7% 100px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12%
}
.contact-layout p {
  max-width:450px;
  font-size:22px
}
.contact-links {
  display:flex;
  flex-direction:column;
  gap:24px
}
.contact-links a {
  font-family:'Instrument Serif',Georgia,serif;
  font-size:42px;
  border-bottom:1px solid var(--line)
}
dialog {
  border:0;
  width:100vw;
  max-width:none;
  height:100vh;
  max-height:none;
  padding:40px;
  background:var(--paper)
}
dialog::backdrop {
  background:var(--paper)
}
dialog img {
  height:100%;
  width:100%;
  object-fit:contain
}
dialog button {
  position:fixed;
  right:22px;
  top:16px;
  padding:12px 18px;
  background:var(--paper);
  border:1px solid var(--line);
  cursor:pointer
}
.empty {
  font-size:22px;
  padding:40px
}
.sources {
  font-size:13px;
  color:var(--muted);
  margin-top:50px
}
.sources a {
  text-decoration:underline
}
.small-title {
  font-size:36px;
  margin:60px 0 30px
}
a:focus-visible,button:focus-visible {
  outline:2px solid #254e83;
  outline-offset:5px
}

@media(min-width:1600px) {
  main {
  max-width:1700px;
  margin:auto
}

}
@media(max-width:760px) {
  header {
  padding:22px 6%;
  position:relative
}
.brand {
  font-size:14px
}
.menu {
  display:block;
  border:0;
  background:none;
  padding:8px
}
header nav {
  display:none;
  position:absolute;
  top:78px;
  left:0;
  right:0;
  padding:24px 6%;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  z-index:5;
  flex-direction:column;
  gap:20px
}
header nav.open {
  display:flex
}
.hero {
  padding:45px 6% 65px;
  display:flex;
  flex-direction:column;
  min-height:0;
  align-items:stretch
}
.hero-copy {
  padding:0;
  align-self:stretch
}
.hero h1 {
  font-size:clamp(65px,14vw,110px)
}
.hero h1 span {
  display:inline
}
.hero h1 span+span:before {
  content:' '
}
.hero-copy .eyebrow {
  margin-top:20px;
  margin-bottom:35px
}
.hero-work {
  max-width:100%
}
.hero-work img {
  max-height:none
}
.hero-foot {
  bottom:15px;
  left:6%
}
.intro {
  padding:50px 6% 65px
}
.intro .eyebrow {
  position:static;
  margin-bottom:25px
}
.intro p {
  font-size:32px
}
.section {
  padding:55px 6%
}
.section-head {
  margin-bottom:40px
}
.gallery {
  gap:60px;
  display:block
}
.gallery .art {
  display:block;
  width:100%;
  margin:0 0 60px
}
.gallery .art:nth-child(even) {
  width:78%;
  margin-left:auto
}
.interlude {
  width:90%;
  margin:30px auto 75px
}
.about-preview {
  padding:60px 6%;
  gap:40px;
  display:flex;
  flex-direction:column
}
.about-preview img {
  max-width:440px
}
.exhibitions {
  padding:60px 6%
}
.ex-row {
  grid-template-columns:55px 1fr;
  gap:15px
}
.ex-row h3 {
  font-size:25px
}
.closing {
  padding:55px 6%
}
.closing h2 {
  font-size:42px
}
footer {
  flex-wrap:wrap;
  padding:25px 6%
}
.page-head {
  padding:50px 6% 35px
}
.filters {
  padding:0 6% 35px;
  gap:20px
}
.work-grid {
  columns:1;
  padding:0 6% 50px
}
.work-grid .art {
  margin-bottom:45px
}
.detail {
  display:block;
  padding:35px 6%
}
.detail-info {
  padding:30px 0
}
.detail h1 {
  font-size:50px
}
.detail dl {
  display:grid;
  grid-template-columns:1fr 1fr
}
.detail dd {
  margin-top:20px
}
.bio {
  padding:0 6% 60px
}
.bio-lead {
  display:flex;
  flex-direction:column;
  gap:40px
}
.bio-lead .serif {
  font-size:32px
}
.bio-copy {
  margin:50px 0
}
.bio-art {
  width:85%;
  margin:0
}
.statement {
  margin:50px 0 0
}
.contact-layout {
  display:block;
  padding:0 6% 60px
}
.contact-links {
  margin-top:50px
}
.contact-links a {
  font-size:35px
}
.caption {
  font-size:12px
}
dialog {
  padding:15px
}

}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}
* {
  transition:none!important
}

}


/* Enquiries: retain the portfolio’s existing typography and text-link treatment. */
.artwork-enquiry {
  border-top:1px solid var(--line);
  margin-top:38px;
  padding-top:28px
}

.artwork-enquiry h2 {
  font-size:30px;
  line-height:1.15
}

.artwork-enquiry p {
  font-size:14px;
  line-height:1.6;
  margin:16px 0 20px;
  color:var(--muted)
}

.enquiry-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px 26px;
  align-items:center
}

.enquiry-actions a {
  display:inline-flex;
  align-items:center;
  min-height:44px
}

.closing-copy {
  max-width:650px;
  margin:-12px 0 30px
}

.contact-method .eyebrow {
  display:block;
  margin-bottom:8px;
  color:var(--muted)
}

.contact-method a {
  display:block;
  overflow-wrap:anywhere
}

.contact-links .profile-links {
  display:flex;
  flex-wrap:wrap;
  gap:16px 24px;
  margin-top:22px
}

.contact-links .profile-links a {
  font:14px/1.55 'DM Sans',Arial,sans-serif;
  border:0;
  min-height:44px;
  display:inline-flex;
  align-items:center
}

@media(max-width:760px) {
  .artwork-enquiry {
  margin-top:26px
}
.contact-method a {
  font-size:32px
}

}


/* Accessibility and production refinements. */
[hidden] { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
#main:focus { outline: none; }
.artwork-open { overflow: hidden; }
.detail-image { display: block; }
.detail-info { min-width: 0; }
.detail h1 { overflow-wrap: anywhere; }
.exhibitions-more { margin-top: 35px; }
.exhibitions-history { padding-top: 15px; }
.filters button { min-height: 44px; }
@media (max-width: 760px) {
  html:not(.enhanced) header { flex-wrap: wrap; }
  html:not(.enhanced) header nav {
    display: flex;
    position: static;
    width: 100%;
    border: 0;
    padding: 22px 0 0;
  }
  .menu { min-height: 44px; }
  header nav { top: 100%; }
  header nav a { min-height: 44px; display: flex; align-items: center; }
  .hero h1 { font-size: clamp(56px, 16.67vw, 110px); }
  .page-head h1 { overflow-wrap: anywhere; }
  .pager { gap: 20px; }
  .pager a { min-height: 44px; }
}

.statement h2 { margin-top: 20px; }
@media (max-width: 760px) { header { padding: 20px 6%; } }