@font-face {
  font-family: "SuisseIntl";
  src:
    url("fonts/SuisseIntl.woff2") format("woff2"),
    url("fonts/SuisseIntl.woff") format("woff"),
    url("fonts/SuisseIntl.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html,
body {
  /*
  SITE CONTROLS
  Change --max-font-size to make the site's text smaller or larger everywhere.
  --base-font-size keeps the type responsive between the minimum and maximum.
  */
  --base-font-size: 2vh;
  --min-font-size: 16px;
  --max-font-size: 19.75px;
  --page-background: #ffffff;
  --text-color: #000000;
  --caption-muted-color: #a6a8aa;
  --link-hover-color: #a6a8aa;
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--page-background);
  color: var(--text-color);
  font-size: clamp(
    var(--min-font-size),
    var(--base-font-size),
    var(--max-font-size)
  );
  line-height: 1.25;
}

* {
  box-sizing: border-box;
}

h1,
h2,
h3,
body {
  font-family: "SuisseIntl", Helvetica, sans-serif;
  font-weight: 400;
  font-style: normal;
  margin: 0;
  padding: 0;
}
body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;

  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "kern" 1, "liga" 1;
  font-synthesis: none;
}
#app {
  height: 100vh;
  height: 100dvh;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
}

strong {
  font-weight: 400;
  color: #f70091;
}

h1 {
  position: absolute;
  top: -1.5rem;
}

.page {
  --page-inline-space: 3rem;
  --page-padding-block: 1.5rem;
  --caption-block-size: 4.75em;
  position: relative;
  padding: var(--page-padding-block) 0;
  margin: 0 auto;
  width: calc(100% - var(--page-inline-space));
  /*
  11.667rem = (3rem page padding + 1rem gap + 4.75rem caption) * 4 / 3
  */
  max-width: calc(133.333vh - 11.667rem);
  max-width: calc(133.333dvh - 11.667rem);
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}
.page--projects {
  overflow-y: hidden;
}
.page--projects::before,
.page--projects::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  z-index: 3;
  pointer-events: none;
  background: var(--page-background);
}
.page--projects::before {
  left: 0;
}
.page--projects::after {
  right: 0;
}
.page div[flex] {
  flex: 1;
}
.page a[href="hidden"] {
  display: none;
}
.page p {
  margin: 0 0 1rem 0;
}
.page figure {
  position: relative;
  display: flex;
  align-items: flex-start;
  flex: 1 1 auto;
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  overflow-y: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
  scroll-behavior: auto;
  user-select: none;
  min-height: 0;
}
.page figure::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}
.page figure > p {
  display: grid;
  grid-template-rows: minmax(0, 1fr) var(--caption-block-size);
  row-gap: 1rem;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  scroll-snap-align: start;
  padding-bottom: 0;
  margin: 0;
}
.page figure > p em {
  display: block;
  font-style: normal;
  color: var(--caption-muted-color);
  margin: 1rem 0 0;
}
.page figure .slide-caption {
  display: flow-root;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding-left: 0.08em;
}
.page figure video,
.page figure img {
  grid-row: 1;
  display: block;
  place-self: end center;
  width: auto;
  max-width: 100%;
  min-height: 0;
  height: auto;
  max-height: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  object-fit: cover;
  object-position: center;
}
.page figure.cursor-left {
  cursor: url(assets/s_left.png) 25 0, auto;
  cursor: -webkit-image-set(url(assets/s_left.png) 1x) 25 0, auto;
}
.page figure.cursor-right {
  cursor: url(assets/s_right.png) 25 0, auto;
  cursor: -webkit-image-set(url(assets/s_right.png) 1x) 25 0, auto;
}
a {
  text-decoration: none;
  color: inherit;
  font-weight: 400;
}

a:hover {
  color: var(--link-hover-color);
}

@media screen and (min-aspect-ratio: 43 / 40) and (max-height: 37.5rem) {
  .page {
    --caption-block-size: 6em;
    /* 13.333rem = (3rem padding + 1rem gap + 6rem caption) * 4 / 3 */
    max-width: calc(133.333vh - 13.333rem);
    max-width: calc(133.333dvh - 13.333rem);
  }
}

@media screen and (min-aspect-ratio: 43 / 40) and (max-height: 30rem) {
  .page {
    --caption-block-size: 8.5em;
    /* 16.667rem = (3rem padding + 1rem gap + 8.5rem caption) * 4 / 3 */
    max-width: calc(133.333vh - 16.667rem);
    max-width: calc(133.333dvh - 16.667rem);
  }
}

@media screen and (max-aspect-ratio: 43 / 40) {
  /* @EMILE This is for narrow / portrait screens. "rem" is a multiple of the base-font-size */
  body {
    font-size: 1rem;
  }
  .page {
    --page-inline-space: 2rem;
    --page-padding-block: 1rem;
    --caption-block-size: auto;
    max-width: none;
  }
  .page figure {
    flex: 0 0 auto;
    height: auto;
  }
  .page figure > p {
    grid-template-rows: auto auto;
    height: auto;
  }
  .page figure .slide-caption {
    overflow: visible;
  }
  .page figure video,
  .page figure img {
    place-self: auto;
    width: 100%;
    height: auto;
  }
}