/* Overview thumbnails (overview-thumbs.js). A project space drawn as a page
   preview that fills whatever box the overview gives it. Everything is sized
   in --u, one hundredth of the preview's width, so the type wraps the same at
   every size and stays sharp at any zoom. Landscape boxes get the desktop
   page (text beside the scene, flipped like the page), portrait boxes get the
   phone page (text above the scene). */

@property --u { syntax: "<length>"; inherits: true; initial-value: 0px; }

.ot {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  container: ot / size;
  background: var(--bg, #fff);
  color: var(--fg, #000);
  font-family: var(--sans, -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.011em;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
:where(.ot) p { margin: 0; }

/* ---------------------------------------------------- landscape: the desk */
.ot-page {
  --u: min(1cqw, 1.6cqh);
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 37);
  grid-template-rows: minmax(0, 1fr);
  column-gap: calc(var(--u) * 5.5);
  padding: calc(var(--u) * 5) calc(var(--u) * 6.5);
  align-items: stretch;
}
.ot-flip { grid-template-columns: calc(var(--u) * 37) minmax(0, 1fr); }
.ot-flip .ot-text { order: 2; }

/* Whole paragraphs only: a block that doesn't fit wraps into a second
   column, which sits outside the box and is never seen. */
.ot-text {
  min-width: 0;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-content: flex-start;
  overflow: hidden;
}
.ot-text > * { width: 100%; flex: none; }

.ot-id {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.3);
  font-size: calc(var(--u) * 1.75);
  line-height: 1.2;
  white-space: nowrap;
}
.ot-icon {
  width: calc(var(--u) * 4.6);
  height: auto;
  aspect-ratio: 1;
  flex: none;
  border-radius: 22.37%;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08);
}
.ot-name { font-weight: 600; letter-spacing: -0.015em; }

.ot-title {
  margin-top: calc(var(--u) * 2.8);
  max-width: 15ch;   /* the page's measure, so it breaks where the page breaks */
  font-size: calc(var(--u) * 4.6);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.04;
  text-wrap: balance;
}
.ot-lede {
  margin-top: calc(var(--u) * 2.2);
  font-size: calc(var(--u) * 1.95);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.017em;
}

/* The scene: the largest square the column allows, on the page's centre line. */
.ot-shot {
  min-width: 0;
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ot-stage.stage {
  width: min(100cqw, 100cqh);
  height: auto;
  aspect-ratio: 1;
  flex: none;
  max-width: none;
  border-radius: calc(min(100cqw, 100cqh) * 0.054);
  /* the scene is a picture here: nothing in it can be hovered or clicked */
  pointer-events: none;
}
.ot-stage-icon { display: grid; place-items: center; }
.ot-stage-img {
  width: 34%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 22.37%;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 10px 30px rgba(0, 0, 0, 0.18);
}

/* ------------------------------------------------------ portrait: the phone */
@container ot (aspect-ratio < 1) {
  .ot-page {
    --u: 1cqw;
    display: flex;
    flex-direction: column;
    padding: calc(var(--u) * 10) calc(var(--u) * 7) calc(var(--u) * 7);
  }
  .ot-text, .ot-flip .ot-text { display: block; overflow: visible; flex: none; order: 0; }
  .ot-id { font-size: calc(var(--u) * 3.9); gap: calc(var(--u) * 2.6); }
  .ot-icon { width: calc(var(--u) * 10); }
  .ot-title {
    margin-top: calc(var(--u) * 5.5);
    max-width: none;
    font-size: calc(var(--u) * 8.6);
    line-height: 1.06;
  }
  .ot-lede { display: none; }
  /* the scene sits on the bottom gutter, so a row of cards shares one baseline */
  .ot-shot {
    flex: 1 1 0;
    min-height: 0;
    margin-top: calc(var(--u) * 7);
    align-items: flex-end;
  }
}
/* A tall phone card has room for the lede, as the phone page shows it. */
@container ot (aspect-ratio < 0.54) {
  .ot-lede {
    display: block;
    margin-top: calc(var(--u) * 3.6);
    font-size: calc(var(--u) * 4.25);
    line-height: 1.4;
  }
  /* and the scene follows the text, as the page flows */
  .ot-shot { align-items: flex-start; }
}