:root{
  --verde:    #2E3A28;
  --terracota:#B5613F;
  --ocre:     #C99A4E;
  --areia:    #EFE8DA;
  --grafite:  #211E1A;

  --serif: "Bodoni Moda", "Didot", "Playfair Display", Georgia, serif;
  --sans: "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--sans);
  background: var(--verde);
  color: var(--areia);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
a{ color:inherit; }

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:999;
  opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============================================
   PAGE (single screen)
   ============================================ */
.page{
  position:relative;
  height:100svh;
  width:100%;
  overflow:hidden;
}
.page__bg{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  object-position: center 30%;
  transform: scale(1.06);
  opacity:.55;
}
.page__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(33,30,26,.15) 0%, rgba(33,30,26,.55) 55%, rgba(33,30,26,.92) 100%),
    linear-gradient(180deg, rgba(46,58,40,.55) 0%, rgba(46,58,40,.75) 45%, rgba(33,30,26,.94) 100%);
}

.page__inner{
  position:relative; z-index:2;
  height:100%;
  display:flex; flex-direction:column;
  padding: clamp(20px,3.5vw,40px) clamp(20px,5vw,64px);
}

/* ============================================
   MARK
   ============================================ */
.mark{ display:flex; }
.mono{ font-family: var(--serif); font-size: 24px; font-style:italic; }
.mono--m{ color: var(--terracota); margin-right:-6px; }
.mono--a{ color: var(--ocre); }

/* ============================================
   CENTER CONTENT
   ============================================ */
.center{
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  gap: 0;
}

.eyebrow{
  font-size: clamp(11px,1.1vw,13px);
  letter-spacing:.2em; text-transform:uppercase;
  color: var(--ocre); font-weight:600;
  margin: 0 0 20px;
}

.title{
  font-family: var(--serif);
  font-weight:500;
  font-size: clamp(48px, 9vw, 118px);
  line-height: .96;
  letter-spacing:-.01em;
  margin:0;
}
.title span{ display:block; }

.soon{
  display:flex; align-items:center; gap:16px;
  margin: 26px 0 22px;
}
.soon__line{ width:38px; height:1px; background: rgba(239,232,218,.45); }
.soon__text{
  font-family: var(--serif); font-style:italic;
  font-size: clamp(16px, 2vw, 22px);
  color: var(--areia);
}

.tagline{
  font-size: clamp(14px, 1.3vw, 17px);
  color: rgba(239,232,218,.7);
  letter-spacing:.02em;
  max-width: 440px;
}

.date{
  display:flex; align-items:baseline; gap:12px;
  margin-top: 34px;
}
.date__day{ font-family:var(--serif); font-size: clamp(30px,3.4vw,40px); color:var(--terracota); line-height:1; }
.date__rest{ font-size:12px; line-height:1.35; text-transform:uppercase; letter-spacing:.08em; text-align:left; color: rgba(239,232,218,.75); }

/* ============================================
   NOTIFY FORM
   ============================================ */
.notify{ margin-top: 44px; width:100%; max-width:420px; }
.notify__label{
  display:block; font-size:12px; letter-spacing:.04em;
  color: rgba(239,232,218,.65); margin-bottom:12px;
}
.notify__row{
  display:flex; align-items:center;
  border-bottom: 1px solid rgba(239,232,218,.4);
  padding-bottom: 10px;
  transition: border-color .2s;
}
.notify__row:focus-within{ border-color: var(--ocre); }
.notify input{
  flex:1; min-width:0;
  background:transparent; border:0; outline:none;
  color: var(--areia);
  font-family: var(--sans);
  font-size:15px;
  padding: 6px 4px;
}
.notify input::placeholder{ color: rgba(239,232,218,.45); }
.notify button{
  display:flex; align-items:center; gap:8px;
  background:none; border:0; cursor:pointer;
  color: var(--areia);
  font-family: var(--sans); font-weight:600; font-size:13px; letter-spacing:.03em;
  white-space:nowrap;
  padding: 6px 4px;
  transition: color .2s, transform .2s var(--ease);
}
.notify button:hover{ color: var(--ocre); }
.notify button:hover .arrow{ transform: translateX(4px); }
.arrow{ display:inline-block; transition: transform .2s var(--ease); }
.notify__note{
  margin-top:12px; font-size:11.5px; color: rgba(239,232,218,.4);
}

/* ============================================
   FOOTER
   ============================================ */
.foot{
  display:flex; justify-content:space-between;
  font-size: 11.5px;
  color: rgba(239,232,218,.4);
  letter-spacing:.02em;
}

/* ============================================
   HORIZON MOTIF
   ============================================ */
.horizon{
  position:absolute; left:0; right:0; bottom:-6px; z-index:1;
  line-height:0; pointer-events:none;
}
.horizon svg{ width:100%; height: clamp(60px, 10vw, 120px); display:block; }
.sun{ animation: pulse 3.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.5; } }

/* ============================================
   REVEAL
   ============================================ */
.reveal{
  opacity:0; transform: translateY(16px);
  animation: revealIn .9s var(--ease) forwards;
  animation-delay: calc(var(--d,0) * .11s + .2s);
}
@keyframes revealIn{ to{ opacity:1; transform:translateY(0); } }

@media (prefers-reduced-motion: reduce){
  .reveal, .sun{ animation:none !important; opacity:1 !important; transform:none !important; }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-height: 720px){
  .center{ gap:0; }
  .title{ font-size: clamp(38px,8vw,80px); }
  .notify{ margin-top:28px; }
  .date{ margin-top:22px; }
}
@media (max-width: 480px){
  body{ overflow-y:auto; }
  .page{ height:auto; min-height:100svh; }
  .foot{ flex-direction:column; gap:4px; text-align:center; margin-top:24px; }
  .page__inner{ padding-top:24px; padding-bottom:24px; }
}