:root{
  --sand-deep:#1a1410;
  --gold:#c9962c;
  --gold-light:#e8c874;
  --green:#1e5c3f;
  --cream:#f3ead9;
  --cream-dim:rgba(243,234,217,0.62);
}

*{box-sizing:border-box;}

html,body{
  margin:0;
  padding:0;
  height:100%;
  background:var(--sand-deep);
}

body{
  font-family:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  color:var(--cream);
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}

.bg{
  position:fixed;
  inset:0;
  background-image:url('../images/background.jpg');
  background-size:cover;
  background-position:center 65%;
  filter:saturate(0.92) contrast(1.02);
  z-index:0;
}

.veil{
  position:fixed;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg,
      rgba(15,11,8,0.35) 0%,
      rgba(20,15,10,0.10) 32%,
      rgba(18,13,9,0.22) 62%,
      rgba(10,7,5,0.62) 100%);
}

.stage{
  position:relative;
  z-index:2;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:8vh 6vw 6vh;
  text-align:center;
}

.mark{
  width:min(620px, 62vw);
  height:auto;
  filter:drop-shadow(0 6px 24px rgba(0,0,0,0.45));
  animation:rise 1.1s ease-out both;
}

.rule{
  width:64px;
  height:1px;
  background:var(--gold-light);
  opacity:0.55;
  margin:2.6rem 0 2.2rem;
  animation:rise 1.1s ease-out 0.15s both;
}

.headline{
  font-size:clamp(2.5rem, 3vw, 2.15rem);
  font-weight:400;
  letter-spacing:0.02em;
  color:var(--cream);
  margin:0 0 0.9rem;
  animation:rise 1.1s ease-out 0.25s both;
}

.sub{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:0.98rem;
  letter-spacing:0.01em;
  color:var(--cream-dim);
  max-width:34ch;
  line-height:1.6;
  margin:0 0 2.8rem;
  animation:rise 1.1s ease-out 0.35s both;
}

.contact{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  animation:rise 1.1s ease-out 0.45s both;
}

.contact a{
  color:var(--gold-light);
  text-decoration:none;
  font-size:2rem;
  letter-spacing:0.02em;
  border-bottom:1px solid rgba(232,200,116,0.35);
  padding-bottom:3px;
  transition:border-color 0.25s ease, color 0.25s ease;
}

.contact a:hover{
  color:#fff;
  border-color:rgba(255,255,255,0.6);
}

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

@media (prefers-reduced-motion: reduce){
  .mark, .rule, .headline, .sub, .contact{
    animation:none;
  }
}

@media (max-width:480px){
  .sub{ max-width:28ch; }
}

:focus-visible{
  outline:2px solid var(--gold-light);
  outline-offset:3px;
}