/* Sixth Avenue Global Methodist Church — single site stylesheet */

:root{
  --paper:#ffffff;
  --paper-alt:#ffffff;
  --ink:#1a1c20;
  --ink-soft:#4c5157;
  --rule:#d8dde3;
  --accent:#1a6bb0;
  --accent-dark:#12507f;
  --navy:#0f3355;
  --measure:38rem;
  --shell:82rem;
  --serif:"Bitter",Georgia,"Times New Roman",serif;
  --sans:"Open Sans","Segoe UI",Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.001ms !important;transition-duration:.001ms !important}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 1.0625rem/1.65 var(--sans);
  text-wrap:pretty;
}

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

h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.15;margin:0;color:var(--ink)}
h1{font-size:clamp(1.85rem,4.4vw,2.9rem);letter-spacing:-.01em}
h2{font-size:clamp(1.4rem,3vw,1.9rem)}
h3{font-size:clamp(1.13rem,2.2vw,1.35rem)}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

a{color:var(--accent-dark);text-decoration:underline;text-decoration-thickness:.07em;text-underline-offset:.18em}
a:hover,a:focus{color:var(--ink);text-decoration-thickness:.14em}

:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip-link{position:absolute;left:.5rem;top:-4rem;z-index:200;background:var(--ink);color:#fff;padding:.7rem 1.1rem;border-radius:2px;text-decoration:none;font-weight:600}
.skip-link:focus{top:.5rem;color:#fff}

.shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 1.25rem}

/* ---------- header + navigation ---------- */

.site-head{background:#fff;border-bottom:1px solid var(--rule);position:static;z-index:150}
@media (min-width:62rem){
  .site-head{position:sticky;top:0}
  .site-head{box-shadow:0 1px 8px rgba(15,51,85,.08)}
  .site-head__inner{padding:.6rem 1.25rem .1rem}
  .site-logo{max-width:22rem}
}
.site-head__inner{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:1.1rem 1.25rem .25rem;max-width:var(--shell);margin:0 auto}
.site-logo{width:100%;max-width:18rem;text-decoration:none;padding:.25rem}
.site-logo img{width:100%}

.nav-toggle{
  display:flex;width:100%;align-items:center;justify-content:center;gap:.7rem;
  min-height:56px;padding:.9rem 1rem;
  font:400 1rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:var(--navy);border:1.5px solid var(--navy);border-radius:2px;cursor:pointer;
}
.nav-toggle:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff}
.nav-toggle__bars{display:grid;gap:4px}
.nav-toggle__bars span{display:block;width:24px;height:3px;background:currentColor}

.site-nav{width:100%}
.site-nav[hidden]{display:none}
.site-nav ul{list-style:none;margin:0;padding:0}

.site-nav>ul{display:flex;flex-direction:column;gap:0}
.site-nav>ul>li{border-top:1px solid var(--rule)}
.site-nav a,.site-nav .sub-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;
  min-height:44px;padding:.8rem .25rem;
  font:600 .875rem/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer;text-align:left;
}
.site-nav a:hover,.site-nav a:focus,.site-nav .sub-toggle:hover,.site-nav .sub-toggle:focus{color:var(--accent-dark)}
.site-nav a[aria-current="page"]{color:var(--accent-dark);box-shadow:inset 3px 0 0 var(--accent);padding-left:.75rem}

.sub-toggle__caret{flex:none;width:.5rem;height:.5rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-bottom:.2rem}
.sub-toggle[aria-expanded="true"] .sub-toggle__caret{transform:rotate(-135deg);margin-bottom:0}

.site-nav ul ul{padding:0 0 .6rem .75rem;border-left:2px solid var(--rule)}
.site-nav ul ul[hidden]{display:none}
.site-nav ul ul a{text-transform:none;letter-spacing:0;font-weight:400;font-size:1rem;padding:.6rem .25rem}

@media (min-width:62rem){
  .nav-toggle{display:none}
  .site-nav[hidden]{display:block}
  .site-nav>ul{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:.25rem 2rem}
  .site-nav>ul>li{border-top:0;position:relative}
  .site-nav a,.site-nav .sub-toggle{padding:.6rem 0;font-size:.8125rem}
  .site-nav a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--accent);padding-left:0}
  .site-nav>ul>li::after{content:"";position:absolute;left:0;right:0;top:100%;height:.6rem}
  .site-nav ul ul{
    position:absolute;top:calc(100% + .6rem);left:50%;transform:translateX(-50%);z-index:120;min-width:17rem;
    background:#fff;border:1px solid var(--rule);border-left:3px solid var(--accent);
    padding:.4rem 1rem;box-shadow:0 8px 22px rgba(28,27,25,.12);
  }
}

/* ---------- page furniture ---------- */

.page-head{border-bottom:1px solid var(--rule);background:var(--paper-alt);padding:2.75rem 0 2.25rem}
.page-head p{max-width:var(--measure);margin:.85rem 0 0;color:var(--ink-soft);font-size:1.0625rem}

main{display:block}
.section{padding:3rem 0}
.section+.section{border-top:1px solid var(--rule)}
.section>.shell>*+*{margin-top:1.5rem}
.section>.shell.stack>*+*,.section>.shell.media-row>*+*,.section>.shell.announce>*+*{margin-top:0}

.prose{max-width:var(--measure)}
.prose h2{margin:2.25rem 0 .6rem}
.prose h3{margin:1.6rem 0 .4rem}
.prose ul,.prose ol{margin:0 0 1.1em;padding-left:1.35rem}
.prose li{margin:0 0 .5em}
.prose li::marker{color:var(--accent)}

/* the recurring device: a side-rule callout, used instead of boxed cards */
.callout{
  border-left:4px solid var(--accent);
  padding:.15rem 0 .15rem 1.5rem;
  max-width:var(--measure);
}
.callout--quiet{border-left-color:var(--rule)}
.callout__label{
  display:block;font:600 .75rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-dark);margin:0 0 .5rem;
}
.callout--quiet .callout__label{color:var(--ink-soft)}
.callout h2,.callout h3{margin:0 0 .5rem}
.callout p{margin:0 0 .8em}

.stack{display:grid;gap:2.25rem;align-items:stretch}
.stack>.callout{height:100%}
.stack--2{grid-template-columns:1fr}
.stack--3{grid-template-columns:1fr}
@media (min-width:48rem){.stack--2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (min-width:56rem){.stack--3{grid-template-columns:repeat(3,minmax(0,1fr))}}

.media-row{display:grid;gap:1.75rem;align-items:start}
@media (min-width:48rem){.media-row{grid-template-columns:minmax(0,18rem) minmax(0,1fr)}}
.media-row__figure img{width:100%}

.btn{
  display:inline-block;min-height:44px;padding:.8rem 1.5rem;
  background:var(--accent);color:#fff;border:2px solid var(--accent);
  font:600 .875rem/1.4 var(--sans);letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;border-radius:2px;
}
.btn:hover,.btn:focus{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff}

.times{margin:0;display:grid;gap:1.75rem}
@media (min-width:56rem){.times{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);gap:2.25rem}}
.times__item p{text-wrap:normal}
.times__item p .nowrap{white-space:nowrap}
.times__item{border-left:4px solid var(--accent);padding-left:1.4rem}
.times__item img{width:5.5rem;margin:0 0 .9rem}
.times__when{display:block;font:600 .8125rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-dark);margin:.35rem 0 .6rem}
.times__item h3{margin:0}
.times__item p{margin:.5rem 0 0;color:var(--ink-soft);font-size:.9375rem}

/* home hero — church exterior as the introduction */
.hero{padding:0}
.hero__photo{margin:0}
.hero__photo img{width:100%;max-height:34rem;object-fit:cover}
.hero__welcome{max-width:44rem;margin:2.5rem auto 0;text-align:center}
.hero__welcome h2{font-size:clamp(1.55rem,3.6vw,2.1rem)}
.hero__welcome ul{list-style:none;margin:1.1rem 0;padding:0;color:var(--ink-soft)}
.hero__welcome li{margin:0 0 .35rem}
.hero__pitch{font-family:var(--serif);font-weight:700;font-size:clamp(1.2rem,2.8vw,1.6rem);margin:1.1rem 0 0}
.hero h1{margin:2.75rem 0 0;text-align:center;font-size:clamp(1.35rem,3.1vw,2rem);letter-spacing:.01em}

/* announcement: flier beside its text, flier kept modest */
.announce{display:grid;gap:1.75rem;align-items:start}
@media (min-width:48rem){.announce{grid-template-columns:minmax(0,15rem) minmax(0,1fr)}}
.announce__flier{margin:0}
.announce__flier img{width:100%;max-width:15rem;border:1px solid var(--rule)}

/* photo gallery (Missions) */
.gallery{list-style:none;margin:0;padding:0;display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr))}
.gallery a{display:block;text-decoration:none;border:1px solid var(--rule)}
.gallery a:hover,.gallery a:focus{border-color:var(--accent)}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .2s ease}
.gallery a{overflow:hidden;position:relative}
.gallery a:hover img,.gallery a:focus-visible img{transform:scale(1.04)}
.gallery a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ---------- document month accordions ---------- */
.doc-months{max-width:54rem}
.acc{border:1px solid var(--rule);border-bottom:0;background:#fff}
.acc:last-of-type{border-bottom:1px solid var(--rule)}
.acc>summary{
  list-style:none;cursor:pointer;position:relative;
  font:600 1.15rem/1.3 var(--sans);color:var(--navy);
  padding:1rem 3rem 1rem 1.1rem;min-height:56px;display:flex;align-items:center;
}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary::after{
  content:"";position:absolute;right:1.25rem;top:50%;
  width:10px;height:10px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);
  transform:translateY(-70%) rotate(45deg);transition:transform .15s ease;
}
.acc[open]>summary::after{transform:translateY(-30%) rotate(-135deg)}
.acc>summary:hover{background:#f2f5f8}
.acc>summary:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.acc[open]>summary{border-bottom:1px solid var(--rule);background:#f7f9fb}
.acc__body{padding:.25rem 1.1rem 1rem}
.cal-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.25rem;padding:.85rem 0;border-bottom:1px solid var(--rule)}
.cal-row:last-child{border-bottom:0}
.cal-date{flex:0 0 7.5rem;font:600 1.05rem/1.3 var(--sans);color:var(--ink)}
.cal-date .dow{display:block;font-weight:400;font-size:.9rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em}
.cal-docs{display:flex;flex-wrap:wrap;gap:.5rem}
.cal-docs a{
  display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1rem;
  font:600 1rem/1 var(--sans);color:#fff;background:var(--navy);
  border:1px solid var(--navy);border-radius:2px;text-decoration:none;
}
.cal-docs a:hover{background:var(--accent-dark);border-color:var(--accent-dark);text-decoration:underline}
.cal-docs a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.cal-note{margin:.25rem 0 .5rem;font-family:var(--sans);font-size:.95rem;color:var(--ink-soft);text-wrap:pretty}
@media (max-width:32rem){
  .cal-date{flex:1 0 100%}
  .cal-docs a{flex:1 1 auto;justify-content:center}
}

/* photograph lightbox */
.lightbox[hidden]{display:none}
.lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:1rem}
.lightbox__backdrop{position:absolute;inset:0;background:rgba(10,16,24,.85);border:0}
.lightbox__panel{position:relative;background:var(--paper);border:1px solid var(--rule);width:min(60rem,100%);max-height:100%;display:flex;flex-direction:column;padding:.75rem 1rem 1rem}
.lightbox__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--rule);padding-bottom:.5rem}
.lightbox__count{margin:0;font-family:var(--sans);font-size:.95rem;color:var(--ink-soft)}
.lightbox__close{font:600 1rem/1 var(--sans);background:var(--navy);color:#fff;border:0;padding:.6rem 1rem;cursor:pointer;min-height:44px}
.lightbox__close:hover{background:var(--accent-dark)}
.lightbox__stage{display:flex;align-items:center;gap:.5rem;min-height:0;padding:.75rem 0}
.lightbox__nav{flex:0 0 auto;font:400 2rem/1 var(--sans);background:#fff;color:var(--navy);border:1px solid var(--rule);width:48px;height:48px;cursor:pointer}
.lightbox__nav:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.lightbox__figure{margin:0;flex:1 1 auto;min-width:0;text-align:center}
.lightbox__figure img{max-width:100%;max-height:65vh;object-fit:contain;background:#f2f4f7}
.lightbox__figure figcaption{font-family:var(--sans);font-size:.95rem;color:var(--ink-soft);margin-top:.6rem;text-wrap:pretty}
.lightbox__full{margin:0;padding-top:.5rem;border-top:1px solid var(--rule);font-family:var(--sans);font-size:.95rem}
.lightbox :focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (max-width:32rem){
  .lightbox__stage{flex-wrap:wrap;justify-content:center}
  .lightbox__figure{order:-1;flex:1 0 100%}
  .lightbox__figure img{max-height:55vh}
}

/* long link lists (bulletins, sermons) */
.linklist{list-style:none;margin:0;padding:0;max-width:44rem;border-top:1px solid var(--rule)}
.linklist li{border-bottom:1px solid var(--rule)}
.linklist a{display:block;padding:.85rem .25rem;min-height:44px;text-decoration:none;font-weight:600}
.linklist a:hover,.linklist a:focus{color:var(--accent-dark);box-shadow:inset 3px 0 0 var(--accent);padding-left:.9rem}

.contact-list{list-style:none;margin:0;padding:0}
.contact-list li{margin:0 0 .7rem}
.contact-list dt{font:600 .75rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.contact-list dd{margin:.15rem 0 1.1rem;font-size:1.13rem}

.ext::after{
  content:"";display:inline-block;width:.62em;height:.62em;margin-left:.3em;
  border:1.5px solid currentColor;border-left-width:0;border-bottom-width:0;
  transform:rotate(45deg) translateY(-.08em);
}

/* ---------- document viewer ---------- */
.docview[hidden]{display:none}
.docview{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:1.25rem}
.docview__scrim{position:absolute;inset:0;background:rgba(15,51,85,.55)}
.docview__panel{position:relative;background:#fff;width:min(60rem,100%);max-height:92vh;display:flex;flex-direction:column;border-radius:4px;box-shadow:0 18px 50px rgba(15,51,85,.35)}
.docview__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;border-bottom:1px solid var(--rule)}
.docview__bar h2{font-size:1.2rem;color:var(--navy)}
.docview__close{min-height:44px;padding:.55rem 1.2rem;font:600 .875rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;background:#fff;color:var(--ink);border:1.5px solid var(--ink);border-radius:2px;cursor:pointer}
.docview__close:hover,.docview__close:focus{background:var(--ink);color:#fff}
.docview__tabs{display:flex;gap:1.5rem;padding:0 1.25rem;border-bottom:1px solid var(--rule)}
.docview__tabs button{min-height:44px;padding:.7rem .1rem;background:none;border:0;border-bottom:3px solid transparent;font:600 .9375rem/1.2 var(--sans);color:var(--ink-soft);cursor:pointer}
.docview__tabs button[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--accent)}
.docview__body{overflow:auto;padding:1.25rem;flex:1}
.docview__body h3{margin:0 0 .8rem;color:var(--navy)}
.docview__body pre{white-space:pre-wrap;font:400 1rem/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;margin:0}
.docview__body iframe{width:100%;height:min(60vh,40rem)}
.docview__dl{margin:.9rem 0 0}
.docview__actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 1rem}
.docview__btn{
  display:inline-flex;align-items:center;min-height:44px;padding:.6rem 1.1rem;
  font:600 1rem/1 var(--sans);color:#fff;background:var(--navy);
  border:1px solid var(--navy);border-radius:2px;text-decoration:none;
}
.docview__btn:hover{background:var(--accent-dark);border-color:var(--accent-dark);text-decoration:underline;color:#fff}
.docview__btn--quiet{background:#fff;color:var(--navy)}
.docview__btn--quiet:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.docview__btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.docview__note{margin:0;padding:.9rem 1.25rem;border-top:1px solid var(--rule);font-size:.875rem;color:var(--ink-soft)}

/* ---------- footer ---------- */

.site-foot{background:var(--navy);color:#eaf1f8;border-top:1px solid var(--navy);padding:2.75rem 0 0;margin-top:0}
.site-foot a{color:#ffffff}
.site-foot a:hover,.site-foot a:focus{color:#ffffff}
.site-foot__grid{display:grid;gap:2rem}
@media (min-width:56rem){.site-foot__grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.1fr) minmax(0,1.05fr)}}
.site-foot h2{font-size:.75rem;font-family:var(--sans);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#d6e6f5;margin:0 0 .8rem}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin:0 0 .1rem}
.site-foot__times li{margin:0 0 .55rem;line-height:1.5;max-width:22rem}
.site-foot__times b{display:block;font:700 .8125rem/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#d6e6f5}
.site-foot li a{display:inline-block;padding:.3rem 0;min-height:auto;text-decoration:none;font-size:.9375rem}
.site-foot li a:hover,.site-foot li a:focus{text-decoration:underline}
.site-foot address{font-style:normal;line-height:1.75}
.site-foot address a{text-decoration:none}
.site-foot address a[href^="mailto"]:hover,.site-foot address a[href^="mailto"]:focus{text-decoration:underline}
.social{display:flex;gap:1.1rem;margin:.6rem 0 0}
.social a{
  display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
  border:0;text-decoration:none;color:#ffffff;
}
.social svg{width:40px;height:40px;fill:currentColor;display:block}
.social a:hover,.social a:focus{color:#d6e6f5}
.site-foot__map{min-height:14rem}
.site-foot__map iframe{width:100%;height:100%;min-height:14rem;border:1px solid rgba(255,255,255,.35)}

.site-legal{border-top:1px solid rgba(255,255,255,.25);margin-top:2.5rem;padding:1.35rem 0 2rem;font-size:.9375rem;color:#e4eef8}
.site-legal ul{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;margin:0 0 .5rem;padding:0}
.site-legal a{color:#ffffff}
.heart{color:#ffb3bb;font-style:normal}

@media print{
  .site-head,.site-foot__map,.nav-toggle,.skip-link{display:none}
  body{background:#fff;font-size:11pt}
  a{color:#000}
}