/* ---------- 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;
  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 {
    overflow: hidden;
    background: none;
  }

  .info {
    position: relative;
    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;
  }

  /* the 414px frame's 366px text measure, so the text wraps as in Figma
     on any wider screen and the collage stays where it was drawn */
  .info__header,
  .info__body {
    padding-right: max(24px, 100% - 390px);
  }

  /* the 414px mobile Figma frame, scaled down on narrower phones: left and
     width are Figma px / 4.14 in %. Vertically in px, as the text doesn't
     scale: the lower items hang off the bottom of the text so they stay
     next to bio and contacts however the works list wraps, and the stage
     crops the printer at the page bottom */
  .collage {
    right: auto;
    width: min(100%, 414px);
    overflow: visible;
  }

  /* not draggable here, that would only fight page scrolling; also drops
     offsets dragged on desktop before the window was narrowed */
  .collage__item {
    pointer-events: none;
    translate: none !important;
  }

  .collage__item--fabric {
    left: 43.237%;
    top: 112px;
    width: 41.063%;
  }

  .collage__item--chair {
    left: 79.710%;
    top: 210px;
    width: 18.357%;
  }

  .collage__item--pretzel {
    left: 75.121%;
    top: auto;
    bottom: 305px;
    width: 12.319%;
  }

  .collage__item--gnome {
    left: 19.082%;
    top: auto;
    bottom: 140px;
    width: 15.217%;
  }

  .collage__item--mountains {
    left: 41.546%;
    top: auto;
    bottom: 124px;
    width: 53.623%;
  }

  .collage__item--printer {
    left: 67.150%;
    top: auto;
    bottom: -38px;
    width: 22.222%;
  }

  .collage__item--flowers {
    display: none;
  }
}

/* narrower than the frame the role and first work wrap later, so the fabric
   and chair move below those lines */
@media (max-width: 413px) {
  .collage__item--fabric {
    top: 128px;
  }

  .collage__item--chair {
    top: 226px;
  }
}

/* too narrow to clear the works list and, below 300px, the role */
@media (max-width: 339px) {
  .collage__item--chair,
  .collage__item--pretzel {
    display: none;
  }
}

@media (max-width: 299px) {
  .collage__item--fabric {
    display: none;
  }
}