/* /instruments/ — six looping instrument videos, no scrolling on any screen.
   Colours + font come from the shared tokens (same as the homepage and portfolio). */

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body { background: var(--ink); color: var(--green); }

.ins {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ── header: same as the portfolio ── */
.ins-header {
  flex: none;
  height: 8vh;
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  border-bottom: 2px solid var(--green);
}
.ins-title {
  margin: 0;
  font-size: max(18px, 3.5vh);
  font-weight: inherit;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.ins-title a { text-decoration: underline; }
.ins-title a:hover,
.ins-title a:focus-visible {
  background: var(--green);
  color: var(--ink);
  outline: none;
}

/* ── grid: all the height under the header, equal rows ── */
.ins-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 2.4vh 24px;
  padding: 2.6vh 24px 2.4vh;
}

.tile {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  color: var(--green);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
/* the box the video is fitted into; the video keeps its own shape and sits on the box's bottom-left,
   so the captions in a row line up */
.tile-media {
  position: relative;
  flex: 1;
  min-height: 0;
}
.tile-media video {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  background: #0f0909;
  object-fit: contain;
}
.tile-caption {
  flex: none;
  margin-top: 0.7vh;
  font-size: max(12px, 2.2vh);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tile-caption .word {
  display: inline-block;
  padding: 0.03em 0.1em;
  transition: background-color 0.07s ease, color 0.07s ease;
}
.tile-caption .tm { font-size: 0.6em; vertical-align: 0.6em; }

/* link tiles: the homepage menu's swap on hover / keyboard focus / touch press */
a.tile { cursor: pointer; }
@media (hover: hover) {
  a.tile:hover .tile-caption .word { background: var(--green); color: var(--ink); }
}
a.tile:focus-visible { outline: none; }
a.tile:focus-visible .tile-caption .word,
a.tile.is-pressed .tile-caption .word { background: var(--green); color: var(--ink); }
a.tile:focus-visible video { outline: 2px solid var(--green); outline-offset: 2px; }

.tile.is-soon { cursor: default; }

/* ── phones (same rule as the homepage): 2 columns × 3 rows ── */
@media (max-width: 759px), (max-aspect-ratio: 9/10) {
  .ins {
    height: 100vh;
    height: 100svh;     /* the height with the browser bars showing: nothing hides under Safari's bottom bar */
    padding-bottom: env(safe-area-inset-bottom);
  }
  .ins-header { height: auto; min-height: 0; padding: 14px 16px 12px; }
  .ins-title { font-size: 22px; letter-spacing: 0.02em; }
  .ins-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 14px 12px;
    padding: 14px 12px 12px;
  }
  /* narrow columns: captions may use two lines; every caption reserves two, so rows stay lined up */
  .tile-caption {
    font-size: 13px;
    margin-top: 5px;
    white-space: normal;
    min-height: calc(2 * 1.35em);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}