@font-face { font-family: "Vollkorn"; src: url("fonts/Vollkorn-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Fira Sans"; src: url("fonts/FiraSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
:root {
  --ink: #f6efe2; --muted: #c9bfd8; --gold: #ffd878; --gold-deep: #c9953f;
  --bg: #120c1f; --bg-2: #1d1433; --panel: rgba(255,255,255,.04); --line: rgba(255,216,120,.28);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: radial-gradient(1200px 700px at 50% -10%, #3b2560 0%, var(--bg) 60%) fixed, var(--bg);
  color: var(--ink); font: 600 17px/1.6 "Fira Sans", system-ui, sans-serif; }
a { color: var(--gold); text-decoration: none; } a:hover { text-decoration: underline; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
header.nav { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; }
.brand { font: 800 22px "Vollkorn", Georgia, serif; letter-spacing: .06em; color: var(--gold); }
.nav a { margin-left: 18px; color: var(--muted); }
h1, h2 { font-family: "Vollkorn", Georgia, serif; font-weight: 800; color: var(--gold); letter-spacing: .02em; line-height: 1.1; }
h1 { font-size: clamp(42px, 8vw, 84px); margin: 0 0 14px; text-shadow: 0 4px 30px rgba(255,190,90,.35); }
h2 { font-size: clamp(28px, 4.5vw, 40px); margin: 0 0 12px; }
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: 30px 0 60px; }
.hero p.lead { font-size: 20px; color: var(--ink); max-width: 34ch; }
.roses { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.roses img { width: clamp(56px, 13vw, 120px); aspect-ratio: 1; filter: drop-shadow(0 0 18px rgba(255,190,90,.35)); }
.roses img:nth-child(3) { width: clamp(80px, 18vw, 170px); }
.roses img:nth-child(2), .roses img:nth-child(4) { width: clamp(66px, 15vw, 140px); }
.badges { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.badge { border: 1px solid var(--line); background: var(--panel); border-radius: 14px; padding: 10px 16px; color: var(--muted); }
.badge strong { color: var(--ink); display: block; font-size: 15px; }
.shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 10px 0 60px; }
.shot figure { margin: 0; } .shot img { width: 100%; border-radius: 18px; border: 2px solid rgba(201,149,63,.6); display: block; }
.shot figcaption { margin-top: 10px; color: var(--muted); font-size: 15px; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding-bottom: 60px; }
.card { border: 1px solid var(--line); background: var(--panel); border-radius: 18px; padding: 20px; }
.card h3 { margin: 0 0 6px; font: 800 20px "Vollkorn", Georgia, serif; color: var(--gold); }
.card p { margin: 0; color: var(--muted); }
footer { border-top: 1px solid var(--line); padding: 26px 0 40px; color: var(--muted); font-size: 15px; }
.doc { max-width: 760px; padding-bottom: 60px; }
.doc h2 { margin-top: 40px; } .doc h3 { font-family: "Vollkorn", Georgia, serif; color: var(--gold); margin: 28px 0 6px; }
.doc p, .doc li { color: var(--ink); } .doc .muted { color: var(--muted); }
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; padding-bottom: 30px; } .roses { flex-wrap: nowrap; }
  .shots { grid-template-columns: repeat(2, 1fr); } .features { grid-template-columns: 1fr; }
}