/* sailboat.ryanlight.dev — single hero page. No external assets. */

:root {
  --ink: #fdf3ea;
  --ink-dim: rgba(253, 243, 234, 0.74);
  --deep: #240d05;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--deep);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  margin: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;          /* avoids mobile browser-chrome jump */
  min-height: 30rem;
  overflow: hidden;
  isolation: isolate;
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;   /* keeps sun + mast off the caption */
  display: block;
  animation: drift 32s ease-in-out infinite alternate;
  will-change: transform;
}

/* Scrim: darkens only the lower third so the caption stays legible
   without dulling the sky. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(24, 8, 3, 0.86) 0%,
      rgba(24, 8, 3, 0.52) 18%,
      rgba(24, 8, 3, 0.10) 40%,
      rgba(24, 8, 3, 0) 62%),
    radial-gradient(120% 90% at 50% 38%,
      rgba(0, 0, 0, 0) 55%,
      rgba(20, 6, 2, 0.34) 100%);
}

.hero__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 1.5rem clamp(2.25rem, 7vh, 5rem);
  text-align: center;
  animation: rise 1.5s cubic-bezier(0.22, 0.68, 0.24, 1) both;
}

.eyebrow {
  margin: 0 0 0.85rem;
  font-size: clamp(0.62rem, 1.5vw, 0.74rem);
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

.title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.9rem, 12vw, 7.5rem);
  line-height: 0.94;
  letter-spacing: 0.005em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.46);
}

.subtitle {
  margin: 1.05rem auto 0;
  max-width: 36ch;              /* wide enough that "open water." never orphans */
  font-size: clamp(0.94rem, 2.1vw, 1.1rem);
  line-height: 1.55;
  color: var(--ink-dim);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
  text-wrap: balance;
}

/* On wide screens a centred caption collides with the hull and cuts through the
   sun-mast-reflection column, which is the whole point of the photograph.
   Move it to the lower left, over open water, and leave the centre alone. */
@media (min-width: 64rem) {
  .hero__caption {
    text-align: left;
    max-width: 36rem;
    padding-left: clamp(2.5rem, 6vw, 5.5rem);
    padding-bottom: clamp(2.5rem, 8vh, 5rem);
  }
  .subtitle { margin-left: 0; }
  .footer   { text-align: left; padding-left: clamp(2.5rem, 6vw, 5.5rem); }
}

/* ---------- footer ---------- */

.footer {
  padding: 1.6rem 1.5rem 2rem;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(253, 243, 234, 0.34);
}

/* ---------- motion ---------- */

@keyframes drift {
  from { transform: scale(1.045) translate3d(-0.7%, 0.5%, 0); }
  to   { transform: scale(1.10)  translate3d(0.7%, -0.7%, 0); }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(1.15rem); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__img,
  .hero__caption {
    animation: none;
  }
  .hero__img { transform: scale(1.02); }
}

/* Short landscape screens (phone rotated): tighten vertical rhythm. */
@media (max-height: 30rem) and (orientation: landscape) {
  .hero { min-height: 100dvh; }
  .title { font-size: clamp(2.2rem, 8vh, 3.4rem); }
  .subtitle { display: none; }
}