* { box-sizing: border-box; }
html { color-scheme: dark; background: #000; }
body { margin: 0; color: #fff; background: #000; }
.texture { position: fixed; inset: 0; display: flex; overflow: hidden; pointer-events: none; }
.texture i { width: 25%; height: 100%; background: url('assets/texture.svg') center / 100% 100% no-repeat; }
.texture i:nth-child(even) { transform: scaleX(-1); }
main { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 20px; }
.composition { width: min(100%, 1366px); aspect-ratio: 1366 / 768; position: relative; }
img { display: block; max-width: 100%; height: auto; }
.brand { position: absolute; width: 31.8448%; left: 34.407%; top: 5.8594%; }
h1 { position: absolute; margin: 0; width: 35.2855%; left: 32.5769%; top: 68.3594%; }
.tagline { position: absolute; margin: 0; width: 51.6105%; left: 24.7438%; top: 84.1146%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (min-width: 761px) { main { padding: 0; } }
@media (max-width: 760px) {
  main { padding: max(36px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(36px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
  .texture i { width: 50%; flex-shrink: 0; background-size: cover; }
  .texture i:nth-child(n+3) { display: none; }
  .composition { aspect-ratio: auto; width: 100%; display: flex; align-items: center; flex-direction: column; }
  .brand, h1, .tagline { position: static; }
  .brand { width: min(76%, 340px); }
  h1 { width: min(86%, 390px); margin-top: clamp(44px, 9svh, 80px); }
  .tagline { width: min(100%, 500px); margin-top: 16px; }
}
@media (max-height: 500px) and (min-width: 761px) {
  .composition { width: min(100%, calc(100svh * 1366 / 768)); }
}