/* Wedding-site template — palette set per couple via CSS variables */
:root{
  --p1:#33475E;   /* primary */
  --p2:#C8A96A;   /* accent */
  --p3:#F6F1E6;   /* surface */
  --p4:#FAF5EC;   /* page bg */
  --ink:#26313B;
  --serif:"Cormorant Garamond","Cormorant",Georgia,serif;
  --body:"Cormorant",Georgia,serif;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family:var(--body); color:var(--ink); background:var(--p4); line-height:1.6; }
::selection{ background:var(--p2); color:var(--p4); }

.wnav{ position:sticky; top:0; z-index:10; background:var(--p1); color:#fff; }
.wnav-inner{ max-width:960px; margin-inline:auto; padding:14px 20px; display:flex; align-items:center; gap:18px; }
.wnav-name{ font:600 19px/1 var(--serif); color:#fff; text-decoration:none; }
.wnav-links{ display:flex; gap:4px; margin-left:auto; }
.wnav-links a{ font:500 14.5px/1 var(--serif); color:rgba(255,255,255,.9); text-decoration:none; padding:.45em .85em; border-radius:999px; }
.wnav-links a:hover{ background:rgba(255,255,255,.12); }

.whero{ padding:clamp(64px,11vw,130px) 20px; text-align:center; background:
  radial-gradient(40% 50% at 80% 20%, var(--p2) 0%, transparent 65%),
  linear-gradient(160deg, var(--p1) 0%, var(--p1) 100%); color:#fff; }
.whero .wdate{ font:italic 400 18px/1.5 var(--serif); color:rgba(255,255,255,.85); letter-spacing:.05em; }
.whero h1{ font:600 clamp(40px,6.5vw,64px)/1.08 var(--serif); color:#fff; margin:.4em 0 .35em; }
.whero .wwhere{ font:italic 400 20px/1.5 var(--serif); color:var(--p2); }

.wsections{ max-width:880px; margin-inline:auto; padding:30px 20px; }
.wstory, .wdetails, .wregistry, .wgallery{ }
.wtitle{ font:600 30px/1.2 var(--serif); color:var(--p1); margin:0 0 .5em; }
.wtitle::after{ content:""; display:block; width:56px; height:3px; background:var(--p2); margin:.35em auto 0; }
.wblock{ background:var(--p3); border:1px solid rgba(42,59,76,.15); border-radius:18px; padding:30px 28px; margin:40px 0; }
.wblock .wtitle{ text-align:center; }
.wstory p{ font:400 18.5px/1.8 var(--body); color:var(--ink); }

.wdetails-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; }
.wdetail{ background:#fff; border:1px solid rgba(42,59,76,.15); border-radius:14px; padding:18px 16px; text-align:center; }
.wdetail span{ display:block; font:italic 400 13.5px/1.3 var(--serif); color:rgba(38,49,59,.6); text-transform:uppercase; letter-spacing:.07em; }
.wdetail strong{ display:block; font:600 19px/1.35 var(--serif); color:var(--p1); margin-top:6px; }

.wregistry{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.wreg-link{ font:600 16px/1 var(--serif); color:var(--p1); text-decoration:none; padding:.85em 1.6em; border:1.5px solid var(--p1); border-radius:999px; }
.wreg-link:hover{ background:var(--p1); color:#fff; }

.wgallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.wg-tile{ aspect-ratio:1; border-radius:12px; background:linear-gradient(160deg, var(--p1), var(--p2)); display:grid; place-items:center; color:#fff; font:italic 400 15px/1.4 var(--serif); text-align:center; padding:14px; }
@media (max-width:640px){ .wgallery-grid{ grid-template-columns:1fr 1fr; } }

.wfoot{ background:var(--p1); color:#fff; padding:34px 20px 24px; text-align:center; }
.wfoot .wmade{ font:italic 400 15.5px/1.5 var(--serif); color:var(--p2); }
.wfoot a{ color:#fff; text-decoration:none; }
.wfoot small{ display:block; margin-top:8px; color:rgba(255,255,255,.7); font:400 14px/1.5 var(--body); }