@font-face {
  font-family: 'DM Sans';
  src: url('dm-sans.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('bricolage.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}

:root { color-scheme: light; font-family: 'DM Sans', sans-serif; color: #281c3d; background: #fff9f0; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; display: grid; align-items: center; }
h1, h2, p { margin: 0; }
h1, h2 { font-family: 'Bricolage Grotesque', sans-serif; letter-spacing: -.035em; }
h1 { max-width: 9ch; font-size: clamp(3.2rem, 8vw, 6rem); line-height: .98; }
h2 { margin-top: .55rem; font-size: 2.5rem; line-height: 1.05; }
p { color: #645270; line-height: 1.55; }
a { color: #5932a5; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: .14em; }
:focus-visible { outline: 2px solid #5932a5; outline-offset: 4px; }
::selection { background: #dfcaff; color: #281c3d; }

.wrap { width: min(100% - 3rem, 58rem); margin-inline: auto; display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; padding-block: 3rem; }
.studio p { max-width: 36ch; margin-top: 1rem; font-size: 1.2rem; }
.product { padding: clamp(1.35rem, 4vw, 2.4rem); background: #f0e6fe; border-radius: 1rem; }
.product img { display: block; }
.product p { max-width: 35ch; margin-top: .65rem; }
.product a { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: .5rem; font-weight: 700; }

@media (max-width: 42rem) {
  body { align-items: start; }
  .wrap { width: calc(100% - 2rem); grid-template-columns: 1fr; }
}