/* =========================================================
   Society for the Studies of Comparative Liturgies
   Shared stylesheet — clean, traditional, dignified
   ========================================================= */

:root{
  --bg:      #FAF7F0;   /* warm ivory page */
  --surface: #FFFFFF;
  --ink:     #232019;   /* body text */
  --lapis:   #14263F;   /* headings, nav, footer field */
  --lapis-2: #1E3A5C;
  --gold:    #9E7C2E;   /* rules, accents */
  --gold-lt: #C9A961;
  --muted:   #6A6252;
  --line:    #E4DBC7;   /* hairlines on ivory */
  --line-2:  rgba(201,169,97,.28);
  --max:     1040px;
  --measure: 720px;
}

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"EB Garamond", Georgia, "Times New Roman", serif;
  font-size:19px;
  line-height:1.62;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

.wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; }
.narrow{ max-width:var(--measure); margin-left:auto; margin-right:auto; }

a{ color:var(--lapis-2); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }

img{ max-width:100%; height:auto; display:block; }

/* ---------- Header ---------- */
.site-header{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  padding:26px 0 0;
  text-align:center;
}
.brand{ display:inline-flex; flex-direction:column; align-items:center; gap:10px; }
.brand-logo{
  max-height:78px; width:auto; max-width:300px;
  object-fit:contain;
}
.wordmark{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-weight:600;
  font-size:27px;
  letter-spacing:.02em;
  color:var(--lapis);
  line-height:1.15;
  margin:0;
  max-width:34ch;
}
.tagline{
  font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); margin:8px 0 0;
}

/* ---------- Nav ---------- */
.nav{
  margin-top:20px;
  border-top:1px solid var(--line);
}
.nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center;
}
.nav a{
  display:block;
  padding:15px 20px;
  font-size:14px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); text-decoration:none;
  border-bottom:2px solid transparent;
}
.nav a:hover{ color:var(--lapis); text-decoration:none; }
.nav a.active{ color:var(--lapis); border-bottom-color:var(--gold); }

/* ---------- Hero / page banner ---------- */
.hero{
  background:var(--lapis);
  background-image:
    linear-gradient(rgba(20,38,63,.74), rgba(20,38,63,.86)),
    url("https://static.wixstatic.com/media/fc7570_0b789d3f7dc44a528460881076f55941~mv2.jpg");
  background-size:cover; background-position:center;
  color:#F3EAD3;
  text-align:center;
  padding:74px 24px 66px;
}
.hero h1{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-weight:600; font-style:normal;
  font-size:clamp(30px, 5vw, 46px);
  line-height:1.16; margin:0 auto; max-width:20ch;
  color:#F6EFDB;
}
.hero p.lede{
  font-size:20px; font-style:italic; color:#E4D6B4;
  max-width:60ch; margin:20px auto 0;
}

.page-banner{
  background:var(--lapis);
  color:#F3EAD3; text-align:center;
  padding:52px 24px 46px;
}
.page-banner h1{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-weight:600; font-size:clamp(28px,4.4vw,40px);
  margin:0; color:#F6EFDB; letter-spacing:.01em;
}
.page-banner p{
  color:#E4D6B4; font-style:italic; max-width:64ch;
  margin:16px auto 0; font-size:18px;
}

/* ---------- Sections ---------- */
main{ padding:56px 0 24px; }
section{ margin:0 0 46px; }
.section-title{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-weight:600; color:var(--lapis);
  font-size:29px; line-height:1.2; margin:0 0 14px;
}
.eyebrow{
  font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold); margin:0 0 10px;
}
p{ margin:0 0 16px; }
.lead-para{ font-size:20px; }

/* twin-cross divider (Latin — Byzantine): the signature mark */
.crux{ text-align:center; margin:40px 0; }
.crux svg{ display:inline-block; }

/* ---------- Events list ---------- */
.events{ list-style:none; margin:0; padding:0; }
.events li{
  display:flex; align-items:baseline; gap:16px;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.events li:first-child{ border-top:1px solid var(--line); }
.event-date{
  flex:0 0 92px; font-size:13px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold); padding-top:2px;
}
.event-title{ font-size:19px; color:var(--ink); }
.empty-note{
  text-align:center; color:var(--muted); font-style:italic;
  font-size:20px; padding:26px 0;
}

/* ---------- Cards / donate ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:2px;
  padding:26px 28px;
  margin:0 0 22px;
}
.card h3{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-weight:600; color:var(--lapis); font-size:22px; margin:0 0 14px;
}
.bank{ margin:0; }
.bank dt{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:12px 0 2px;
}
.bank dd{
  margin:0; font-size:19px; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.bank dd.mono{ font-family:"Courier New", monospace; letter-spacing:.02em; }

/* ---------- CTA band ---------- */
.cta-band{
  background:#F1E9D6;
  border:1px solid var(--line-2);
  border-radius:2px;
  text-align:center;
  padding:40px 28px;
}
.cta-band h2{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-weight:600; color:var(--lapis); font-size:28px; margin:0 0 10px;
}
.cta-band p{ max-width:52ch; margin:0 auto 22px; color:var(--ink); }
.btn{
  display:inline-block;
  background:var(--lapis); color:#F6EFDB;
  font-size:14px; letter-spacing:.16em; text-transform:uppercase;
  padding:14px 30px; border-radius:2px;
  border:1px solid var(--lapis);
}
.btn:hover{ background:var(--lapis-2); color:#fff; text-decoration:none; }
.btn-ghost{
  background:transparent; color:var(--lapis); border-color:var(--gold);
}
.btn-ghost:hover{ background:var(--lapis); color:#F6EFDB; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; gap:28px; grid-template-columns:1fr 1fr; }
@media (max-width:640px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-block h3{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-weight:600; color:var(--lapis); font-size:22px; margin:0 0 8px;
}
.contact-block .label{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:12px 0 2px;
}

/* ---------- Forms ---------- */
.form-field{ margin:0 0 16px; text-align:left; }
.form-field label{
  display:block; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin:0 0 6px;
}
.form-field input,
.form-field textarea{
  width:100%; font-family:inherit; font-size:17px;
  padding:11px 13px; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:2px;
}
.form-field textarea{ min-height:120px; resize:vertical; }
.form-field input:focus,
.form-field textarea:focus{
  outline:2px solid var(--gold-lt); outline-offset:1px; border-color:var(--gold);
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--lapis);
  color:#CDBB8E;
  margin-top:60px;
  padding:48px 0 30px;
}
.site-footer .wrap{ text-align:center; }
.footer-name{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:22px; color:#F0E6CB; margin:0 0 6px;
}
.footer-addr{ font-size:16px; color:#B7A67C; margin:0 0 18px; }
.socials{ display:flex; gap:16px; justify-content:center; margin:0 0 22px; }
.socials a{ color:#B7A67C; display:inline-flex; }
.socials a:hover{ color:#F0E6CB; }
.socials svg{ width:22px; height:22px; }
.footer-form{
  max-width:440px; margin:8px auto 22px; text-align:left;
}
.footer-form .eyebrow{ color:var(--gold-lt); text-align:center; }
.footer-form input,
.footer-form textarea{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(201,169,97,.3);
  color:#F0E6CB;
}
.footer-form input::placeholder,
.footer-form textarea::placeholder{ color:#9C8C64; }
.footer-form .btn{ width:100%; cursor:pointer; }
.copyright{
  font-size:13px; color:#8C7C57; letter-spacing:.04em;
  border-top:1px solid rgba(201,169,97,.2);
  padding-top:20px; margin-top:8px;
}

/* ---------- A11y / motion ---------- */
:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; } }

/* ---------- Responsive ---------- */
@media (max-width:560px){
  body{ font-size:18px; }
  .nav a{ padding:12px 13px; letter-spacing:.1em; }
  .wordmark{ font-size:23px; }
}