/* ————————————————————————————————————————————
   WILD VALLEY — wildvalleyevents.com
   Editorial · moody · simple
   Sibling palette to Many Merry Moons (inverted):
   MMM  = #5c5c50 olive on #f4efe2 cream
   WV   = bone #ece7d8 on pine-ink #16180f
———————————————————————————————————————————— */

:root{
  --ink:        #16180f;   /* page ground — deep pine ink */
  --ink-2:      #1c1f14;   /* raised panels */
  --ink-3:      #23271a;   /* deeper panel / hover */
  --bone:       #ece7d8;   /* primary text */
  --bone-dim:   #c9c4b2;   /* soft text */
  --sage:       #a5a08c;   /* secondary text (MMM sage) */
  --brass:      #b3a179;   /* accent — muted brass */
  --line:       rgba(236,231,216,.16);
  --line-soft:  rgba(236,231,216,.09);
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Karla", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --measure: 34em;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.7;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

/* film grain */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:50;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
}

::selection{ background:var(--brass); color:var(--ink); }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* ————— type ————— */
.serif{ font-family:var(--serif); }

h1,h2,h3{ font-family:var(--serif); font-weight:500; line-height:1.08; letter-spacing:.005em; }

.display{
  font-size:clamp(2.6rem, 7.5vw, 5.6rem);
  font-weight:400;
}
.display em, h2 em{ font-style:italic; color:var(--brass); }

h2{ font-size:clamp(1.9rem, 4.2vw, 3rem); font-weight:400; }
h3{ font-size:clamp(1.35rem, 2.4vw, 1.7rem); }

.kicker{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--sage);
}
.kicker--brass{ color:var(--brass); }

.lede{ font-family:var(--serif); font-size:clamp(1.25rem, 2.4vw, 1.55rem); line-height:1.5; color:var(--bone-dim); font-weight:400; }

p{ max-width:var(--measure); }
.muted{ color:var(--sage); }
.small{ font-size:.9rem; }

.num{
  font-family:var(--serif); font-style:italic; font-size:1.1rem; color:var(--brass);
}

hr.rule{ border:0; border-top:1px solid var(--line); margin:0; }

/* ————— buttons ————— */
.btn{
  display:inline-block;
  font-family:var(--sans);
  font-size:.74rem; font-weight:700;
  letter-spacing:.28em; text-transform:uppercase;
  padding:1.05rem 2.2rem;
  border:1px solid var(--bone);
  color:var(--bone);
  background:transparent;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
  cursor:pointer;
}
.btn:hover{ background:var(--bone); color:var(--ink); }
.btn--solid{ background:var(--bone); color:var(--ink); }
.btn--solid:hover{ background:var(--brass); border-color:var(--brass); color:var(--ink); }
.btn--brass{ border-color:var(--brass); color:var(--brass); }
.btn--brass:hover{ background:var(--brass); color:var(--ink); }

.textlink{
  font-size:.74rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase;
  color:var(--brass);
  border-bottom:1px solid transparent; padding-bottom:.2rem;
  transition:border-color .2s ease;
}
.textlink:hover{ border-color:var(--brass); }

/* ————— header ————— */
header.site{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--pad);
  background:color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.wordmark{
  font-family:var(--serif);
  font-size:1.35rem; letter-spacing:.04em; font-weight:500;
  display:flex; align-items:baseline; gap:.6rem;
}
.wordmark .sub{
  font-family:var(--sans); font-size:.6rem; font-weight:600;
  letter-spacing:.3em; text-transform:uppercase; color:var(--sage);
}
nav.main{ display:flex; gap:2.2rem; align-items:center; }
nav.main a{
  font-size:.72rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:var(--bone-dim);
  transition:color .2s ease;
}
nav.main a:hover, nav.main a[aria-current="page"]{ color:var(--bone); }
nav.main a.inq{ color:var(--brass); }
nav.main a.inq:hover{ color:var(--bone); }

/* ————— layout ————— */
section{ padding:clamp(4rem,10vw,7.5rem) var(--pad); }
.hairline{ border-top:1px solid var(--line-soft); }
.wrap{ max-width:72rem; margin:0 auto; }
.narrow{ max-width:46rem; margin:0 auto; }

.grid2{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(2rem,5vw,5rem); align-items:start; }
.grid3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
@media (max-width:860px){
  .grid2{ grid-template-columns:1fr; }
  .grid3{ grid-template-columns:1fr; }
  nav.main{ gap:1.2rem; }
  nav.main a:not(.inq):not(.keep){ display:none; }
}

/* ————— hero ————— */
.hero{
  min-height:calc(92svh - 4rem);
  display:flex; flex-direction:column; justify-content:center;
  gap:2.2rem;
  padding-top:clamp(4rem,8vw,6rem);
  position:relative;
}
.hero .display{ max-width:11em; }
.hero .lede{ max-width:30em; }
.hero-foot{
  display:flex; gap:2.5rem; flex-wrap:wrap; align-items:center;
  margin-top:1.5rem;
}
.hero-meta{
  display:flex; gap:2rem; flex-wrap:wrap;
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--sage);
}
.hero-meta span{ display:flex; align-items:center; gap:.6rem; }
.hero-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--brass); display:inline-block; }

/* faint contour ridge in hero */
.ridge{
  position:absolute; right:calc(-1 * var(--pad)); bottom:0; width:min(58vw,700px); opacity:.5; pointer-events:none;
}

/* ————— cards / tiers ————— */
.tier{ background:var(--ink-2); padding:clamp(1.8rem,3vw,2.6rem); display:flex; flex-direction:column; gap:1rem; min-height:100%; }
.tier .roman{ font-family:var(--serif); font-style:italic; color:var(--brass); font-size:1.05rem; letter-spacing:.08em; }
.tier h3{ font-weight:500; }
.tier .guests{ font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--sage); }
.tier p{ color:var(--bone-dim); font-size:.98rem; }
.tier .price{ margin-top:auto; padding-top:1.2rem; font-family:var(--serif); font-style:italic; color:var(--sage); font-size:1rem; }

/* ————— editorial list ————— */
.steps{ display:flex; flex-direction:column; }
.step{
  display:grid; grid-template-columns:5rem 1fr; gap:1.5rem;
  padding:2.2rem 0; border-top:1px solid var(--line-soft); align-items:baseline;
}
.step:last-child{ border-bottom:1px solid var(--line-soft); }
.step h3{ margin-bottom:.5rem; }
.step p{ color:var(--bone-dim); }
@media (max-width:640px){ .step{ grid-template-columns:1fr; gap:.4rem; } }

.deflist{ display:flex; flex-direction:column; }
.defrow{
  display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:1.5rem;
  padding:1.6rem 0; border-top:1px solid var(--line-soft);
}
.defrow:last-child{ border-bottom:1px solid var(--line-soft); }
.defrow dt{ font-family:var(--serif); font-size:1.25rem; }
.defrow dd{ color:var(--bone-dim); font-size:.98rem; max-width:var(--measure); }
@media (max-width:640px){ .defrow{ grid-template-columns:1fr; gap:.3rem; } }

/* ————— quote band ————— */
.band{
  background:var(--ink-2);
  text-align:center;
  padding:clamp(4.5rem,10vw,7rem) var(--pad);
}
.band .serif{ font-size:clamp(1.7rem,3.6vw,2.7rem); font-weight:400; line-height:1.3; max-width:24em; margin:0 auto; }

/* ————— footer ————— */
footer.site{
  padding:3.5rem var(--pad) 2.5rem;
  border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between; align-items:end;
}
footer.site .wordmark{ font-size:1.6rem; }
footer.site .cols{ display:flex; gap:3rem; flex-wrap:wrap; }
footer.site a{ color:var(--sage); font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; transition:color .2s; }
footer.site a:hover{ color:var(--bone); }
footer.site .fine{ width:100%; margin-top:2rem; color:var(--sage); font-size:.78rem; letter-spacing:.06em; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; }

/* ————— forms ————— */
form.inquire{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem 2rem; }
form.inquire .full{ grid-column:1 / -1; }
@media (max-width:640px){ form.inquire{ grid-template-columns:1fr; } }

.field{ display:flex; flex-direction:column; gap:.5rem; }
.field label{
  font-size:.68rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--sage);
}
.field label .opt{ color:var(--sage); opacity:.6; letter-spacing:.1em; text-transform:none; font-weight:400; }
.field input, .field select, .field textarea{
  background:transparent; border:0; border-bottom:1px solid var(--line);
  color:var(--bone); font-family:var(--serif); font-size:1.2rem;
  padding:.5rem 0; border-radius:0; -webkit-appearance:none; appearance:none;
  transition:border-color .2s;
}
.field select{ cursor:pointer; }
.field select option{ background:var(--ink-2); color:var(--bone); font-family:var(--sans); font-size:1rem; }
.field textarea{ min-height:7rem; resize:vertical; line-height:1.5; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--brass); }
.field input::placeholder, .field textarea::placeholder{ color:rgba(165,160,140,.55); }

.form-note{ color:var(--sage); font-size:.85rem; max-width:36em; }
.form-error{ color:#d9a084; font-size:.9rem; display:none; }

/* success state */
.success{ display:none; text-align:center; padding:4rem 0; }
.success h2{ margin-bottom:1rem; }
.success p{ margin:0 auto; color:var(--bone-dim); }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }