:root {
  --ink: rgb(11, 13, 16);
  --ink-strong: rgb(22, 25, 28);
  --ink-slate: rgb(78, 86, 94);
  --ink-dim: rgb(153, 152, 151);
  --surface-page: rgb(250, 247, 242);
  --edge: rgb(229, 222, 216);

  --sans: Onest, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: Fraunces, "Iowan Old Style", Georgia, "Times New Roman", serif;

  --r-pill: 999px;

  /* Each axis gets its own long falloff. One ellipse doing all of it washed
     the middle of the picture out; these stay at full strength across the
     centre and only give way at the rim. */
  --fade-x: transparent 0%, rgba(0, 0, 0, 0.06) 4%, rgba(0, 0, 0, 0.22) 8%,
    rgba(0, 0, 0, 0.48) 12%, rgba(0, 0, 0, 0.76) 17%, rgba(0, 0, 0, 0.93) 22%,
    #000 28%, #000 72%, rgba(0, 0, 0, 0.93) 78%, rgba(0, 0, 0, 0.76) 83%,
    rgba(0, 0, 0, 0.48) 88%, rgba(0, 0, 0, 0.22) 92%, rgba(0, 0, 0, 0.06) 96%,
    transparent 100%;

  --fade-bottom: #000 0 87%, rgba(0, 0, 0, 0.9) 91%, rgba(0, 0, 0, 0.62) 94.5%,
    rgba(0, 0, 0, 0.3) 97%, rgba(0, 0, 0, 0.1) 98.8%, transparent 100%;

  --fade-arc: #000 0 44%, rgba(0, 0, 0, 0.95) 56%, rgba(0, 0, 0, 0.8) 67%,
    rgba(0, 0, 0, 0.54) 77%, rgba(0, 0, 0, 0.28) 86%, rgba(0, 0, 0, 0.09) 94%,
    transparent 100%;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--surface-page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }

.sunset {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 5vh, 64px);
}

/* ---------- the words: one block, flush left, even measure ---------- */

.sunset__note {
  width: 100%;
  max-width: 592px;
  padding-inline: 24px;
  text-align: left;
}

.sunset__mark {
  display: block;
  width: 36px;
  margin-bottom: clamp(20px, 3vh, 30px);
  color: var(--ink-strong);
}

.sunset__title {
  margin: 0;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--ink);
}

.sunset__body {
  margin: clamp(18px, 2.4vh, 26px) 0 0;
  font-size: clamp(15.5px, 1.1vw, 16.5px);
  line-height: 1.72;
  color: var(--ink-slate);
  text-wrap: pretty;
}

/* ---------- where to go instead ---------- */

/* No rule above it. The button is distinct enough on a cream page; a hairline
   as well just builds a box around the last thought. */
.sunset__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: clamp(22px, 3vh, 30px);
  min-height: 46px;
  padding: 0 20px;
  background: var(--ink-strong);
  border-radius: var(--r-pill);
  color: var(--surface-page);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

.sunset__cta:hover { opacity: 0.86; }
.sunset__cta:active { transform: translateY(1px); }

.sunset__cta:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.sunset__cta-arrow {
  width: 15px;
  height: 15px;
  flex: none;
  transition: transform 220ms cubic-bezier(0.22, 0.65, 0.3, 1);
}

.sunset__cta:hover .sunset__cta-arrow { transform: translateX(3px); }

/* ---------- the porthole ---------- */

.sunset__scene {
  position: relative;
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  /* The arc. Struck from below the waterline so the sky gives way on a curve
     and the sand the cat is sitting on is never touched by it. */
  -webkit-mask-image: radial-gradient(ellipse 66% 92% at 50% 88%, var(--fade-arc));
  mask-image: radial-gradient(ellipse 66% 92% at 50% 88%, var(--fade-arc));
}

/* Warm light behind the opening, so the rim reads as glare rather than as the
   picture being rubbed out. */
.sunset__scene::before {
  content: "";
  position: absolute;
  inset: 2% -4% -10%;
  background: radial-gradient(
    ellipse 54% 64% at 50% 62%,
    rgba(248, 160, 84, 0.24) 0%,
    rgba(248, 165, 96, 0.12) 48%,
    rgba(250, 180, 120, 0) 80%
  );
  pointer-events: none;
}

.sunset__frame {
  display: block;
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, var(--fade-bottom));
  mask-image: linear-gradient(to bottom, var(--fade-bottom));
}

.sunset__art {
  /* Crops the cool lavender band off the top: periwinkle at low opacity over a
     warm cream page reads as dirty grey, orange sky does not. */
  aspect-ratio: 1456 / 640;
  object-fit: cover;
  object-position: 50% 100%;
  -webkit-mask-image: linear-gradient(to right, var(--fade-x));
  mask-image: linear-gradient(to right, var(--fade-x));
}

/* Centred: the whole stack sits in the middle of the page. */
[data-place="center"] .sunset {
  justify-content: center;
  padding-block: clamp(44px, 7vh, 88px);
}

/* Bottom: the words hold the top, the scene settles onto the foot of the page. */
[data-place="bottom"] .sunset {
  justify-content: flex-start;
  padding-top: clamp(44px, 7.5vh, 92px);
}

[data-place="bottom"] .sunset__scene { margin-top: auto; }

.sunset__art {
  width: min(1180px, 100vw);
  height: auto;
}

[data-place="bottom"] .sunset__art {
  width: auto;
  max-width: none;
  height: clamp(260px, 44vh, 540px);
}

/* ---------- arrival ---------- */

@keyframes sunset-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes sunset-settle {
  from { opacity: 0; transform: scale(1.03); }
  to { opacity: 1; transform: none; }
}

.sunset__mark,
.sunset__title,
.sunset__body {
  animation: sunset-rise 900ms cubic-bezier(0.22, 0.65, 0.3, 1) both;
}

.sunset__title { animation-delay: 80ms; }
.sunset__body:nth-of-type(1) { animation-delay: 150ms; }
.sunset__body:nth-of-type(2) { animation-delay: 210ms; }
.sunset__body:nth-of-type(3) { animation-delay: 270ms; }
.sunset__cta { animation: sunset-rise 900ms cubic-bezier(0.22, 0.65, 0.3, 1) 330ms both; }

.sunset__scene {
  animation: sunset-settle 1500ms cubic-bezier(0.22, 0.65, 0.3, 1) 240ms both;
}

@media (prefers-reduced-motion: reduce) {
  .sunset__mark,
  .sunset__title,
  .sunset__body,
  .sunset__scene,
  .sunset__cta,
  .sunset__cta-arrow {
    animation: none;
    transition: none;
  }
}

@media (max-width: 720px) {
  .sunset { gap: clamp(26px, 3.5vh, 40px); }
  .sunset__note { padding-inline: 22px; }

  /* Must fit the viewport, or the side falloff lands off-screen and the
     picture ends on two hard vertical edges. Taller frame, cropped toward the
     cat, so the subject still carries at this width. */
  .sunset__art,
  [data-place="bottom"] .sunset__art {
    width: 100vw;
    max-width: 100vw;
    height: auto;
    aspect-ratio: 1456 / 940;
    object-position: 62% 50%;
  }
}