/* ============================================================
   REFORMATION PRESBYTERIAN CHURCH — shared design system
   Palette sampled from the church mark:
   ink #492B27 · gold #A97C50 · sunburst #E6C144 · oxblood accent #6B1E22
   ============================================================ */

:root{
  --ink:#492B27;        /* espresso brown — primary text */
  --ink-90:#553931;
  --ink-70:#6f4f45;
  --ink-50:#8d7066;
  --gold:#A97C50;
  --gold-deep:#8A6236;
  --gold-soft:#C7A06A;
  --sun:#E6C144;
  --sun-deep:#D2A92E;
  --ox:#6B1E22;         /* ecclesiastical red / oxblood accent */
  --ox-2:#8A282C;
  --ox-deep:#511317;

  --parch:#F1E7D4;      /* parchment */
  --parch-2:#EADDC4;
  --paper:#FBF6EC;      /* paper white */
  --cream:#FAF3E6;
  --ivory:#FDFBF5;

  --line:rgba(73,43,39,.18);
  --line-soft:rgba(73,43,39,.10);
  --line-strong:rgba(73,43,39,.34);

  --serif:'Cormorant Garamond', Georgia, serif;
  --serif-text:'EB Garamond', Georgia, serif;
  --sans:'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  --maxw:1240px;
  --shadow-soft:0 24px 60px -28px rgba(73,43,39,.4);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.6;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

/* ---- paper / engraving textures ---- */
.tex-parch{
  background-color:var(--parch);
  background-image:
    radial-gradient(120% 80% at 50% 0%, rgba(255,250,238,.55), transparent 60%),
    radial-gradient(140% 120% at 50% 120%, rgba(73,43,39,.07), transparent 55%);
}
.engrave{
  background-image:
    repeating-linear-gradient(45deg, rgba(73,43,39,.035) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(73,43,39,.025) 0 1px, transparent 1px 7px);
}

/* ---- type helpers ---- */
.eyebrow{
  font-family:var(--sans);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold-deep);
}
.eyebrow.ox{color:var(--ox);}
.serif{font-family:var(--serif);}
.italic{font-style:italic;}
.display{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.02;
  letter-spacing:-.005em;
}
.scripture{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  color:var(--ink-90);
}
.smallcaps{
  font-variant:small-caps;
  letter-spacing:.06em;
}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--sans);font-weight:600;font-size:.86rem;
  letter-spacing:.04em;
  padding:.85em 1.5em;border-radius:2px;cursor:pointer;
  border:1px solid transparent;
  transition:border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}
.btn-ox{background-color:var(--ox);color:#fff;}
.btn-ox:hover{background-color:var(--ox-deep);transform:translateY(-1px);}
.btn-outline{border-color:var(--line-strong);color:var(--ink);background-color:transparent;}
.btn-outline:hover{border-color:var(--ink);background-color:rgba(73,43,39,.04);}
.btn-gold{background-color:var(--gold);color:#fff;}
.btn-gold:hover{background-color:var(--gold-deep);}

/* hairline rule with center ornament */
.rule-orn{display:flex;align-items:center;gap:1rem;color:var(--gold);}
.rule-orn::before,.rule-orn::after{content:"";flex:1;height:1px;background:var(--line);}
.diamond{width:7px;height:7px;background:var(--gold);transform:rotate(45deg);}

/* ---- nav ---- */
.utility{
  background:var(--ox);color:#f4e6d8;font-size:.74rem;letter-spacing:.08em;
}
.utility .wrap{max-width:var(--maxw);margin:0 auto;padding:.5rem 28px;
  display:flex;justify-content:space-between;align-items:center;gap:.6rem 1.4rem;flex-wrap:wrap;}
.utility .wrap > span{white-space:nowrap;}
.utility a{color:#f4e6d8;border-bottom:1px solid rgba(255,255,255,.35);}
.utility .smallcaps{font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:.7rem;}

.nav{position:sticky;top:0;z-index:40;background:var(--paper);
  border-bottom:1px solid var(--line);backdrop-filter:blur(6px);}
.nav.on-parch{background:rgba(241,231,212,.92);}
.nav .wrap{max-width:var(--maxw);margin:0 auto;padding:.7rem 28px;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;}
.nav-brand{display:flex;align-items:center;gap:.7rem;}
.nav-brand img{height:46px;width:auto;}
.nav-links{display:flex;align-items:center;gap:1.7rem;list-style:none;margin:0;padding:0;}
.nav-links a{font-size:.82rem;font-weight:500;letter-spacing:.04em;color:var(--ink-90);
  padding:.3rem 0;position:relative;}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1.5px;
  background:var(--ox);transition:right .25s ease;}
.nav-links a:hover{color:var(--ink);}
.nav-links a:hover::after{right:0;}
.nav-links a[aria-current="page"]{color:var(--ink);}
.nav-links a[aria-current="page"]::after{right:0;}
.nav-actions{display:flex;align-items:center;gap:.9rem;}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;color:var(--ink);}
.nav .nav-mobile{display:none;}
.nav .nav-mobile.open{display:block;}

/* ---- layout ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:28px;padding-right:28px;}
section{position:relative;}

/* arched / classical image frame */
.arch{border-radius:48% 48% 6px 6px / 36% 36% 6px 6px;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-soft);}
.gilt{padding:10px;background:
   linear-gradient(135deg,var(--gold-soft),var(--gold-deep));}
.gilt > *{border-radius:inherit;}
.gilt.arch{aspect-ratio:4/5;}
.gilt.arch img{width:100%;height:100%;object-fit:cover;}
/* image placeholder when a reused photo fails to load */
.gilt.ph{position:relative;background:
   repeating-linear-gradient(45deg,var(--parch-2) 0 12px,var(--parch) 12px 24px);}
.gilt.ph::after{content:"WORSHIP PHOTO";position:absolute;inset:0;display:flex;
   align-items:center;justify-content:center;font-family:var(--sans);font-size:.7rem;
   letter-spacing:.28em;color:var(--ink-50);}

/* footer */
.foot{background:var(--ink);color:#e9dcc8;}
.foot a{color:#d8c6a9;}
.foot a:hover{color:#fff;}
.foot .wrap{padding-top:4rem;padding-bottom:2.5rem;}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.5rem;align-items:start;}
.foot-mark{width:132px;margin:0 0 1rem;}
.foot-logo{width:240px;max-width:80%;margin:0 0 1.3rem;}
.foot h5{font-family:var(--sans);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-soft);margin:0 0 1rem;}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem;font-size:.95rem;}
.foot .creedline{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:#e9dcc8;max-width:340px;line-height:1.4;}
.foot-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:3rem;padding-top:1.6rem;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.8rem;color:#b9a584;}

@media (max-width:880px){
  .foot-grid{grid-template-columns:1fr;gap:2rem;}
}

/* covenant flow shared bits */
.cov-num{font-family:var(--serif);font-weight:600;color:var(--ox);line-height:1;}

/* NOTE: this preview/capture environment freezes CSS animation time at 0,
   so entrance animations that start hidden would render invisible.
   Content is therefore always visible; .reveal is kept inert. */
.reveal{opacity:1;}

@media (max-width:880px){
  .nav-links,.nav-actions .btn{display:none;}
  .nav-toggle{display:block;}
}