/* ==========================================================================
   HAVEN. — the island index.

   The one chapter where the window does not change photograph. It stays on a
   single long band of the waterfront and looks at different parts of it:
   assets/js/site/island.js writes --shot-x, --shot-y and --shot-z, and the
   picture inside the lens is scaled and shifted by them. Same object, same
   afternoon, a different part of it — which is the lens idea at its purest and
   costs one encode instead of six.
   ========================================================================== */
.island { padding: 12vh 0; }

.island__body { margin-top: 4.5rem; display: grid; gap: 2.8rem; }

/* the shot transform lives here rather than in lens.css because this is the
   only chapter that uses it; everywhere else the two variables are unset and
   the picture simply fills the window. */
.lens__shots picture[data-shot] img,
.island__frame picture img {
  transform: scale(var(--shot-z, 1));
  transform-origin: calc(var(--shot-x, .5) * 100%) calc(var(--shot-y, .5) * 100%);
  transition: transform 1.05s var(--ease-window);
}

.index {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 2.2rem;
  border-top: 1px solid var(--ink-18);
  padding-top: 1.2rem;
}
.index button {
  border: 0; background: none; cursor: pointer;
  padding: .55rem 0;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1;
  color: var(--ink-45);
  position: relative;
  transition: color .3s var(--ease);
}
.index button::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: .2rem; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.index button[aria-pressed="true"] { color: var(--ink); }
.index button[aria-pressed="true"]::after,
.index button:hover::after { transform: scaleX(1); }

.island__line { min-height: 3em; margin-top: 1.4rem; max-width: 40ch; }

@media (min-width: 900px) {
  .island__pick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
  }
  .island__pick .work__label { grid-column: 1 / -1; }
  .island__line { margin-top: 0; }
}
@media (max-width: 899px) {
  .island { padding: 8vh 0; }
  .index button { min-height: 44px; }
  /* A 2.87 band is 120px tall on a 390px screen — a letterbox, not a window.
     The frame goes square and the photograph is cropped by it; since this
     chapter is ABOUT looking at part of the picture, cropping it further is
     the same gesture rather than a compromise. */
  .island__frame { aspect-ratio: 1 / 1; }
}