@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500;1,600&family=Montserrat:wght@400;500;600&display=swap');

:root{
  --bg:#0d0709;
  --bg-2:#140a0e;
  --card:#1b0e13;
  --card-2:#210f16;
  --cream:#f1e4d2;
  --muted:#b9a79d;
  --gold:#c69a59;
  --gold-light:#e0bc7d;
  --burgundy:#7f172c;
  --line:rgba(198,154,89,.20);
  --line-light:rgba(241,228,210,.10);
  --shadow:0 20px 60px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--cream);
  font-family:"Montserrat",Arial,sans-serif;
  line-height:1.7;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 10%,rgba(127,23,44,.12),transparent 30%),
    radial-gradient(circle at 80% 50%,rgba(198,154,89,.06),transparent 25%);
  z-index:-1;
}
a{color:inherit}
.container{width:min(1180px,92%);margin:auto}

.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  background:rgba(13,7,9,.86);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-light);
}
.nav{
  min-height:86px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}
.brand{display:flex;flex-direction:column;text-decoration:none}
.brand-name{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:27px;
  font-weight:700;
  letter-spacing:6px;
}
.brand-tag{
  color:var(--gold-light);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:15px;
  font-style:italic;
  letter-spacing:1px;
}
.nav-links{display:flex;align-items:center;gap:27px}
.nav-links a{
  text-decoration:none;
  color:#d8c8bd;
  text-transform:uppercase;
  letter-spacing:1.4px;
  font-size:12px;
  font-weight:500;
  transition:.25s ease;
}
.nav-links a:hover{color:var(--gold-light)}
.nav-cta{
  border:1px solid var(--gold);
  padding:12px 18px;
  color:var(--gold-light)!important;
}
.nav-cta span{margin-left:8px}
.menu-toggle{
  display:none;
  background:none;
  border:0;
  padding:8px;
}
.menu-toggle span{
  display:block;width:25px;height:1px;background:var(--cream);margin:5px;
}

.hero{
  min-height:820px;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(7,4,5,.80),rgba(7,4,5,.42)),
    url("assets/hero-romantic.png") center/cover no-repeat;
}
.hero-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(13,7,9,.65),transparent 35%,rgba(13,7,9,.95)),
    radial-gradient(circle at center,transparent 10%,rgba(13,7,9,.25) 70%);
}
.hero-content{position:relative;text-align:center;padding-top:100px}
.eyebrow{
  margin:0 0 14px;
  color:var(--gold);
  font-size:12px;
  letter-spacing:4px;
  text-transform:uppercase;
  font-weight:600;
}
.hero h1{
  margin:0;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(52px,8vw,94px);
  line-height:.86;
  font-weight:500;
  letter-spacing:2px;
  text-shadow:0 8px 35px rgba(0,0,0,.45);
}
.hero h1 em{font-size:.55em;font-weight:400}
.hero h1 span{font-weight:700}
.hero-subtitle{
  margin:34px 0 5px;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(22px,3vw,31px);
  font-style:italic;
  color:#f0d9b9;
}
.hero-copy{color:#dfd1c9;font-size:15px}
.hero-actions{margin-top:28px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 24px;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:1.7px;
  font-size:11px;
  font-weight:600;
  transition:.25s ease;
}
.button-primary{background:var(--burgundy);border:1px solid #a72b45}
.button-primary:hover{background:#9b203a;transform:translateY(-2px)}
.button-ghost,.button-outline{border:1px solid var(--gold);color:var(--gold-light);background:rgba(13,7,9,.25)}
.button-ghost:hover,.button-outline:hover{background:rgba(198,154,89,.10);transform:translateY(-2px)}
.scroll-hint{
  position:absolute;bottom:25px;left:50%;transform:translateX(-50%);
  text-decoration:none;color:var(--gold-light);font-size:22px;animation:bounce 1.8s infinite;
}
@keyframes bounce{50%{transform:translate(-50%,7px)}}

.section{padding:110px 0}
.stories-section{background:linear-gradient(180deg,var(--bg),#11080b)}
.section-heading{text-align:center;margin-bottom:55px}
.section-heading h2,.about-copy h2,.connect-inner h2{
  margin:0;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(38px,5vw,58px);
  font-weight:500;
}
.section-heading>p:last-child{color:var(--muted);margin-top:5px}

.story-card{
  position:relative;
  display:grid;
  grid-template-columns:300px 1fr;
  gap:50px;
  align-items:center;
  padding:28px;
  margin:0 auto 32px;
  max-width:1080px;
  background:linear-gradient(135deg,rgba(34,15,22,.96),rgba(20,10,14,.98));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.story-card:hover{border-color:rgba(198,154,89,.35)}
.story-cover-wrap{display:flex;justify-content:center}
.story-cover{
  width:100%;
  max-width:300px;
  aspect-ratio:389/542;
  object-fit:cover;
  border:1px solid rgba(198,154,89,.65);
  box-shadow:0 20px 45px rgba(0,0,0,.45);
}
.story-content{padding-right:65px}
.story-kicker{color:var(--gold);font-size:12px;letter-spacing:4px;text-transform:uppercase;margin:0 0 10px}
.story-content h3{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(36px,4vw,55px);
  line-height:1;
  margin:0 0 22px;
  font-weight:600;
}
.tags{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:25px}
.tags span{
  border:1px solid var(--line-light);
  padding:7px 11px;
  color:#c8b5ab;
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:1px;
}
.story-quote{
  border-left:2px solid #9b2440;
  padding:4px 0 4px 20px;
  margin:0 0 30px;
  color:#ead9cc;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:22px;
  font-style:italic;
}
.monogram{
  position:absolute;
  top:35px;right:32px;
  width:66px;height:66px;
  border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#a82442,#5f0d20);
  border:1px solid rgba(224,188,125,.35);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:20px;
  color:#f5ddbc;
}

.about-section{
  background:
    radial-gradient(circle at 20% 50%,rgba(127,23,44,.16),transparent 35%),
    #12090c;
  border-top:1px solid var(--line-light);
  border-bottom:1px solid var(--line-light);
}
.about-grid{display:grid;grid-template-columns:240px 1fr;gap:70px;align-items:center;max-width:950px}
.about-decoration{
  min-height:300px;
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:35px;
  color:var(--gold);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:38px;
}
.about-copy p{color:#c9b8af;max-width:700px}
.signature{
  color:var(--gold-light)!important;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:25px;
  font-style:italic;
}

.world-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.world-card{background:#12090d;padding:36px;text-align:center;min-height:190px}
.world-icon{display:block;color:var(--gold);font-family:"Cormorant Garamond",Georgia,serif;font-size:35px}
.world-card h3{font-family:"Cormorant Garamond",Georgia,serif;font-size:26px;margin:5px 0}
.world-card p{color:var(--muted);font-size:13px;margin:0}

.connect-section{
  background:
    linear-gradient(rgba(13,7,9,.9),rgba(13,7,9,.96)),
    url("assets/hero-romantic.png") center/cover fixed;
  text-align:center;
}
.connect-inner>p:not(.eyebrow){color:var(--muted)}
.social-links{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:38px auto 0;max-width:850px}
.social-card{
  display:flex;align-items:center;gap:15px;text-align:left;
  text-decoration:none;padding:22px;
  border:1px solid var(--line);
  background:rgba(18,9,13,.75);
  transition:.25s ease;
}
.social-card:hover{border-color:var(--gold);transform:translateY(-3px)}
.social-symbol{
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--gold);
  color:var(--gold-light);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:22px;
}
.social-card strong{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-size:23px}
.social-card small{color:var(--muted);font-size:10px;letter-spacing:1px;text-transform:uppercase}

.quote-section{
  padding:85px 0;
  text-align:center;
  background:#090507;
  border-top:1px solid var(--line-light);
}
.quote-section p{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(30px,5vw,48px);
  font-style:italic;
  margin:0 0 10px;
  color:#ead7c5;
}
.quote-section span{color:var(--gold);letter-spacing:3px;font-size:11px}

.site-footer{border-top:1px solid var(--line-light);padding:45px 0;background:#090507}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;color:#8f7f77;font-size:11px;letter-spacing:1px}
.footer-inner strong{display:block;color:#d8b276;letter-spacing:4px}
.footer-inner span{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-size:15px;font-style:italic;color:#a9968c}
.footer-inner p{margin:0}

@media(max-width:1000px){
  .nav-links{gap:15px}
  .nav-links a{font-size:10px}
  .story-card{grid-template-columns:250px 1fr;gap:30px}
}
@media(max-width:800px){
  .nav{min-height:74px}
  .menu-toggle{display:block}
  .nav-links{
    display:none;
    position:absolute;top:74px;left:0;right:0;
    flex-direction:column;align-items:stretch;
    padding:18px 4%;
    background:rgba(13,7,9,.98);
    border-bottom:1px solid var(--line);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:10px}
  .nav-cta{text-align:center}
  .hero{min-height:720px}
  .story-card{grid-template-columns:1fr;text-align:center}
  .story-content{padding-right:0}
  .story-cover{max-width:260px}
  .tags,.hero-actions{justify-content:center}
  .story-quote{text-align:left}
  .monogram{top:15px;right:15px}
  .about-grid{grid-template-columns:1fr;gap:35px}
  .about-decoration{min-height:150px;flex-direction:row}
  .world-grid{grid-template-columns:repeat(2,1fr)}
  .social-links{grid-template-columns:1fr}
}
@media(max-width:520px){
  .brand-name{font-size:22px;letter-spacing:4px}
  .brand-tag{font-size:12px}
  .hero h1{font-size:50px}
  .section{padding:75px 0}
  .story-card{padding:18px}
  .world-grid{grid-template-columns:1fr}
  .button{width:100%}
  .hero-actions{width:min(330px,100%);margin-left:auto;margin-right:auto}
}