:root {
  color-scheme: light;
  font-family: ui-serif, "Iowan Old Style", "Baskerville", "Times New Roman", serif;
  background: #2589df;
  color: #ffffff;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  min-width: 280px;
  background: #2589df;
}

.composition {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  min-height: 100svh;
  padding: clamp(1.5rem, 4.5vw, 4.5rem);
  display: grid;
  grid-template-rows: auto 1fr;
}

.composition::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, rgb(8 62 121 / 24%), transparent 60%);
  pointer-events: none;
}

.sky {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

h1 {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(0.78rem, 1vw, 0.92rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 1px 18px rgb(8 52 103 / 28%);
}

blockquote {
  width: min(100%, 62rem);
  margin: 0;
  align-self: center;
  padding: 0 0 clamp(2rem, 7svh, 5rem) clamp(0rem, 4vw, 4rem);
}

blockquote p {
  margin: 0;
  font-size: clamp(2.65rem, 6vw, 6rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
  text-indent: -0.2em;
  text-shadow: 0 2px 28px rgb(8 52 103 / 32%);
}

@media (max-width: 680px) {
  .composition {
    padding: clamp(1.25rem, 6vw, 2rem);
  }

  .sky {
    object-position: 94% center;
  }

  blockquote {
    width: min(100%, 28rem);
    padding: 0 0 8svh;
  }
}

@media (max-width: 330px) {
  blockquote p {
    font-size: 2.35rem;
  }
}

@media (prefers-contrast: more) {
  .composition::after {
    background: rgb(5 43 87 / 40%);
  }
}