@font-face { font-family: "Rethink Sans"; src: url("assets/RethinkSans-wght.ttf") format("truetype"); font-style: normal; font-weight: 400 500; font-display: swap; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #FFFFFF; color: #000000; font-family: "Rethink Sans", sans-serif; }
.page-plane { container: brand-space / inline-size; width: 100%; }
.composition { display: grid; margin-inline: auto; }
.identity { grid-row: 1; width: min(100%, 560px); justify-self: end; }
.identity img { display: block; height: var(--perture-logo-base-height); width: auto; }
.message-column { display: flex; align-items: center; justify-content: flex-end; min-width: 0; }
.message-stack { display: flex; flex-direction: column; align-items: flex-start; width: fit-content; max-width: min(100%, 560px); gap: 24px; }
h1 { margin: 0; max-width: 100%; font-size: 32px; font-weight: 500; line-height: 1; letter-spacing: 0; }
.message-stack p { margin: 0; max-width: 100%; font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: 0; }
.demo-link { display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 16px 24px; border-radius: 29px; background: #00A6FF; color: #000000; font-size: 16px; font-weight: 400; line-height: 24px; text-decoration: none; }
.demo-link:hover { text-decoration: underline; }
.demo-link:focus-visible { outline: 2px solid #000000; outline-offset: 4px; }
.art-column { display: flex; align-items: center; min-width: 0; }
.art-column img { display: block; width: auto; height: auto; max-width: 100%; object-fit: contain; border-radius: 0; }
.composition { --perture-logo-base-height: 20px; grid-template-columns: repeat(4, minmax(50px, 1fr)); column-gap: 12px; row-gap: 40px; padding: 40px 40px; max-width: none; }
.identity { grid-column: 1 / span 4; }
.message-column { grid-column: 1 / span 4; grid-row: 2; order: 1; }
.art-column { grid-column: 1 / span 4; grid-row: 3; order: 2; justify-content: center; }
.art-column img { max-height: 320px; }
@container brand-space (min-width: 640px) {
.composition { --perture-logo-base-height: 24px; grid-template-columns: repeat(8, minmax(48px, 1fr)); column-gap: 16px; row-gap: 48px; padding: 48px 64px; max-width: 1320px; }
.identity { grid-column: 1 / span 4; }
.message-column { grid-column: 1 / span 4; grid-row: 2; order: 1; }
.art-column { grid-column: 5 / span 4; grid-row: 2; order: 2; justify-content: flex-start; }
.art-column img { max-height: 420px; }
}
@container brand-space (min-width: 2400px) {
.composition { --perture-logo-base-height: 24px; grid-template-columns: repeat(8, minmax(113px, 1fr)); column-gap: 36px; row-gap: 48px; padding: 48px 100px; max-width: none; }
.identity { grid-column: 1 / span 3; }
.message-column { grid-column: 1 / span 3; grid-row: 2; order: 1; }
.art-column { grid-column: 4 / span 5; grid-row: 2; order: 2; justify-content: flex-start; }
.art-column img { max-height: 480px; }
}