/* Our Saviour Lutheran Church: sibling system to trinitylutheranbronx.org.
   Breakpoints (reuse only these): 400, 520, 600, 760, 900, 1600. */

:root{
  /* Surfaces: cool stone, not Trinity's warm cream */
  --paper:      #f5f4f0;
  --paper-2:    #eae8e2;
  /* Text */
  --ink:        #17181b;
  --ink-2:      #34363c;
  --muted:      #5a5d65;
  /* Brand, from the crest */
  --crimson:      #8f1f2a;
  --crimson-dark: #6f1620;
  --charcoal:     #17181b;   /* dark sections */
  --night:        #0e0f11;   /* footer */
  --gold:         #f5b93a;   /* accent on dark */
  --gold-ink:     #8a5a00;   /* gold-family text on light (AA) */
  /* Hairlines */
  --line:       rgba(23,24,27,.13);
  --line-light: rgba(255,255,255,.16);

  --font-display: "Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --font-body: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --wrap: 1120px;
  --pad: 2rem;
  --radius: 4px;
  --section: clamp(4rem,10vw,7.5rem);
}
@media (max-width:600px){ :root{ --pad:1.25rem; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
/* Sticky header is ~112px tall on phones (brand + nav rail), ~66px from 760 up. */
section[id]{ scroll-margin-top:7.5rem; }
@media (min-width:760px){ section[id]{ scroll-margin-top:4.5rem; } }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:1.125rem/1.65 var(--font-body);
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--crimson); text-underline-offset:.18em; }
a:hover{ color:var(--crimson-dark); }
:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:2px; }
h1,h2,h3{ font-family:var(--font-display); line-height:1.15; margin:0 0 .5em; font-weight:700; }
h3{ font-size:1.3rem; }
p{ margin:0 0 1em; }
address{ font-style:normal; }
.muted{ color:var(--muted); }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); }
.skip{ position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:.8rem 1rem; z-index:100; }
.skip:focus{ left:1rem; top:1rem; color:#fff; }

.ico{ width:1.15em; height:1.15em; flex:none; }

/* Eyebrow: the repeated identity element */
.eyebrow{
  font:700 .75rem/1.4 var(--font-body); letter-spacing:.16em; text-transform:uppercase;
  color:var(--crimson); margin-bottom:.9rem;
}
.eyebrow-light{ color:var(--gold); }

.section-title{ font-size:clamp(2rem,6.2vw,3.15rem); max-width:22ch; }
.lede{ font-size:clamp(1.125rem,2.6vw,1.375rem); max-width:46ch; color:var(--ink-2); }

/* Buttons: 52px primary targets */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:52px; padding:.8rem 1.4rem; border-radius:var(--radius);
  font:700 1rem/1.2 var(--font-body); text-decoration:none; cursor:pointer;
  border:2px solid transparent; transition:background-color .2s, color .2s, border-color .2s;
}
.btn-primary{ background:var(--crimson); color:#fff; }
.btn-primary:hover{ background:var(--crimson-dark); color:#fff; }
.btn-ghost{ border-color:rgba(255,255,255,.55); color:#fff; }
.btn-ghost:hover{ background:#fff; color:var(--ink); }
.btn-light{ background:var(--gold); color:var(--ink); }
.btn-light:hover{ background:#ffd06a; color:var(--ink); }

/* ---------- Header + nav rail (no hamburger) ---------- */
.site-header{ background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; }
.header-inner{ display:flex; flex-direction:column; align-items:center; padding-top:.6rem; }
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--ink); min-height:48px; }
.brand-logo{ width:44px; height:44px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-name{ font:700 1.35rem/1.1 var(--font-display); }
.brand-sub{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.nav{
  display:flex; gap:.25rem; overflow-x:auto; width:100%; justify-content:center;
  border-top:1px solid var(--line); margin-top:.5rem; scrollbar-width:none;
}
.nav::-webkit-scrollbar{ display:none; }
.nav a{
  display:flex; align-items:center; min-height:44px; padding:0 .75rem; white-space:nowrap;
  color:var(--ink-2); text-decoration:none; font-weight:600; font-size:.95rem;
}
.nav a:hover{ color:var(--crimson); }
@media (min-width:760px){
  .header-inner{ flex-direction:row; justify-content:space-between; padding-top:0; }
  .nav{ width:auto; border-top:0; margin-top:0; }
}

/* ---------- 1. Hero ---------- */
.hero{
  position:relative; overflow:hidden; background:var(--charcoal); color:#fff;
  padding:clamp(2.5rem,9vw,7rem) 0 clamp(3rem,9vw,7rem);
}
.hero-arc{
  position:absolute; color:var(--gold); opacity:.14; pointer-events:none;
  width:min(90vw,640px); right:-28%; top:50%; transform:translateY(-50%);
}
.hero-body{ position:relative; }
.hero h1{ font-size:clamp(1.75rem,5.6vw,3.4rem); max-width:21ch; margin-bottom:1.1rem; }
.hero-when{ font:700 clamp(1.3rem,3.6vw,1.75rem)/1.2 var(--font-display); color:var(--gold); margin-bottom:.3rem; }
.hero-where{ color:rgba(255,255,255,.82); margin-bottom:1.6rem; }
.hero-actions{ display:flex; flex-direction:column; gap:.75rem; max-width:420px; }
@media (min-width:520px){
  .hero-actions{ flex-direction:row; max-width:none; }
}
@media (min-width:900px){ .hero-arc{ right:-6%; } }
/* Hero photo. The sanctuary shot is bright, so text needs a heavy overlay:
   flat on phones (text covers the whole frame), fading to the right from 760 up.
   Cover crops vertically on wide screens, so object-position X does nothing there. */
.hero.has-photo .hero-arc{ display:none; }
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 45%; }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(23,24,27,.80) 0%,rgba(23,24,27,.88) 100%);
}
@media (min-width:760px){
  .hero-media::after{
    background:linear-gradient(90deg,rgba(23,24,27,.93) 0%,rgba(23,24,27,.80) 42%,rgba(23,24,27,.35) 100%);
  }
}

/* ---------- 2. Welcome ---------- */
.welcome{ padding:var(--section) 0; }
.welcome-grid{ display:grid; gap:2.5rem; }
.welcome .section-title{ font-size:clamp(1.75rem,5.4vw,2.75rem); }   /* long mission sentence: a step below other section titles */
.welcome-img{ width:100%; height:auto; border-radius:var(--radius); }
.welcome-photo{ margin:0; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; }
.placeholder{
  display:grid; place-items:center; background:var(--paper-2);
  background-image:linear-gradient(135deg,rgba(143,31,42,.06),rgba(245,185,58,.12));
}
.welcome-text p:not(.eyebrow):not(.lede){ max-width:60ch; }
.signature{ display:flex; align-items:center; gap:1rem; margin-top:1.75rem; padding-top:1.5rem; border-top:1px solid var(--line); }
.signature p{ margin:0; line-height:1.5; }
.signature a{ display:inline-block; padding:.55rem 0; word-break:break-all; }
.signature-photo{ width:64px; height:64px; border-radius:50%; flex:none; object-fit:cover; }
.signature-initials{
  display:grid; place-items:center; background:var(--crimson); color:#fff;
  font:700 1.2rem var(--font-display); letter-spacing:.04em;
}
@media (min-width:760px){
  .welcome-grid{ grid-template-columns:5fr 6fr; align-items:center; gap:4rem; }
}

/* ---------- Dark sections ---------- */
.dark{ background:var(--charcoal); color:#fff; }
.dark .lede{ color:rgba(255,255,255,.8); }
.dark a:not(.btn){ color:var(--gold); }

/* ---------- 3. Sundays ---------- */
.sundays{ padding:var(--section) 0; }
.schedule{ list-style:none; margin:2.5rem 0 0; padding:0; display:grid; gap:0; max-width:820px; }
.schedule li{ display:grid; gap:.4rem; padding:1.6rem 0; border-top:1px solid var(--line-light); }
.schedule li:last-child{ border-bottom:1px solid var(--line-light); }
.schedule .when{ font:700 1.5rem/1.2 var(--font-display); color:var(--gold); margin:0; }
.schedule .when span{ display:block; font:700 .75rem/1.4 var(--font-body); letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.7); }
.schedule h3{ margin-bottom:.3rem; }
.schedule p{ margin:0; color:rgba(255,255,255,.85); }
.schedule p a{ display:inline-block; padding:.65rem 0; margin:-.65rem 0; }   /* 44px tap target inside prose */
@media (min-width:760px){
  .schedule li{ grid-template-columns:14rem 1fr; gap:2rem; }
}

/* ---------- 4. Story ---------- */
.story{ padding:var(--section) 0; background:var(--paper); }
.timeline{ list-style:none; margin:2.75rem 0 0; padding:0; max-width:760px; position:relative; }
.timeline::before{ content:""; position:absolute; left:7px; top:.5rem; bottom:.5rem; width:2px; background:var(--line); }
.timeline li{ position:relative; padding:0 0 2rem 2.4rem; }
.timeline li::before{
  content:""; position:absolute; left:0; top:.35rem; width:16px; height:16px; border-radius:50%;
  background:var(--paper); border:3px solid var(--crimson);
}
.timeline li:last-child::before{ background:var(--crimson); }
.year{ font:700 .8rem/1.4 var(--font-body); letter-spacing:.16em; text-transform:uppercase; color:var(--crimson); margin:0 0 .2rem; }
.event h3{ margin-bottom:.3rem; }
.event p:last-child{ margin:0; color:var(--ink-2); max-width:60ch; }

.history{ margin-top:1.5rem; max-width:760px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.history summary{
  display:flex; align-items:center; justify-content:space-between; min-height:52px; cursor:pointer;
  font-weight:700; color:var(--crimson); list-style:none; padding:.5rem 0;
}
.history summary::-webkit-details-marker{ display:none; }
.history summary::after{ content:"+"; font-size:1.6rem; line-height:1; }
.history[open] summary::after{ content:"\2212"; }
.history-body{ padding:.5rem 0 1.5rem; }
.history-body p{ max-width:68ch; color:var(--ink-2); }

/* ---------- 5. Visit ---------- */
.dark-soft{ background:var(--paper-2); }
.visit{ padding:var(--section) 0; }
.visit-grid{ display:grid; gap:2.5rem; margin-top:2rem; }
.addr{ font-size:1.25rem; line-height:1.5; margin-bottom:1.75rem; }
.addr strong{ font-family:var(--font-display); font-size:1.5rem; }
.routes,.facts{ list-style:none; margin:0; padding:0; display:grid; gap:1.4rem; }
.routes li{ display:grid; grid-template-columns:3.2rem 1fr; gap:1rem; align-items:start; }
.routes h3,.facts h3{ font-size:1.15rem; margin-bottom:.2rem; }
.routes p,.facts p{ margin:0; color:var(--ink-2); }
.badge{
  display:grid; place-items:center; height:2.6rem; min-width:2.6rem; border-radius:50%;
  font:700 1.1rem/1 var(--font-body); color:#fff;
}
.badge-5{ background:#00933c; }            /* MTA Lexington Ave line green */
.badge-bus{ background:#0039a6; border-radius:6px; font-size:.9rem; padding:0 .35rem; } /* MTA bus blue */
.facts{ margin-bottom:1.75rem; }
.facts li{ padding-left:1rem; border-left:3px solid var(--crimson); }
.facts a{ display:inline-block; padding:.5rem 0; margin:-.5rem 0; }
.ig-line{ margin:1.25rem 0 0; }
.ig-line a{ display:inline-flex; align-items:center; gap:.5rem; min-height:44px; font-weight:600; }
@media (min-width:760px){
  .visit-grid{ grid-template-columns:1fr 1fr; gap:4rem; }
}

/* ---------- 6. Give ---------- */
.give{ padding:var(--section) 0; }
.give-cards{ display:grid; grid-template-columns:1fr; gap:1.25rem; margin-top:2.5rem; }
.give-card{
  display:flex; flex-direction:column; align-items:flex-start;
  border:1px solid var(--line-light); border-radius:var(--radius); padding:1.75rem;
  background:rgba(255,255,255,.03);
}
.give-card h3{ font-size:1.5rem; }
.give-card p{ color:rgba(255,255,255,.82); }
.give-card .btn{ margin-top:auto; }
.give-label{ font:700 .72rem/1.4 var(--font-body) !important; letter-spacing:.14em; text-transform:uppercase; margin:0 0 .2rem; }
.give-handle{ font:700 1.15rem/1.35 var(--font-body); color:#fff !important; word-break:break-word; }
.qr{ display:none; background:#fff; padding:6px; border-radius:var(--radius); margin:0 0 1.25rem; image-rendering:pixelated; }
@media (min-width:760px){
  .give-cards{ grid-template-columns:repeat(3,1fr); }   /* explicit switch, never auto-fit */
  .qr{ display:block; }   /* QR only helps when the page is on a different screen than the phone */
}

/* ---------- 7/8. Strips ---------- */
.strip{ padding:clamp(3rem,7vw,4.5rem) 0; }
.school{ background:var(--paper); }
.partner{ background:var(--paper-2); }
.strip-inner{ display:flex; gap:1.5rem; align-items:flex-start; }
.strip h2{ font-size:clamp(1.5rem,4vw,2rem); }
.strip-text p:not(.eyebrow){ max-width:60ch; color:var(--ink-2); }
.partner-crest{ width:45px; flex:none; margin-top:.25rem; }
.text-link{ display:inline-block; padding:.7rem 0; font-weight:700; }   /* inline flow keeps the arrow beside wrapped text; padding gives 44px */

/* ---------- 9. Footer ---------- */
.site-footer{ background:var(--night); color:rgba(255,255,255,.82); padding:3.5rem 0 1.5rem; font-size:1rem; }
.site-footer a{ color:#fff; text-decoration:none; }
.site-footer a:hover{ color:var(--gold); }
.footer-grid{ display:grid; gap:2rem; }
.foot-brand img{ width:72px; margin-bottom:.75rem; }
.foot-name{ font:700 1.15rem/1.3 var(--font-display); color:#fff; }
.foot-col h2{ font:700 .75rem/1.4 var(--font-body); letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:.75rem; }
.foot-links{ list-style:none; margin:0; padding:0; }
.foot-links a{ display:inline-flex; align-items:center; gap:.6rem; min-height:44px; word-break:break-all; }
.foot-base{
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between; align-items:center;
  margin-top:2.5rem; padding-top:1rem; border-top:1px solid var(--line-light); font-size:.875rem;
}
.foot-base p{ margin:0; }
.foot-base a{ display:inline-flex; align-items:center; min-height:44px; }
@media (min-width:760px){
  .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; }
}

/* ---------- Motion ---------- */
.js .rv{ opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.8,.3,1); }
.js .rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}
@media (min-width:1600px){ :root{ --wrap:1240px; } }