:root {
  --paper:#eae7f0;
  --ink:#2e2940;
  --line:#bbb6c7;
  --lilac:#b7a4da;
  --red:#d84730;
  --space:clamp(24px,5vw,80px);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none;
  scroll-behavior:smooth
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
a {
  color:inherit;
  text-decoration:none
}
a:focus-visible,button:focus-visible {
  outline:3px solid var(--red);
  outline-offset:7px
}
::selection {
  background:var(--ink);
  color:var(--paper)
}
.skip {
  position:fixed;
  top:-100px;
  left:20px;
  background:var(--ink);
  color:#fff;
  padding:16px;
  z-index:20
}
.skip:focus {
  top:16px
}
.masthead {
  height:106px;
  margin:0 var(--space);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-size:14px
}
.wordmark {
  display:flex;
  align-items:center;
  gap:12px
}
.mark {
  font-size:35px;
  font-weight:400;
  line-height:1
}
.masthead nav {
  display:flex;
  gap:36px
}
.masthead nav span {
  font-size:10px;
  vertical-align:super;
  margin-left:4px
}
.masthead a:hover,footer a:hover {
  text-decoration:underline;
  text-underline-offset:6px
}
.hero {
  padding:36px var(--space) 0;
  overflow:hidden
}
.hero-top {
  display:flex;
  justify-content:space-between;
  font-size:15px;
  line-height:1.4
}
.hero-top p {
  margin:0
}
.edition {
  text-align:right;
  font-size:12px
}
.hero h1 {
  font-size:clamp(114px,22.2vw,350px);
  font-weight:500;
  line-height:.76;
  letter-spacing:-.085em;
  margin:50px 0 52px;
  position:relative;
  user-select:none
}
.hero h1>span {
  display:block
}
.hero .built {
  padding-left:30%;
  position:relative
}
.period {
  color:var(--red)
}
.hero h1>span:first-child::after {
  content:'✳';
  font-size:.52em;
  font-weight:300;
  position:absolute;
  right:11%;
  top:-.04em;
  color:var(--lilac);
  transform:rotate(var(--flower-angle,15deg));
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
  line-height:1
}
.hero-bottom {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  align-items:center;
  margin-bottom:54px;
  font-size:16px;
  line-height:1.5
}
.hero-bottom p {
  margin:0
}
.ingredients {
  text-align:right;
  font-size:13px
}
.round-link {
  justify-self:center;
  border:1px solid var(--ink);
  width:124px;
  height:124px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:3px;
  border-radius:50%;
  font-size:12px;
  transition:background .2s,color .2s,transform .25s
}
.round-link:hover {
  background:var(--ink);
  color:var(--paper);
  transform:rotate(-8deg)
}
.down {
  font-size:33px;
  line-height:1
}
.hero-ruler {
  height:17px;
  border-bottom:1px solid var(--ink);
  background:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 1.25%);
  opacity:.5
}
.collection {
  padding:76px var(--space) 110px;
  scroll-margin-top:30px
}
.collection-intro {
  display:flex;
  justify-content:space-between;
  gap:40px;
  align-items:end;
  margin-bottom:58px
}
.collection h2 {
  font-size:clamp(34px,4.2vw,64px);
  font-weight:400;
  letter-spacing:-.055em;
  line-height:1.05;
  margin:0
}
.collection-intro p {
  font-size:16px;
  line-height:1.55;
  max-width:285px;
  margin:0 0 4px
}
.exhibits {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:78px 32px
}
.exhibit:nth-child(even) {
  transform:translateY(94px)
}
.exhibit-image {
  display:block;
  aspect-ratio:1.45;
  position:relative;
  overflow:hidden;
  background:#d3ccdd;
  isolation:isolate
}
.exhibit-image img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.8,.2,1)
}
.exhibit-image:hover img {
  transform:scale(1.035)
}
.enter {
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  padding:13px 17px;
  background:var(--paper);
  display:flex;
  justify-content:space-between;
  font-size:13px;
  box-shadow:0 2px 12px #2521391a;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .2s,transform .2s
}
.exhibit-image:hover .enter,.exhibit-image:focus-visible .enter {
  opacity:1;
  transform:none
}
.caption {
  margin:23px 0 12px;
  display:flex;
  gap:15px;
  align-items:baseline;
  justify-content:space-between
}
.caption h3 {
  font-size:clamp(26px,2.6vw,40px);
  font-weight:400;
  letter-spacing:-.055em;
  line-height:1;
  margin:0
}
.caption h3 a:hover {
  text-decoration:underline;
  text-underline-offset:5px
}
.caption>span {
  font-size:11px;
  text-align:right
}
.exhibit>p {
  font-size:14px;
  line-height:1.6;
  max-width:360px;
  margin:0
}
.colophon {
  text-align:center;
  padding:130px var(--space) 110px;
  max-width:1000px;
  margin:0 auto
}
.small-flower {
  color:var(--red);
  font-size:80px;
  line-height:1
}
.colophon h2 {
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(36px,4.7vw,68px);
  font-weight:400;
  letter-spacing:-.045em;
  line-height:1.05;
  margin:30px 0
}
.colophon p {
  max-width:450px;
  margin:0 auto 30px;
  font-size:15px;
  line-height:1.6
}
.colophon>a {
  font-size:14px;
  border-bottom:1px solid var(--ink);
  padding-bottom:7px
}
.colophon>a span {
  margin-left:25px
}
footer {
  border-top:1px solid var(--line);
  padding:28px var(--space);
  display:flex;
  justify-content:space-between;
  gap:30px;
  font-size:11px;
  line-height:1.5
}
.notes-main {
  max-width:1150px;
  padding:70px var(--space) 100px;
  margin:auto
}
.notes-main h1 {
  font-weight:400;
  font-size:clamp(55px,7vw,100px);
  letter-spacing:-.06em;
  line-height:1;
  margin:0 0 35px
}
.notes-lede {
  font-size:21px;
  line-height:1.5;
  max-width:680px
}
.notes-main section {
  padding:35px 0;
  border-top:1px solid var(--line);
  margin-top:35px
}
.notes-main h2 {
  font-size:32px;
  font-weight:400;
  letter-spacing:-.04em
}
.notes-main p,.notes-main li {
  line-height:1.7;
  max-width:740px
}
.notes-main a {
  border-bottom:1px solid
}
.notes-main code {
  font-size:.9em;
  background:#d9d5e2;
  padding:2px 5px
}
.techniques {
  width:100%;
  border-collapse:collapse;
  font-size:14px
}
.techniques th,.techniques td {
  text-align:left;
  vertical-align:top;
  padding:20px 20px 20px 0;
  border-bottom:1px solid var(--line);
  line-height:1.6
}
.techniques th:first-child {
  min-width:130px
}
.techniques th {
  font-weight:500
}
.notes-main details {
  margin:14px 0;
  border-bottom:1px solid var(--line);
  padding:12px 0
}
.notes-main summary {
  cursor:pointer;
  font-size:18px
}
.notes-main summary:focus-visible {
  outline:3px solid var(--red);
  outline-offset:5px
}
@media(hover:none) {
  .enter {
    opacity:1;
    transform:none;
    font-size:11px;
    padding:9px 12px;
    left:10px;
    right:10px;
    bottom:10px
  }
}
@media(min-width:1700px) {
  body {
    max-width:1800px;
    margin:auto
  }
}
@media(max-width:760px) {
  .masthead {
    height:88px;
    font-size:11px
  }
  .masthead nav {
    gap:16px
  }
  .masthead nav a:last-child {
    display:none
  }
  .mark {
    font-size:27px
  }
  .hero-top {
    font-size:12px
  }
  .edition {
    font-size:10px
  }
  .hero h1 {
    margin:44px 0 37px;
    font-size:23.8vw
  }
  .hero .built {
    padding-left:23%
  }
  .hero h1>span:first-child::after {
    right:6%
  }
  .hero-bottom {
    grid-template-columns:1fr auto;
    font-size:12px;
    gap:20px;
    margin-bottom:35px
  }
  .ingredients {
    display:none
  }
  .round-link {
    width:90px;
    height:90px;
    font-size:10px
  }
  .down {
    font-size:28px
  }
  .collection {
    padding-top:47px;
    padding-bottom:40px
  }
  .collection-intro {
    display:block;
    margin-bottom:36px
  }
  .collection-intro p {
    font-size:13px;
    margin-top:22px;
    max-width:280px
  }
  .exhibits {
    gap:38px 22px
  }
  .exhibit:nth-child(even) {
    transform:translateY(60px)
  }
  .caption {
    display:block;
    margin:16px 0 10px
  }
  .caption h3 {
    font-size:26px
  }
  .caption>span {
    display:block;
    text-align:left;
    font-size:9px;
    margin-top:9px
  }
  .exhibit>p {
    font-size:12px
  }
  .colophon {
    padding-top:110px;
    padding-bottom:70px
  }
  .colophon p {
    font-size:13px
  }
  footer {
    flex-wrap:wrap;
    font-size:10px
  }
  footer>span:nth-child(2) {
    display:none
  }
  .techniques {
    display:block;
    overflow-x:auto
  }
  .techniques td {
    min-width:190px
  }
  .notes-main {
    padding-top:45px
  }
  .notes-lede {
    font-size:18px
  }
}
@media(max-width:520px) {
  .exhibits {
    grid-template-columns:1fr;
    gap:42px
  }
  .exhibit:nth-child(even) {
    transform:none
  }
  .exhibit-image {
    aspect-ratio:1.4
  }
  .caption {
    display:flex;
    margin:19px 0 11px
  }
  .caption h3 {
    font-size:30px
  }
  .caption>span {
    font-size:10px;
    margin:0
  }
  .exhibit>p {
    max-width:300px;
    font-size:13px
  }
  .colophon {
    padding-top:50px
  }
  .hero-ruler {
    background:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 3.333%)
  }
}
@media(prefers-reduced-motion:reduce) {
  :root {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important
  }
  .exhibit-image:hover img {
    transform:none
  }
}