/* ============================================================
   1927 — A Church of the City of Des Moines
   Design tokens
   ============================================================ */
:root{
  --ink: #221E1C;
  --ink-soft: #3a332f;
  --linen: #F5F1E8;
  --linen-dim: #EAE3D3;
  --linen-line: rgba(34,30,28,0.14);
  --crimson: #821A27;
  --crimson-deep: #4d0f18;
  --crimson-bright: #9c2230;
  --brass: #B08D57;
  --brass-dim: rgba(176,141,87,0.35);

  --display: "Cormorant Garamond", "Times New Roman", serif;
  --body: "Libre Franklin", -apple-system, sans-serif;
  --label: "IBM Plex Sans Condensed", sans-serif;

  --max: 1240px;
  --pad: clamp(24px, 5vw, 88px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--linen);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit;}

/* grain texture, applied over dark sections */
.grain{position:relative;}
.grain::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.35;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ---------- type helpers ---------- */
.eyebrow{
  font-family:var(--label);
  font-size:12.5px;
  letter-spacing:.22em;
  text-transform:lowercase;
  color:var(--brass);
  font-weight:500;
}
.eyebrow.on-dark{color:#d8bd8f;}
h1,h2,h3,.display{
  font-family:var(--display);
  font-weight:500;
  line-height:1.05;
  margin:0;
  letter-spacing:-.01em;
}
em, .accent{
  font-style:italic;
  color:var(--crimson);
}
.on-dark em{color:#e0a2a8;}

/* ---------- layout ---------- */
.wrap{max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad);}
section{position:relative;}
.section-pad{padding:120px 0;}
@media (max-width:700px){ .section-pad{padding:72px 0;} }

.hairline{border:none; border-top:1px solid var(--linen-line); margin:0;}
.hairline.on-dark{border-top-color:rgba(245,241,232,.18);}

/* ---------- nav ---------- */
header.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--pad);
  transition:background .4s ease, padding .4s ease, box-shadow .4s ease;
}
header.site-nav.scrolled{
  background:rgba(245,241,232,.92);
  backdrop-filter:blur(6px);
  padding:14px var(--pad);
  box-shadow:0 1px 0 var(--linen-line);
}
.brand{
  font-family:var(--display);
  text-decoration:none;
  color:var(--ink);
  display:flex; align-items:center; gap:14px;
}
.brand .num{
  color:var(--crimson);
  font-size:22px;
  font-weight:600;
  letter-spacing:.03em;
  white-space:nowrap;
}
.brand .brand-sub{
  font-family:var(--label);
  font-size:10.5px;
  letter-spacing:.06em;
  line-height:1.35;
  text-transform:uppercase;
  color:var(--ink);
  opacity:.75;
  border-left:1px solid var(--linen-line);
  padding-left:14px;
}
.brand .brand-seal{
  height:42px; width:auto; display:block;
}
.brand .brand-numeral{
  height:34px;
}
.site-nav.on-dark .brand, .site-nav.on-dark a{color:var(--linen);}
.site-nav.on-dark .brand .brand-sub{border-left-color:rgba(245,241,232,.3); color:var(--linen);}

.footer-wordmark{
  height:64px; width:auto; margin-bottom:26px;
  opacity:.92;
}

.estd{
  font-family:var(--label);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brass);
  margin-top:18px;
  display:block;
}
.estd em{
  font-family:var(--display);
  font-style:italic;
  color:var(--brass);
  text-transform:none;
  letter-spacing:0;
  font-size:13px;
}

nav.links{display:flex; align-items:center; gap:34px;}
nav.links a{
  font-family:var(--label);
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  opacity:.8;
  transition:opacity .2s;
}
nav.links a:hover{opacity:1;}
.cta-pill{
  font-family:var(--label);
  font-size:12.5px;
  letter-spacing:.09em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--linen) !important;
  background:var(--crimson);
  padding:11px 22px;
  border-radius:2px;
  opacity:1 !important;
  transition:background .2s;
}
.cta-pill:hover{background:var(--crimson-deep);}

.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:6px;}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--ink); margin:5px 0;}

@media (max-width:640px){
  .brand .brand-sub{display:none;}
}
@media (max-width:880px){
  nav.links{
    position:fixed; inset:0 0 0 auto; width:78vw; max-width:340px;
    background:var(--ink); color:var(--linen);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:28px;
    padding:0 44px;
    transform:translateX(100%); transition:transform .4s ease;
  }
  nav.links.open{transform:translateX(0);}
  nav.links a{color:var(--linen); opacity:.85; font-size:15px;}
  .nav-toggle{display:block; z-index:110;}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--label);
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  padding:15px 30px;
  border:1px solid var(--ink);
  color:var(--ink);
  transition:all .25s;
}
.btn:hover{background:var(--ink); color:var(--linen);}
.btn.solid{background:var(--crimson); border-color:var(--crimson); color:var(--linen);}
.btn.solid:hover{background:var(--crimson-deep); border-color:var(--crimson-deep);}
.btn.on-dark{border-color:var(--linen); color:var(--linen);}
.btn.on-dark:hover{background:var(--linen); color:var(--ink);}

/* ---------- hero ---------- */
.hero{
  min-height:100vh;
  display:flex; align-items:flex-end;
  background-size:cover; background-position:center;
  position:relative; color:var(--linen);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,12,11,.15) 0%, rgba(15,12,11,.35) 55%, rgba(15,12,11,.88) 100%);
}
.hero-inner{position:relative; z-index:2; padding-bottom:96px; width:100%;}
.hero h1{font-size:clamp(40px,6.4vw,86px); color:var(--linen);}
.hero .eyebrow{margin-bottom:18px; display:block;}
.hero .sub{max-width:560px; margin-top:26px; font-size:18px; color:rgba(245,241,232,.86);}
.hero .actions{margin-top:38px; display:flex; gap:16px; flex-wrap:wrap;}

/* ---------- numeral marker (signature element) ---------- */
.numeral{
  font-family:var(--display);
  font-style:italic;
  font-weight:600;
  color:var(--crimson);
  line-height:.8;
  font-size:clamp(70px,10vw,150px);
  opacity:.92;
}
.numeral.ghost{
  color:transparent;
  -webkit-text-stroke:1.5px rgba(130,26,39,.5);
}
.numeral.on-dark.ghost{-webkit-text-stroke:1.5px rgba(245,241,232,.4);}

/* ---------- movement / feature rows ---------- */
.movement{
  display:grid; grid-template-columns:180px 1fr; gap:32px;
  padding:44px 0;
  align-items:start;
}
.movement + .movement{border-top:1px solid var(--linen-line);}
.movement h3{font-size:30px; margin-bottom:10px;}
.movement p{max-width:52ch; color:var(--ink-soft);}
@media (max-width:700px){
  .movement{grid-template-columns:1fr; gap:6px;}
  .numeral{font-size:56px;}
}

/* ---------- liturgy list (order of service) ---------- */
.liturgy-item{
  display:grid; grid-template-columns:110px 1fr; gap:28px;
  padding:36px 0;
  border-top:1px solid rgba(245,241,232,.15);
}
.liturgy-item:first-child{border-top:none;}
.liturgy-item .roman{font-family:var(--display); font-style:italic; font-size:34px; color:var(--brass);}
.liturgy-item h4{font-family:var(--display); font-size:26px; margin:0 0 10px; color:var(--linen);}
.liturgy-item p{color:rgba(245,241,232,.78); max-width:56ch;}
@media (max-width:700px){ .liturgy-item{grid-template-columns:50px 1fr; gap:16px;} }

/* ---------- image band / full bleed ---------- */
.band{
  background-size:cover; background-position:center;
  position:relative; color:var(--linen);
}
.band .scrim{position:absolute; inset:0; background:rgba(20,14,13,.58);}
.band .band-inner{position:relative; z-index:2;}

/* ---------- pull quote ---------- */
.pullquote{
  font-family:var(--display);
  font-size:clamp(26px,3.4vw,42px);
  line-height:1.35;
  max-width:820px;
}
.pullquote cite{
  display:block; font-family:var(--label); font-style:normal;
  font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brass); margin-top:22px;
}

/* ---------- cards ---------- */
.card{
  background:var(--linen-dim);
  border:1px solid var(--linen-line);
  padding:38px;
}
.tag{
  display:inline-block; font-family:var(--label); font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--crimson);
  border:1px solid var(--crimson); padding:5px 12px; margin-bottom:16px;
}

/* ---------- footer ---------- */
footer{
  background:var(--ink); color:var(--linen);
  padding:96px 0 40px;
}
.footer-tag{font-family:var(--display); font-style:italic; font-size:26px; color:var(--linen); max-width:520px;}
.footer-cols{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-top:60px;}
.footer-cols h5{
  font-family:var(--label); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brass); margin:0 0 18px;
}
.footer-cols a, .footer-cols p{
  display:block; color:rgba(245,241,232,.8); text-decoration:none; margin-bottom:10px; font-size:14.5px;
}
.footer-cols a:hover{color:var(--linen);}
.footer-bottom{
  margin-top:70px; padding-top:26px; border-top:1px solid rgba(245,241,232,.14);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-family:var(--label); font-size:12px; letter-spacing:.04em; color:rgba(245,241,232,.55);
}
@media (max-width:800px){ .footer-cols{grid-template-columns:1fr 1fr;} }

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s ease;}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}

/* ---------- grid utilities ---------- */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:64px;}
@media (max-width:800px){ .grid-2{grid-template-columns:1fr; gap:36px;} }

.small-caps-label{
  font-family:var(--label); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass);
}

/* skip link */
.skip-link{position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--linen); padding:12px 18px; z-index:200;}
.skip-link:focus{left:12px; top:12px;}
:focus-visible{outline:2px solid var(--crimson); outline-offset:3px;}