/* Chapter 03: all styles stay within its own namespace. */
.refuge { background: #eeeae1; color: #292b25; }
.refuge-chapter { display: flex; gap: 35px; align-items: baseline; padding: 22px 4% 32px; }
.refuge-chapter > span, .refuge-chapter h2 { font: 9px/1.5 Arial, sans-serif; letter-spacing: 1.8px; margin: 0; }
.refuge-chapter .refuge-chapter-note { margin-left: auto; color: #77796c; font-size: 8px; }
.refuge-stage { position: relative; margin: 0 20px; }
.refuge-space { display: none; }
.refuge-small { font: 8px/1.5 Arial, sans-serif; letter-spacing: 1.8px; }
.refuge-outside p { font: 400 clamp(48px, 5.4vw, 84px)/1.02 Georgia, serif; letter-spacing: -.045em; margin: 25px 0 24px; }
.refuge-outside-line { font: 12px/1.9 Arial, sans-serif; }
.refuge-outside { position: absolute; left: 8%; top: 13%; color: #f5f0e5; text-shadow: 0 1px 18px #172a3240; }
.refuge-static-weather { width: 100%; height: 85svh; min-height: 530px; object-fit: cover; object-position: center 43%; display: block; }
.refuge-coda { padding: 70px 8% 85px; display: flex; justify-content: space-between; gap: 30px; align-items: flex-end; }
.refuge-coda p { font: 400 clamp(25px, 2.6vw, 39px)/1.2 Georgia, serif; letter-spacing: -.025em; margin: 0; }
.refuge-coda em { color: #787b6c; }
.refuge-coda > span { font: 8px/1.8 Arial, sans-serif; letter-spacing: 1.5px; color: #787b6c; text-align: right; padding-bottom: 5px; }
/* The landscape holds, then releases into ordinary editorial scrolling. */
.refuge.is-spatial .refuge-travel { height: 260svh; }
.refuge.is-spatial .refuge-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.refuge.is-spatial .refuge-space { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.refuge.is-spatial .refuge-static { display: none; }
.refuge.is-spatial .refuge-outside { top: auto; bottom: 15%; opacity: var(--outside-opacity, 1); }
.refuge.is-spatial .refuge-invitation { display: flex; align-items: center; gap: 22px; position: absolute; right: 4%; bottom: 37px; font: 8px/1.5 Arial, sans-serif; letter-spacing: 1.7px; color: #f3ecde; opacity: var(--outside-opacity, 1); }
.refuge-invitation { display: none; }
.refuge-invitation span { font-size: 19px; }
@media (max-width: 1000px) {
 .refuge-outside p { font-size: clamp(42px, 6.5vw, 65px); }
 .refuge-coda { padding: 55px 6% 75px; }
}
@media (max-width: 600px) {
 .refuge-chapter { padding: 10px 24px 25px; gap: 22px; }
 .refuge-chapter > span, .refuge-chapter h2 { font-size: 8px; }
 .refuge-chapter .refuge-chapter-note { font-size: 6px; letter-spacing: 1px; }
 .refuge-stage { margin: 0 12px; }
 .refuge.is-spatial .refuge-travel { height: 240svh; }
 .refuge.is-spatial .refuge-outside { bottom: 19%; left: 7%; }
 .refuge-outside p { font-size: 52px; }
 .refuge-small { font-size: 7px; letter-spacing: 1.5px; }
 .refuge-outside-line { font-size: 11px; }
 .refuge.is-spatial .refuge-invitation { font-size: 7px; bottom: 25px; right: 7%; letter-spacing: 1px; }
 .refuge-coda { display: block; padding: 45px 24px 65px; }
 .refuge-coda p { font-size: 25px; }
 .refuge-coda > span { display: block; text-align: left; font-size: 7px; margin-top: 30px; }
 .refuge-static-weather { height: 75svh; }
}

/* Two still cuts. The empty interval belongs to the landscape that precedes them. */
.refuge-fragments { padding: 38svh 8% 45px; }
:where(.refuge-fragments) figure { margin: 0; }
.refuge-light-fragment { width: 23%; margin-left: 15%; }
.refuge-light-fragment img { display: block; width: 100%; aspect-ratio: .9; height: auto; object-fit: cover; object-position: 36% 48%; }
.refuge-light-fragment figcaption { padding-top: 18px; font: 8px/1.6 Arial, sans-serif; letter-spacing: 1.6px; color: #77796b; }
.refuge-linen-fragment { width: 48%; margin: 22svh 0 0 auto; }
.refuge-linen-fragment img { display: block; width: 100%; height: auto; max-height: 88svh; object-fit: cover; object-position: center 62%; }
.refuge-linen-fragment figcaption { padding-top: 23px; font: italic 20px/1.5 Georgia, serif; color: #777869; }
.refuge-human-scale { margin: 40px 0 0 7%; font: 400 clamp(35px, 4.5vw, 64px)/1.1 Georgia, serif; letter-spacing: -.04em; }
.refuge-human-scale em { color: #777869; }
@media (max-width: 900px) {
 .refuge-light-fragment { width: 31%; margin-left: 8%; }
 .refuge-linen-fragment { width: 58%; }
}
@media (max-width: 600px) {
 .refuge-fragments { padding: 30svh 24px 30px; }
 .refuge-light-fragment { width: 48%; margin-left: 4%; }
 .refuge-light-fragment figcaption { font-size: 7px; letter-spacing: 1.2px; padding-top: 14px; }
 .refuge-linen-fragment { width: 84%; margin-top: 20svh; }
 .refuge-linen-fragment figcaption { font-size: 17px; padding-top: 19px; }
 .refuge-human-scale { margin: 65px 0 0; font-size: 38px; }
}