:root{
  --ink: #f4ead7;
  --bg: #0a0a0c;
  --bg-2:#120e12;
  --gold:#cba135;
  --gold-2:#8f6f1f;
  --garnet:#5b121a;
  --garnet-2:#390b10;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink); background:
    radial-gradient(1200px 700px at 85% -10%, rgba(91,18,26,.35), transparent 60%),
    radial-gradient(900px 600px at -20% 100%, rgba(203,161,53,.12), transparent 65%),
    linear-gradient(180deg, var(--bg) 0%, #0b0b10 100%);
  font: 400 18px/1.6 "Cormorant Garamond", serif;
  letter-spacing:.2px;
}
.wrap{max-width:1100px;margin:0 auto;padding: clamp(16px, 3vw, 32px)}

/* --- Top nav with cohesive flourish --- */
.nav{position:sticky;top:0;z-index:10;background:rgba(0,0,0,.72);backdrop-filter:saturate(120%) blur(6px);border-bottom:2px solid var(--gold)}
.nav .wrap{display:grid;grid-template-columns: 160px 1fr auto;gap:1rem;align-items:center}
.brand-left{
width: clamp(72px, 8vw, 112px);
  height: clamp(72px, 8vw, 112px);
  background-image:url("/assets/images/deco-rose-gold.png");
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
}
.menu{display:flex; gap:1rem; align-items:center; justify-self:center}
@media (max-width:780px){
  .brand-left{ width:40px; height:40px; }
}


.site-title{margin:0;justify-self:end;font-family:"Cinzel", serif;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold)}
.menu{display:flex;gap:1rem;align-items:center;justify-self:center}
.menu-link{font-family:"Poiret One", cursive;letter-spacing:1px;text-transform:uppercase;text-decoration:none;color:var(--ink);opacity:.9;padding:.35rem .6rem;border:1px solid transparent}
.menu-link:hover,.menu-link.is-active{border-color:var(--gold);color:var(--gold)}
.skip{position:absolute;left:-9999px;top:auto}
.skip:focus{left:1rem;top:1rem;background:#000;color:#fff;padding:.4rem .6rem}

/* Center text in the homepage cards */
.deco-card {
  text-align: center;
}


/* --- Cards with Deco corners --- */
.deco-card{position:relative;margin: clamp(16px, 3vw, 28px) 0; padding:clamp(18px, 3.2vw, 36px);
  background:linear-gradient(180deg, rgba(91,18,26,.22), rgba(17,12,17,.72)),
             radial-gradient(1000px 600px at 110% -10%, rgba(203,161,53,.09), transparent 60%),
             #0e0c0f;
  border:1.5px solid var(--gold); box-shadow:0 10px 28px rgba(0,0,0,.45)
}
.deco-card.alt{background:linear-gradient(180deg, rgba(17,12,17,.8), rgba(91,18,26,.16)), #0e0c0f}

/* Corner ornaments (5 ribs) */
.corner{position:absolute;
  width:54px;
  height:54px;
  pointer-events:none;
  opacity:.95;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54'><g fill='none' stroke='%23cba135' stroke-width='2'><path d='M2 8 V2 H8'/><path d='M2 20 V2 H20'/><path d='M2 32 V2 H32'/><path d='M2 44 V2 H44'/><path d='M2 52 V2 H52'/></g></svg>");
  background-repeat:no-repeat;
  background-size:100% 100%;}
.tl{top:-1px;left:-1px}
.tr{top:-1px;right:-1px;transform:scaleX(-1)}
.bl{bottom:-1px;left:-1px;transform:scaleY(-1)}
.br{bottom:-1px;right:-1px;transform:scale(-1)}


/* Invitation header styling */
.invite{ text-align:center; margin: .5rem 0 1.2rem }
.invite.small{ margin:.25rem 0 1rem }
.invite-topline{font-family:"Poiret One", cursive; text-transform:uppercase; letter-spacing:3px; color:var(--gold); opacity:.9}
.invite-title{font-family:"Cinzel", serif; font-weight:600; letter-spacing:2px; text-transform:uppercase; margin:.25rem 0 .4rem}
.invite-sub{font-style:italic; opacity:.85}

/* Post list */
.post-list{list-style:none;margin:0;padding:0}
.post-link{display:flex;align-items:baseline;justify-content:space-between;gap:1rem; padding:.6rem .2rem; border-bottom:1px dashed rgba(203,161,53,.28); text-decoration:none; color:var(--ink)}
.post-link:hover .post-title{color:var(--gold)}
.post-title{font-family:"Cormorant Garamond", serif; font-weight:600}
.post-date{font-size:.95rem; opacity:.8}

.post-excerpt .post-title,
.post-excerpt p {text-align: center;}

/* Divider with centered dots */
.deco-divider{
  --w: 2px;
  position:relative;
  height:18px;
  margin: 18px 0;
  background:
    linear-gradient(90deg, transparent, var(--gold), transparent) center / 100% var(--w) no-repeat;
}
.deco-divider::after{
  content:"• • •";
  display:block;
  text-align:center;
  color:var(--gold);
  font-family:"Cinzel", serif;
  font-size:1.15rem;
  margin-top:6px;
  letter-spacing:0.5rem;
}

/* Buttons */
.btn{display:inline-block; font-family:"Poiret One", cursive; text-transform:uppercase; letter-spacing:2px; text-decoration:none; padding:.55rem .9rem; border:1.5px solid var(--gold); color:var(--ink)}
.btn:hover{background:rgba(203,161,53,.08); color:var(--gold)}
.btn.ghost{border-color:rgba(203,161,53,.6); opacity:.9}
.btn.tiny{font-size:.85rem; padding:.35rem .6rem}

.cta-row {
  display: flex; 
  gap: .6rem;
  flex-wrap: wrap; 
  justify-content: center;
  /* ✅ centers the buttons */}

/* 🔹 On smaller screens, stack buttons vertically but still center them */
@media (max-width: 600px) {
  .cta-row { flex-direction: column; align-items: center; /* keeps them centered */}
}


/* Footer */
.site-foot{border-top:2px solid var(--gold); background:linear-gradient(180deg, rgba(0,0,0,.8), rgba(59,13,18,.25)), #000}
.foot-grid{display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:center}
.foot-title{font-family:"Cinzel", serif; color:var(--gold); letter-spacing:2px; text-transform:uppercase}
.foot-sub{opacity:.8}
.foot-right{display:flex; align-items:center; gap:.6rem}
.foot-link{color:var(--ink); text-decoration:none}
.foot-link:hover{color:var(--gold)}

/* Links */
a{color:#e9d29a}
a:hover{color:var(--gold)}

/* Misc */
.colophon{margin:.4rem 0 0 1.2rem}

/* Responsive tweak */
@media (max-width:780px){
  .nav .wrap{grid-template-columns: 1fr auto; gap:.6rem}
  .brand-left{display:none}
  .site-title{font-size:1.02rem; letter-spacing:1.6px}
  .menu{justify-self:start; gap:.4rem}
}
/* --- Library dropdown --- */
.dropdown{position:relative}
.dropdown-toggle{cursor:pointer}
.dropdown-menu{
  position:absolute; top:100%; left:0;
  min-width: 220px;
  display:none; z-index:20;
  background:rgba(10,10,12,.95);
  border:1.5px solid var(--gold);
  box-shadow:0 10px 28px rgba(0,0,0,.45);
  padding:.35rem;
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu{display:block}

.dropdown-item{
  display:block; text-decoration:none;
  padding:.45rem .6rem; border:1px solid transparent;
  font-family:"Poiret One", cursive; text-transform:uppercase; letter-spacing:1px;
  color:var(--ink); opacity:.95;
}
.dropdown-item:hover{border-color:var(--gold); color:var(--gold)}

/* Keep the site title from hyphenating or breaking weirdly */
/* Prevent auto hyphenation / word breaking on the site title */
.site-title {
  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  word-break: keep-all;
  white-space: nowrap; /* keep title on one line */
}
@media (min-width: 1px){
  .site-title{ letter-spacing: 2.2px; } /* tiny reduction can help some renderers */
}
@media (max-width:780px){
  .nav .wrap{
    grid-template-columns: auto 1fr auto; /* logo | menu | title */
    align-items:center;
    gap:.4rem;
  }
  .menu{
    justify-self:start;
    flex-wrap:wrap;   /* let links wrap instead of pushing the title */
    gap:.6rem;
  }
  .site-title{
    font-size:1rem;
    letter-spacing:1.6px;
    white-space:nowrap;
  }
  .post-body img,
.deco-card img,
img {
  max-width: 100%;
  height: auto;
  display: block;
}
}