/* Spatial light is a small colour field behind the original image. */
.page-light{background:#0c1018;color:#eeeae2;--line:#eeeae22b;--muted:#c2c0be}
.light-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:115px var(--gutter) 0;position:relative;z-index:2}
.light-toolbar .eyebrow{font-size:10px;letter-spacing:.18em}
.light-toolbar button{font:inherit;font-size:12px;border:1px solid #ffffff45;border-radius:30px;padding:11px 18px;color:inherit;background:transparent;white-space:nowrap}
.light-room{position:relative;isolation:isolate;overflow:hidden;padding:75px var(--gutter) 115px;background:#0c1018}
.room-reze{background:#0a1013}.room-mood{background:#171012}
.light-room:before{content:'';position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 50% 65%,var(--room-glow,#23495d),transparent 78%);opacity:.45;pointer-events:none}
.room-reze{--room-glow:#1d4b41}.room-mood{--room-glow:#732b2c}
.light-spill{position:absolute;left:0;top:-10%;width:100%;height:124%;z-index:-1;pointer-events:none;opacity:.3;transition:opacity 550ms ease;mask-image:linear-gradient(to bottom,transparent 0%,#000c 10%,#000 28%,#000 86%,transparent 100%),radial-gradient(ellipse at 56% 60%,#000 65%,#000d 82%,transparent 100%);mask-composite:intersect}
.light-room.is-light-active .light-spill{opacity:.88}
.light-off .light-spill,.light-off .light-room:before{opacity:0}
.light-room-heading{display:grid;grid-template-columns:1.3fr .8fr;gap:22px 7vw;align-items:end;max-width:1300px;margin:0 auto 55px;position:relative}
.light-room-heading .eyebrow{grid-column:1/-1;font-size:11px}
.light-room-heading h1,.light-room-heading h2{font:400 clamp(48px,6.4vw,94px)/1.15 var(--serif);letter-spacing:-.025em;margin:0}
.light-room-heading em,.light-pause em,.light-gallery-heading em,.light-reading em{font-weight:400}
.light-lead{font-size:15px;line-height:1.9;color:#e6e2dc;max-width:410px;margin:0 0 6px}
.light-projection{position:relative;max-width:1120px;margin:0 auto}
.light-projection .film-screen{aspect-ratio:16/9;border:1px solid #ffffff35;box-shadow:0 25px 70px #0003}
.light-projection video{object-fit:contain}.light-projection .film-controls{background:#080a0ee6;padding:14px 18px;color:#eeeae2;border:1px solid #ffffff15}
.light-projection .image-credit{color:#e4e1dc;line-height:1.7;margin-top:17px}.light-projection .film-status{font-size:10px}
.light-loop{display:none;align-items:center;gap:8px;font-size:11px;margin-top:10px;justify-content:flex-end;color:#eeeae2}
.light-ready .light-loop{display:flex}.light-loop input{accent-color:#d2d6cc}
.light-pause{padding:90px var(--gutter) 105px;background:#ece7dc;color:#292b2c;display:grid;grid-template-columns:1fr 1fr;gap:30px 7vw;align-items:center}
.light-pause>.eyebrow{grid-column:1/-1;font-size:10px}.light-pause h2{font:400 clamp(36px,4vw,58px)/1.2 var(--serif);margin-bottom:30px}.light-pause p{max-width:430px;line-height:1.9;font-size:14px}.light-material .image-credit{color:#4c4b48}.light-material .photo{background:transparent}
.light-interlude{padding:110px var(--gutter);text-align:center;background:#101319}.light-interlude p{font:400 clamp(30px,4vw,56px)/1.4 var(--serif)}.light-interlude span{display:block;font-size:11px;line-height:1.8;max-width:430px;margin:28px auto 0;color:#b6b8ba}
.light-gallery{background:#dedfd9;color:#242a2b;--line:#242a2b30}.light-gallery-heading{max-width:850px;margin-bottom:65px}.light-gallery-heading h2,.light-reading h2{font:400 clamp(36px,4.4vw,66px)/1.23 var(--serif);margin:25px 0}.light-gallery-heading>p:last-child{font-size:14px;line-height:1.8}
.light-gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:65px 5vw;align-items:start}.light-gallery-card{position:relative;isolation:isolate}.light-gallery-card:nth-child(even){margin-top:75px}.light-gallery-card:before{content:'';position:absolute;inset:-30px;z-index:-1;opacity:0;transition:opacity 550ms;background:radial-gradient(ellipse,var(--still-a),transparent 70%)}.light-gallery-card:hover:before,.light-gallery-card:focus-within:before{opacity:.24}.light-gallery-card>a{display:block;text-decoration:none;color:inherit}.light-gallery-card img{width:100%;height:auto;display:block}.light-gallery-card h3{font:400 clamp(24px,2.6vw,36px)/1.25 var(--serif);margin:15px 0 12px}.light-gallery-card>a>div{position:relative;padding:22px 36px 0 0}.light-gallery-card .eyebrow{font-size:10px}.light-gallery-card p{font-size:12px;line-height:1.7}.light-gallery-card .arrow{position:absolute;right:0;top:24px}.light-gallery-card .image-credit{color:#4c5350;font-size:9px}
.light-reading{background:#ece7dc;color:#242a2b;--line:#242a2b30}.light-reading .lead{max-width:650px;font-size:15px;line-height:1.9}.light-reading .read-full{margin-top:50px}.light-reading .long-copy{max-width:760px}
.light-room-heading,.light-interlude p,.light-gallery-heading{opacity:1;transform:none}
.light-ready:not(.reduced) .light-enter{opacity:0;transform:translateY(4px);text-shadow:0 0 6px #eeeae230;transition:opacity 900ms ease,transform 900ms cubic-bezier(.2,.7,.2,1),text-shadow 900ms ease}
.light-ready:not(.reduced) .light-enter.visible{opacity:1;transform:none;text-shadow:0 0 0 transparent}
.page-light.reduced .light-spill,.page-light.reduced .light-gallery-card:before{transition:none}
@media(max-width:760px){.light-toolbar{padding-top:100px;gap:12px}.light-toolbar .eyebrow{font-size:8px;max-width:150px;line-height:1.9}.light-toolbar button{font-size:11px;padding:10px 12px}.light-room{padding-top:50px;padding-bottom:70px}.light-room-heading{grid-template-columns:1fr;gap:22px;margin-bottom:35px}.light-room-heading h1,.light-room-heading h2{font-size:clamp(39px,10vw,64px);line-height:1.2}.light-lead{font-size:13px}.light-projection .film-controls{padding:12px 10px}.light-projection .film-seek{min-width:0}.light-projection .film-status{font-size:9px}.light-projection .image-credit{font-size:9px}.light-pause{grid-template-columns:1fr;padding-top:60px;padding-bottom:60px;gap:25px}.light-pause h2{font-size:35px}.light-interlude{padding:65px var(--gutter)}.light-interlude p{font-size:32px}.light-gallery-grid{grid-template-columns:1fr;gap:45px}.light-gallery-card:nth-child(even){margin-top:0}.light-gallery-card:before{inset:-14px}.light-gallery-heading{margin-bottom:40px}.light-spill{left:0;width:100%;top:-10%;height:124%}}
@media(prefers-reduced-motion:reduce){.light-spill,.light-enter,.light-gallery-card:before{transition:none!important;transform:none!important;opacity:1}.light-off .light-spill{opacity:0}}

/* A masked rim keeps the reflection outside the footage. */
@property --light-rim-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
.light-projection .film-screen{overflow:visible}
.room-violet{--rim-colour:#c0e5f2}.room-reze{--rim-colour:#abd9c4}.room-mood{--rim-colour:#edb3aa}
.light-ready .light-projection .film-screen:after{content:'';position:absolute;inset:-2px;padding:2px;pointer-events:none;opacity:0;background:conic-gradient(from var(--light-rim-angle),transparent 0deg 275deg,var(--rim-colour) 320deg,transparent 360deg);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}
.light-ready:not(.reduced) .film-screen.is-reflecting:after{animation:light-rim 800ms linear}
@keyframes light-rim{0%{--light-rim-angle:0deg;opacity:0}15%{opacity:.85}80%{opacity:.65}100%{--light-rim-angle:360deg;opacity:0}}
@media(prefers-reduced-motion:reduce){.light-projection .film-screen.is-reflecting:after{animation:none!important}}

.light-ready .light-enter:focus-within{opacity:1!important;transform:none!important;text-shadow:none!important}

/* The pale exit panel needs its own ink after the dark room palette. */
.page-light .section-next{color:#233d44;--ink:#233d44;--muted:#49666d;--line:#233d4430}

/* Violet's existing field also lights the toolbar and navigation. */
.room-violet{padding-top:0}
.room-violet .light-toolbar{margin:0 calc(-1 * var(--gutter)) 75px}
.page-light .site-header{background:linear-gradient(to bottom,#0c101838,transparent);text-shadow:0 1px 4px #0006}
@media(max-width:760px){.room-violet .light-toolbar{margin-bottom:50px}}
