:root{--paper:#f4f2ed;--ink:#171714;--muted:#62605a;--rule:#cbc7bf;--max:1500px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}
.site-header{max-width:var(--max);margin:auto;padding:30px 42px 26px;display:flex;justify-content:space-between;align-items:center}.brand{font-size:19px;letter-spacing:.34em;white-space:nowrap}.nav{display:flex;gap:36px;font-size:10px;letter-spacing:.18em;text-transform:uppercase}
main{max-width:var(--max);margin:auto;padding:0 42px 36px}.home-hero{display:block}.home-hero img{width:100%;height:min(72vh,760px);object-fit:contain;display:block}.home-link{text-align:right;padding:15px 0 28px;font-size:9px;letter-spacing:.18em;text-transform:uppercase}
footer{max-width:var(--max);margin:auto;padding:0 42px 24px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted)}
.work-index,.text-page{display:grid;grid-template-columns:150px minmax(0,1fr);gap:54px;padding:52px 0 80px}.section-label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;padding-top:3px}
.work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 34px;align-items:start}.work-card img{width:100%;height:auto;display:block}.work-card div{display:flex;justify-content:space-between;gap:12px;padding-top:10px;font-size:11px}.work-card small{font-size:9px;color:var(--muted);white-space:nowrap}
.artwork-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:64px;align-items:center;min-height:calc(100vh - 150px);padding:24px 28px 38px}.artwork-stage{display:flex;align-items:center;justify-content:center;min-height:64vh}.artwork-stage img{max-width:100%;max-height:72vh;width:auto;height:auto;display:block}.meta h1{font-size:14px;letter-spacing:.08em;font-weight:500;margin:0 0 16px}.details{font-size:11px;line-height:1.65;color:var(--muted);margin-bottom:25px}.meta p{font-size:12px;line-height:1.7;color:var(--muted);max-width:255px;margin:0}.pager{border-top:1px solid var(--rule);display:grid;grid-template-columns:1fr 1fr 1fr;padding:18px 0 3px;font-size:9px;letter-spacing:.16em;text-transform:uppercase}.pager a:nth-child(2){text-align:center}.pager a:last-child{text-align:right}
.statement{max-width:700px}.statement p{font-size:14px;line-height:1.76;color:var(--muted);margin:0 0 20px}.events{border-top:1px solid var(--rule);max-width:800px}.events article{display:grid;grid-template-columns:70px 1fr;gap:30px;padding:30px 0 42px;border-bottom:1px solid var(--rule)}.events time{font-size:11px;color:var(--muted)}.events h2{font-size:14px;font-weight:500;margin:0 0 10px}.events p,.contact p{font-size:12px;line-height:1.65;color:var(--muted);margin:0 0 13px}.events .strong{color:var(--ink)}.contact{border-top:1px solid var(--rule);max-width:700px}.contact p{padding:28px 0;margin:0;border-bottom:1px solid var(--rule);font-size:13px}.contact a{color:var(--ink);border-bottom:1px solid var(--rule)}
@media(max-width:850px){.site-header{padding:20px 20px 17px;align-items:flex-start;gap:16px}.brand{font-size:17px;letter-spacing:.23em}.nav{gap:15px;font-size:9px;flex-wrap:wrap;justify-content:flex-end}main{padding:0 20px 26px}.home-hero img{height:auto;max-height:none}.home-link{font-size:9px}.work-index,.text-page{grid-template-columns:1fr;gap:20px;padding:30px 0 55px}.work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 16px}.work-card div{font-size:10px;display:block}.work-card small{display:block;margin-top:4px}.artwork-layout{grid-template-columns:1fr;gap:24px;min-height:auto;padding:16px 0 30px}.artwork-stage{min-height:auto}.artwork-stage img{width:100%;height:auto;max-height:none;object-fit:contain}.meta h1{font-size:14px}.details{font-size:11.5px}.meta p{font-size:13px;line-height:1.62;max-width:620px}.statement p{font-size:13.5px;line-height:1.66}.events article{grid-template-columns:48px 1fr;gap:15px}.events p,.contact p{font-size:13px}.pager{font-size:9px}footer{padding:0 20px 20px;font-size:8px}}
@media(max-width:520px){.site-header{display:block}.nav{justify-content:flex-start;margin-top:15px;gap:13px 17px}.work-grid{grid-template-columns:1fr;gap:38px}.brand{font-size:17px}}

/* Scale-responsive All Work gallery */
.work-index{
  grid-template-columns:150px minmax(0,1fr);
}
.work-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:24px;
  row-gap:86px;
  align-items:center;
}
.work-card{
  justify-self:center;
  width:100%;
}
.work-card img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}
.work-card.scale-small{grid-column:span 3;max-width:240px}
.work-card.scale-medium{grid-column:span 4;max-width:390px}
.work-card.scale-large{grid-column:span 5;max-width:520px}
.work-card.scale-xl{grid-column:span 6;max-width:650px}

/* Introduce irregularity so the page reads like a curated wall rather than a catalogue grid */
.work-card:nth-child(3n+2){align-self:end}
.work-card:nth-child(4n){align-self:start}
.work-card:nth-child(7n+1){margin-top:34px}
.work-card:nth-child(5n+3){margin-bottom:26px}

.work-card div{
  display:block;
  padding-top:10px;
  font-size:10px;
  line-height:1.4;
}
.work-card small{
  display:block;
  margin-top:4px;
  font-size:9px;
  color:var(--muted);
}

@media(max-width:1000px) and (min-width:851px){
  .work-grid{grid-template-columns:repeat(10,minmax(0,1fr));row-gap:70px}
  .work-card.scale-small{grid-column:span 3}
  .work-card.scale-medium{grid-column:span 4}
  .work-card.scale-large{grid-column:span 5}
  .work-card.scale-xl{grid-column:span 6}
}

@media(max-width:850px){
  .work-grid{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:54px;
  }
  .work-card{margin:0!important;align-self:center!important}
  .work-card.scale-small{width:58%;max-width:none}
  .work-card.scale-medium{width:74%;max-width:none}
  .work-card.scale-large{width:88%;max-width:none}
  .work-card.scale-xl{width:100%;max-width:none}
  .work-card div{font-size:10px}
  .work-card small{font-size:9px}
}

/* Stronger mobile scale variation */
@media(max-width:850px){
  .work-grid{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:58px;
  }

  .work-card{
    margin:0!important;
    align-self:center!important;
  }

  /* Small intimate works remain visibly small */
  .work-card.scale-small{
    width:46%;
    max-width:240px;
  }

  /* Medium works sit clearly between small and large */
  .work-card.scale-medium{
    width:68%;
    max-width:420px;
  }

  /* Large works now nearly fill the mobile viewport */
  .work-card.scale-large{
    width:92%;
    max-width:620px;
  }

  /* Largest and widest works go full width */
  .work-card.scale-xl{
    width:100%;
    max-width:none;
  }

  /* Any landscape/panoramic image should feel expansive */
  .work-card img{
    height:auto;
    max-height:none;
  }
}

/* On narrow phones push the contrast even further */
@media(max-width:520px){
  .work-card.scale-small{width:42%}
  .work-card.scale-medium{width:66%}
  .work-card.scale-large{width:94%}
  .work-card.scale-xl{width:100%}
}

/* Mobile gallery v3 — explicit, high-contrast sizing */
@media(max-width:850px){
  .work-grid{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:64px !important;
  }

  .work-card{
    display:block !important;
    margin:0 !important;
    justify-self:auto !important;
    align-self:center !important;
    max-width:none !important;
  }

  .work-card.mobile-small{
    width:44% !important;
  }

  .work-card.mobile-near{
    width:78% !important;
  }

  .work-card.mobile-full{
    width:100% !important;
  }

  .work-card img{
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
  }

  .work-card div{
    padding-top:10px !important;
  }
}

@media(max-width:520px){
  .work-card.mobile-small{width:40% !important;}
  .work-card.mobile-near{width:76% !important;}
  .work-card.mobile-full{width:100% !important;}
}

/* Mobile gallery v4 — fix parent grid and make scale differences obvious */
@media(max-width:850px){
  .work-index{
    display:block !important;
    padding:30px 0 55px !important;
  }

  .work-index > .section-label{
    display:block !important;
    margin-bottom:34px !important;
  }

  .work-grid{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    align-items:center !important;
    gap:62px !important;
  }

  .work-card{
    display:block !important;
    max-width:none !important;
    margin:0 auto !important;
    align-self:center !important;
  }

  .work-card.mobile-small{
    width:42% !important;
  }

  .work-card.mobile-near{
    width:72% !important;
  }

  .work-card.mobile-full{
    width:100% !important;
  }

  .work-card img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:none !important;
  }
}

@media(max-width:520px){
  .work-card.mobile-small{width:38% !important;}
  .work-card.mobile-near{width:70% !important;}
  .work-card.mobile-full{width:100% !important;}
}

/* Mobile gallery v5 — true proportional width based on published painting width.
   122 cm = 100% of gallery width; every other work scales directly from that. */
@media(max-width:850px){
  .work-index{
    display:block !important;
  }

  .work-grid{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    width:100% !important;
    gap:64px !important;
  }

  .work-card{
    width:calc(var(--physical-width) / 122 * 100%) !important;
    max-width:100% !important;
    margin:0 auto !important;
    align-self:center !important;
  }

  .work-card img{
    width:100% !important;
    height:auto !important;
    max-width:none !important;
    display:block !important;
  }

  /* Neutralise the earlier approximate mobile size classes. */
  .work-card.mobile-small,
  .work-card.mobile-near,
  .work-card.mobile-full{
    max-width:100% !important;
  }
}

/* Mobile gallery v6 — ensure ALL prior size classes obey exact published width */
@media(max-width:850px){
  .work-card,
  .work-card.mobile-small,
  .work-card.mobile-near,
  .work-card.mobile-full,
  .work-card.scale-small,
  .work-card.scale-medium,
  .work-card.scale-large,
  .work-card.scale-xl{
    width:calc(var(--physical-width) / 122 * 100%) !important;
    max-width:100% !important;
  }
}