/* Shared styles for Unveiled content/style pages (wedding-dress-styles + /styles/*). */
:root {
  --espresso: #1C1410; --espresso-soft: #261B15;
  --cream: #F4EFE9; --cream-dim: rgba(244,239,233,0.66); --cream-faint: rgba(244,239,233,0.42);
  --copper: #C4896A; --line: rgba(244,239,233,0.12);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--espresso); color: var(--cream); font-family: "DM Sans", -apple-system, system-ui, sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.6; }
a { color: inherit; text-decoration: none; }

header.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(20px,3.5vw,32px) clamp(24px,5vw,56px); border-bottom: 1px solid var(--line); }
.wordmark { font-family: "Cormorant Garamond", Georgia, serif; font-size: 26px; }
.wordmark em { font-style: italic; color: var(--copper); }
.nav-cta { font-size: 13px; letter-spacing: 0.02em; padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; transition: border-color .25s, background-color .25s; }
.nav-cta:hover { border-color: var(--copper); background: rgba(196,137,106,0.08); }

main { max-width: 760px; margin: 0 auto; padding: clamp(48px,8vh,88px) clamp(24px,5vw,32px) clamp(64px,9vh,104px); }
.eyebrow { font-size: 12.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--copper); }
h1 { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(40px,6.5vw,68px); line-height: 1.05; margin: 18px 0 0; }
.lead { margin-top: 24px; font-size: clamp(16px,1.3vw,18px); line-height: 1.7; color: var(--cream-dim); }
h2 { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(28px,3.6vw,40px); line-height: 1.1; margin: clamp(48px,7vh,72px) 0 0; }
h3 { font-size: 16px; font-weight: 500; letter-spacing: 0.01em; margin: 28px 0 0; }
h3 .tag { color: var(--copper); }
p { margin-top: 12px; color: var(--cream-dim); }
.accent { color: var(--copper); }

.cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 15px; font-weight: 500; color: var(--espresso); background: var(--cream); padding: 14px 26px; border-radius: 999px; transition: transform .25s, background-color .25s; }
.cta:hover { background: var(--copper); transform: translateY(-1px); }

.styles { margin-top: 14px; display: grid; gap: 4px; }
.style { padding: 22px 0; border-top: 1px solid var(--line); }
.style:first-child { border-top: none; }
.style p { margin-top: 8px; }
.try { display: inline-block; margin-top: 12px; font-size: 13px; color: var(--copper); }
.try:hover { opacity: 0.8; }

.convert { margin-top: clamp(48px,7vh,72px); padding: clamp(32px,5vw,48px); background: var(--espresso-soft); border: 1px solid var(--line); border-radius: 24px; text-align: center; }
.convert h2 { margin-top: 0; }
.convert .reassure { display: block; margin-top: 14px; font-size: 13px; color: var(--cream-faint); }

.faq { margin-top: 18px; }
.faq details { border-top: 1px solid var(--line); padding: 18px 0; }
.faq summary { font-size: 15.5px; font-weight: 500; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--copper); }
.faq details[open] summary::after { content: "–"; }
.faq p { margin-top: 10px; }

.related { margin-top: clamp(40px,6vh,60px); border-top: 1px solid var(--line); padding-top: 28px; }
.related .links { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }
.related .links a { font-size: 13px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; transition: border-color .25s, background-color .25s; }
.related .links a:hover { border-color: var(--copper); background: rgba(196,137,106,0.08); }

footer.foot { border-top: 1px solid var(--line); background: var(--espresso-soft); padding: clamp(28px,4vh,40px) clamp(24px,5vw,56px); text-align: center; font-size: 12.5px; color: var(--cream-faint); }
footer.foot nav { margin-top: 12px; display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
footer.foot a:hover { color: var(--cream); }