/* Laudium Church of Christ: blue and white, light-tinted sections, 1370px body */
:root {
  --ink: #12254f;        /* deep blue: headings, header text, hero overlay base */
  --lake: #2c5da8;       /* links, buttons, accents */
  --lake-dark: #1f4685;
  --mist: #f3f7fc;       /* very light blue highlight */
  --linen: #faf7f0;      /* very light warm highlight */
  --rule: #d5e0f0;
  --lamp: #c98a1b;       /* small accent bars only */
  --text: #18213a;
  --muted: #4b5774;
  --white: #fff;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --body: 1370px;
  --gut: 16px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--text); font: 400 1.1875rem/1.7 var(--serif); }
img { max-width: 100%; display: block; }
a { color: var(--lake); text-underline-offset: 3px; }
a:hover { color: var(--lake-dark); }
:focus-visible { outline: 3px solid var(--lamp); outline-offset: 2px; border-radius: 3px; }
.wrap { width: min(var(--body), 100% - 2 * var(--gut)); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 99; }
.skip:focus { left: 8px; top: 8px; }

/* header + segmented menu */
.site-head { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.28); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.head-in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 76px; }
.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: #fff; }
.brand svg { width: 46px; height: 46px; flex: none; }
.brand-name { font: 600 1.2rem/1.15 var(--serif); letter-spacing: .005em; }
.brand-name small { display: block; font: 500 .8125rem/1.3 var(--sans); color: #e3ecf8; margin-top: 2px; }
.nav-toggle { display: none; font: 600 .95rem var(--sans); color: #fff; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.4); border-radius: 8px; padding: .55rem .9rem; cursor: pointer; }
.nav { display: flex; align-items: center; gap: .25rem; }
.nav > a.home-link { font: 600 .98rem var(--sans); color: #fff; text-decoration: none; padding: .7rem .9rem; border-radius: 8px; }
.seg { position: relative; }
.seg-btn { font: 600 .98rem var(--sans); color: #fff; background: none; border: 0; padding: .7rem .9rem; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
.seg-btn::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.seg-btn[aria-expanded="true"]::after { transform: translateY(1px) rotate(225deg); }
.seg.current > .seg-btn, .nav > a.home-link.current { background: rgba(255,255,255,.18); box-shadow: inset 0 -3px 0 #fff; }
.seg-btn:hover, .nav > a.home-link:hover { background: rgba(255,255,255,.22); color: #fff; }
.seg-panel { position: absolute; right: 0; top: 100%; width: 330px; margin-top: 6px; background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.5); border-radius: 12px; box-shadow: 0 18px 40px -18px rgba(18,37,79,.45); padding: .5rem; visibility: hidden; opacity: 0; transform: translateY(10px) scale(.98); transform-origin: top right; pointer-events: none; transition: opacity .28s ease, transform .32s cubic-bezier(.2,.7,.2,1), visibility 0s linear .32s; }
.seg-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.seg-btn[aria-expanded="true"] + .seg-panel, .seg:has(:focus-visible) > .seg-panel { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
@media (hover: hover) { .seg:hover > .seg-panel { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; } .seg:hover > .seg-btn::after { transform: translateY(1px) rotate(225deg); } }
.seg-panel a { display: block; padding: .7rem .85rem; border-radius: 8px; text-decoration: none; color: var(--text); }
.seg-panel a:hover, .seg-panel a[aria-current] { background: var(--mist); }
.seg-panel b { display: block; font: 600 1rem var(--sans); color: var(--ink); }
.seg-panel span { display: block; font: 400 .9rem/1.4 var(--sans); color: var(--muted); margin-top: 2px; }

/* hero with dark overlay */
.hero { position: relative; margin-top: 0; padding-top: 76px; min-height: 456px; border-radius: 0; overflow: hidden; color: #fff; display: flex; align-items: flex-end; isolation: isolate; }
.hero.big { min-height: 656px; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform-origin: 62% 40%; animation: hero-drift 26s ease-in-out infinite alternate; will-change: transform; }
@keyframes hero-drift { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.14) translate3d(-1.6%, -1.2%, 0); } }
@media (prefers-reduced-motion: reduce) { .hero > img { animation: none; } }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,18,44,.58) 0%, rgba(8,18,44,.36) 52%, rgba(8,18,44,.28) 100%), linear-gradient(0deg, rgba(8,18,44,.4), rgba(8,18,44,0) 55%); }
.hero-in { padding: clamp(1.5rem, 4vw, 3.25rem) 0; width: min(var(--body), 100% - 2 * var(--gut)); margin-inline: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; }
.hero-copy { max-width: 760px; }
.crumbs { font: 500 .9rem var(--sans); color: #d6e2f5; margin: 0 0 .9rem; }
.crumbs a { color: #fff; }
.hero h1 { font: 500 clamp(2.3rem, 5.2vw, 4.3rem)/1.04 var(--serif); letter-spacing: -.012em; margin: 0 0 1rem; text-wrap: balance; }
.hero p.lead { font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.5; margin: 0; color: #eef3fb; max-width: 640px; }
.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.6rem; }
.btn { display: inline-block; font: 600 1rem var(--sans); text-decoration: none; padding: .85rem 1.4rem; border-radius: 10px; background: #fff; color: var(--ink); border: 2px solid #fff; cursor: pointer; transition: background .2s, color .2s; }
.btn:hover { background: var(--mist); color: var(--ink); }
.btn.ghost { background: transparent; color: #fff; }
.btn.ghost:hover { background: rgba(255,255,255,.14); color: #fff; }
.btn.solid { background: var(--lake); border-color: var(--lake); color: #fff; }
.btn.solid:hover { background: var(--lake-dark); border-color: var(--lake-dark); color: #fff; }
.times-card { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); border-radius: 12px; padding: 1.1rem 1.4rem; backdrop-filter: blur(4px); min-width: 280px; }
.times-card h2 { font: 600 1.05rem var(--sans); margin: 0 0 .5rem; }
.times-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; font: 400 1rem/1.4 var(--sans); }
.times-card dt { font-weight: 600; } .times-card dd { margin: 0; }

/* sections */
main { display: block; }
.sec { margin-top: 28px; padding: clamp(1.6rem, 3.4vw, 3rem); border-left: 4px solid var(--lamp); background: var(--mist); }
.sec:nth-of-type(even) { background: var(--linen); border-left-color: var(--lake); }
.sec h2 { font: 500 clamp(1.7rem, 3vw, 2.35rem)/1.15 var(--serif); color: var(--ink); margin: 0 0 .8rem; letter-spacing: -.005em; }
.sec h3 { font: 600 1.2rem/1.3 var(--sans); color: var(--ink); margin: 0 0 .4rem; }
.sec p { margin: 0 0 1rem; max-width: 70ch; }
.sec p:last-child { margin-bottom: 0; }
.split { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.split.flip { grid-template-columns: .85fr 1.15fr; }
.split figure { margin: 0; } .split figure img { width: 100%; border-radius: 8px; }
.split figcaption { font: 400 .9rem/1.4 var(--sans); color: var(--muted); margin-top: .5rem; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 28px; }
.three .sec { margin-top: 0; display: flex; flex-direction: column; }
.three .sec .more { margin-top: auto; padding-top: 1rem; }
.more a { font: 600 1rem var(--sans); }
.verse { font-style: italic; color: var(--ink); border-left: 3px solid var(--lamp); padding-left: 1rem; margin: 1rem 0 0; }
.ref { font: 600 .95rem var(--sans); color: var(--muted); }
.sched { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 1.2rem; }
.sched article { background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: 1.1rem 1.3rem; }
.sched .when { font: 600 .95rem var(--sans); color: var(--lake-dark); }
.sched .time { font: 500 2.1rem/1.1 var(--serif); color: var(--ink); margin: .15rem 0 .3rem; }
.sched p { font-size: 1.05rem; margin: 0; }
.list { margin: 0; padding: 0; list-style: none; display: grid; gap: .9rem; }
.list li { background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: 1rem 1.2rem; }
.list .meta { font: 500 .92rem var(--sans); color: var(--muted); }
.list h3 { margin-bottom: .2rem; }
.empty { background: #fff; border: 1px dashed #9db5d8; border-radius: 10px; padding: 1.4rem 1.6rem; }
.addr { white-space: pre-line; font-size: 1.25rem; line-height: 1.5; color: var(--ink); }
.addr-empty { background: #fff; border: 2px dashed #9db5d8; border-radius: 10px; padding: 1.4rem 1.6rem; color: var(--muted); }
.map { border: 0; width: 100%; height: 380px; border-radius: 10px; margin-top: 1.2rem; }
.facts { display: grid; gap: .6rem; margin: 0; }
.facts div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; }
.facts dt { font: 600 .98rem var(--sans); color: var(--muted); } .facts dd { margin: 0; }

/* three-up row inside a section */
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 1rem; }
.cols p { font-size: 1.05rem; }
/* form */
.form { display: grid; gap: 1.1rem; }
.form label { font: 600 .98rem var(--sans); color: var(--ink); display: block; margin-bottom: .3rem; }
.form .hint { font-weight: 400; color: var(--muted); }
.form input, .form textarea { width: 100%; font: 400 1.05rem/1.5 var(--sans); padding: .75rem .9rem; border: 1.5px solid #a9bbd8; border-radius: 8px; background: #fff; color: var(--text); }
.form textarea { min-height: 170px; resize: vertical; }
.form input:focus, .form textarea:focus { outline: 3px solid rgba(44,93,168,.35); border-color: var(--lake); }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form .trap { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.notice { border-radius: 10px; padding: 1rem 1.2rem; font: 500 1rem/1.5 var(--sans); margin-bottom: 1.2rem; }
.notice.ok { background: #e6f4ea; border: 1px solid #9fcfae; color: #14532d; }
.notice.err { background: #fdecec; border: 1px solid #efb0b0; color: #7a1a1a; }
.notice ul { margin: .4rem 0 0 1.1rem; padding: 0; }

/* dev-only stand-in for the Turnstile widget (preview build) */
.ts-prev { border: 1px dashed #9db5d8; border-radius: 8px; padding: 1rem; font: 500 .95rem var(--sans); color: var(--muted); background: #fff; max-width: 300px; }

/* story box: bordered, 12px corners, graphic and text the same height */
.story-wrap { margin: 44px 0 0; }
.story { display: grid; grid-template-columns: 400px 1fr; border: 2px solid var(--lake); border-radius: 12px; overflow: hidden; background: #fff; }
.story-img { position: relative; margin: 0; min-height: 440px; background: var(--ink); }
.story-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-body { padding: clamp(1.5rem, 3.4vw, 2.8rem); }
.story-body .from { font: 600 .95rem var(--sans); color: var(--lake-dark); margin: 0 0 .5rem; }
.story-body h2 { font: 500 clamp(1.7rem, 3vw, 2.3rem)/1.15 var(--serif); color: var(--ink); margin: 0 0 1rem; }
.story-body p { margin: 0 0 1rem; max-width: 68ch; }
.story-body .scripture { margin: 1.3rem 0 0; padding-top: 1rem; border-top: 2px solid var(--rule); font: 500 1.05rem/1.5 var(--sans); color: var(--ink); }
.story-body .scripture a { font-weight: 600; }

/* footer */
.site-foot { margin-top: 56px; background: var(--ink); color: #dbe5f6; }
.foot-in { display: grid; grid-template-columns: 1.2fr 1fr .8fr 1.4fr; gap: 2.2rem; padding: 3rem 0 2rem; }
.site-foot h2 { font: 600 1.05rem var(--sans); color: #fff; margin: 0 0 .7rem; }
.site-foot p, .site-foot li { font: 400 1rem/1.6 var(--sans); margin: 0 0 .35rem; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot a { color: #fff; }
.foot-base { border-top: 1px solid rgba(255,255,255,.18); padding: 1rem 0 1.6rem; font: 400 .9rem var(--sans); color: #aebfdc; }

/* right-to-left fly-in */
.js .fly { opacity: 0; transform: translateX(90px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.js .fly.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .fly { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

@media (max-width: 1100px) {
  .three { grid-template-columns: 1fr; }
  .story { grid-template-columns: 320px 1fr; }
}
@media (max-width: 900px) {
  .nav-toggle { display: inline-block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: rgba(18,37,79,.62); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,.28); flex-direction: column; align-items: stretch; gap: 0; padding: .6rem var(--gut) 1rem; max-height: calc(100vh - 76px); overflow: auto; }
  .nav.open { display: flex; }
  .nav > a.home-link { padding: .8rem .2rem; }
  .seg-btn { width: 100%; justify-content: space-between; padding: .8rem .2rem; border-top: 1px solid rgba(255,255,255,.25); border-radius: 0; font-size: 1.02rem; }
  .seg-panel { position: static; width: auto; box-shadow: none; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0 0 .4rem .4rem; margin-top: 0; visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: none; }
  .seg-panel::before { display: none; }
  .seg-panel a, .seg-panel b { color: #fff; } .seg-panel span { color: #dbe6f6; } .seg-panel a:hover, .seg-panel a[aria-current] { background: rgba(255,255,255,.18); }
  .seg-btn::after { display: none; }
  .seg.current > .seg-btn { box-shadow: none; background: rgba(255,255,255,.18); }
  .split, .split.flip { grid-template-columns: 1fr; }
  .sched { grid-template-columns: 1fr; }
  .cols { grid-template-columns: 1fr; }
  .story { grid-template-columns: 1fr; }
  .story-img { min-height: 360px; }
  .foot-in { grid-template-columns: 1fr; gap: 1.6rem; }
  .hero.big { min-height: 520px; }
}
@media (max-width: 560px) {
  body { font-size: 1.125rem; }
  .brand-name small { display: none; }
  .form .two { grid-template-columns: 1fr; }
  .facts div { grid-template-columns: 1fr; gap: 0; }
  .times-card { min-width: 0; width: 100%; }
  .hero { min-height: 340px; } .hero.big { min-height: 560px; }
  .hero::before { background: linear-gradient(0deg, rgba(8,18,44,.58), rgba(8,18,44,.46)); }
}

/* body text links -> animated buttons (outline: contact + scripture links; solid: .more page links). Fill sweeps in from the left on hover. */
main .wrap a:not(.btn), main .story-body a:not(.btn) {
  display: inline-block; max-width: 100%; overflow-wrap: anywhere; text-decoration: none; font: 600 .98rem/1.3 var(--sans);
  color: var(--lake-dark); padding: .5rem 1.05rem; margin-block: .15rem; border: 2px solid var(--lake); border-radius: 10px;
  background: linear-gradient(var(--lake), var(--lake)) no-repeat left center / 0% 100%;
  transition: background-size .38s cubic-bezier(.2,.7,.2,1), color .25s ease, transform .25s ease, box-shadow .3s ease;
}
main .wrap a:not(.btn):hover, main .wrap a:not(.btn):focus-visible, main .story-body a:not(.btn):hover, main .story-body a:not(.btn):focus-visible {
  background-size: 100% 100%; color: #fff; transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(31,70,133,.7);
}
main .wrap a:not(.btn):active, main .story-body a:not(.btn):active { transform: translateY(0); box-shadow: none; }
main .more a:not(.btn) { color: #fff; background: linear-gradient(var(--ink), var(--ink)) no-repeat left center / 0% 100%, var(--lake); border-color: var(--lake); }
main .more a:not(.btn):hover, main .more a:not(.btn):focus-visible { border-color: var(--ink); }
@media (prefers-reduced-motion: reduce) { main .wrap a:not(.btn), main .story-body a:not(.btn) { transition: none; } main .wrap a:not(.btn):hover, main .story-body a:not(.btn):hover { transform: none; } }

/* Turnstile shared frame */
.tsbox { margin: .2rem 0 1rem; }
.tsframe { display: block; width: 320px; max-width: 100%; height: 72px; border: 0; }
.ts-note { margin: .4rem 0 0; font: 500 .95rem var(--sans); color: #8a2a2a; }

/* photo gallery (church's own photos) */
.gallery { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 1.2rem; }
@media (max-width: 1000px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.gallery figure { margin: 0; border: 2px solid var(--lake); border-radius: 12px; overflow: hidden; background: #fff; }
.gallery img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.gallery figcaption { padding: .6rem .9rem .7rem; font: 500 .95rem/1.35 var(--sans); color: var(--ink); }

/* no sideways scroll while blocks wait off-screen to fly in */
html, body { overflow-x: clip; }

/* footer map (right column) */
.foot-map iframe { display: block; width: 100%; height: 230px; border: 2px solid rgba(255,255,255,.45); border-radius: 12px; background: #dfe7f3; }
.foot-map p { margin-top: .6rem; }
.foot-map a { color: #fff; }
@media (max-width: 1100px) { .foot-in { grid-template-columns: 1fr 1fr; } .foot-map { grid-column: 1 / -1; } }

@media (max-width: 900px) { .foot-in { grid-template-columns: 1fr; } .foot-map { grid-column: auto; } }