/* ============ Reset ============ */
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
html, body{ height:100%; }
a{ color:inherit; text-decoration:none; }

:root{
  --ink: #17110B;
  --ivory: #F5EDDC;
  --ivory-dim: rgba(245,237,220,0.78);
  --brass: #D9B978;
  --line: rgba(245,237,220,0.55);
  --glass: rgba(23,17,11,0.42);
  --glass-border: rgba(245,237,220,0.24);
}

body{
  background:var(--ink);
  color:var(--ivory);
  font-family:'Jost', 'Segoe UI', sans-serif;
  font-weight:300;
  overflow:hidden;
}

/* ============ Background photo + atmosphere ============ */
.bg{
  position:fixed; inset:0;
  z-index:-3;
  background-size:cover;
  background-position:62% 30%;
  background-repeat:no-repeat;
  transform:scale(1.08);
  animation:kenburns 30s ease-in-out infinite alternate;
  filter:saturate(1.05) contrast(1.02);
}
@keyframes kenburns{
  from{ transform:scale(1.06) translate3d(0,0,0); }
  to{ transform:scale(1.15) translate3d(-1.2%, -1%, 0); }
}
@media (prefers-reduced-motion: reduce){
  .bg{ animation:none; transform:scale(1.02); }
}

.scrim{
  position:fixed; inset:0;
  z-index:-2;
  background:linear-gradient(180deg,
    rgba(15,10,6,0.55) 0%,
    rgba(15,10,6,0.15) 26%,
    rgba(15,10,6,0.08) 55%,
    rgba(15,10,6,0.62) 100%);
}

.grain{
  position:fixed; inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:0.05;
  mix-blend-mode:overlay;
  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.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ Reveal on load ============ */
.reveal{
  opacity:0;
  transform:translateY(18px);
  animation:fade-up 1s ease forwards;
}
.top{ animation-delay:0.1s; }
.card{ animation-delay:0.5s; }
.bottom{ animation-delay:0.7s; }
@keyframes fade-up{
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .reveal{ animation:fade-up 0.4s ease forwards; transform:none; }
}

a:focus-visible, button:focus-visible{
  outline:1.5px solid var(--brass);
  outline-offset:3px;
}

/* ============ Content grid ============ */
.content{
  position:relative;
  z-index:1;
  height:100svh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  align-items:center;
  padding:clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 6vw, 4rem);
  gap:1.5rem;
}

/* ---- Top block ---- */
.top{
  justify-self:center;
  text-align:center;
  max-width:34rem;
}

.glyph{
  width:26px; height:26px;
  color:var(--ivory-dim);
  margin:0 auto 0.6rem;
}
.glyph.small{ width:20px; height:20px; margin:0.6rem auto; }

.brand{
  font-family:'Bodoni Moda', 'Didot', 'Georgia', serif;
  font-weight:600;
  font-size:clamp(2.6rem, 8vw, 4.6rem);
  letter-spacing:0.08em;
  line-height:1;
  text-shadow:0 4px 24px rgba(0,0,0,0.4);
}

.signature{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.9rem;
  margin-top:0.7rem;
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:clamp(1rem, 2vw, 1.25rem);
  color:var(--ivory-dim);
}
.signature .hl{ width:34px; height:1px; background:var(--line); }

.coming{
  margin-top:1.6rem;
  font-size:0.85rem;
  font-weight:400;
  letter-spacing:0.42em;
  text-transform:uppercase;
}

.divider{
  display:flex; align-items:center; justify-content:center;
  gap:0.7rem;
  margin:1rem auto 0;
  max-width:170px;
}
.divider .hl{ flex:1; height:1px; background:var(--line); }
.divider .bead{ width:5px; height:5px; background:var(--brass); transform:rotate(45deg); flex-shrink:0; }
.divider.small{ max-width:120px; }

.tagline{
  margin-top:1.1rem;
  font-size:clamp(0.85rem, 1.6vw, 0.98rem);
  line-height:1.6;
  color:var(--ivory-dim);
}

/* ---- Card ---- */
.card{
  justify-self:start;
  align-self:center;
  width:min(230px, 60vw);
  padding:1.6rem 1.4rem;
  text-align:center;
  background:var(--glass);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--glass-border);
}
.card h2{
  font-family:'Jost', sans-serif;
  font-weight:400;
  font-size:0.78rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
}
.card p{
  font-size:0.82rem;
  line-height:1.6;
  color:var(--ivory-dim);
}
.card .heart{
  width:14px; height:14px;
  margin:0.7rem auto 0;
  color:var(--ivory-dim);
}

/* ---- Bottom block ---- */
.bottom{
  justify-self:center;
  text-align:center;
}
.insta{
  display:inline-flex;
  align-items:center;
  gap:0.55rem;
  font-size:0.92rem;
  letter-spacing:0.02em;
}
.insta svg{ width:19px; height:19px; }
.insta:hover{ color:var(--brass); }

.rights{
  margin-top:0.9rem;
  font-size:0.72rem;
  letter-spacing:0.04em;
  color:var(--ivory-dim);
}

/* ============ Responsive ============ */
@media (max-width:640px){
  .content{ grid-template-rows:auto 1fr auto; }
  .card{ justify-self:center; width:min(280px, 78vw); }
}