:root {
  color-scheme: dark;
  --ink: #f8efe8;
  --gold: #e7bd8b;
  --muted: rgba(248, 239, 232, .74);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; margin: 0; }

body {
  background: #071821;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}

.hero {
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.25rem, 6vw, 5rem);
  background: #071821 url("assets/tamaramaya-aurora.png") center / cover no-repeat;
}

.veil {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 13, 19, .73), rgba(2, 13, 19, .19) 52%, rgba(2, 13, 19, .60)),
    linear-gradient(0deg, rgba(4, 11, 17, .54), transparent 45%, rgba(4, 11, 17, .24));
}

.content {
  width: min(100%, 60rem);
  max-width: 100%;
  margin: auto 0;
  text-align: center;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .38);
  animation: arrive 1.2s cubic-bezier(.16, 1, .3, 1) both;
}

.eyebrow {
  margin: 0 0 1.3rem;
  color: var(--gold);
  font-size: clamp(.76rem, 1.5vw, .94rem);
  font-weight: 500;
  letter-spacing: .23em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.65rem, 10vw, 8.4rem);
  font-weight: 500;
  letter-spacing: clamp(.035em, .35vw, .085em);
  line-height: .95;
}

.line {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .55rem;
  margin: clamp(1.7rem, 4vw, 2.9rem) auto;
}

.line::before, .line::after, .line span {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.line::before, .line::after { width: clamp(2.25rem, 8vw, 5.5rem); }
.line::after { transform: scaleX(-1); }
.line span { width: .4rem; height: .4rem; transform: rotate(45deg); background: var(--gold); }

.coming {
  margin: clamp(1.35rem, 3vw, 2.2rem) 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 3vw, 2.2rem);
  font-style: italic;
  line-height: 1.12;
}

.service-title {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.08rem, 2.2vw, 1.5rem);
  font-weight: 600;
  line-height: 1.35;
}

.message {
  max-width: 42rem;
  margin: 1rem auto 0;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.65;
}

footer {
  width: 100%;
  margin-top: clamp(1.5rem, 5vw, 3rem);
  color: rgba(248, 239, 232, .56);
  font-size: .72rem;
  letter-spacing: .16em;
  text-align: center;
}

@keyframes arrive {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 540px) {
  .hero { background-position: 48% center; }
  .veil { background: linear-gradient(0deg, rgba(2, 13, 19, .58), rgba(2, 13, 19, .18) 55%, rgba(2, 13, 19, .48)); }
  h1 { font-size: clamp(2.65rem, 13vw, 4rem); letter-spacing: .045em; }
  h1 span { display: block; }
  .eyebrow { letter-spacing: .17em; }
  .message { max-width: 22rem; }
}

@media (prefers-reduced-motion: reduce) {
  .content { animation: none; }
}