:root{
  --cream:#FBF6EC;
  --cream-deep:#F2E9D6;
  --paper:#FFFDF9;
  --ink:#2A241E;
  --ink-soft:#665A4C;
  --ink-faint:#9C8E7C;
  --gold:#B4823A;
  --gold-deep:#8C6528;
  --gold-light:#E7CE9B;
  --gold-mist:#F1E2C2;
  --sage:#6E7259;
  --line:rgba(42,36,30,0.14);
  --shadow:0 24px 60px -28px rgba(42,30,10,0.4);
}

*{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  font-family:'Jost', sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1{
  font-family:'Fraunces', serif;
  font-weight:500;
  margin:0;
  letter-spacing:-0.01em;
}

a{color:inherit;}

/* ============ STAGE / BACKGROUND ============ */
.stage{
  position:relative;
  min-height:100svh;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:48px 20px;
  overflow:hidden;
  text-align:center;
}

.texture{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.55), transparent 45%),
    radial-gradient(ellipse at 82% 88%, rgba(110,114,89,0.22), transparent 55%),
    linear-gradient(135deg, var(--gold-mist) 0%, var(--gold-light) 45%, var(--sage) 150%);
}

.texture::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:url('../assets/texture.svg');
  background-repeat:repeat;
  opacity:0.45;
  mix-blend-mode:multiply;
}

.overlay{
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 50% 42%, rgba(255,253,249,0.75) 0%, rgba(255,253,249,0.32) 55%, rgba(42,36,30,0.14) 100%);
}

/* ============ CONTENT CARD ============ */
.content{
  position:relative;
  z-index:2;
  width:100%;
  max-width:600px;
  background:rgba(255,253,249,0.85);
  border:1px solid var(--line);
  padding:56px 44px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.logo{
  font-family:'Fraunces', serif;
  font-size:30px;
  font-weight:600;
  letter-spacing:0.03em;
  margin-bottom:28px;
  color:var(--ink);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.22em;
  color:var(--gold-deep);
  font-weight:500;
}
.eyebrow::before{
  content:'';
  width:22px;
  height:1px;
  background:var(--gold-deep);
  display:inline-block;
}

h1{
  margin-top:22px;
  font-size:clamp(26px, 4.6vw, 42px);
  line-height:1.14;
}
.accent{
  color:var(--gold-deep);
  font-style:italic;
}

.lede{
  margin:22px 0 0;
  font-size:16px;
  color:var(--ink-soft);
  max-width:460px;
  margin-left:auto;
  margin-right:auto;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:34px;
  padding:15px 30px;
  font-size:14px;
  letter-spacing:0.04em;
  background:var(--ink);
  color:var(--paper);
  border:1px solid var(--ink);
  text-decoration:none;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.btn:hover{
  background:var(--gold-deep);
  border-color:var(--gold-deep);
}
.btn:focus-visible{
  outline:2px solid var(--gold-deep);
  outline-offset:3px;
}

/* ============ FOOTER ============ */
footer{
  position:relative;
  z-index:2;
  margin-top:36px;
  font-size:12.5px;
  color:var(--ink-faint);
}
footer p{margin:4px 0;}
footer a{
  color:var(--ink-soft);
  text-decoration:underline;
}
footer a:hover{color:var(--gold-deep);}

@media (prefers-reduced-motion: reduce){
  *{transition-duration:0.001ms !important;}
}

@media (max-width:600px){
  .content{padding:42px 26px;}
  .logo{font-size:26px;}
  .lede{font-size:15px;}
}

@media (max-width:380px){
  .content{padding:34px 20px;}
}