:root {
  --cream: #f7efe3;
  --paper: #fffaf3;
  --ink: #1d1a17;
  --terracotta: #b75e43;
  --coral: #df8062;
  --sand: #d9b98e;
  --yellow: #f3c85f;
  --olive: #8d8d61;
  --line: rgba(29,26,23,.16);
  --serif: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
.announcement {
  text-align: center;
  background: var(--ink);
  color: var(--paper);
  font-size: .72rem;
  letter-spacing: .16em;
  padding: 9px 16px;
  text-transform: uppercase;
}
.site-header {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(247,239,227,.94);
  backdrop-filter: blur(12px);
}
.logo { display:flex; flex-direction:column; line-height:.8; letter-spacing:.08em; }
.logo span { font-size:.7rem; margin-left:3px; }
.logo strong { font-size:1.55rem; font-weight:700; }
.nav { display:flex; gap:34px; font-size:.88rem; }
.nav a { position:relative; }
.nav a::after { content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--ink); transition:.3s; }
.nav a:hover::after { width:100%; }
.header-cta { border-bottom:1px solid var(--ink); font-size:.82rem; padding-bottom:5px; }
.menu-toggle { display:none; background:none; border:0; width:40px; }
.menu-toggle span { display:block; height:1px; background:var(--ink); margin:6px 0; }

.hero {
  min-height: 680px;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero-copy { padding: 10vw 7vw 8vw; display:flex; flex-direction:column; justify-content:center; }
.eyebrow, .section-kicker { font-size:.72rem; letter-spacing:.16em; font-weight:700; text-transform:uppercase; }
.hero h1, h2 {
  font-family:var(--serif);
  font-weight:500;
  line-height:.96;
  letter-spacing:-.045em;
  margin:24px 0;
}
.hero h1 { font-size:clamp(4rem, 8vw, 8.8rem); }
h2 { font-size:clamp(3rem, 6vw, 6.5rem); }
em { font-style:italic; font-weight:500; }
.hero-text { max-width:480px; font-size:1.08rem; color:#5c554e; }
.hero-actions { display:flex; gap:26px; align-items:center; margin-top:25px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 25px; border:1px solid var(--ink); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; transition:.25s; }
.button-dark { background:var(--ink); color:var(--paper); }
.button-dark:hover { transform:translateY(-3px); box-shadow:5px 5px 0 var(--terracotta); }
.button-light { background:var(--paper); }
.button-outline { background:transparent; }
.button-outline:hover, .button-light:hover { background:var(--ink); color:var(--paper); }
.text-link { font-size:.82rem; border-bottom:1px solid var(--ink); padding-bottom:5px; }
.text-link span { margin-left:10px; }

.hero-art {
  min-height:680px; position:relative; overflow:hidden;
  background:linear-gradient(135deg,#e2c5a1 0%,#f0d8ad 55%,#d88767 100%);
}
.sun { position:absolute; width:330px; height:330px; border-radius:50%; background:var(--yellow); top:9%; right:13%; }
.arch { position:absolute; border-radius:220px 220px 0 0; }
.arch-back { width:64%; height:73%; left:10%; bottom:-5%; background:#c36b50; opacity:.65; }
.arch-front { width:51%; height:64%; left:27%; bottom:-2%; background:#f8ead5; padding:16px; }
.arch-inner { width:100%; height:100%; border-radius:190px 190px 0 0; background:#b7a078; }
.leaf { position:absolute; width:16px; height:120px; background:#727452; border-radius:100%; transform-origin:bottom; }
.leaf-1 { right:15%; bottom:0; transform:rotate(35deg); }
.leaf-2 { right:11%; bottom:-10px; transform:rotate(65deg); height:145px; }
.orb { position:absolute; border-radius:50%; border:1px solid rgba(29,26,23,.3); }
.orb-1 { width:90px; height:90px; left:12%; top:14%; }
.orb-2 { width:22px; height:22px; right:9%; top:47%; background:#e78d69; border:0; }
.hero-label { position:absolute; bottom:6%; right:7%; font-size:.68rem; letter-spacing:.14em; line-height:1.5; }
.hero-label span { font-family:var(--serif); font-size:2.4rem; }

.marquee { overflow:hidden; white-space:nowrap; background:var(--terracotta); color:var(--paper); padding:13px 0; font-size:.75rem; letter-spacing:.18em; }
.marquee div { animation:marquee 22s linear infinite; display:inline-block; }
@keyframes marquee { to { transform:translateX(-50%); } }

.section { padding:9vw 7vw; }
.intro { display:grid; grid-template-columns:.65fr 1.35fr; gap:5vw; }
.lead { max-width:650px; font-size:1.35rem; color:#625a52; }
.collections { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; padding-top:0; }
.collection-card { min-height:390px; padding:30px; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; transition:transform .4s; }
.collection-card:hover { transform:translateY(-7px); }
.card-mode { background:#d8a78a; }
.card-jewelry { background:#ead5ae; }
.card-accessories { background:#b5b98d; }
.card-beauty { background:#d8b1b0; }
.card-number { font-size:.7rem; letter-spacing:.15em; }
.card-icon { font-family:var(--serif); font-size:5rem; position:absolute; top:18px; right:28px; }
.card-content p { font-size:.7rem; letter-spacing:.15em; }
.card-content h3 { font-family:var(--serif); font-size:3.2rem; margin:10px 0; font-weight:500; }
.card-content span { max-width:290px; display:block; color:rgba(29,26,23,.7); }

.story { display:grid; grid-template-columns:1fr 1fr; gap:8vw; align-items:center; background:var(--paper); }
.story-image { min-height:650px; background:#d4b18a; position:relative; overflow:hidden; }
.story-sun { width:420px; height:420px; border-radius:50%; background:var(--yellow); position:absolute; top:14%; left:22%; }
.story-image::after { content:""; position:absolute; width:55%; height:65%; left:22%; bottom:-2%; background:#c4775d; border-radius:260px 260px 0 0; }
.story-title { position:absolute; z-index:2; left:9%; bottom:8%; font-family:var(--serif); font-size:3.6rem; line-height:.85; color:var(--paper); }
.story-title span { font-style:italic; }
.story-copy p { max-width:530px; color:#665f57; }
.story-copy .button { margin-top:20px; }

.visit { display:grid; grid-template-columns:1fr 1fr; gap:8vw; align-items:center; }
.visit-copy h2 { margin-bottom:30px; }
.visit-copy > p { font-size:1.2rem; }
.hours { border-top:1px solid var(--line); margin:35px 0; max-width:500px; }
.hours div { display:flex; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--line); font-size:.9rem; }
.hours span { color:#665f57; }
.visit-actions { display:flex; gap:12px; flex-wrap:wrap; }
.map-card { min-height:560px; background:#dfd5bc; position:relative; overflow:hidden; }
.map-grid { position:absolute; inset:0; opacity:.55; background:
  linear-gradient(28deg,transparent 47%,#a9a28d 48%,#a9a28d 49%,transparent 50%),
  linear-gradient(92deg,transparent 47%,#b8b19d 48%,#b8b19d 49%,transparent 50%);
  background-size:130px 90px,100px 140px;
  transform:rotate(-10deg) scale(1.2);
}
.map-pin { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:70px; height:70px; border-radius:50% 50% 50% 0; rotate:-45deg; background:var(--terracotta); color:var(--paper); display:grid; place-items:center; font-size:1.6rem; box-shadow:0 12px 25px rgba(0,0,0,.15); }
.map-pin::after { content:""; width:18px; height:18px; background:var(--paper); border-radius:50%; }
.map-caption { position:absolute; left:24px; bottom:24px; background:var(--paper); padding:17px 20px; display:flex; flex-direction:column; gap:2px; }
.map-caption span { font-size:.75rem; color:#665f57; }

.contact { text-align:center; background:var(--terracotta); color:var(--paper); }
.contact .eyebrow { opacity:.75; }
.contact h2 { font-size:clamp(3.5rem,8vw,8rem); }
.contact-links { max-width:800px; margin:40px auto 0; border-top:1px solid rgba(255,250,243,.4); }
.contact-links a { display:flex; justify-content:space-between; padding:18px 0; border-bottom:1px solid rgba(255,250,243,.4); font-size:1rem; }
.contact-links span { opacity:.7; }

footer { background:var(--ink); color:var(--paper); padding:38px 7vw; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; font-size:.75rem; }
.footer-logo { font-size:1.35rem; letter-spacing:.08em; }
footer p { text-align:center; font-family:var(--serif); font-style:italic; font-size:1.2rem; }
footer > span { text-align:right; opacity:.65; }

.reveal { opacity:0; transform:translateY(25px); animation:reveal .8s ease forwards; }
.reveal:nth-child(2) { animation-delay:.1s; }
.reveal:nth-child(3) { animation-delay:.2s; }
.reveal:nth-child(4) { animation-delay:.3s; }
@keyframes reveal { to { opacity:1; transform:none; } }

@media (max-width: 850px) {
  .site-header { min-height:76px; }
  .nav, .header-cta { display:none; }
  .menu-toggle { display:block; }
  .nav.open { display:flex; position:absolute; left:0; right:0; top:76px; padding:25px 7vw; background:var(--cream); flex-direction:column; border-bottom:1px solid var(--line); gap:20px; }
  .hero { grid-template-columns:1fr; }
  .hero-copy { min-height:600px; }
  .hero-art { min-height:520px; }
  .intro, .story, .visit { grid-template-columns:1fr; }
  .collections { grid-template-columns:1fr; }
  .story-image { min-height:500px; }
  .map-card { min-height:430px; }
  footer { grid-template-columns:1fr; gap:10px; text-align:center; }
  footer p, footer > span { text-align:center; }
}
@media (max-width: 520px) {
  .announcement { font-size:.6rem; }
  .hero h1 { font-size:3.8rem; }
  .hero-copy { padding:70px 7vw; min-height:540px; }
  .hero-art { min-height:440px; }
  .sun { width:230px; height:230px; }
  .section { padding:70px 7vw; }
  .collection-card { min-height:320px; }
  .story-image { min-height:390px; }
  .story-title { font-size:2.7rem; }
  .hours div { gap:15px; }
}