/* Four people-free moods: warm wood, open paper, unhurried reading. */
:root { --mood-gap: clamp(64px, 9vw, 144px); --mood-copy-width: 320px; }
.mood-still { transform: none; }
.mood-still .still-window { box-shadow: none; background: #59402c; }
.mood-still img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.mood-still figcaption { transform: none; padding: 20px 0 0; }
.mood-story { display: block; padding-top: 38px; padding-bottom: 96px; }
.mood-story h2 { margin: 36px 0 0; }
.mood-story .moment-list { display: grid; grid-template-columns: minmax(0,1fr); gap: 72px; margin-top: 56px; }
.mood-story .moment { grid-column: auto; grid-row: auto; display: grid; grid-template-columns: minmax(0,1fr); gap: 28px; min-height: 0; margin: 0; padding: 0; border: 0; }
.mood-scene { margin: 0; min-width: 0; }
.mood-scene img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.mood-story .moment-text { padding: 0; min-width: 0; max-width: var(--mood-copy-width); }
.mood-story .moment-number { position: static; display: block; margin: 0 0 16px; font: 400 16px/1.4 var(--serif); }
.mood-story .moment h3 { font-size: 25px; line-height: 1.6; margin-bottom: 14px; letter-spacing: .035em; }
.mood-story .moment h3 .en { font-size: 23px; line-height: 1.3; margin-top: 7px; }
.mood-story .moment p { font-size: 13px; line-height: 1.9; }
.mood-story .moment p .en { font-size: 18px; line-height: 1.45; margin-top: 6px; }
body.english .mood-story .moment h3 .en { font-size: 29px; line-height: 1.2; }
body.english .mood-story .moment p .en { font-size: 21px; }
@media (min-width:700px) {
 .mood-still { max-width: 540px; margin-top: 52px; }
 .mood-story { padding-top: 48px; padding-bottom: 120px; }
 .mood-story .moment-list { margin-top: 72px; gap: 88px; }
 .mood-story .moment { grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 48px; align-items: center; }
 .mood-story .moment-two { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); }
 .mood-story .moment-two .mood-scene { grid-column: 2; grid-row: 1; }
 .mood-story .moment-two .moment-text { grid-column: 1; grid-row: 1; }
 .mood-story .moment h3 { font-size: 27px; }
}
@media (min-width:1100px) {
 .mood-still { max-width: none; margin-top: 24px; }
 .mood-story { padding-top: 64px; padding-bottom: 144px; }
 .mood-story .section-kicker { margin-bottom: 0; }
 .mood-story h2 { margin-top: 40px; }
 .mood-story .moment-list { margin-top: 88px; gap: var(--mood-gap); }
 .mood-story .moment { grid-template-columns: minmax(0,1.3fr) minmax(0,.7fr); gap: clamp(64px,8vw,128px); }
 .mood-story .moment-two { grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); }
 .mood-story .moment-two .moment-text { justify-self: end; }
 .mood-story .moment h3 { font-size: 30px; }
 .mood-story .moment h3 .en { font-size: 28px; }
 .mood-story .moment p { font-size: 14px; }
 .mood-story .moment p .en { font-size: 21px; }
 body.english .mood-story .moment h3 .en { font-size: 35px; }
 body.english .mood-story .moment p .en { font-size: 23px; }
}
@media (max-width:359px) {
 .mood-story .moment h3 { font-size: 23px; }
 .mood-story .moment h3 .en { font-size: 21px; }
}

.mood-detail svg { display:block; width:100%; height:auto; aspect-ratio:21 / 11; overflow:hidden; }

/* V3.6.2: varied glass silhouettes and drink colours, using existing approved artwork. */
.mood-still .still-window :is(svg,.artwork-crop) { display:block; width:100%; height:auto; aspect-ratio:108 / 73; }
.mood-tall :is(svg,.artwork-crop) { display:block; width:min(64%,220px); height:auto; aspect-ratio:43 / 88; margin:0 auto; }
.mood-lilac :is(svg,.artwork-crop) { display:block; width:min(90%,340px); height:auto; aspect-ratio:26 / 43; margin:0 auto; }
@media(min-width:700px) {
 .mood-tall :is(svg,.artwork-crop) { width:min(75%,260px); }
 .mood-lilac :is(svg,.artwork-crop) { width:min(95%,360px); }
}
@media(min-width:1100px) {
 .mood-tall :is(svg,.artwork-crop) { width:min(55%,290px); }
 .mood-lilac :is(svg,.artwork-crop) { width:min(68%,380px); }
}

/* Native images defer below-fold art without changing approved crop geometry. */
.artwork-crop { position:relative; overflow:hidden; }
.artwork-crop > img.cropped-artwork { position:absolute; display:block; max-width:none; width:var(--crop-image-width); height:var(--crop-image-height); left:var(--crop-image-left); top:var(--crop-image-top); aspect-ratio:auto; object-fit:fill; }