/* Grimoire Aesthetic */
:root{
  --ink:#1a120b;
  --gold:#d4af37;
  --parchment:#efe3c6;
  --parchment-deep:#e4d2a7;
  --sepia:#7d5a4f;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Garamond", "Times New Roman", serif;
  color: var(--ink);
  background: radial-gradient(ellipse at center, var(--parchment) 0%, var(--parchment-deep) 70%) fixed;
  line-height:1.65;
  scroll-behavior:smooth;
}
/* Ornate border like a book frame */
.frame{
  position:relative;
  min-height:100vh;
  padding:2rem;
}
.frame:before, .frame:after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    /* inner thin line */
    linear-gradient(var(--ink),var(--ink)) top left/100% 2px no-repeat,
    linear-gradient(var(--ink),var(--ink)) bottom left/100% 2px no-repeat,
    linear-gradient(var(--ink),var(--ink)) top left/2px 100% no-repeat,
    linear-gradient(var(--ink),var(--ink)) top right/2px 100% no-repeat,
    /* gold filigree corners via gradients */
    radial-gradient(circle at 30px 30px, transparent 26px, var(--gold) 27px 29px, transparent 30px) top left/60px 60px no-repeat,
    radial-gradient(circle at calc(100% - 30px) 30px, transparent 26px, var(--gold) 27px 29px, transparent 30px) top right/60px 60px no-repeat,
    radial-gradient(circle at 30px calc(100% - 30px), transparent 26px, var(--gold) 27px 29px, transparent 30px) bottom left/60px 60px no-repeat,
    radial-gradient(circle at calc(100% - 30px) calc(100% - 30px), transparent 26px, var(--gold) 27px 29px, transparent 30px) bottom right/60px 60px no-repeat;
}
/* Subtle page grain */
.frame:after{
  mix-blend-mode:multiply;
  opacity:.25;
  background-image:
    radial-gradient(rgba(0,0,0,.07) 1px, transparent 1px);
  background-size:3px 3px;
}

/* Nav */
nav{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:1rem;
  padding:.6rem 1rem;
  background:rgba(239, 227, 198, .9);
  border-bottom:2px solid var(--sepia);
  backdrop-filter:saturate(120%) blur(2px);
}
nav img.logo{height:40px;width:auto}
nav a{
  text-decoration:none; color:var(--ink);
  font-weight:bold; letter-spacing:.5px;
  padding:.3rem .6rem; border-radius:6px;
}
nav a:hover{ background-color:rgba(212,175,55,.18) }

/* Hero */
.hero{
  display:grid; grid-template-columns:1fr; place-items:center; text-align:center;
  padding:3rem 1rem 2rem;
}
.hero .title{
  font-size:clamp(2rem, 6vw, 4rem);
  color:var(--ink);
  text-transform:uppercase;
  letter-spacing:2px;
}
.subtitle{font-style:italic; color:#4b3a2e}
.hero img{
  max-width:1024px; width:100%; border:4px double var(--sepia);
  box-shadow:0 10px 35px rgba(0,0,0,.25);
  border-radius:8px;
}

/* Sections */
section{max-width:1100px;margin:2rem auto;padding:0 1rem}
section h2{
  font-size:2rem; color:#3b2c22; margin:1.2rem 0 .6rem;
  border-bottom:2px solid var(--sepia); display:inline-block; padding-bottom:.2rem
}

/* Two-column about */
.about{
  display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center;
}
.about img{width:100%; border:3px solid var(--sepia); border-radius:6px; box-shadow:0 10px 25px rgba(0,0,0,.2)}

blockquote.incantation{
  margin:0; padding:1rem 1.2rem; background:rgba(125,90,79,.12);
  border-left:6px solid var(--sepia); font-style:italic
}

/* Offerings */
.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:1rem}
.card{
  background:rgba(255,255,255,.5);
  border:2px solid var(--sepia); border-radius:10px; padding:1rem;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.card img{width:100%; height:220px; object-fit:cover; border:2px solid var(--sepia); border-radius:6px; margin-bottom:.6rem}
.card h3{margin:.3rem 0 .4rem}
.card p{margin:0}

/* Gallery */
.gallery{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:1rem}
.gallery img{width:100%; border:3px double var(--sepia); border-radius:8px; box-shadow:0 10px 25px rgba(0,0,0,.2)}

/* Footer */
footer{
  text-align:center; padding:2rem 1rem; margin-top:3rem;
  border-top:2px solid var(--sepia);
  color:#5b473b
}
.small{font-size:.95rem}

.button{
  display:inline-block; padding:.6rem 1rem; border:2px solid var(--ink);
  text-decoration:none; color:var(--ink); border-radius:8px;
}
.button:hover{ background:rgba(212,175,55,.2) }