/* Identification and observation follow the existing section lifecycle. */
.fragments {
  --section-top: calc(clamp(8rem, 15vh, 12rem) - 24px);
  position: relative;
  height: 100vh;
  height: 100dvh;
  padding-top: var(--section-top);
  overflow: hidden;
  background: var(--black);
}
.fragments-identity {
  z-index: 1;
}
.fragments-observation {
  --observation-left: clamp(1.5rem, 9vw, 11rem);
  --observation-right: 9vw;
  position: absolute;
  top: calc((100% - var(--system-status-height)) / 2);
  left: var(--observation-left);
  right: var(--observation-right);
  display: grid;
  grid-template-columns: minmax(0, 18fr) minmax(0, 60fr);
  align-items: center;
  gap: 4vw;
  /* Arrow hit areas extend 22px below the inner edge, inside the 1px border. */
  padding-bottom: 21px;
  transform: translateY(-50%);
}
.fragments-media {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  width: calc((100% - 4vw) * 60 / 78);
  left: calc((var(--observation-right) - var(--observation-left)) / 2);
  min-width: 0;
  aspect-ratio: 3 / 1;
  border: 1px solid var(--line);
}
.fragments-media-slot {
  position: absolute;
  inset: 3px;
  pointer-events: none;
}
.fragments-cartouche {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  display: flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 4px;
  border: 1px solid var(--line);
  background: var(--black);
  color: var(--grey);
  font-size: 10px;
  line-height: 1;
  letter-spacing: .12em;
}
.fragments-counter { min-width: 62px; text-align: center; white-space: nowrap; }
.fragments-arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--grey);
  font-size: 18px;
  cursor: pointer;
}
.fragments-arrow[aria-disabled="true"] { color: #45444c; cursor: default; }
.fragments-arrow:focus-visible { outline: 1px solid var(--dim); outline-offset: -5px; }
.fragments-note {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  color: var(--grey);
  font-size: 10px;
  letter-spacing: .14em;
  line-height: 1.8;
}
.fragments-note p { margin: 0; min-height: 1.8em; }
.fragments-note.is-prepared .fragments-note-text { visibility: hidden; }
.fragments-note-text.is-typing::after { content: "_"; }
.fragments-note .fragments-name {
  margin-bottom: .55rem;
  color: #b4b3ba;
  font-size: 12px;
  letter-spacing: .17em;
}
@media (max-width: 900px) {
  .fragments-observation { --observation-left: 7vw; --observation-right: 7vw; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .fragments-media { width: 100%; }
}
@media (max-width: 640px) {
  .fragments { --section-top: calc(7rem - 24px); }
  .fragments-observation { --observation-left: 1.5rem; --observation-right: 1.5rem; gap: 2.25rem; }
  .fragments-media { aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) and (max-height: 480px) {
  .fragments-observation { gap: 1.25rem; }
}
@media (min-width: 560px) and (max-width: 900px) and (max-height: 480px) {
  .fragments-observation { grid-template-columns: 150px minmax(0, 1fr); gap: 1.5rem; }
  .fragments-media { width: calc(100% - 150px - 1.5rem); }
  .fragments-media { aspect-ratio: 2.5 / 1; }
}