:root{
  --veil:#FAF7F2; --ivory:#FFFDF9; --gold:#BE9455; --gold-line:#E8DAC4; --bronze:#8C6144;
  --cocoa:#4A3628; --ink:#2B241D; --wa:#25D366;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;color:var(--ink);background:var(--veil);font-weight:300}
.serif{font-family:'Fraunces',serif}
.label{font-size:.64rem;letter-spacing:.36em;text-transform:uppercase;color:var(--bronze);font-weight:500}

/* Marble Veil centered header */
header{position:fixed;inset:0 0 auto 0;z-index:10;text-align:center;padding:1.2rem 0 1rem;
  background:linear-gradient(rgba(250,247,242,.95),rgba(250,247,242,.7) 75%,transparent);backdrop-filter:blur(6px)}
.wordmark{font-family:'Fraunces',serif;font-weight:400;letter-spacing:.38em;font-size:1.05rem;color:var(--cocoa);
  text-decoration:none;display:flex;align-items:center;justify-content:center;gap:.6rem;padding-left:.38em}
.wm-mark{height:36px;width:auto;flex:none}
nav{margin-top:.75rem;display:flex;justify-content:center;gap:2.6rem}
nav a{font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:#8a7a64;text-decoration:none;white-space:nowrap;transition:.25s}
nav a:hover{color:var(--cocoa)}
nav a.active{color:var(--gold)}

.pill{display:inline-flex;border:1px solid var(--gold);border-radius:999px;padding:.85rem 2.1rem;
  font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--cocoa);text-decoration:none;transition:.3s;white-space:nowrap}
.pill--solid{background:var(--gold);color:#fff}
.pill--solid:hover{background:var(--bronze)}
.pill--ghost:hover{background:rgba(190,148,85,.08)}

/* page hero */
.phero{position:relative;min-height:64vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:9rem 3.4rem 4.5rem;text-align:center;overflow:hidden}
.phero__marble{position:absolute;inset:0;background:url('img/marble.jpg') center/cover;opacity:.5;z-index:0}
.phero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(250,247,242,.25) 0%,rgba(250,247,242,.85) 78%);z-index:0}
.phero::after{content:'';position:absolute;inset:auto 0 0 0;height:6rem;background:linear-gradient(transparent,var(--veil));z-index:0}
.phero>*{position:relative;z-index:1}
.phero .phero__marble{position:absolute;inset:0;z-index:0}
.phero h1{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(2.6rem,4.6vw,4rem);line-height:1.08;color:var(--cocoa);margin-top:1.4rem}
.phero h1 em{font-style:italic;color:var(--gold)}
.phero p{margin:1.6rem auto 0;max-width:38rem;font-size:.98rem;line-height:1.85;color:#5f5140}

section{padding:5rem 3.4rem}
h2.sec{font-family:'Fraunces',serif;font-weight:300;font-size:2rem;color:var(--cocoa)}
.center{text-align:center}

footer{border-top:1px solid var(--gold-line);padding:3rem 3.4rem;text-align:center;color:#a3906f;font-size:.7rem;letter-spacing:.14em}
footer .serif{display:block;font-size:.95rem;color:var(--cocoa);letter-spacing:.4em;margin-bottom:.9rem;padding-left:.4em}
.fab{position:fixed;right:1.6rem;bottom:1.6rem;width:56px;height:56px;border-radius:50%;background:var(--wa);
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.15);z-index:20}
.fab svg{width:28px;height:28px;fill:#fff}

/* mobile menu */
.burger{display:none;position:absolute;top:1.1rem;right:1rem;background:none;border:none;cursor:pointer;padding:.5rem}
.burger span{display:block;width:22px;height:1px;background:var(--cocoa);margin:6px 0;transition:.3s}
.menu{position:fixed;inset:0;z-index:40;background:var(--veil);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;
  opacity:0;visibility:hidden;transition:.35s ease}
.menu.open{opacity:1;visibility:visible}
.menu a{font-family:'Fraunces',serif;font-size:1.7rem;color:var(--cocoa);text-decoration:none}
.menu a:hover{color:var(--gold)}
.menu .pill{font-family:'Inter',sans-serif;font-size:.68rem;margin-top:1rem;color:#fff}
.menu__close{position:absolute;top:1.2rem;right:1.4rem;background:none;border:none;font-size:1.8rem;color:var(--cocoa);cursor:pointer;font-weight:300}

@media (max-width:860px){
  header{padding:1rem 0 .9rem}
  .wordmark{font-size:.88rem;letter-spacing:.26em}
  .wm-mark{height:30px}
  nav{display:none}
  .burger{display:block}
  .phero{padding:8.5rem 1.4rem 3rem}
  section{padding:3.4rem 1.4rem}
  h2.sec{font-size:1.6rem}
  footer{padding:2.4rem 1.4rem;line-height:1.9}
  .fab{right:1.1rem;bottom:1.1rem}
}