/* Site-wide design layer, loaded last on every church page.
   Type: EB Garamond for headings, Figtree for text. Square-ish corners, hairline rules,
   solid header, maroon and cream. Page files keep their own layout rules; this file sets
   the shared look on top of them. */
:root{
  --serif:'EB Garamond',Georgia,'Times New Roman',serif; --sans:'Figtree',system-ui,-apple-system,sans-serif;
  --r:6px; --r-sm:4px;
}
body{font-size:16.5px;line-height:1.6;text-rendering:optimizeLegibility}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.005em}
h1 em,h2 em{font-style:normal;color:inherit}

/* small-caps label used above headings */
.eyebrow,.kicker,.label{display:block;font-family:var(--serif);font-size:16px;font-weight:500;font-variant:all-small-caps;letter-spacing:.09em;text-transform:none;color:var(--wine)}
.eyebrow::before{display:none}

/* buttons */
.btn{min-height:48px;padding:0 24px;border-radius:var(--r-sm);font-family:var(--sans);font-size:14.5px;font-weight:600;letter-spacing:.01em;transition:background .2s,color .2s,border-color .2s}
.btn:hover,.btn:hover svg{transform:none}
.btn-dark{background:var(--wine-fill);color:#FFFDF8}
.btn-dark:hover{background:#5E1420}
.btn-ghost{border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-gold{background:var(--wine-fill);color:#FFFDF8}
.chip{border-radius:var(--r-sm)}

/* header */
.site-header{padding:16px var(--pad);border-bottom:1px solid var(--line);background:var(--bg)}
.site-header::before{display:none}
.site-header.scrolled{padding-top:10px;padding-bottom:10px;box-shadow:0 1px 0 var(--line),0 12px 24px -22px rgba(40,10,14,.5)}
.brand{gap:14px}
.brand img{border-radius:50%;width:46px;height:46px}
.scrolled .brand img{width:40px;height:40px}
.brand b{font-family:var(--serif);font-size:24px;font-weight:500;letter-spacing:0}
.brand small{font-family:var(--sans);font-size:11px;letter-spacing:.12em}
.nav a{font-size:14.5px;font-weight:500;padding:12px 12px}
.nav a::after{left:12px;right:12px;bottom:4px;height:1px}
.nav .to-retreat{margin-left:8px;padding:8px 0 8px 14px;border:0;border-left:1px solid var(--line-2);border-radius:0;color:var(--wine);font-weight:600}
.nav .to-retreat:hover{background:none;color:var(--ink)}
.actions .donate{border-radius:var(--r-sm);background:var(--wine-fill);color:#FFFDF8;font-weight:600;padding:11px 20px}
.actions .donate:hover{transform:none;box-shadow:none;background:#5E1420}
.actions .donate[aria-current]{box-shadow:none;outline:1px solid var(--wine);outline-offset:3px}
.actions .live{border-radius:var(--r-sm);background:transparent;color:var(--ink);border:1px solid var(--line-2);font-weight:600;padding:10px 16px}
.actions .live:hover{border-color:var(--ink)}
.actions .live span{background:#C0392B}
.menu-btn{border-radius:var(--r-sm)}
@media (max-width:1180px){
  .nav{background:var(--bg);box-shadow:none;visibility:hidden;transition:transform .55s var(--glide),visibility 0s .55s}
  .menu-open .nav{box-shadow:-30px 0 60px -30px rgba(40,10,14,.35);visibility:visible;transition:transform .55s var(--glide)}
  .nav a{font-family:var(--serif);font-size:24px;font-weight:500;padding:14px 4px}
  .nav .to-retreat{margin:18px 0 0;padding:14px 4px;border-left:0;border-bottom:1px solid var(--line)}
}

/* page heads on inner pages */
.page-head{padding:clamp(56px,8vw,112px) 0 clamp(28px,4vw,48px);border-bottom:1px solid var(--line);margin-bottom:clamp(32px,4vw,56px)}
.page-head h1{font-size:clamp(48px,6.4vw,92px);font-weight:400;line-height:.98;letter-spacing:-.015em}
.page-head .lede{font-size:clamp(17px,1.4vw,19px);color:var(--ink-2)}
.section-head h2{font-weight:400}

/* surfaces */
.card,.way,.cat,.notice,.archive,.verse,.next,.player,.cal,.sel,.name,.photo,.visit-card,.patron,.stat-card,.share{border-radius:var(--r)}
.photo,.player{box-shadow:none}

/* footer */
footer{background:#3B0C14;color:#E9DCD0;padding:72px var(--pad) 36px}
:root[data-theme="dark"] footer{background:#12070A}
.foot .who img{border-radius:50%}
.foot .who b{font-family:var(--serif);font-weight:500;font-size:28px}
.foot .col h3{font-family:var(--serif);font-size:17px;font-variant:all-small-caps;letter-spacing:.1em;text-transform:none;font-weight:500;color:#E7C9A0}
.foot .col a{color:#E9DCD0}
.legal{border-top-color:rgba(233,220,208,.18);color:#C9B5AD}

/* motion: smooth, eased, never bouncy (assets/motion.js drives scrolling and the header) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
:root{--glide:cubic-bezier(.16,1,.3,1)}
.site-header{transition:transform .5s var(--glide),padding .4s var(--glide),box-shadow .4s}
.site-header.tucked{transform:translateY(-101%)}
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s var(--glide),transform 1.2s var(--glide)}
.reveal.in{opacity:1;transform:none}
.stagger>*,.reveal-stagger>*{opacity:0;transform:translateY(32px);transition:opacity .9s var(--glide),transform 1.1s var(--glide)}
.stagger.in>*,.reveal-stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(2){transition-delay:.09s}.stagger.in>*:nth-child(3){transition-delay:.18s}.stagger.in>*:nth-child(4){transition-delay:.27s}
/* photos unveil upward as they arrive */
.reveal img:not(.keep),.stagger .img img{clip-path:inset(18% 0 0 0);transform:scale(1.08);transition:clip-path 1.4s var(--glide),transform 1.8s var(--glide)}
.reveal.in img:not(.keep),.stagger.in .img img{clip-path:inset(0 0 0 0);transform:none}
/* headline lines slide up out of a mask */
.lines>span{display:block;overflow:hidden;padding:.04em .04em .3em 0;margin:-.04em -.04em -.3em 0}
.lines>span>span{display:block;transform:translateY(108%);animation:line-up 1.3s var(--glide) forwards}
.lines>span:nth-child(2)>span{animation-delay:.12s}.lines>span:nth-child(3)>span{animation-delay:.24s}
@keyframes line-up{to{transform:none}}
.rise{opacity:0;transform:translateY(18px);animation:rise 1.1s var(--glide) forwards}
.rise:nth-child(2){animation-delay:.15s}.rise:nth-child(3){animation-delay:.3s}.rise:nth-child(4){animation-delay:.45s}
.lightbox img{border-radius:var(--r-sm)}
.toast{border-radius:var(--r)}
.to-top{border-radius:var(--r-sm)}
@media (prefers-reduced-motion: reduce){
  .reveal,.stagger>*,.reveal-stagger>*,.rise{opacity:1!important;transform:none!important}
  .reveal img,.stagger .img img{clip-path:none!important;transform:none!important}
  .lines>span>span{transform:none!important}
  .site-header.tucked{transform:none}
}

/* phones: the name sits on two short lines instead of being cut off */
@media (max-width:560px){
  .brand{gap:10px}
  .brand img,.scrolled .brand img{width:36px;height:36px}
  .brand b{white-space:normal;overflow:visible;text-overflow:clip;font-size:18px;line-height:1;max-width:6.4em}
  .actions .donate{padding:9px 14px}
}

/* ---------- Coptic details ----------
   The budded Coptic cross (three buds on each arm), arched frames like the doors of the
   iconostasis, a muted icon gold, and short lines in Coptic script (Noto Sans Coptic). */
:root{--cross:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M10.3 4.4h3.4v5.9h5.9v3.4h-5.9v5.9h-3.4v-5.9H4.4v-3.4h5.9z%22/%3E%3Ccircle cx=%2212%22 cy=%222.6%22 r=%221.75%22/%3E%3Ccircle cx=%229.7%22 cy=%224.7%22 r=%221.6%22/%3E%3Ccircle cx=%2214.3%22 cy=%224.7%22 r=%221.6%22/%3E%3Ccircle cx=%2212%22 cy=%2221.4%22 r=%221.75%22/%3E%3Ccircle cx=%229.7%22 cy=%2219.299999999999997%22 r=%221.6%22/%3E%3Ccircle cx=%2214.3%22 cy=%2219.299999999999997%22 r=%221.6%22/%3E%3Ccircle cx=%222.6%22 cy=%2212%22 r=%221.75%22/%3E%3Ccircle cx=%224.7%22 cy=%229.7%22 r=%221.6%22/%3E%3Ccircle cx=%224.7%22 cy=%2214.3%22 r=%221.6%22/%3E%3Ccircle cx=%2221.4%22 cy=%2212%22 r=%221.75%22/%3E%3Ccircle cx=%2219.299999999999997%22 cy=%229.7%22 r=%221.6%22/%3E%3Ccircle cx=%2219.299999999999997%22 cy=%2214.3%22 r=%221.6%22/%3E%3C/svg%3E");--pattern:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2256%22 height=%2256%22 viewBox=%220 0 56 56%22%3E%3Cg fill=%22%23E7C9A0%22 fill-opacity=%22.07%22%3E%3Cg transform=%22translate(7 7) scale(.58)%22%3E%3Cpath d=%22M10.3 4.4h3.4v5.9h5.9v3.4h-5.9v5.9h-3.4v-5.9H4.4v-3.4h5.9z%22/%3E%3Ccircle cx=%2212%22 cy=%222.6%22 r=%221.75%22/%3E%3Ccircle cx=%229.7%22 cy=%224.7%22 r=%221.6%22/%3E%3Ccircle cx=%2214.3%22 cy=%224.7%22 r=%221.6%22/%3E%3Ccircle cx=%2212%22 cy=%2221.4%22 r=%221.75%22/%3E%3Ccircle cx=%229.7%22 cy=%2219.299999999999997%22 r=%221.6%22/%3E%3Ccircle cx=%2214.3%22 cy=%2219.299999999999997%22 r=%221.6%22/%3E%3Ccircle cx=%222.6%22 cy=%2212%22 r=%221.75%22/%3E%3Ccircle cx=%224.7%22 cy=%229.7%22 r=%221.6%22/%3E%3Ccircle cx=%224.7%22 cy=%2214.3%22 r=%221.6%22/%3E%3Ccircle cx=%2221.4%22 cy=%2212%22 r=%221.75%22/%3E%3Ccircle cx=%2219.299999999999997%22 cy=%229.7%22 r=%221.6%22/%3E%3Ccircle cx=%2219.299999999999997%22 cy=%2214.3%22 r=%221.6%22/%3E%3C/g%3E%3Cg transform=%22translate(35 35) scale(.58)%22%3E%3Cpath d=%22M10.3 4.4h3.4v5.9h5.9v3.4h-5.9v5.9h-3.4v-5.9H4.4v-3.4h5.9z%22/%3E%3Ccircle cx=%2212%22 cy=%222.6%22 r=%221.75%22/%3E%3Ccircle cx=%229.7%22 cy=%224.7%22 r=%221.6%22/%3E%3Ccircle cx=%2214.3%22 cy=%224.7%22 r=%221.6%22/%3E%3Ccircle cx=%2212%22 cy=%2221.4%22 r=%221.75%22/%3E%3Ccircle cx=%229.7%22 cy=%2219.299999999999997%22 r=%221.6%22/%3E%3Ccircle cx=%2214.3%22 cy=%2219.299999999999997%22 r=%221.6%22/%3E%3Ccircle cx=%222.6%22 cy=%2212%22 r=%221.75%22/%3E%3Ccircle cx=%224.7%22 cy=%229.7%22 r=%221.6%22/%3E%3Ccircle cx=%224.7%22 cy=%2214.3%22 r=%221.6%22/%3E%3Ccircle cx=%2221.4%22 cy=%2212%22 r=%221.75%22/%3E%3Ccircle cx=%2219.299999999999997%22 cy=%229.7%22 r=%221.6%22/%3E%3Ccircle cx=%2219.299999999999997%22 cy=%2214.3%22 r=%221.6%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");--leaf:#A07A3A;--leaf-soft:rgba(160,122,58,.45)}
:root[data-theme="dark"]{--leaf:#CFA864;--leaf-soft:rgba(207,168,100,.4)}
.cx{display:inline-block;width:1em;height:1em;flex:none;background:currentColor;-webkit-mask:var(--cross) center/contain no-repeat;mask:var(--cross) center/contain no-repeat}
.coptic{font-family:'Noto Sans Coptic',var(--serif);font-weight:400;letter-spacing:.02em;line-height:1.5}
/* section labels with a small cross in front */
.label.crossed,.eyebrow.crossed,.page-head .eyebrow{display:inline-flex;align-items:center;gap:.55em}
.label.crossed::before,.eyebrow.crossed::before,.page-head .eyebrow::before{content:"";display:block;width:.95em;height:.95em;margin-top:.08em;background:var(--leaf);-webkit-mask:var(--cross) center/contain no-repeat;mask:var(--cross) center/contain no-repeat}
/* divider: hairline, cross, hairline */
.orn{display:flex;align-items:center;gap:18px;color:var(--leaf)}
.orn::before,.orn::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--leaf-soft))}
.orn::after{background:linear-gradient(270deg,transparent,var(--leaf-soft))}
.orn .cx{width:22px;height:22px}
/* page heads end in a cross on the rule */
.page-head{position:relative}
.page-head::after{content:"";position:absolute;left:0;bottom:-11px;width:22px;height:22px;background:var(--leaf);-webkit-mask:var(--cross) center/contain no-repeat;mask:var(--cross) center/contain no-repeat;box-shadow:0 0 0 8px var(--bg)}
/* arched frames, with a thin gold line inside like an icon border */
.arch{position:relative;border-radius:50% 50% 4px 4px / 40% 40% 4px 4px!important;overflow:hidden}
.arch::after{content:"";position:absolute;inset:10px;border:1px solid rgba(231,201,160,.7);border-radius:50% 50% 2px 2px / 40% 40% 2px 2px;pointer-events:none}
.arch.wide{border-radius:50% 50% 4px 4px / 66% 66% 4px 4px!important}
.arch.wide::after{border-radius:50% 50% 2px 2px / 66% 66% 2px 2px}
/* maroon surfaces carry a faint field of crosses */
.band,footer,.quote{background-image:var(--pattern)}
footer .coptic-line{max-width:1440px;margin:0 auto 40px;display:flex;align-items:center;gap:18px;color:#E7C9A0;font-size:17px}
footer .coptic-line::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(231,201,160,.35),transparent)}
footer .coptic-line small{font-family:var(--serif);font-size:15px;font-style:italic;color:#C9B5AD;white-space:nowrap}
@media (max-width:560px){footer .coptic-line{flex-wrap:wrap;gap:6px 14px;font-size:15px} footer .coptic-line::after{display:none}}
.arch.tall{border-radius:50% 50% 4px 4px / 33% 33% 4px 4px!important}
.arch.tall::after{border-radius:50% 50% 2px 2px / 33% 33% 2px 2px}
/* square frame with the same thin gold line inside, for photos that must show in full */
.frame{position:relative;border-radius:4px!important;overflow:hidden}
.frame::after{content:"";position:absolute;inset:10px;border:1px solid rgba(231,201,160,.75);pointer-events:none}

/* ---------- event flyers (events.html and the home page; assets/church-events.js) ---------- */
.ev-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px);align-items:start}
@media (max-width:900px){ .ev-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .ev-grid{grid-template-columns:1fr} }
.ev{animation:ev-in .9s var(--glide) both}
.ev:nth-child(2){animation-delay:.08s}.ev:nth-child(3){animation-delay:.16s}.ev:nth-child(4){animation-delay:.24s}
@keyframes ev-in{from{opacity:0;transform:translateY(18px)}}
.ev-flyer{display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);overflow:hidden;cursor:zoom-in;box-shadow:0 24px 48px -36px rgba(40,10,14,.55);transition:transform .6s var(--glide),box-shadow .6s var(--glide)}
.ev-flyer img{display:block;width:100%;height:auto}
.ev-flyer:hover{transform:translateY(-4px);box-shadow:0 34px 60px -38px rgba(40,10,14,.6)}
.ev-meta{padding-top:16px}
.ev-soon{display:inline-block;margin-bottom:8px;padding:3px 10px;border-radius:999px;background:var(--wine-fill);color:#FFFDF8;font-size:12px;font-weight:600;letter-spacing:.02em}
.ev-when{display:block;font-family:var(--serif);font-variant:all-small-caps;letter-spacing:.09em;font-size:16px;color:var(--wine)}
.ev h3{margin-top:2px;font-size:clamp(22px,2vw,28px);font-weight:500;line-height:1.15}
.ev p{margin-top:6px;font-size:15px;color:var(--ink-2);line-height:1.55}
.ev.past{opacity:.75}
.ev.past .ev-flyer{box-shadow:none}
.ev-empty{padding:clamp(32px,5vw,56px);border:1px solid var(--line);border-radius:var(--r);background:var(--surface);text-align:center}
.ev-empty h2{font-size:clamp(26px,2.6vw,34px);font-weight:400}
.ev-empty p{margin:10px auto 0;max-width:480px;color:var(--ink-2)}
@media (prefers-reduced-motion: reduce){ .ev{animation:none} .ev-flyer:hover{transform:none} }

/* Laptop widths (1181–1480px): the full menu plus Watch Live pushed the header past the screen
   edge. Hide Watch Live there; "Stream" is in the menu. */
@media (max-width:1480px){ .actions .live{display:none} }
@media (min-width:1181px) and (max-width:1300px){ .nav a{padding-left:7px;padding-right:7px} .nav a::after{left:7px;right:7px} .nav .to-retreat{margin-left:4px;padding-left:10px} }