:root{
  --ivory: #F8F3E9;
  --beige: #F0E4D2;
  --brown: #4B2E1F;
  --ink:   #221B15;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }

body{
  margin:0;
  color: var(--ink);
  background: var(--ivory);
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  overflow-x:hidden;
}

/* Background exactly like the mockup: warm paper + vignette + soft light */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(255,255,255,.60), rgba(255,255,255,0) 60%),
    radial-gradient(900px 600px at 80% 90%, rgba(75,46,31,.10), rgba(75,46,31,0) 65%),
    linear-gradient(180deg, var(--ivory), var(--beige));
  pointer-events:none;
  z-index:-3;
}

body::after{
  content:"";
  position: fixed;
  inset: 0;
  background-image: url("assets/paper-texture.jpg");
  background-size: cover;
  background-position: center;
  opacity: .55;
  mix-blend-mode: multiply;
  pointer-events:none;
  z-index:-2;
  animation: drift 16s ease-in-out infinite alternate;
}

@keyframes drift{
  from{ transform: translate3d(0,0,0) scale(1.02); }
  to  { transform: translate3d(-1.2%, -1.0%, 0) scale(1.04); }
}

.wrap{
  min-height: 100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 56px 20px 28px;
  gap: 28px;
}

.hero{
  width: min(820px, 92vw);
  text-align:center;
  padding-top: 10px;
}

.logo{
  display:block;
  width: min(520px, 78vw);
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 16px;
  background: transparent;
  filter: drop-shadow(0 18px 30px rgba(34,27,21,.18));
}

.rule{
  width: min(520px, 70vw);
  height: 1px;
  margin: 18px auto 10px;
  background: rgba(75,46,31,.35);
}

.tagline{
  margin: 0;
  font-size: 14px;
  letter-spacing: .08em;
  color: rgba(34,27,21,.70);
}

.footer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  font-size: 14px;
  letter-spacing: .02em;
  color: rgba(34,27,21,.78);
}

.footer .sep{ opacity:.55; }

.mailto{
  color: rgba(75,46,31,.92);
  text-decoration: none;
  border-bottom: 1px solid rgba(75,46,31,.35);
}
.mailto:hover{ border-bottom-color: rgba(75,46,31,.85); }

@media (prefers-reduced-motion: reduce){
  body::after{ animation:none; }
}