:root {
  --ink: #121c24;
  --paper: #f3efe6;
  --line: #d7e0dc;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--ink);
  scrollbar-color: var(--line) var(--ink);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: "Iowan Old Style", Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--paper);
  color: var(--ink);
}

/* The page is the photograph at its own height. The line sits in its sky. */
.poster {
  position: relative;
  background: var(--ink);
}

picture {
  display: block;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

.lockup {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding:
    max(1.05rem, env(safe-area-inset-top, 0px))
    max(1.2rem, env(safe-area-inset-left, 0px))
    2.5rem
    max(1.2rem, env(safe-area-inset-right, 0px));
  background: linear-gradient(
    180deg,
    rgba(18, 28, 36, 0.55) 0%,
    rgba(18, 28, 36, 0.18) 62%,
    rgba(18, 28, 36, 0) 100%
  );
}

.brand {
  margin: 0;
  color: var(--paper);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.85rem, 7.2vw, 2.65rem);
  letter-spacing: 0.01em;
  line-height: 1.05;
}

h1 {
  margin: 0.32rem 0 0;
  max-width: 22ch;
  color: var(--paper);
  font-weight: 450;
  font-style: normal;
  font-size: clamp(0.98rem, 3.3vw, 1.2rem);
  letter-spacing: 0.045em;
  line-height: 1.35;
}

/* Wider than the photograph, and still tall enough to keep the wallets. */
@media (min-aspect-ratio: 4/3) {
  .poster {
    display: block;
    height: 100dvh;
    min-height: 0;
  }

  .poster::before {
    display: none;
  }

  picture,
  img {
    width: 100%;
    height: 100%;
    -webkit-mask-image: none;
    mask-image: none;
    object-fit: cover;
    object-position: center bottom;
  }

  .lockup {
    padding:
      max(clamp(1.6rem, 6vh, 3.6rem), env(safe-area-inset-top, 0px))
      clamp(1.5rem, 4vw, 3.4rem)
      2.6rem;
    background: linear-gradient(
      180deg,
      rgba(18, 28, 36, 0.9) 0%,
      rgba(18, 28, 36, 0.78) 42%,
      rgba(18, 28, 36, 0) 100%
    );
  }

  .brand {
    font-size: clamp(1.9rem, 2.8vw, 2.55rem);
  }

  h1 {
    margin-top: 0.5rem;
    font-size: clamp(1.02rem, 1.4vw, 1.24rem);
    letter-spacing: 0.04em;
  }
}

/* Very wide or short: bottom-anchored cover begins to take the wallets. */
@media (min-aspect-ratio: 2/1) {
  .poster {
    display: grid;
    place-items: center;
    justify-content: center;
    align-content: center;
    background: #0e171d url("../media/andthesea-beach.jpg") center bottom / cover no-repeat;
  }

  .poster::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 0;
    inset: -3rem;
    height: auto;
    background: url("../media/andthesea-beach.jpg") center bottom / cover no-repeat;
    filter: blur(28px) brightness(0.55) saturate(0.8);
    transform: none;
  }

  picture {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 0;
  }

  img {
    width: auto;
    height: 100dvh;
    max-width: 100%;
    max-height: 100dvh;
    object-fit: contain;
    object-position: center center;
  }

  .lockup {
    z-index: 2;
    left: 50%;
    right: auto;
    width: min(100%, calc(100dvh * 4 / 3));
    transform: translateX(-50%);
  }
}

@media print {
  body,
  .poster,
  .lockup {
    background: white;
    color: black;
  }

  .poster {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .poster::before {
    display: none;
  }

  .lockup {
    position: static;
    width: auto;
    padding: 0 0 1rem;
    transform: none;
  }

  picture,
  img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    -webkit-mask-image: none;
    mask-image: none;
    object-fit: unset;
  }

  h1,
  .brand {
    color: black;
  }
}