/* Eclipse - collections and rooms. Night on the left holds one backlit piece; the white page waits on the right.
   One fixed look, like the rest of the site: the split is part of the identity, not a theme. */
:root{--ink0:#0b0a09;--glow:236,226,206;--cream:#ece7df;--ease:cubic-bezier(.22,.61,.12,1)}
body.ecl{background:linear-gradient(90deg,var(--ink0) 0 60%,#fff 60% 100%)}
body.ecl .nav.l,body.ecl .crumb{color:rgba(236,231,223,.5)}
body.ecl .nav.l a:hover,body.ecl .nav.l a[aria-current="page"]{color:var(--cream);border-bottom-color:var(--cream)}
body.ecl .crumb a:hover{color:var(--cream)}
body.ecl .top .logo img{filter:invert(1)}
body.ecl footer{border-top-color:transparent;color:var(--muted)}
/* footer follows the split: the line on the night side, company details on the white side */
@media (min-width:821px){body.ecl footer{display:grid;grid-template-columns:calc(60vw - 2*max(16px,env(safe-area-inset-left,0px))) minmax(0,1fr);column-gap:calc(2*max(16px,env(safe-area-inset-left,0px)));align-items:end}
  body.ecl footer>span:first-child{color:rgba(236,231,223,.42)}
  body.ecl footer .biz{text-align:right}}
.lbl{font-size:.74em;letter-spacing:.24em;text-transform:uppercase}

.ecl main{flex:1;min-height:0;display:grid;grid-template-columns:60% 40%;
  margin-inline:calc(-1*max(16px,env(safe-area-inset-left,0px))) calc(-1*max(16px,env(safe-area-inset-right,0px)))}
.ecl .night{position:relative;min-height:0;overflow:hidden;display:block;color:inherit;text-decoration:none}
.ecl .night::before{content:"";position:absolute;left:10%;right:0;top:4%;bottom:-20%;
  background:radial-gradient(42% 46% at 58% 46%,rgba(var(--glow),.2),rgba(var(--glow),.06) 45%,transparent 70%);
  opacity:0;animation:lit 3.2s var(--ease) .2s both}
@keyframes lit{from{opacity:0}to{opacity:1}}
.ecl .night img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:62% 30%;scale:.9;transform-origin:center;
  padding-top:clamp(4px,1vh,12px);filter:brightness(.92) contrast(1.06);transition:opacity .9s var(--ease);
  -webkit-mask-image:radial-gradient(70% 80% at 62% 62%,#000 45%,rgba(0,0,0,.35) 78%,rgba(0,0,0,.08) 100%);
  mask-image:radial-gradient(70% 80% at 62% 62%,#000 45%,rgba(0,0,0,.35) 78%,rgba(0,0,0,.08) 100%)}
.ecl .night img.off{opacity:0}
.ecl .night .ix{position:absolute;left:clamp(16px,3vw,56px);bottom:clamp(14px,3vh,40px);color:rgba(236,231,223,.42)}

.ecl .day{min-height:0;display:grid;align-content:center;gap:clamp(14px,3.6vh,44px);padding-inline:clamp(20px,4vw,88px)}
.ecl .day .lbl{color:var(--muted)}
.ecl .day .line{font-family:var(--display);font-style:italic;color:var(--muted);font-size:clamp(15px,min(1.2vw,2.4vh),20px);margin:0}
.ecl .room{display:grid;gap:clamp(6px,1.4vh,14px)}
.ecl .room>a.lbl{justify-self:start;text-decoration:none;color:var(--muted);border-bottom:1px solid transparent;padding-bottom:2px;transition:color .6s,border-color .6s}
.ecl .room>a.lbl:hover,.ecl .room>a.lbl:focus-visible{color:var(--fg);border-bottom-color:var(--fg)}
.ecl ol{list-style:none;margin:0;padding:0;display:grid;gap:clamp(8px,2vh,24px)}
.ecl li a{display:grid;grid-template-columns:2.4em 1fr;align-items:baseline;text-decoration:none;color:#b9b7b2;transition:color .6s}
.ecl li a .n{font-size:.74em;letter-spacing:.2em}
.ecl li a .nm{font-family:var(--display);font-size:clamp(28px,min(3vw,6vh),60px);line-height:1.05}
.ecl li a .k{grid-column:2;font-size:.74em;letter-spacing:.22em;text-transform:uppercase;margin-top:6px;color:var(--muted);opacity:0;transition:opacity .6s}
.ecl li a.on,.ecl li a:hover,.ecl li a:focus-visible{color:var(--fg)}
.ecl li a.on .k{opacity:1}
.ecl .go2{justify-self:start;color:var(--link);text-decoration:none;font-size:.8em;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:3px}

@media (max-width:820px){
  body.ecl{background:linear-gradient(180deg,var(--ink0) 0 58%,#fff 58% 100%)}
  body.ecl .nav.r{color:rgba(236,231,223,.55)}
  .ecl main{grid-template-columns:1fr;grid-template-rows:minmax(0,1.25fr) minmax(0,1fr)}
  .ecl .day{align-content:start;padding-block:clamp(10px,2vh,20px) 0;gap:10px}
  .ecl .day .line{display:none}
  .ecl li a .nm{font-size:26px}.ecl ol{gap:6px}.ecl .room{gap:4px}
  .ecl li a .k{margin-top:2px}
}
@media (max-width:640px){body.ecl footer .biz{background:#fff}}
@media (max-height:560px){.ecl li a .k,.ecl .day .line{display:none}}
@media (prefers-reduced-motion:reduce){.ecl .night::before{animation:none;opacity:1}.ecl .night img{transition:none}}
/* phone held sideways: keep the night beside the white, as on a desk, rather than above it */
@media (max-height:500px) and (orientation:landscape){
  body.ecl{background:linear-gradient(90deg,var(--ink0) 0 56%,#fff 56% 100%)}
  body.ecl .nav.r{color:var(--muted)}
  body.ecl footer{display:flex}
  body.ecl footer>span:first-child{color:rgba(236,231,223,.42);max-width:calc(56vw - 32px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ecl main{grid-template-columns:56% 44%;grid-template-rows:minmax(0,1fr)}
  .ecl .night img{padding-top:0}
  .ecl .day{align-content:center;padding-block:0;padding-inline:clamp(16px,4vw,40px);gap:8px}
  .ecl li a .nm{font-size:24px}.ecl ol{gap:4px}.ecl .room{gap:2px}
}
/* v53 phone upright: the dark/white edge is the edge between the picture and the list, so no label ever sits on it */
@media (max-width:820px) and (orientation:portrait),(max-width:820px) and (min-height:501px){
  html:has(body.ecl){background:linear-gradient(180deg,var(--ink0) 0 50%,#fff 50% 100%)}
  body.ecl{background:#fff}
  body.ecl .top,body.ecl .crumb{background:var(--ink0);box-shadow:0 0 0 100vmax var(--ink0);clip-path:inset(-100vmax -100vmax -2px -100vmax)}
  body.ecl .crumb{clip-path:inset(0 -100vmax -2px -100vmax)}
  body.ecl .crumb{margin-top:0;padding-top:clamp(10px,2.2vh,28px)}
  .ecl .night{background:var(--ink0)}
  .ecl .day{background:#fff;padding-block:clamp(18px,3vh,28px) 0}
}
@media (max-width:640px) and (max-height:700px) and (min-height:501px){
  .ecl .day{gap:8px;padding-block:14px 0}
  .ecl li a .nm{font-size:23px}
  .ecl li a .k{display:none}
}