/* Project pages: the wall at dusk, and the renders carried past it sideways, one after another.
   Scrolling down moves the row to the left. On phones the row becomes a column. */
.gal { position: fixed; inset: 0; z-index: 6; overflow: hidden; color: var(--pale); }
.rail { display: flex; align-items: center; height: 100%; width: max-content; gap: clamp(36px, 6vw, 110px); padding: 0 var(--g); will-change: transform; }
.pn { flex: none; }

/* the opening panel */
.pn-title { width: min(46vw, 620px); padding-right: 2vw; }
.pn-title .eyebrow { display: block; margin-bottom: 22px; opacity: 0.72; }
.pn-title h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 6.4vw, 104px); line-height: 0.98; letter-spacing: -0.015em; text-wrap: balance; }
.pn-title .lede { margin-top: 28px; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.5; max-width: 40ch; opacity: 0.86; }
.facts { display: flex; flex-wrap: wrap; gap: 10px 34px; margin-top: 34px; }
.facts div { min-width: 0; }
.facts dt { opacity: 0.6; margin-bottom: 4px; }
.facts dd { font-family: var(--serif); font-size: clamp(20px, 1.8vw, 28px); line-height: 1.1; }

/* one view */
.shot .frame { position: relative; height: min(64vh, 56vw); aspect-ratio: 3 / 2; overflow: hidden; background: #14110e; }
.shot .frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.shot .state { opacity: 0; transition: opacity 1.1s var(--ease); }
.shot .state.on { opacity: 1; }
/* each view starts dim and comes up as it arrives, like a lamp being turned on it */
.shot .frame::after { content: ""; position: absolute; inset: 0; background: #0b0b0a; opacity: 0.62; transition: opacity 1.8s var(--ease); pointer-events: none; z-index: 4; }
.shot.lit .frame::after { opacity: 0; }

/* two renders of one view: the first lies over the second and is drawn back from the right */
.cmp .before { z-index: 2; clip-path: inset(0 calc(100% - var(--s, 50%)) 0 0); }
.cmp .edge { position: absolute; top: 0; bottom: 0; left: var(--s, 50%); width: 1px; background: var(--pale); box-shadow: 0 0 0 0.5px rgba(11, 11, 10, 0.35); z-index: 3; pointer-events: none; }
.cmp .edge::after { content: ""; position: absolute; left: -5px; top: 50%; width: 11px; height: 44px; margin-top: -22px; background: var(--pale); box-shadow: 0 0 0 1px rgba(11, 11, 10, 0.55); }
.cmp .tag { position: absolute; bottom: 14px; z-index: 3; padding: 6px 9px; background: rgba(11, 11, 10, 0.72); color: var(--pale); font-size: 10px; pointer-events: none; transition: opacity 0.5s var(--ease); }
.cmp .tag.l { left: 14px; } .cmp .tag.r { right: 14px; }
.cmp[data-edge="lo"] .tag.l, .cmp[data-edge="hi"] .tag.r { opacity: 0; }
.cmp input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 5; touch-action: pan-y; -webkit-appearance: none; appearance: none; }
.cmp .frame:focus-within { outline: 1px solid var(--pale); outline-offset: 5px; }

.shot figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-top: 16px; min-height: 30px; opacity: 0; transform: translateY(10px); transition: opacity 1.4s var(--ease) 0.2s, transform 1.4s var(--ease) 0.2s; }
.shot.lit figcaption { opacity: 1; transform: none; }
.shot .what { font-size: 15px; line-height: 1.4; }
.shot .what .n { margin-right: 14px; opacity: 0.6; }
.pick { display: flex; flex: none; gap: 20px; }
.pick button { position: relative; padding: 6px 0; border: 0; background: none; cursor: pointer; opacity: 0.55; transition: opacity 0.5s var(--ease); }
.pick button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease); }
.pick button[aria-pressed="true"] { opacity: 1; }
.pick button[aria-pressed="true"]::after { transform: scaleX(1); }
.pick button:hover { opacity: 1; }

/* the last panel */
.pn-end { width: min(60vw, 720px); padding-right: 6vw; }
.pn-end .eyebrow { display: block; margin-bottom: 22px; opacity: 0.72; }
.pn-end h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4.8vw, 76px); line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance; }
.pn-end .go { display: flex; flex-wrap: wrap; gap: 18px 40px; margin-top: 40px; align-items: center; }
.btn { display: inline-block; padding: 15px 24px; border: 1px solid currentColor; cursor: pointer; background: none; transition: background 0.5s var(--ease), color 0.5s var(--ease); }
.btn:hover, .btn:focus-visible { background: var(--pale); color: #14110e; }

.track { height: 100vh; }

/* phones and upright screens: a column, scrolled the ordinary way */
@media (max-width: 760px) {
  .gal { position: relative; inset: auto; overflow: visible; }
  .rail { display: block; width: auto; height: auto; padding: calc(110px + env(safe-area-inset-top, 0px)) var(--g) 18vh; transform: none !important; }
  .pn { margin-bottom: 9vh; }
  .pn-title, .pn-end { width: auto; padding-right: 0; }
  .pn-title { min-height: 62svh; display: flex; flex-direction: column; justify-content: flex-end; }
  .shot .frame { height: auto; width: 100%; }
  .shot figcaption { flex-direction: column; gap: 6px; }
  .track, .pager { display: none; }
  /* the page scrolls under the header here, so the header gets a dusk of its own to sit on */
  .nav::before { content: ""; position: absolute; inset: 0 0 -28px 0; z-index: -1; background: linear-gradient(rgba(11, 11, 10, 0.92) 35%, rgba(11, 11, 10, 0)); pointer-events: none; }
}

html.no-gl .gal { color: #ece4d6; }