/* ═══════════════════════════════════════════════════════════
   Rev. Dr. Josephine Mutuota — coming soon holding page
   Tokens inherited from the main site's brand system.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* 04 — Colour palette */
  --purple:      #4B2E83;
  --purple-deep: #40316A;
  --purple-dark: #281E53;
  --purple-soft: #6B4FA8;
  --cream:       #F5F0E6;
  --cream-deep:  #EFE7D6;
  --white:       #FEFCF7;
  --gold:        #D4AF37;
  --gold-deep:   #B4843E;
  --gold-rule:   #CCA278;
  --gold-pale:   #D2BA96;

  /* 05 — Typography */
  --serif: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --sans:  "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --pad: clamp(1.25rem, 3.5vw, 3.25rem);
  --r: 10px;
  --ease: cubic-bezier(.2,.7,.25,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; color:var(--cream);
  font-family:var(--sans); font-size:15px; line-height:1.7; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:var(--purple-dark);
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,p,figure{ margin:0; }
button,input{ font:inherit; color:inherit; }
svg{ width:1em; height:1em; fill:currentColor; flex:none; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }

/* ── Ground: deep purple with a warm gilded bloom ────────── */
.page{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:100svh; display:flex; flex-direction:column;
  padding:clamp(2rem,5vw,3.5rem) var(--pad) clamp(1.25rem,3vw,2rem);
  background:
    radial-gradient(120% 85% at 50% -10%, #4A3A7E 0%, #35296310 55%, transparent 100%),
    radial-gradient(90% 60% at 50% 108%, rgba(212,175,55,.16) 0%, transparent 70%),
    linear-gradient(168deg, #3B2F68 0%, #2F2559 45%, #241C4B 100%);
}

/* gilded invitation frame */
.frame{
  position:absolute; z-index:2; pointer-events:none;
  inset:clamp(.7rem,1.6vw,1.35rem);
  border:1px solid rgba(210,186,150,.28); border-radius:3px;
}
.frame::after{
  content:""; position:absolute; inset:5px;
  border:1px solid rgba(210,186,150,.13); border-radius:2px;
}

/* ── Brand dove ──────────────────────────────────────────────
   Traced from dove.png into an inline vector path, so it inherits
   currentColor, stays crisp at every scale, and renders when the
   page is opened straight from disk (an external CSS mask does not
   load under the file:// protocol).                              */
.dove{ fill:currentColor; aspect-ratio:1200/893; height:auto; }

/* oversized ghost dove watermark */
.ghost{
  position:absolute; z-index:0; pointer-events:none;
  width:min(94vw,900px);
  right:-7%; top:52%; transform:translateY(-50%) rotate(-6deg);
  color:#fff; opacity:.055;
}

/* ── Stage ───────────────────────────────────────────────── */
.stage{
  position:relative; z-index:3;
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center;
  width:min(100%, 640px); margin-inline:auto;
  padding-block:clamp(1rem,2.5vw,1.75rem);
}

/* ── Arched portrait ─────────────────────────────────────── */
.portrait{
  position:relative; width:clamp(136px,22vw,178px); aspect-ratio:1/1.16;
  border-radius:999px 999px var(--r) var(--r); overflow:hidden;
  border:1px solid rgba(210,186,150,.42);
  box-shadow:0 26px 60px -30px rgba(10,6,28,.9), 0 0 0 7px rgba(212,175,55,.05);
}
.portrait img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; }
.portrait__grade{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(36,28,75,.62) 0%, rgba(36,28,75,.06) 46%, transparent 72%);
}

/* ── Monogram ────────────────────────────────────────────── */
.monogram{
  width:auto; height:clamp(40px,6vw,54px); margin:1.1rem auto .1rem;
  opacity:.92;
}

/* ── Coming soon tag ─────────────────────────────────────── */
.tag{
  margin-top:.9rem;
  font-size:.6rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase;
  color:#F0DCB8;
  padding:.5rem 1.15rem; border-radius:999px;
  border:1px solid rgba(210,186,150,.4);
  background:linear-gradient(180deg, rgba(212,175,55,.14), rgba(212,175,55,.04));
}

/* ── Type ────────────────────────────────────────────────── */
.eyebrow{
  margin-top:1.15rem;
  font-size:.68rem; font-weight:700; letter-spacing:.19em; text-transform:uppercase;
  color:var(--gold-pale);
}
.alt{
  margin-top:.4rem; font-size:.7rem; letter-spacing:.1em;
  color:rgba(245,240,230,.5);
}
.alt span{ color:var(--gold-rule); margin-inline:.25rem; }

.title{
  margin-top:.85rem;
  font-family:var(--serif); font-weight:600; color:var(--white);
  font-size:clamp(2.05rem,6.4vw,3.35rem); line-height:1.1; letter-spacing:-.012em;
}
.title span{ display:block; }
.title__l2{ font-style:italic; font-weight:500; color:#EBDCC0; }

/* Ornament: gold rules + dove — the brand's recurring divider */
.ornament{
  display:flex; align-items:center; justify-content:center; gap:.85rem;
  margin:1.1rem auto 1.05rem; width:min(100%,300px);
}
.ornament__rule{
  flex:1; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-rule) 55%, var(--gold-rule));
}
.ornament__rule:last-of-type{
  background:linear-gradient(270deg, transparent, var(--gold-rule) 55%, var(--gold-rule));
}
.ornament__dove{ width:2rem; height:auto; color:var(--gold-pale); }

.sub{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(.95rem,2.1vw,1.1rem); line-height:1.6; color:#E4D9C4;
  text-wrap:balance;
}
.lede{
  margin-top:.95rem; max-width:46ch;
  font-size:.85rem; line-height:1.95; color:rgba(245,240,230,.68);
  text-wrap:pretty;
}

/* ── Notify form ─────────────────────────────────────────── */
.notify{
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center;
  margin-top:1.55rem; width:min(100%,460px);
}
.notify input{
  flex:1 1 230px; min-width:0;
  padding:.92rem 1.15rem; border-radius:var(--r);
  border:1px solid rgba(210,186,150,.3);
  background:rgba(255,255,255,.055); color:var(--cream);
  font-size:.83rem; letter-spacing:.01em;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.notify input::placeholder{ color:rgba(245,240,230,.42); }
.notify input:hover{ border-color:rgba(210,186,150,.5); }
.notify input:focus{
  outline:none; border-color:var(--gold-pale); background:rgba(255,255,255,.09);
}
.notify input[aria-invalid="true"]{ border-color:#E08B8B; }

.notify__btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.92rem 1.6rem; border:0; border-radius:var(--r); cursor:pointer;
  font-size:.74rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:#2A2052;
  background:linear-gradient(135deg, #F0DCB8 0%, #D2BA96 52%, #C9A874 100%);
  box-shadow:0 14px 30px -18px rgba(212,175,55,.85);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease);
}
.notify__btn:hover{
  transform:translateY(-2px); filter:brightness(1.06);
  box-shadow:0 18px 36px -18px rgba(212,175,55,.95);
}
.notify__btn:active{ transform:translateY(0); }
.notify__gly{ width:.95em; height:.95em; transition:transform .3s var(--ease); }
.notify__btn:hover .notify__gly{ transform:translateX(3px); }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.notify__note{
  flex:1 0 100%; margin-top:.15rem;
  font-size:.76rem; letter-spacing:.02em; color:#E9D9B6;
}
.notify__note[data-state="error"]{ color:#F0A9A9; }

/* ── Contact ─────────────────────────────────────────────── */
.contact{
  display:flex; flex-wrap:wrap; gap:.6rem 1.85rem; justify-content:center;
  margin-top:1.6rem;
  font-size:.78rem; color:rgba(245,240,230,.62);
}
.contact li{ display:inline-flex; align-items:center; gap:.5rem; }
.contact svg{ width:.95rem; height:.95rem; color:var(--gold-pale); }
.contact a{ transition:color .3s var(--ease); }
.contact a:hover{ color:var(--white); }

/* ── Footer ──────────────────────────────────────────────── */
.foot{
  position:relative; z-index:3;
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem;
  align-items:center; justify-content:space-between;
  width:min(100%,1100px); margin-inline:auto;
  padding-top:1.4rem; border-top:1px solid rgba(210,186,150,.14);
  font-size:.68rem; letter-spacing:.05em; color:rgba(245,240,230,.42);
}
.foot__tag{ display:inline-flex; align-items:center; gap:.55rem; color:var(--gold-pale); }
.foot__dove{ width:1.55rem; height:auto; color:var(--gold-pale); }

/* ── Entrance ────────────────────────────────────────────── */
@keyframes rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
.stage > *{ animation:rise .85s var(--ease) both; }
.portrait{ animation-delay:.05s; }
.monogram{ animation-delay:.14s; }
.tag     { animation-delay:.2s;  }
.eyebrow { animation-delay:.26s; }
.alt     { animation-delay:.3s;  }
.title   { animation-delay:.36s; }
.ornament{ animation-delay:.44s; }
.sub     { animation-delay:.5s;  }
.lede    { animation-delay:.56s; }
.notify  { animation-delay:.64s; }
.contact { animation-delay:.72s; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 560px){
  .page{ padding-inline:1.1rem; }
  .notify{ flex-direction:column; }
  /* basis resolves against the block axis once stacked — pin the height back */
  .notify input{ flex:0 0 auto; width:100%; }
  .notify__btn{ justify-content:center; }
  .foot{ justify-content:center; text-align:center; }
  .ghost{ right:-46%; opacity:.04; }
}

/* ── Short viewports: compress to fit without scrolling ──── */
@media (min-width: 561px) and (max-height: 940px){
  .page{ padding-block:clamp(1.25rem,3vw,2rem) 2.1rem; }
  .stage{ padding-block:.5rem; }
  .portrait{ width:clamp(120px,15vh,150px); }
  .monogram{ height:clamp(34px,4.6vh,44px); margin-top:.85rem; }
  .tag{ margin-top:.75rem; }
  .eyebrow{ margin-top:.95rem; }
  .title{ font-size:clamp(1.9rem,4.4vh,2.7rem); }
  .ornament{ margin:.9rem auto .85rem; }
  .lede{ margin-top:.75rem; }
  .notify{ margin-top:1.2rem; }
  .contact{ margin-top:1.25rem; }
  .foot{ padding-top:1rem; }
}

@media (prefers-reduced-motion: reduce){
  .stage > *{ animation:none; }
  *{ transition-duration:.01ms !important; }
}