:root {
  --accent: #d4a04a;
  --dark: #1a1d23;
  --text: #ffffff;
  --muted: #e8e9ec;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
}

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--dark);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh; /* svh, not vh: avoids the mobile-Safari toolbar jump */
  overflow: hidden;
  text-align: center;
  padding: 2rem 1.5rem;
}

.hero__bg,
.hero__scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__bg {
  object-fit: cover;
  /* The subject spans roughly x 60%-90% of the frame. On a 9:19.5 phone, `cover`
     leaves only ~31% of the image width visible, so centering would crop him out
     entirely; 70% keeps him in shot at every aspect ratio. */
  object-position: 70% center;
}

/* Alpha floor of 0.66 is MEASURED, not chosen by eye — see §6.4. This photo
   contains genuinely blown-out pixels (sRGB 1.0) in the sky and the lens flare,
   and white 16.8px tagline text over those needs >= 0.60 alpha just to clear
   WCAG AA's 4.5:1. The stops below hold >= 5.8:1 against pure white anywhere
   text can land, and ~9.9:1 against the region's actual mean. Do not lighten
   these without re-running §6.4's measurement against the new image. */
.hero__scrim {
  background: linear-gradient(
    180deg,
    rgba(26, 29, 35, 0.68) 0%,
    rgba(26, 29, 35, 0.72) 45%,
    rgba(26, 29, 35, 0.84) 100%
  );
}

.hero__content {
  position: relative; /* above the scrim */
  max-width: 34rem;
}

.wordmark {
  margin: 0;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.05;
  font-size: clamp(2.75rem, 11vw, 6rem);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.rule {
  width: 4.5rem;
  height: 3px;
  margin: 1.5rem auto;
  background: var(--accent);
}

.tagline {
  margin: 0;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0.04em;
  font-size: clamp(1.05rem, 3.2vw, 1.5rem);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.footer {
  padding: 1.25rem 1.5rem;
  text-align: center;
  font-size: 0.8125rem;
  color: rgba(232, 233, 236, 0.6);
}

.footer p {
  margin: 0;
}