:root{
  --bg:#0b1410;
  --bg-soft:#0f1a15;
  --line:#23332b;
  --cream:#f3efe4;
  --cream-dim:#cdc7b6;
  --gold:#c9a227;
  --gold-soft:#a98a2e;
  --emerald:#2f6b57;
  --radius:2px;
}

*{margin:0;padding:0;box-sizing:border-box;}

html,body{
  background:var(--bg);
  color:var(--cream);
  font-family:'Inter',sans-serif;
  height:100%;
  overflow-x:hidden;
}

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  position:relative;
}

/* ambient texture */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
          radial-gradient(ellipse 60% 50% at 50% 38%, rgba(47,107,87,0.18), transparent 70%),
          radial-gradient(ellipse 80% 60% at 50% 100%, rgba(201,162,39,0.06), transparent 70%);
  pointer-events:none;
  z-index:0;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  background-image:
          linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size:48px 48px;
  pointer-events:none;
  z-index:0;
}

header{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  padding:clamp(28px,5vw,48px) 24px 0;
}

.wordmark{
  font-size:13px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--cream-dim);
  display:flex;
  align-items:center;
  gap:14px;
}

.wordmark .dot{
  width:5px;height:5px;
  background:var(--gold);
  border-radius:50%;
  display:inline-block;
}

main{
  position:relative;
  z-index:2;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 24px;
}

.stage{
  position:relative;
  width:100%;
  max-width:720px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* rotating medallion behind headline */
.medallion{
  position:absolute;
  top:50%;
  left:50%;
  width:min(640px, 120vw);
  height:min(640px, 120vw);
  transform:translate(-50%,-50%);
  z-index:-1;
  opacity:0.55;
}

.medallion svg{
  width:100%;
  height:100%;
  animation:spin 90s linear infinite;
}

.medallion .inner-spin{
  animation:spin-rev 70s linear infinite;
  transform-origin:200px 200px;
}

@keyframes spin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
@keyframes spin-rev{
  from{transform:rotate(0deg);}
  to{transform:rotate(-360deg);}
}

.eyebrow{
  font-size:12px;
  letter-spacing:0.35em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:22px;
  font-weight:500;
}

h1{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size:clamp(3rem, 9vw, 5.6rem);
  line-height:1.05;
  color:var(--cream);
  margin-bottom:22px;
}

h1 em{
  font-style:italic;
  color:var(--gold);
}

.lede{
  font-size:clamp(0.95rem, 1.6vw, 1.08rem);
  line-height:1.7;
  color:var(--cream-dim);
  max-width:480px;
  margin-bottom:44px;
  font-weight:300;
}

.divider{
  width:64px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  margin-bottom:40px;
}

.contact-label{
  font-size:11px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--cream-dim);
  margin-bottom:14px;
}

.contact-box{
  display:flex;
  align-items:center;
  gap:0;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.02);
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .25s ease;
}

.contact-box:hover{
  border-color:var(--gold-soft);
}

.contact-email{
  padding:16px 22px;
  font-size:clamp(0.92rem, 2vw, 1.05rem);
  color:var(--cream);
  text-decoration:none;
  letter-spacing:0.01em;
  font-weight:400;
  transition:color .2s ease;
}

.contact-email:hover{
  color:var(--gold);
}

.copy-btn{
  border:none;
  border-left:1px solid var(--line);
  background:transparent;
  color:var(--cream-dim);
  padding:16px 18px;
  cursor:pointer;
  font-family:inherit;
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:8px;
  transition:color .2s ease, background .2s ease;
}

.copy-btn:hover{
  color:var(--gold);
  background:rgba(201,162,39,0.06);
}

.copy-btn svg{
  width:14px;
  height:14px;
  flex-shrink:0;
}

.copy-btn:focus-visible,
.contact-email:focus-visible{
  outline:1px solid var(--gold);
  outline-offset:2px;
}

footer{
  position:relative;
  z-index:2;
  text-align:center;
  padding:28px 24px clamp(28px,5vw,40px);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#5d6a62;
}

@media (prefers-reduced-motion: reduce){
  .medallion svg, .medallion .inner-spin{
    animation:none;
  }
}

@media (max-width:480px){
  .contact-box{
    flex-direction:column;
    width:100%;
  }
  .copy-btn{
    border-left:none;
    border-top:1px solid var(--line);
    width:100%;
    justify-content:center;
  }
  .contact-email{
    width:100%;
  }
}