/*
  Vector — single-page site.

  Layout is one full-viewport grid with four rows:

    1fr   brand (top) … kicker (bottom)
    auto  headline, line one
    auto  headline, line two
    1fr   call to action

  The two 1fr rows share the free space equally, and both headline lines are
  a single line of the same type, so the seam between them lands on the exact
  vertical centre of the viewport. Verify in DevTools once the entrance
  animation has settled (about two seconds after load):

    const [a, b] = [...document.querySelectorAll('.headline span')]
      .map(el => el.getBoundingClientRect());
    (a.bottom + b.top) / 2 - innerHeight / 2   // → 0
*/

:root {
  --ink: #181818;
  --muted: #6b6b6b;
  --paper: #fff;
  --gutter: clamp(1.75rem, 7vw, 7rem);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

body {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--ink);
  background: var(--paper);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

/* Layout */

.hero {
  display: grid;
  grid-template-rows: 1fr auto auto 1fr;
  justify-items: start;
  min-height: 100dvh;
  padding: clamp(2.5rem, 8vh, 5rem) var(--gutter);
  background: url("./assets/bg-field.svg") no-repeat right bottom / min(60vw, 45rem);
}

.hero > * { grid-column: 1; }

.brand    { grid-row: 1; align-self: start; }
.kicker   { grid-row: 1; align-self: end; }
.headline { grid-row: 2 / 4; display: grid; grid-template-rows: subgrid; }
.cta      { grid-row: 4; align-self: start; }

/* Type */

.brand {
  width: min(100%, 13.5rem);
  height: auto;
}

.kicker {
  margin: 0 0 1.5rem;
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--muted);
}

.headline {
  margin: 0;
  font-size: clamp(2.5rem, 8vw, 6.75rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.05em;
  white-space: nowrap; /* one line per row — the centring above depends on it */
}

/* Call to action */

.cta {
  display: inline-flex;
  align-items: center;
  gap: 1.75rem;
  margin-top: 2.75rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--ink);
  color: var(--paper);
  background: var(--ink);
  font-size: 1rem;
  line-height: 1.5;
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease;
}

.cta:hover { color: var(--ink); background: var(--paper); }

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

/* Motion */

@media (prefers-reduced-motion: no-preference) {
  @keyframes arrive {
    from { opacity: 0; translate: 0 10px; }
  }

  .brand, .kicker, .headline, .cta {
    animation: arrive 1400ms var(--ease-out) backwards;
  }
  .kicker   { animation-delay: 160ms; }
  .headline { animation-delay: 320ms; }
  .cta      { animation-delay: 480ms; }
}