/* ---------- reset & base ---------- */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  font-family: 'Cossette Texte', sans-serif;
  background: var(--color-green);
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-offset: 0.12em;
}

a:hover {
  text-decoration-color: transparent;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

p {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* dragged around by drag.js */
.movable {
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
}

.movable:active {
  cursor: grabbing;
}

/* ---------- design tokens ---------- */

:root {
  --color-lavender: #9ba6d5;
  --color-green: #38ac81;
  --color-ink: #000;
}

/* ==========================================================
   Desktop / tablet: scaled reproduction of the Figma poster
   ========================================================== */

.stage {
  position: relative;
  width: 100%;
  min-height: 100vh;
  container-type: inline-size;
  /* 294 / 1512: the lavender/green split from the Figma frame */
  background: linear-gradient(
    to bottom,
    var(--color-lavender) 0 19.444vw,
    var(--color-green) 19.444vw 100%
  );
}

/* in flow, so a window too short for the text grows the page instead of
   cropping it; the collage alone is cropped to the window */
.info {
  width: 40.807%;
  margin-left: 5.291%;
  padding: 5.291cqw 0;
  color: var(--color-ink);
  font-size: 0.992cqw;
  line-height: 2.105;
}

.info__header {
  margin-bottom: 2.105em;
}

.info__body {
  margin-top: 2.105em;
}

.info__works li {
  margin-bottom: 0;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-offset: 0.12em;
}

.info__bio,
.info__contacts-label {
  margin-top: 2.105em;
}

.info__email a {
  text-decoration: none;
}

.collage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.collage__item {
  position: absolute;
  width: auto;
  height: auto;
  pointer-events: auto;
}

.collage__item--fabric {
  left: 47.090%;
  top: 3.241cqw;
  width: 30.622%;
}

.collage__item--chair {
  left: 82.407%;
  top: 14.286cqw;
  width: 13.624%;
}

.collage__item--pretzel {
  left: 34.392%;
  top: 20.106cqw;
  width: 9.127%;
}

.collage__item--gnome {
  left: 66.336%;
  top: 25.265cqw;
  width: 11.376%;
}

.collage__item--flowers {
  left: 28.836%;
  top: 36.772cqw;
  width: 18.982%;
}

.collage__item--mountains {
  left: 55.093%;
  top: 41.468cqw;
  width: 39.749%;
}

.collage__item--printer {
  left: 4.563%;
  top: 44.048cqw;
  width: 14.087%;
}

/* ==========================================================
   Mobile: linear, readable layout
   ========================================================== */

@media (max-width: 880px) {
  .stage {
    background: none;
  }

  .info {
    width: auto;
    margin-left: 0;
    padding: 0;
    font-size: 16px;
  }

  .info__header {
    background: var(--color-lavender);
    padding: 32px 24px;
    margin-bottom: 0;
  }

  .info__body {
    background: var(--color-green);
    padding: 32px 24px;
    margin-top: 0;
  }

  .collage {
    position: static;
    overflow: visible;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
    background: var(--color-green);
    padding: 0 24px 32px;
  }

  /* a plain gallery here: dragging would only fight page scrolling */
  .collage__item {
    position: static;
    width: 140px;
    pointer-events: none;
  }

  .collage__item--fabric,
  .collage__item--mountains {
    width: 220px;
  }
}

@media (max-width: 420px) {
  .collage__item {
    width: 42%;
  }

  .collage__item--fabric,
  .collage__item--mountains {
    width: 100%;
  }
}