:root{
  --ink: #10131A;
  --ink-2: #171B24;
  --ivory: #F4EFE4;
  --ivory-dim: #A8A395;
  --brass: #B48B57;
  --hairline: rgba(244,239,228,0.12);
}

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

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

body{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

/* subtle grain */
.grain{
  position:fixed; inset:0;
  pointer-events:none;
  opacity:0.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index:5;
}

/* ambient radial glow that drifts */
.glow{
  position:fixed;
  width:70vw; height:70vw;
  max-width:900px; max-height:900px;
  background: radial-gradient(circle, rgba(180,139,87,0.14) 0%, rgba(180,139,87,0) 65%);
  top:50%; left:50%;
  transform: translate(-50%,-50%);
  animation: drift 18s ease-in-out infinite;
  pointer-events:none;
}

@keyframes drift{
  0%,100%{ transform: translate(-52%,-48%) scale(1); }
  50%{ transform: translate(-48%,-52%) scale(1.08); }
}

main{
  position:relative;
  z-index:10;
  text-align:center;
  padding: 0 24px;
}

.eyebrow{
  font-family:'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  margin-bottom: 28px;
  opacity:0;
  animation: rise 0.9s ease forwards 0.2s;
}

h1{
  font-family:'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(3rem, 11vw, 7.5rem);
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ivory);
  opacity:0;
  animation: rise 1s ease forwards 0.45s;
  position:relative;
  display:inline-block;
}

.underline{
  display:block;
  margin: 22px auto 0;
  width: 0;
  height: 1px;
  background: var(--brass);
  animation: draw 1.4s cubic-bezier(.65,0,.35,1) forwards 1.3s;
}

@keyframes draw{
  to{ width: min(340px, 60vw); }
}

.status{
  margin-top: 30px;
  font-family:'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--ivory-dim);
  letter-spacing: 0.01em;
  opacity:0;
  animation: rise 0.9s ease forwards 1.7s;
}

.status .word{
  color: var(--ivory);
  font-style: italic;
  font-family:'Fraunces', serif;
  font-weight: 400;
}

.cursor{
  display:inline-block;
  width: 1px;
  height: 15px;
  background: var(--brass);
  margin-left: 3px;
  transform: translateY(2px);
  animation: blink 1s step-end infinite;
}

@keyframes blink{
  0%,49%{ opacity:1; }
  50%,100%{ opacity:0; }
}

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

footer{
  position:fixed;
  bottom: 28px;
  left:0; right:0;
  text-align:center;
  font-family:'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ivory-dim);
  opacity:0;
  animation: rise 0.9s ease forwards 2s;
  z-index:10;
}

footer a{
  color: var(--ivory-dim);
  text-decoration:none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}

footer a:hover{
  color: var(--brass);
  border-color: var(--brass);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .glow{ animation: none; }
  .cursor{ animation: none; opacity: 1; }
}