:root{
  --museum-cream:#fffaf0;
  --museum-paper:#fffef9;
  --museum-image-field:#f8eedb;
  --museum-ink:#35261d;
  --museum-muted:#786452;
  --museum-line:#e3cdab;
  --museum-red:#c84634;
  --museum-red-dark:#9f3026;
  --museum-gold:#a9783e;
  --museum-shadow:0 18px 46px rgba(78,52,27,.09);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--museum-cream);
  color:var(--museum-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  line-height:1.9;
}
img{display:block;max-width:100%}
figure{margin:0}
a{color:inherit}
main{overflow:hidden}

.museum-hero{
  width:min(960px,calc(100% - 48px));
  margin:0 auto;
  padding:78px 0 86px;
  text-align:center;
}
.museum-kicker,
.collection-heading>p{
  color:var(--museum-gold);
  font-size:11px;
  font-weight:900;
  letter-spacing:.17em;
}
.museum-kicker{margin:0 0 13px}
.museum-hero h1{
  margin:0;
  font-size:clamp(38px,5.3vw,62px);
  line-height:1.2;
  letter-spacing:.055em;
}
.museum-divider{
  position:relative;
  display:block;
  width:140px;
  height:1px;
  margin:30px auto 27px;
  background:var(--museum-line);
}
.museum-divider::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:8px;
  height:8px;
  border:2px solid var(--museum-cream);
  background:var(--museum-red);
  transform:translate(-50%,-50%) rotate(45deg);
}
.museum-introduction{
  margin:0;
  color:var(--museum-muted);
  font-size:15px;
  line-height:2;
}
.museum-publication{
  width:min(1000px,calc(100% - 48px));
  margin:0 auto;
  padding:0 0 64px;
}
.publication-card{
  position:relative;
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  align-items:center;
  min-height:246px;
  overflow:hidden;
  border:1px solid var(--museum-line);
  border-radius:28px;
  background:
    linear-gradient(90deg,rgba(210,175,117,.08) 1px,transparent 1px),
    linear-gradient(0deg,rgba(210,175,117,.08) 1px,transparent 1px),
    var(--museum-paper);
  background-size:24px 24px;
  box-shadow:var(--museum-shadow);
}
.publication-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:8px;
  background:var(--museum-red);
}
.publication-number{
  display:flex;
  align-self:stretch;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-right:1px solid var(--museum-line);
  background:rgba(248,238,219,.78);
  color:var(--museum-gold);
  text-align:center;
}
.publication-number span{
  font-size:10px;
  font-weight:900;
  letter-spacing:.2em;
  writing-mode:vertical-rl;
}
.publication-number strong{
  margin-top:13px;
  color:var(--museum-red);
  font-family:Georgia,"Times New Roman",serif;
  font-size:52px;
  font-weight:400;
  line-height:1;
}
.publication-copy{
  padding:36px 150px 36px 48px;
}
.publication-kicker{
  margin:0 0 7px;
  color:var(--museum-gold);
  font-size:10px;
  font-weight:900;
  letter-spacing:.16em;
}
.publication-copy h2{
  margin:0;
  font-size:clamp(27px,3.4vw,39px);
  line-height:1.35;
  letter-spacing:.055em;
}
.publication-copy h2 span{display:inline}
.publication-copy h2 span+span::before{content:" "}
.publication-description{
  margin:13px 0 22px;
  color:var(--museum-muted);
  font-size:14px;
  line-height:1.9;
}
.publication-link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:11px 18px;
  border:1px solid var(--museum-red-dark);
  border-radius:999px;
  background:var(--museum-red);
  color:#fff;
  font-size:13px;
  font-weight:900;
  line-height:1.4;
  text-decoration:none;
  transition:transform .2s ease,background .2s ease;
}
.publication-link span{
  padding-right:12px;
  border-right:1px solid rgba(255,255,255,.4);
  font-size:9px;
  letter-spacing:.08em;
}
.publication-link:hover{
  background:var(--museum-red-dark);
  transform:translateY(-1px);
}
.publication-link:focus-visible{
  outline:3px solid #d89a29;
  outline-offset:4px;
}
.publication-free{
  position:absolute;
  top:30px;
  right:28px;
  display:grid;
  width:82px;
  height:82px;
  place-items:center;
  border:2px solid var(--museum-red);
  border-radius:50%;
  color:var(--museum-red);
  font-size:12px;
  font-weight:900;
  letter-spacing:.13em;
  transform:rotate(8deg);
}
.collection-section{
  width:min(1080px,calc(100% - 48px));
  margin:0 auto;
  padding:54px 0 118px;
}
.collection-section+.collection-section{
  padding-top:116px;
  border-top:1px solid var(--museum-line);
}
.collection-section-last{padding-bottom:148px}
.collection-heading{
  margin-bottom:38px;
  text-align:center;
}
.collection-heading>p{margin:0 0 8px}
.collection-heading h2{
  margin:0;
  font-size:clamp(29px,3.7vw,42px);
  line-height:1.35;
  letter-spacing:.07em;
}

.exhibit-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;
  width:min(1000px,100%);
  margin:0 auto;
}
.exhibit-card{
  display:flex;
  min-width:0;
  overflow:hidden;
  flex-direction:column;
  border:1px solid var(--museum-line);
  border-radius:26px;
  background:var(--museum-paper);
  box-shadow:var(--museum-shadow);
}
.exhibit-card:last-child:nth-child(odd){
  grid-column:1/-1;
  width:calc((100% - 28px)/2);
  justify-self:center;
}
.exhibit-visual{
  --exhibit-padding:24px;
  position:relative;
  flex:0 0 auto;
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  border-bottom:1px solid rgba(203,171,122,.45);
  background:linear-gradient(145deg,#fbf4e7 0%,var(--museum-image-field) 100%);
}
.exhibit-visual img{
  position:absolute;
  inset:var(--exhibit-padding);
  width:calc(100% - (var(--exhibit-padding) * 2));
  height:calc(100% - (var(--exhibit-padding) * 2));
  object-fit:contain;
}
.exhibit-visual img.exhibit-object{
  filter:drop-shadow(0 7px 6px rgba(70,45,24,.13));
}
.exhibit-copy{
  display:flex;
  flex:1;
  flex-direction:column;
  align-items:center;
  padding:25px 28px 30px;
  text-align:center;
}
.exhibit-copy h3{
  margin:0;
  font-size:clamp(21px,2.35vw,28px);
  line-height:1.48;
  letter-spacing:.045em;
}
.exhibit-copy h3::after{
  content:"";
  display:block;
  width:34px;
  height:1px;
  margin:17px auto 15px;
  background:#d6b67f;
}
.exhibit-description{
  margin:0;
  color:var(--museum-muted);
  font-size:14px;
  line-height:1.95;
}

.museum-footer{
  padding:30px 20px 28px;
  border-top:1px solid var(--museum-line);
  color:#796452;
  text-align:center;
}
.museum-footer nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 24px;
}
.museum-footer .footer-nav-row{display:contents}
.museum-footer a{
  font-size:12px;
  font-weight:800;
  text-decoration:none;
}
.museum-footer>p{
  margin:17px 0 0;
  font-size:11px;
}
.museum-footer a:focus-visible{
  outline:3px solid #d89a29;
  outline-offset:4px;
}

@media(max-width:760px){
  .museum-hero{
    width:min(100% - 28px,960px);
    padding:48px 0 65px;
  }
  .museum-kicker{margin-bottom:10px;font-size:9px}
  .museum-hero h1{
    font-size:clamp(28px,8.6vw,40px);
    letter-spacing:.025em;
  }
  .museum-divider{margin:24px auto 21px}
  .museum-introduction{font-size:13px;line-height:1.9}
  .museum-publication{
    width:min(100% - 28px,540px);
    padding-bottom:44px;
  }
  .publication-card{
    display:block;
    min-height:0;
    border-radius:22px;
  }
  .publication-card::before{
    inset:0 0 auto;
    width:auto;
    height:6px;
  }
  .publication-number{
    display:none;
  }
  .publication-copy{
    padding:31px 22px 27px;
    text-align:center;
  }
  .publication-kicker{
    margin-bottom:7px;
    font-size:9px;
  }
  .publication-copy h2{
    font-size:clamp(20px,6.2vw,27px);
    letter-spacing:.025em;
  }
  .publication-copy h2 span{
    display:block;
    white-space:nowrap;
  }
  .publication-copy h2 span+span::before{content:""}
  .publication-description{
    margin:14px 0 21px;
    font-size:12.5px;
    line-height:1.85;
  }
  .publication-description br{display:none}
  .publication-link{
    gap:9px;
    padding:10px 15px;
    font-size:12px;
  }
  .publication-link span{
    padding-right:9px;
    font-size:8px;
  }
  .publication-free{display:none}
  .collection-section{
    width:min(100% - 28px,540px);
    padding:38px 0 86px;
  }
  .collection-section+.collection-section{
    padding-top:84px;
  }
  .collection-section-last{padding-bottom:104px}
  .collection-heading{margin-bottom:27px}
  .collection-heading>p{margin-bottom:6px;font-size:9px}
  .collection-heading h2{
    font-size:clamp(25px,7.5vw,34px);
    letter-spacing:.045em;
  }

  .exhibit-grid{
    grid-template-columns:1fr;
    gap:20px;
  }
  .exhibit-card:last-child:nth-child(odd){
    grid-column:auto;
    width:100%;
  }
  .exhibit-visual{--exhibit-padding:17px}
  .exhibit-copy{padding:22px 20px 25px}
  .exhibit-copy h3{
    font-size:clamp(20px,6.2vw,25px);
    letter-spacing:.025em;
  }
  .exhibit-copy h3::after{margin:14px auto 13px}
  .exhibit-description{font-size:13px;line-height:1.9}

  .museum-footer{padding:26px 14px 24px}
  .museum-footer .footer-nav{
    width:100%;
    flex-direction:column;
    align-items:center;
    gap:7px;
  }
  .museum-footer .footer-nav-row{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
  }
  .museum-footer .footer-nav-row-primary{
    gap:clamp(12px,4vw,18px);
  }
  .museum-footer .footer-nav-row-secondary{
    gap:clamp(7px,2.8vw,12px);
  }
  .museum-footer .footer-nav a{
    white-space:nowrap;
    font-size:clamp(10px,3.2vw,12px);
    letter-spacing:.02em;
  }
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .publication-link{transition:none}
}
