:root {
  --bg: #07080c;
  --gold: #e0c07a;
  --gold-dim: #a6854a;
  --ink: #f4efe4;
  --muted: #b7b0a4;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: Outfit, system-ui, sans-serif;
}
body {
  min-height: 100dvh;
  position: relative;
  overflow-x: hidden;
}
.portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 18%;
  z-index: 0;
}
.copy {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(32px, 8vh, 88px) clamp(28px, 6vw, 80px);
  background:
    linear-gradient(90deg, rgba(7,8,12,.88) 0%, rgba(7,8,12,.55) 38%, rgba(7,8,12,.12) 68%, transparent 86%),
    linear-gradient(180deg, rgba(7,8,12,.2) 0%, transparent 28%, rgba(7,8,12,.55) 100%);
}
.kicker {
  letter-spacing: .42em;
  font-size: 11px;
  color: var(--gold);
  text-transform: uppercase;
}
h1 {
  font-family: Cinzel, serif;
  font-weight: 700;
  font-size: clamp(36px, 5.4vw, 76px);
  line-height: 1.02;
  margin: .18em 0 .2em;
  letter-spacing: 0.01em;
  color: var(--gold);
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.45));
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  h1 {
    background: linear-gradient(180deg, #fff6de, var(--gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.tag {
  max-width: 26rem;
  color: var(--muted);
  font-weight: 300;
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.45;
}
.cta {
  display: inline-block;
  margin-top: 2.2rem;
  background: var(--gold);
  color: #1a1208;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 32px;
  border: 1px solid var(--gold);
  box-shadow: 0 0 0 0 rgba(224,192,122,.4);
  transition: .2s transform, .2s box-shadow;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 10px 40px rgba(224,192,122,.35); }
.fine { margin-top: .85rem; color: var(--gold-dim); font-size: 13px; }
@media (max-width: 820px) {
  .portrait { object-position: 50% 12%; }
  .copy {
    padding: 28px 22px 40px;
    background:
      linear-gradient(180deg, rgba(7,8,12,.35) 0%, rgba(7,8,12,.2) 28%, rgba(7,8,12,.78) 100%);
  }
}