@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;0,500;1,400&display=swap');

/* A homepage-only exhibition study. Catalogue and commerce styles remain isolated. */
body.home-page{--room-black:#11120e;--room-paper:#e8e4da;--room-accent:#c98160;background:var(--room-black)}
.home-page .announcement{display:none}
.home-page>header{height:88px;background:var(--room-black);color:#e8e4da;border-color:#ffffff20;padding:0 4%}
.home-page>header .logo{font-family:'Manrope',sans-serif;font-size:42px}
.home-page>header nav{font-size:11px;letter-spacing:.02em}
.home-page>header nav a:hover{border-color:#ded9ce}
.home-page .bag-btn span{border-color:#ffffff40}
.home-page .mobile-nav{background:var(--room-black);color:var(--room-paper);border-color:#ffffff30}
.resonance-home{background:var(--room-black);color:var(--room-paper)}
.resonance-home figure{margin:0}
.resonance-home h1,.resonance-home h2,.resonance-home h3{font-weight:400}
.resonance-home em{font-family:'Bodoni Moda',Georgia,serif;font-weight:400}
.exhibition-cover{height:calc(100svh - 88px);min-height:750px;max-height:1050px;position:relative;isolation:isolate;overflow:hidden;background:#0b0d08}
.cover-edition{position:absolute;top:28px;left:4%;right:4%;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.13em;color:#a6a69a;z-index:3}
.cover-instrument{position:absolute;inset:-8% 0 -19% 27%;z-index:-1;overflow:hidden}
.cover-instrument img{width:100%;height:100%;object-fit:contain;object-position:center 40%;mix-blend-mode:screen}
.cover-side-note{position:absolute;top:25%;left:4.2%;font-size:9px;letter-spacing:.13em;line-height:1.6;color:#b0b1a6}
.small-rule{display:block;width:28px;height:1px;background:var(--room-accent);margin-bottom:18px}
.exhibition-cover h1{font-family:'Bodoni Moda',Georgia,serif;letter-spacing:-.06em;line-height:.86;position:absolute;inset:17% 4% 22%;pointer-events:none}
.cover-word-one{display:block;font-size:clamp(150px,18.7vw,285px);margin-left:12%;font-weight:400}
.cover-word-two{display:block;font-size:clamp(82px,10.6vw,165px);margin-top:9%;white-space:nowrap}
.cover-word-two em{color:#d5c6b0}
.cover-object-note{position:absolute;right:4.2%;top:27%;width:170px;font-size:10px;color:#bbbcae;line-height:1.5}
.object-mark{font-family:'Bodoni Moda',Georgia,serif;font-size:46px;line-height:1;display:block;color:var(--room-accent);margin-bottom:16px}
.cover-object-note p{font-size:10px;line-height:1.6}
.annotation-line{height:1px;background:#b8b6a344;position:absolute;top:102px;left:-115px;width:95px}
.annotation-line:before{content:'+';position:absolute;left:0;top:-7px;color:#abae9c}
.cover-bottom{position:absolute;left:4%;right:4%;bottom:78px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end}
.cover-bottom p{font-size:12px;line-height:1.7;color:#bfc1b5}
.exhibition-enter{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e8e4da;max-width:280px;padding:15px 0;font-size:10px;letter-spacing:.13em;justify-self:center;width:100%}
.long-arrow{font-size:35px;line-height:1}
.exhibition-enter:hover .long-arrow{transform:translate(4px,-4px)}
.exhibition-enter .long-arrow{transition:transform .2s}
.cover-scroll{text-align:right;font-size:9px;letter-spacing:.1em;color:#b2b3a5}
.cover-caption{position:absolute;bottom:22px;left:4%;right:4%;display:flex;justify-content:space-between;border-top:1px solid #ffffff26;padding-top:17px;color:#85897c;font-size:8px;letter-spacing:.1em}
.movement-label{display:flex;gap:25px;align-items:center;font-size:9px;line-height:1.6;letter-spacing:.13em}
.movement-num{font-family:'Bodoni Moda',Georgia,serif;font-size:62px;line-height:1;letter-spacing:-.08em}
.room-prologue{position:relative;background:var(--room-paper);color:#22251e;padding:90px 7% 125px}
.prologue-heading{margin:60px 0 55px;display:flex;align-items:end;justify-content:space-between;gap:45px}
.prologue-heading h2{font-family:'Manrope';font-size:clamp(46px,5.1vw,79px);line-height:1.16;letter-spacing:-.055em}
.prologue-heading h2 em{font-size:1.12em;letter-spacing:-.055em}
.prologue-heading>p{font-size:12px;line-height:1.8;max-width:260px;color:#6c7065;padding-bottom:8px}
.piano-space{width:73%;margin-left:17%!important;position:relative}
.piano-space img{height:640px;object-position:center 68%}
.piano-space figcaption{display:flex;justify-content:space-between;font-size:8px;letter-spacing:.1em;padding-top:15px;color:#777b6e}
.piano-detail-note{position:absolute;left:7%;top:51%;display:flex;align-items:center;gap:22px;font-size:8px;line-height:1.7;letter-spacing:.1em;writing-mode:vertical-rl}
.detail-cross{font-size:25px;font-weight:300}
.piano-counterpoint{display:grid;grid-template-columns:34% 1fr;gap:9%;margin-top:-70px;position:relative;align-items:end}
.piano-counterpoint figure{border:9px solid var(--room-paper);border-left:0}
.piano-counterpoint img{height:300px;object-position:center}
.piano-counterpoint figcaption{font-size:8px;letter-spacing:.12em;padding-top:15px;color:#777b6e}
.piano-counterpoint>div{padding-bottom:17px}
.piano-counterpoint p{font-family:'Bodoni Moda',Georgia,serif;font-size:33px;line-height:1.3;letter-spacing:-.03em}
.exhibition-link{display:flex;align-items:center;justify-content:space-between;width:max-content;min-width:190px;gap:35px;font-size:9px;letter-spacing:.14em;border-bottom:1px solid;padding:14px 0}
.exhibition-link>span{font-size:23px;letter-spacing:0}
.piano-counterpoint .exhibition-link{margin-top:26px}
.material-study{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto auto auto auto;column-gap:6%;padding:85px 7% 40px;background:#20241d;color:#e4e1d5}
.material-study>.movement-label{grid-column:1/-1;margin-bottom:58px;color:#bfc6b1}
.material-heading{grid-column:2/4;grid-row:2;position:relative;z-index:1;margin-left:-12%;margin-bottom:48px}
.tiny-kicker{font-size:9px;letter-spacing:.14em}
.material-heading h2{font-size:clamp(57px,6vw,91px);line-height:1.05;margin-top:22px;letter-spacing:-.055em}
.material-heading h2 em{font-size:1.12em}
.microphone-study{grid-column:1;grid-row:2/4;padding-top:95px}
.microphone-study img{height:590px;object-fit:cover;object-position:50%}
.microphone-study figcaption{padding-top:16px;font-size:8px;letter-spacing:.1em;color:#abb49f;line-height:1.6}
.material-copy{grid-column:2;grid-row:3;padding:0 0 70px 2%}
.study-symbol{font-family:'Manrope';font-size:100px;font-weight:300;line-height:1;color:#949c85;display:block;margin-bottom:40px}
.material-copy p{font-size:12px;line-height:1.9;color:#bcc4b0}
.material-copy .exhibition-link{margin-top:25px}
.listening-study{grid-column:3;grid-row:3;margin-top:35px}
.listening-photo{display:block;position:relative}
.listening-photo img{aspect-ratio:1/1.12;object-fit:cover}
.listening-photo>span{font-size:7px;line-height:1.5;letter-spacing:.12em;padding-top:15px;display:block;color:#b4bea8}
.listening-study>p{font-size:22px;line-height:1.3;letter-spacing:-.03em;margin:30px 0 18px}
.listening-study>p em{font-size:28px}
.signal-baseline{grid-column:1/-1;display:flex;gap:22px;align-items:center;font-size:8px;letter-spacing:.2em;color:#99a28e;margin-top:80px}
.signal-baseline i{height:1px;background:#67705b;flex:1}
.collection-atlas{padding:95px 7% 85px;background:var(--room-paper);color:#24271e}
.atlas-heading{display:flex;justify-content:space-between;align-items:end;margin:55px 0 60px;gap:35px}
.atlas-heading h2{font-size:clamp(48px,5.8vw,87px);line-height:1.05}
.atlas-heading h2 em{font-size:1.08em}
.atlas-heading .exhibition-link{margin-bottom:7px;min-width:220px}
.atlas-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:9%;align-items:center}
.atlas-index>a{display:flex;align-items:center;gap:22px;padding:22px 0;border-top:1px solid #b8bbaa;min-height:94px;transition:color .2s}
.atlas-index>a:last-child{border-bottom:1px solid #b8bbaa}
.index-no{font-family:'Bodoni Moda',serif;font-size:15px;color:#8c8e80}
.index-name{font-family:'Bodoni Moda',Georgia,serif;font-size:43px;letter-spacing:-.035em;flex:1}
.index-count{font-size:8px;letter-spacing:.09em;color:#747a68}
.index-arrow{font-size:25px}
.atlas-index>a:hover,.atlas-index>a:focus-visible,.atlas-index>a.is-previewed{color:#9b5d42}
.atlas-preview{position:relative;transform:rotate(3deg)}
.atlas-preview img{height:465px;object-fit:cover}
.atlas-preview figcaption{display:flex;gap:20px;justify-content:space-between;font-size:9px;padding-top:17px;color:#6c7262;line-height:1.6}
.atlas-preview figcaption>span:last-child{white-space:nowrap}
.atlas-disclosure{font-size:10px;color:#777c6d;margin-top:45px}
.room-notes{padding:85px 7% 0;background:#b9c0aa;color:#252c20;display:grid;grid-template-columns:1fr 1.15fr;gap:0 13%}
.notes-intro h2{font-size:clamp(60px,6.5vw,96px);line-height:.95;margin:35px 0 30px}
.notes-intro h2 em{font-size:1.04em}
.notes-intro>p{font-size:12px;color:#57634a}
.notes-list{padding-top:18px}
.notes-list button{position:relative;text-align:left;width:100%;border-top:1px solid #66735677;padding:24px 0;display:grid;grid-template-columns:1fr 45px;gap:14px}
.notes-list button>span{grid-column:1;font-size:8px;letter-spacing:.13em;color:#4d5a43}
.notes-list h3{font-family:'Bodoni Moda',Georgia,serif;font-size:31px;line-height:1.05;letter-spacing:-.02em}
.notes-list b{grid-column:2;grid-row:1/3;align-self:center;font-size:28px;font-weight:400;text-align:right}
.notes-list button:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.end-signature{grid-column:1/-1;margin-top:100px;display:flex;align-items:baseline;gap:30px;overflow:hidden;padding-bottom:25px;border-bottom:1px solid #69775d55}
.end-signature>span:first-child{font-family:'Manrope';font-size:clamp(160px,25vw,370px);line-height:.83;letter-spacing:-.11em;font-weight:500}
.end-signature>span:nth-child(2){font-size:clamp(25px,6vw,90px);letter-spacing:.1em;font-weight:400;margin-left:15px}
.end-signature>div{margin-left:auto;font-size:9px;line-height:1.8;letter-spacing:.1em;padding-bottom:15px}
.home-page>footer{background:#b9c0aa;color:#36402d;padding:28px 7%}
.home-page>footer .footer-top{display:none}
.home-page>footer .footer-bottom{border:0;padding:0;color:#4d5a41}

@media(min-width:1700px){.cover-instrument{inset:-15% 0 -25% 23%}.exhibition-cover h1{inset:17% 7% 22%}.cover-word-two{margin-top:7%}}
@media(max-width:1050px){.cover-object-note{right:4%;width:130px}.cover-instrument{inset:-3% -10% -13% 12%}.cover-word-one{font-size:23vw;margin-left:7%}.cover-word-two{font-size:12vw;margin-top:15%}.exhibition-cover h1{top:20%}.cover-side-note{top:13%}.cover-object-note{top:15%}.annotation-line{display:none}.prologue-heading{display:block}.prologue-heading>p{margin:30px 0 0 auto;max-width:300px}.piano-space{width:80%;margin-left:13%!important}.piano-space img{height:550px}.piano-counterpoint{grid-template-columns:40% 1fr}.piano-counterpoint img{height:250px}.piano-counterpoint p{font-size:27px}.material-study{column-gap:5%;padding-left:5%;padding-right:5%}.material-heading{margin-left:0}.microphone-study img{height:540px}.material-copy{padding-left:0}.material-copy p{font-size:11px}.material-copy .exhibition-link,.listening-study .exhibition-link{min-width:150px;gap:20px;font-size:8px}.atlas-layout{gap:7%}.index-name{font-size:35px}.atlas-index>a{gap:15px}.index-count{font-size:7px}.atlas-preview img{height:400px}.room-notes{gap:0 8%}}

@media(max-width:700px){
  .home-page>header{height:74px;padding:0 5%}
  .home-page>header .logo{font-size:36px}
  .home-page .mobile-nav{top:74px}
  .exhibition-cover{height:calc(100svh - 74px);min-height:720px;max-height:900px}
  .cover-edition{top:23px;left:5%;right:5%;font-size:7px;letter-spacing:.08em}
  .cover-edition>span:nth-child(2){display:none}
  .cover-instrument{inset:4% -22% 5% 3%}
  .cover-instrument img{object-position:center}
  .cover-side-note{left:5%;top:12%;font-size:7px}
  .small-rule{margin-bottom:12px;width:20px}
  .exhibition-cover h1{inset:20% 5% 24%}
  .cover-word-one{font-size:35vw;margin-left:1%;letter-spacing:-.07em}
  .cover-word-two{font-size:15.3vw;margin-top:26%;white-space:normal;line-height:.92}
  .cover-word-two em{display:block;font-size:1.25em;margin-top:2%;margin-left:6%}
  .cover-object-note{right:5%;top:13%;width:90px}
  .object-mark{font-size:31px;margin-bottom:8px}
  .cover-object-note p{font-size:7px;line-height:1.5}
  .cover-bottom{left:5%;right:5%;bottom:75px;grid-template-columns:1fr 1fr;gap:22px;align-items:center}
  .cover-bottom p{font-size:9px;line-height:1.6}
  .exhibition-enter{font-size:7px;letter-spacing:.08em;padding:8px 0;gap:9px}
  .long-arrow{font-size:25px}
  .cover-scroll{display:none}
  .cover-caption{left:5%;right:5%;bottom:20px;font-size:6px;letter-spacing:.05em;gap:20px;line-height:1.5;padding-top:12px}
  .cover-caption>span{max-width:48%}
  .room-prologue{padding:55px 6% 65px}
  .movement-label{gap:20px;font-size:7px;letter-spacing:.11em}
  .movement-num{font-size:48px}
  .prologue-heading{margin:40px 0 35px}
  .prologue-heading h2{font-size:38px;line-height:1.12}
  .prologue-heading h2 em{font-size:1.1em}
  .prologue-heading>p{font-size:12px;margin:25px 0 0 22%;line-height:1.7}
  .piano-space{width:89%;margin-left:11%!important}
  .piano-space img{height:300px;object-position:center 80%}
  .piano-space figcaption{font-size:6px;line-height:1.6;gap:15px}
  .piano-space figcaption>span:last-child{display:none}
  .piano-detail-note{left:4%;top:49%;font-size:6px;gap:12px}
  .detail-cross{font-size:20px}
  .piano-counterpoint{grid-template-columns:47% 1fr;gap:6%;margin-top:33px;align-items:center}
  .piano-counterpoint figure{border:0}
  .piano-counterpoint img{height:205px}
  .piano-counterpoint figcaption{font-size:6px;line-height:1.6}
  .piano-counterpoint>div{padding:0}
  .piano-counterpoint p{font-size:22px;line-height:1.15}
  .piano-counterpoint .exhibition-link{margin-top:17px;font-size:8px;min-width:0;min-height:44px;width:100%;gap:15px;padding:10px 0}
  .exhibition-link>span{font-size:19px}
  .material-study{padding:55px 6% 30px;grid-template-columns:1fr 1fr;gap:0 7%}
  .material-study>.movement-label{margin-bottom:38px}
  .material-heading{grid-column:1/-1;grid-row:2;margin:0 0 35px}
  .tiny-kicker{font-size:7px}
  .material-heading h2{font-size:47px;margin-top:18px;line-height:1.05}
  .microphone-study{grid-column:1;grid-row:3/5;padding:0}
  .microphone-study img{height:365px;object-position:50%}
  .microphone-study figcaption{font-size:6px;padding-top:12px}
  .material-copy{grid-column:2;grid-row:3;padding:10px 0 35px}
  .study-symbol{font-size:60px;margin-bottom:18px}
  .material-copy p{font-size:12px;line-height:1.7}
  .material-copy .exhibition-link,.listening-study .exhibition-link{min-width:0;min-height:44px;width:100%;font-size:8px;letter-spacing:.08em;gap:10px}
  .material-copy .exhibition-link{margin-top:18px}
  .listening-study{grid-column:2;grid-row:4;margin-top:0}
  .listening-photo img{aspect-ratio:1/1.12}
  .listening-photo>span{font-size:6px;line-height:1.6;padding-top:10px}
  .listening-study>p{font-size:17px;margin:22px 0 12px}
  .listening-study>p em{font-size:21px}
  .signal-baseline{margin-top:40px;gap:12px;font-size:6px}
  .collection-atlas{padding:55px 6% 50px}
  .atlas-heading{display:block;margin:38px 0 30px}
  .atlas-heading h2{font-size:43px}
  .atlas-heading .exhibition-link{margin:20px 0 0;min-width:180px;font-size:8px}
  .atlas-layout{grid-template-columns:1fr;gap:32px}
  .atlas-index>a{padding:17px 0;min-height:78px}
  .index-name{font-size:37px}
  .index-count{font-size:7px}
  .index-no{font-size:13px}
  .index-arrow{font-size:23px}
  .atlas-preview{width:76%;margin:10px auto 0!important;transform:rotate(3deg)}
  .atlas-preview img{height:285px}
  .atlas-preview figcaption{font-size:7px;padding-top:12px;gap:10px}
  .atlas-disclosure{font-size:9px;line-height:1.7;margin-top:30px}
  .room-notes{padding:55px 6% 0;grid-template-columns:1fr;gap:32px}
  .notes-intro h2{font-size:61px;margin:24px 0}
  .notes-intro>p{font-size:11px}
  .notes-list{padding:0}
  .notes-list button{padding:20px 0;gap:12px}
  .notes-list h3{font-size:29px}
  .notes-list button>span{font-size:7px}
  .end-signature{margin-top:25px;gap:15px;flex-wrap:wrap;padding-bottom:23px}
  .end-signature>span:first-child{font-size:41vw}
  .end-signature>span:nth-child(2){font-size:10vw;margin-left:5px}
  .end-signature>div{width:100%;margin:10px 0 0;font-size:7px;padding:0}
  .home-page>footer{padding:22px 6%}
  .home-page>footer .footer-bottom{font-size:7px;gap:13px}
  .home-page>footer .footer-bottom button{font-size:8px}
}
@media(prefers-reduced-motion:reduce){.exhibition-enter .long-arrow,.atlas-index>a{transition:none}}