@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/poppins-regular.ttf') format('truetype');
}
@font-face {
  font-family: Poppins;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/poppins-italic.ttf') format('truetype');
}
@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/poppins-semibold.ttf') format('truetype');
}

*, *::before, *::after { box-sizing: border-box; }
html { background: #101923; }
body {
  margin: 0;
  color: #f5f5f5;
  font-family: Poppins, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
/* The grain fills each section once, avoiding repeated texture tiles. */
main {
  overflow: hidden;
  background-color: #182635;
}
.hero, .about, .project {
  background-color: #182635;
  background-image: url('assets/fig/grain.webp');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: hard-light;
}
/* Project sections are taller than the opening panels, so preserve the grain scale instead of enlarging it to fill their height. */
.project {
  background-size: 100% auto;
  background-position: center top;
  background-repeat: repeat-y;
}
.hero, .about {
  position: relative;
  isolation: isolate;
  aspect-ratio: 1976 / 1248;
}
.hero { z-index: 1; }
.hero-title {
  position: absolute;
  top: 26%;
  left: 13.7%;
  margin: 0;
  font-size: 22.4vw;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.12em;
  line-height: 1;
  text-transform: lowercase;
  white-space: nowrap;
}
.hero-meta {
  position: absolute;
  top: 78.1%;
  left: 13.7%;
  right: 15.8%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 2.03vw;
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.08em;
  line-height: 1.04;
  text-transform: uppercase;
}
.hero-meta p { margin: 0; }
.hero-obj, .about-obj {
  position: absolute;
  pointer-events: none;
  user-select: none;
}
.hero-obj { z-index: 2; }
.hero-obj--butterfly { width: 18%; left: 4.9%; top: 8.1%; }
.hero-obj--keychain { width: 15.5%; right: 2.8%; top: -13%; transform: rotate(12deg); }
.hero-obj--heart { width: 10%; left: -3%; top: 44%; transform: rotate(-48deg); }
.hero-obj--earphone { width: 24.7%; left: 35%; top: 66.5%; transform: rotate(220deg); }
.hero-obj--coffee { width: 34.3%; right: -15.2%; top: 51.5%; }

.about-copy {
  position: relative;
  z-index: 2;
  width: 42%;
  margin-left: 11.1%;
  padding-top: 3.2%;
  font-size: 2vw;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
}
.about-copy h2 {
  margin: 0 0 2vw -0.3vw;
  font-size: 6.55vw;
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.08em;
  line-height: 1;
  text-transform: uppercase;
}
.about-copy p { margin: 0 0 2.25vw; }
.about-copy .about-intro { font-weight: 600; margin-bottom: 2.1vw; }
.about-photo {
  position: absolute;
  z-index: 1;
  top: 3.1%;
  left: 56.6%;
  width: 40.2%;
  height: 79.8%;
  margin: 0;
  display: grid;
  place-items: center;
  background: url('assets/fig/iridescent-foil.webp') center / cover;
}
.about-photo img { width: 77%; }
/* Background positioning crops only transparent margins of the supplied PNGs. */
.about-obj { background-repeat: no-repeat; }
.about-obj--butterfly, .about-obj--butterfly-right {
  background-image: var(--media-src, none);
  background-size: 125% auto;
  background-position: 50% 30%;
  width: 24%;
  aspect-ratio: 1.34;
  left: -12%;
  top: 7%;
  transform: rotate(-22deg);
  opacity: 0.7;
}
.about-obj--butterfly-right { left: auto; right: -15%; top: 46%; transform: rotate(28deg); }
.about-obj--glasses {
  background-image: var(--media-src, none);
  background-size: 132% auto;
  background-position: 50% 43%;
  width: 25%;
  aspect-ratio: .9;
  left: -10.5%;
  bottom: -1%;
  z-index: 3;
}
.about-obj--cherries {
  background-image: var(--media-src, none);
  background-size: 140% auto;
  background-position: 58% 35%;
  width: 9.5%;
  aspect-ratio: .65;
  top: 2.1%;
  left: 52.7%;
  z-index: 3;
}
.project {
  position: relative;
  isolation: isolate;
  padding-top: 15.7vw;
  padding-bottom: 4.5vw;
}
/* On narrow screens, cover the seam left by the previous composition before
   preserving the original placement of Maurício's content. */
@media (max-width: 600px) {
  .project--mauricio {
    margin-top: -3vw;
    padding-top: 18.7vw;
  }
}
.project h2 {
  margin: 0;
  text-align: center;
  font-size: 6.55vw;
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.08em;
  line-height: 1;
}
.project-chain {
  position: absolute;
  left: 0;
  top: 7vw;
  width: 100%;
  height: 3.7vw;
  background: var(--media-src, none) left -7vw / 100% auto no-repeat;
  /* The supplied chain reference includes a dark paper strip. Its luminance mask
     keeps the metallic links while letting the section grain show through. */
  -webkit-mask-image: var(--media-src, none);
  -webkit-mask-position: left -7vw;
  -webkit-mask-size: 100% auto;
  -webkit-mask-repeat: no-repeat;
  mask-image: var(--media-src, none);
  mask-mode: luminance;
  mask-position: left -7vw;
  mask-size: 100% auto;
  mask-repeat: no-repeat;
  pointer-events: none;
}
.project-note {
  position: relative;
  margin: 6vw 0 0 11.4%;
  width: 49.1%;
  min-height: 47.4vw;
  padding: 4.5vw 4vw 4.9vw;
  color: #292929;
}
.project-note-paper { position: absolute; inset: 0; width: 100%; height: 100%; }
.project-note-sparkles {
  position: absolute;
  width: 42%;
  height: 78%;
  left: 42%;
  bottom: 0;
  opacity: .12;
  transform: rotate(60deg);
}
.project-description { position: relative; font-size: 2vw; line-height: 1; letter-spacing: -.045em; }
.project-description p { margin: 0 0 2vw; }
.project-description p:last-child { margin-bottom: 0; }
.project-description strong { font-weight: 600; }
.project-decoration { position: absolute; pointer-events: none; }
.project-pin { width: 15%; left: 49.3%; top: 27vw; transform: scaleX(-1); z-index: 2; }
.project-gummies { width: 13%; left: -2.7%; top: 46vw; }
.project-wood-star { width: 13%; left: 68.7%; top: 66.5vw; transform: rotate(7deg); }
.project-feature { position: absolute; width: 25%; left: 67.5%; top: 27.9vw; }
.project-side-card {
  position: absolute;
  right: -20%;
  top: 47vw;
  width: 25%;
  transform: rotate(15deg);
  pointer-events: none;
}
.project-side-sparkles { width: 21%; top: 104vw; left: -9%; transform: rotate(-20deg); }
.project-gold-stars { width: 22%; right: -14%; top: 142vw; transform: rotate(-18deg); }
.project-butterfly {
  width: 30%;
  aspect-ratio: 1.34;
  right: -20%;
  top: 112vw;
  background-image: var(--media-src, none);
  background-size: 125% auto;
  background-position: 50% 30%;
  transform: rotate(18deg);
  opacity: .7;
}
.project-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: calc((76vw - 1.1vw) / 3 * 1096 / 816);
  gap: .55vw;
  width: 76%;
  margin: 8vw 0 0 11%;
  align-items: stretch;
}
.project-post { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; }
.project-cause { margin: 0; background: white; padding: 0 .85vw; display: grid; grid-template-rows: 6.8% 86.2% 7%; overflow: hidden; }
.post-top { display: flex; justify-content: flex-end; align-items: center; color: #333; font-size: .8vw; text-align: right; letter-spacing: .03em; }
.project-cause img { width: 100%; height: 100%; min-height: 0; object-fit: fill; }
.post-top, .post-actions { flex-shrink: 0; }
.post-actions { display: flex; align-items: center; padding: 0; }
.post-actions svg { display: block; width: 100%; height: 1.3vw; }

/* Cecília Bisinella */
.project--cecilia {
  min-height: 140vw;
  padding-top: 13vw;
  padding-bottom: 12vw;
  overflow: hidden;
}
.project--cecilia h2 { position: relative; z-index: 3; }
.cecilia-folder {
  position: relative;
  z-index: 1;
  display: block;
  width: 83%;
  aspect-ratio: 1600 / 1111;
  margin: 6vw auto 0;
}
.cecilia-note {
  position: absolute;
  z-index: 2;
  top: 34vw;
  left: 13.4%;
  width: 43%;
  min-height: 44vw;
  margin: 0;
  padding: 5.5vw 4vw;
  color: #282629;
  background: #faf8f4;
  box-shadow: 0 1.2vw 1.1vw rgba(0, 0, 0, .2);
  font-size: 2vw;
  letter-spacing: -.045em;
  line-height: 1;
}
.cecilia-note p { margin: 0 0 2.6vw; }
.cecilia-note p:last-child { margin-bottom: 0; }
.cecilia-note strong { font-weight: 600; }
.cecilia-heart-clip {
  position: absolute;
  z-index: 4;
  width: 8%;
  aspect-ratio: 700 / 593;
  top: 28.5vw;
  left: 28%;
  transform: rotate(-9deg);
}
.cecilia-feature-photo {
  position: absolute;
  z-index: 3;
  top: 36vw;
  right: 7%;
  width: 29%;
  height: auto;
}
.cecilia-decoration {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}
.cecilia-decoration--butterflies { width: 17%; aspect-ratio: 1000 / 1125; left: -2%; bottom: 13%; }
.cecilia-decoration--shavings { width: 16%; aspect-ratio: 1000 / 1221; right: -4%; bottom: 3%; }
.cecilia-decoration--yellow-shavings { width: 11%; aspect-ratio: 700 / 567; right: -2%; bottom: 3%; transform: rotate(19deg); }
.cecilia-post-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6vw;
  width: 65%;
  margin: 9vw auto 0;
  align-items: stretch;
}
.cecilia-post-frame {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 839 / 1356;
  border-radius: 1.2vw;
  background: #fff;
}
.cecilia-post {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  border-radius: inherit;
  box-shadow: none;
}
.cecilia-envelope-kit {
  position: relative;
  z-index: 3;
  display: block;
  width: 48%;
  height: auto;
  margin: 7vw auto 0;
}