:root{ --navw: 200px; --gap: 10px; }
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{font-family: "trade-gothic-next", sans-serif; 
  font-weight: 400;
  font-size:10pt; line-height:1.3; color:#333; background:#fff;}
a{color:#333; text-decoration:none}
a:hover{text-decoration:underline}
/* Shell */
.wrapper{display:grid; grid-template-columns: var(--navw) 1fr; min-height:100vh}
/* Left column nav */
nav{
  padding:8px 36px 24px 65px;
  position:sticky; top:0;
  display:flex; flex-direction:column; align-items:flex-start;
  justify-content:center; gap:var(--gap);
  line-height:1;
  font-size:11pt;
  font-weight:500;
}
body:not(:has(#home)) .menu a.active {
  text-decoration: underline;
}
@media (min-width: 761px) {
  nav {
    height: 100vh;
  }
}
.brand{font-weight:700; font-size:11pt; text-align:left}
.brand.active{font-weight:700}
.menu{display:flex; flex-direction:column; gap:var(--gap)}
.menu a{font-weight:500; font-size:10pt;}
.menu a.active{font-weight:500}
/* Main column */
main{padding:8px 24px 24px; max-width:1100px}
p{margin:0 0 calc(var(--gap) - 2px)}
.meta{color:#333}
.exh-title {
  font-size: 13pt;
  font-weight: 600;
}
.exh-info {
  font-size: 11pt;
  font-weight: 400;
}
.exh-meta {
  font-size: 9pt;
  font-weight: 400;
  color: #333;
}
/* Footer fixed to bottom-right of the viewport on every page */
.footer{
  position: fixed;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 3px 5px;
  z-index: 999;
  pointer-events: none;
  color:#333;
}
/* HOME: full-viewport snap */
#home{padding:0; max-width:none}
#home .stack{margin:0}
#home .snap{
  height:100vh;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
}
#home .snap figure{
  margin:0;
  min-height:100vh;
  display:grid;
  grid-template-rows: auto auto;
  row-gap:12px;
  align-content:center;
  justify-items:start;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  box-sizing:border-box;
}
#home .snap .viewport{
  max-height:88vh;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
#home .snap .viewport img{
  display:block;
  max-height:100%;
  max-width:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}
#home .snap figcaption{
  font-size:8pt;
  padding:0;
}
/* Exhibitions */
.exhibitions{
  display:grid; grid-template-columns: 1fr 1fr; gap:var(--gap);
}
.exhibitions .middle{display:flex; flex-direction:column; gap:var(--gap)}
.exhibitions .thumb{cursor:pointer}
.exhibitions .right .stack{display:flex; flex-direction:column; gap:var(--gap)}
.placeholder{color:#333}
/* About / Contact */
.vcenter{
  min-height: 100vh;
  display:flex; 
  align-items:center;
}
.about-wrap, .contact-wrap{max-width:400px}
@media (max-width: 960px){
  .exhibitions{grid-template-columns: 1fr}
}
@media (max-width: 760px){
  .wrapper{grid-template-columns: 1fr; display: block;}
  nav{
    position: relative;
    height: auto;
    min-height: 0;
    justify-content: flex-start;
    padding: 16px 24px 18px;
    background: #fff;
    z-index: 100;
  }
  .vcenter{
    min-height: 0;
    height: auto;
    align-items: flex-start;
    padding-top: 0;
  }
  
  main {
    padding-top: 20px;
  }
  
  /* Prevent body scroll on home page */
  body:has(#home) {
    overflow: hidden;
    height: 100vh;
  }
  
  #home {
    height: calc(100vh - 60px);
    overflow: hidden;
    padding: 0 !important;
  }
  
  #home .snap {
    height: 100%;
  }
}