/* ============================================================
   Illuminated Psalms — independent static storefront
   Parchment / ink / gold-leaf design system.
   ============================================================ */
:root {
  --bg: #FBF6EA; --surface: #FFFFFF; --ink: #1C1917; --ink-soft: #57534E;
  --primary: #7A2E1E; --primary-2: #5A2417; --gold: #A1741E; --gold-soft: #C9A24B;
  --lapis: #1E3A5F; --border: #E7DCC4; --muted: #F3EAD6;
  --font-display: 'Cinzel', Georgia, serif;
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Libre Baskerville', Georgia, serif;
  --page: 1200px; --pad: clamp(1.25rem, 4vw, 3.5rem); --radius: 6px; --radius-lg: 10px;
  --shadow-sm: 0 1px 8px rgba(28,25,23,.06); --shadow-md: 0 8px 30px rgba(28,25,23,.10);
  --shadow-lg: 0 24px 60px rgba(28,25,23,.16); --t: 220ms cubic-bezier(.2,.7,.3,1);
}
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body);
  font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(rgba(161,116,30,.035) 1px, transparent 1px); background-size: 22px 22px;
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important} }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4 { font-family: var(--font-heading); font-weight: 600; line-height: 1.12; margin: 0 0 .4em; }
h1 { font-size: clamp(2.4rem,6vw,4.4rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.9rem,4vw,2.9rem); }
h3 { font-size: clamp(1.3rem,2.4vw,1.65rem); }
p { margin: 0 0 1rem; }

.wrap { max-width: var(--page); margin: 0 auto; padding-inline: var(--pad); }
.section { padding-block: clamp(3rem,7vw,6rem); }
.center { text-align: center; }
.measure { max-width: 60ch; margin-inline: auto; }
.eyebrow { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .26em; font-size: .72rem; font-weight: 600; color: var(--gold); margin: 0 0 1rem; }
.section-intro { color: var(--ink-soft); font-size: 1.08rem; }
.rule { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1.25rem auto; max-width: 320px; color: var(--gold); }
.rule::before,.rule::after { content:""; height:1px; flex:1; background: linear-gradient(to right, transparent, var(--gold-soft)); }
.rule svg { width: 20px; height: 20px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--font-display); font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: .95rem 2rem; border-radius: var(--radius); border: 1px solid transparent; transition: var(--t); background: var(--primary); color: #FBF6EA; cursor: pointer; }
.btn:hover { background: var(--primary-2); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn--gold { background: var(--gold); color: #1C1917; }
.btn--gold:hover { background: var(--gold-soft); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--bg); }
.btn--lg { padding: 1.1rem 2.6rem; font-size: .85rem; }
.btn--block { width: 100%; }
.btn.is-disabled { background: var(--muted); color: var(--ink-soft); cursor: not-allowed; box-shadow: none; transform: none; }

/* Announcement + header */
.announce { background: var(--primary); color: #FBF6EA; text-align: center; font-family: var(--font-display); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; padding: .55rem 1rem; }
.header { position: sticky; top: 0; z-index: 50; background: rgba(251,246,234,.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.header__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 74px; }
.logo { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: .04em; display: inline-flex; align-items: center; gap: .55rem; }
.logo svg { width: 22px; height: 22px; color: var(--gold); }
.nav { display: none; gap: 2rem; }
.nav a { font-family: var(--font-heading); font-size: 1.15rem; position: relative; padding: .2rem 0; }
.nav a::after { content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background: var(--gold); transition: var(--t); }
.nav a:hover::after { width: 100%; }
.menu-btn { background: none; border: 0; color: var(--ink); display: inline-flex; padding: .25rem; cursor: pointer; }
.menu-btn svg { width: 26px; height: 26px; }
@media (min-width: 900px){ .nav{display:flex} .menu-btn{display:none} }
.mobile { position: fixed; inset: 0; z-index: 60; visibility: hidden; }
.mobile.open { visibility: visible; }
.mobile__bg { position: absolute; inset: 0; background: rgba(28,25,23,.45); opacity: 0; transition: var(--t); }
.mobile.open .mobile__bg { opacity: 1; }
.mobile__panel { position: absolute; top:0; left:0; bottom:0; width: min(82vw,340px); background: var(--bg); padding: 1.5rem; transform: translateX(-100%); transition: var(--t); box-shadow: var(--shadow-lg); }
.mobile.open .mobile__panel { transform: none; }
.mobile a { display: block; font-family: var(--font-heading); font-size: 1.5rem; padding: .6rem 0; border-bottom: 1px solid var(--border); }

/* Hero */
.hero__inner { display: grid; gap: clamp(2rem,5vw,4rem); align-items: center; padding-block: clamp(3rem,7vw,6rem); }
.hero__badge { display:inline-flex; align-items:center; gap:.5rem; font-family: var(--font-display); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color: var(--gold); margin-bottom: 1.25rem; }
.hero__badge svg { width: 16px; height: 16px; }
.hero__lead { font-size: 1.15rem; color: var(--ink-soft); max-width: 46ch; margin-bottom: 2rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.hero__media { position: relative; }
.hero__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.hero__media::after { content:""; position:absolute; inset:-14px; border:1px solid var(--gold-soft); border-radius: var(--radius-lg); opacity:.5; pointer-events:none; }
.link-quiet { color: var(--primary); border-bottom: 1px solid var(--gold-soft); transition: var(--t); }
.link-quiet:hover { color: var(--gold); }
@media (min-width: 760px){ .hero__inner{ grid-template-columns: 1.05fr 1fr; } }

/* Value props */
.props { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px){ .props{ grid-template-columns: repeat(3,1fr); } }
.prop { text-align: center; padding: 2rem 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: var(--t); }
.prop:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.prop__icon { width: 54px; height: 54px; margin: 0 auto 1.1rem; color: var(--gold); display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold-soft); }
.prop__icon svg { width: 26px; height: 26px; }
.prop p { color: var(--ink-soft); margin: 0; }

/* Products */
.grid { display: grid; gap: clamp(1.25rem,3vw,2rem); grid-template-columns: repeat(2,1fr); }
@media (min-width: 760px){ .grid{ grid-template-columns: repeat(3,1fr); } }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: var(--t); }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--gold-soft); }
.card__media { aspect-ratio: 4/5; overflow: hidden; background: var(--muted); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.card:hover .card__media img { transform: scale(1.05); }
.card__body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.card__title { font-family: var(--font-heading); font-size: 1.3rem; line-height: 1.15; }
.card__desc { color: var(--ink-soft); font-size: .9rem; flex: 1; }
.card__price { font-family: var(--font-display); color: var(--primary); font-size: 1rem; letter-spacing: .03em; }
.card__cta { margin-top: .5rem; }

/* Split story */
.split { display: grid; gap: clamp(2rem,5vw,4rem); align-items: center; }
@media (min-width: 760px){ .split{ grid-template-columns: 1fr 1fr; } }
.split__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.dropcap::first-letter { font-family: var(--font-display); float: left; font-size: 3.6rem; line-height: .8; padding: .35rem .55rem .1rem 0; color: var(--primary); font-weight: 700; }

/* FAQ */
.faq { max-width: 760px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__q { width: 100%; background: none; border: 0; text-align: left; padding: 1.25rem 0; font-family: var(--font-heading); font-size: 1.3rem; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 1rem; cursor: pointer; }
.faq__q svg { width: 20px; height: 20px; flex: none; transition: var(--t); color: var(--gold); }
.faq__item.open .faq__q svg { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height var(--t); color: var(--ink-soft); }
.faq__a-inner { padding-bottom: 1.25rem; }

/* Newsletter band */
.band { background: var(--lapis); color: #F4EEDD; text-align: center; }
.band .eyebrow { color: var(--gold-soft); }
.band h2 { color: #F4EEDD; }

/* Footer */
.footer { background: var(--ink); color: #D9CFBC; padding-block: 3rem 1.5rem; }
.footer__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 760px){ .footer__grid{ grid-template-columns: 2fr 1fr 1fr; } }
.footer h4 { font-family: var(--font-display); color: var(--gold-soft); font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 1rem; }
.footer a { color: #D9CFBC; transition: var(--t); }
.footer a:hover { color: var(--gold-soft); }
.footer__brand { font-family: var(--font-display); font-size: 1.35rem; color: #F4EEDD; }
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2.5rem; padding-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .8rem; color: #9C9282; }

.note { background: #FCF3E0; border: 1px dashed var(--gold-soft); color: var(--primary-2); padding: .75rem 1rem; border-radius: var(--radius); font-size: .85rem; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }