/* Armenian glyphs follow the Latin faces and load only when needed. */
@font-face { font-family: 'Kelvinch'; src: url("../fonts/kelvinch.de4fc76389ce.woff2") format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Kelvinch'; src: url("../fonts/kelvinch-bold.2543490a82ca.woff2") format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Kelvinch'; src: url("../fonts/kelvinch-italic.fab210dd7a09.woff2") format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

/* Ink and cream are sampled from the church logo (logo_circle_original.png). */
:root {
  color-scheme: light;
  --ink: #356272;
  --ink-deep: #1f3a47;
  --night: #172d38;
  --cream: #f5f8de;
  --paper: #fbfcf2;
  --wash: #e9eecf;
  --text: #1f3440;
  --text-muted: #4d6370;
  --mist: #c9d8cf;
  --line: rgb(53 98 114 / 0.2);
  --line-strong: rgb(53 98 114 / 0.45);
  --line-dark: rgb(245 248 222 / 0.18);
  --content-width: 1184px;
  --gutter: clamp(1.25rem, 3vw, 2.5rem);
  --section-space: clamp(4rem, 8vw, 7.5rem);
  --radius: 18px;
  --radius-sm: 10px;
  --display-face: 'Cormorant Garamond', 'Kelvinch', Georgia, serif;
  --serif: 'EB Garamond', 'Kelvinch', Georgia, serif;
  --sans: 'Lato', 'Kelvinch', system-ui, sans-serif;
  --small: 0.875rem;
  --body: 1.125rem;
  --lead: clamp(1.35rem, 2vw, 1.65rem);
  --heading: clamp(2.5rem, 5vw, 4.25rem);
  --display: clamp(3.5rem, 8vw, 7rem);
  --shadow: 0 1px 2px rgb(31 58 71 / 0.06), 0 12px 32px -12px rgb(31 58 71 / 0.18);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-press: 140ms;
  --duration-ui: 200ms;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; font-variant-numeric: lining-nums; scroll-padding-top: 120px; scrollbar-color: var(--ink) var(--cream); }
body { display: flex; flex-direction: column; min-height: 100svh; background: var(--cream); color: var(--text); font: var(--body)/1.65 var(--sans); overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; }
main { flex: 1; min-width: 0; }
a { color: inherit; text-decoration: none; text-underline-offset: 5px; text-decoration-thickness: 1px; }
button { font: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
img { display: block; max-width: 100%; height: auto; }
svg { flex-shrink: 0; }
h1, h2, h3 { color: var(--ink); font-family: var(--display-face); font-weight: 500; line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; overflow-wrap: anywhere; }
p { text-wrap: pretty; }
[hidden] { display: none !important; }
::selection { background: var(--ink); color: var(--cream); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
.skip-link { position: fixed; top: 1rem; left: 1rem; z-index: 200; padding: 0.75rem 1.25rem; border-radius: 999px; background: var(--ink); color: var(--cream); transform: translateY(-200%); }
.skip-link:focus { transform: none; }

/* The CL monogram, tinted with currentColor so it works on cream and navy. */
.brand-mark { display: block; aspect-ratio: 480 / 605; background: currentColor; -webkit-mask: url("../img/cl-mark.6521cb380966.webp") center / contain no-repeat; mask: url("../img/cl-mark.6521cb380966.webp") center / contain no-repeat; }
/* Small tracked capitals, after the logo's "Armenian Pentecostal Church" line. */
.eyebrow, .invitation-identity, .footer-heading, .join-card-label, .week-day, .blog-card-month, .church-guide-card time, .event-date, .scripture cite, .live-badge, .ergaran-platforms, .sermon-source {
  font-family: var(--sans); font-size: 0.75rem; font-weight: 700; line-height: 1.5; letter-spacing: 0.18em; text-transform: uppercase;
}

/* Masthead: the logo's cream ground, so the round logo sits in it seamlessly. */
.navbar { position: sticky; top: 0; z-index: 100; width: 100%; background: rgb(245 248 222 / 0.92); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
.nav-inner { max-width: 1440px; margin: auto; padding: 0.75rem var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 84px; }
.nav-brand { display: flex; align-items: center; gap: 0.85rem; max-width: 320px; min-width: 0; color: var(--ink); font: 600 1.2rem/1.15 var(--display-face); }
.nav-brand-name { min-width: 0; text-wrap: balance; }
.nav-mark { width: 30px; flex-shrink: 0; color: var(--ink); }
.nav-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.1rem; list-style: none; min-width: 0; }
.nav-links a { position: relative; display: block; padding: 0.7rem 0.75rem; color: var(--text); font-size: 0.9375rem; white-space: nowrap; transition: color var(--duration-ui); }
.nav-links a:not(.lang-pill)::after { content: ''; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.4rem; height: 2px; border-radius: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-ui) var(--ease); }
.nav-links a.active { color: var(--ink); font-weight: 700; }
.nav-links a.active::after { transform: none; }
.nav-lang-toggle { display: flex; gap: 2px; margin-left: 0.75rem; padding: 3px; border: 1px solid var(--line-strong); border-radius: 999px; }
.nav-links .lang-pill { min-width: 44px; min-height: 38px; padding: 0.45rem 0.6rem; border-radius: 999px; text-align: center; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; }
.nav-links .lang-pill--active { background: var(--ink); color: var(--cream); }
.nav-toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 48px; height: 48px; flex-shrink: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; transition: transform var(--duration-press) var(--ease); }
.nav-toggle span { width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform var(--duration-ui) var(--ease), opacity var(--duration-ui); }
.nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.navbar[data-menu-motion='instant'] :is(.nav-links, .nav-toggle span) { transition: none; }

.btn { display: inline-flex; justify-content: center; align-items: center; gap: 0.6rem; min-height: 50px; max-width: 100%; padding: 0.8rem 1.6rem; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font-size: 1rem; font-weight: 700; line-height: 1.4; text-align: center; transition: transform var(--duration-press) var(--ease), background-color var(--duration-ui), color var(--duration-ui), border-color var(--duration-ui); }
.btn-primary, .btn-youtube { background: var(--ink); color: var(--cream); }
.btn svg { fill: currentColor; }
.btn:active:not(:focus-visible), .nav-toggle:active:not(:focus-visible) { transform: scale(0.97); }
.btn:focus-visible { transition: none; }
.text-link, .about-more-link { display: inline-block; padding: 0.6rem 0; text-decoration: underline; text-decoration-color: var(--line-strong); font-size: 1rem; font-weight: 700; color: var(--ink); transition: text-decoration-color var(--duration-ui); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem; }

/* Home: the logo at page scale — wordmark, tracked subtitle, and the CL seal. */
.invitation-hero { position: relative; padding: clamp(2.5rem, 6vw, 5.5rem) var(--gutter) clamp(2rem, 4vw, 3.5rem); background: var(--cream); overflow: hidden; }
.invitation-sheet { max-width: var(--content-width); margin: auto; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: 2.5rem clamp(2rem, 6vw, 6rem); }
.invitation-sheet h1 { font-size: clamp(4.25rem, 10vw, 9rem); font-weight: 500; line-height: 0.92; letter-spacing: -0.02em; margin-bottom: 1.5rem; }
.invitation-identity { color: var(--ink); max-width: 34rem; }
.invitation-message { max-width: 30rem; margin: 1.75rem 0 2.25rem; font: italic 500 var(--lead)/1.35 var(--display-face); color: var(--text); }
.invitation-seal { position: relative; justify-self: center; display: grid; place-items: center; width: min(100%, 440px); aspect-ratio: 1; border-radius: 50%; background: var(--wash); color: var(--ink); box-shadow: 0 0 0 clamp(10px, 1.4vw, 18px) var(--cream), 0 0 0 calc(clamp(10px, 1.4vw, 18px) + 1px) var(--line-strong); }
.invitation-seal .brand-mark { width: 42%; translate: 0 -2%; }
.week-strip { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 1.5rem 2.5rem; margin-top: clamp(1rem, 3vw, 2.5rem); padding-top: 2rem; border-top: 1px solid var(--line-strong); list-style: none; }
.week-strip li { min-width: 0; }
.week-link .text-link { white-space: nowrap; }
.week-day { color: var(--ink); }
.week-time { font: 500 clamp(1.75rem, 2.6vw, 2.25rem)/1.15 var(--display-face); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; margin: 0.35rem 0 0.15rem; }
.week-note { font-size: 0.9375rem; color: var(--text-muted); }

/* Gathering picker (About): the same schedule, one day at a time. */
.gathering-picker { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; min-width: 0; }
.gathering-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; width: fit-content; max-width: 100%; margin: 0 auto 1.5rem; padding: 3px; border: 1px solid var(--line-strong); border-radius: 999px; }
.gathering-tabs button { border: 0; border-radius: 999px; background: transparent; color: var(--ink); padding: 0.55rem 1.1rem; min-height: 44px; font-size: 0.9375rem; font-weight: 700; transition: transform var(--duration-press) var(--ease), background-color var(--duration-ui); }
.gathering-tabs button[aria-pressed='true'] { background: var(--ink); color: var(--cream); }
.gathering-tabs button:active { transform: scale(0.97); }
.gathering-panels { display: grid; gap: 1.5rem; text-align: center; }
.gathering-time { font: 500 clamp(2rem, 3.4vw, 2.75rem)/1.1 var(--display-face); color: var(--ink); margin-bottom: 0.4rem; font-variant-numeric: lining-nums tabular-nums; }
.gathering-panels p + p { font-size: 1rem; color: var(--text-muted); }
.gathering-picker > .text-link { display: block; width: fit-content; margin: 0.75rem auto 0; font-size: var(--small); }
.gathering-picker[data-enhanced] .gathering-panels { min-height: 5.4rem; align-content: center; }

/* Shared page measures. */
.section { width: 100%; max-width: calc(var(--content-width) + 2 * var(--gutter)); margin: auto; padding: 0 var(--gutter) var(--section-space); }
.premium-heading, .section-title { font-size: var(--heading); margin-bottom: 1.25rem; }
.section-accent { display: none; }
.page-hero { max-width: calc(var(--content-width) + 2 * var(--gutter)); margin: auto; padding: clamp(3rem, 7vw, 6.5rem) var(--gutter) clamp(2.5rem, 4vw, 3.5rem); }
.page-hero h1 { font-size: var(--display); max-width: 16ch; margin-bottom: 1.25rem; }
.page-hero p { font: italic 500 var(--lead)/1.4 var(--display-face); max-width: 44rem; }
.welcome-section { padding: var(--section-space) var(--gutter); background: var(--paper); border-block: 1px solid var(--line); }
.welcome-inner { max-width: var(--content-width); margin: auto; display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 7vw, 7rem); align-items: center; }
.welcome-art { overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); }
.welcome-art img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.welcome-text { margin-bottom: 1rem; max-width: 34rem; }
.scripture { margin-top: 2.5rem; padding-left: 1.5rem; border-left: 2px solid var(--ink); font: italic 500 clamp(1.5rem, 2.2vw, 1.85rem)/1.3 var(--display-face); color: var(--ink); }
.scripture cite { display: block; margin-top: 0.85rem; font-style: normal; color: var(--text-muted); }

.join-section { padding: var(--section-space) var(--gutter); }
.join-inner { max-width: var(--content-width); margin: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: clamp(2rem, 5vw, 4rem); }
.join-subtitle { grid-column: 1; max-width: 18rem; font: italic 500 var(--lead)/1.35 var(--display-face); }
.join-grid { grid-column: 2; grid-row: 1 / 4; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.join-card { position: relative; display: flex; flex-direction: column; gap: 0.2rem; padding: 1.75rem 1.75rem 1.6rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); transition: transform var(--duration-ui) var(--ease), border-color var(--duration-ui), box-shadow var(--duration-ui); }
.join-card::after { content: '→'; position: absolute; top: 1.45rem; right: 1.6rem; color: var(--ink); transition: transform var(--duration-ui) var(--ease); }
.join-card-label { color: var(--ink); margin-bottom: 0.85rem; letter-spacing: 0.18em; }
.join-card-value { font: 500 1.6rem/1.2 var(--display-face); color: var(--ink); }
.join-card-note { font-size: 1rem; color: var(--text-muted); }

/* Dark bands are inset cards so they never stack against the footer. */
.stream-section, .ergaran-cta-section { padding: 0 var(--gutter) var(--section-space); }
.stream-inner, .ergaran-cta-inner { position: relative; max-width: var(--content-width); margin: auto; padding: clamp(2.25rem, 5vw, 4.5rem); border-radius: calc(var(--radius) + 6px); background: var(--ink); color: var(--cream); overflow: hidden; isolation: isolate; }
.stream-inner { display: flex; justify-content: space-between; align-items: center; gap: 3rem; }
:is(.stream-inner, .ergaran-cta-inner, .ergaran-hero, .site-footer)::before { content: ''; position: absolute; z-index: -1; right: -2%; top: 50%; height: 150%; aspect-ratio: 480 / 605; translate: 0 -50%; background: currentColor; opacity: 0.07; -webkit-mask: url("../img/cl-mark.6521cb380966.webp") center / contain no-repeat; mask: url("../img/cl-mark.6521cb380966.webp") center / contain no-repeat; pointer-events: none; }
.stream-copy { max-width: 40rem; }
.stream-section h2, .ergaran-cta-section h2 { font-size: var(--heading); color: var(--cream); margin-bottom: 1rem; }
.stream-inner > .btn { flex-shrink: 0; }
:is(.stream-section, .ergaran-hero, .ergaran-cta-section, .beliefs-section) .btn { background: var(--cream); border-color: var(--cream); color: var(--ink); }
:is(.stream-section, .ergaran-hero, .ergaran-cta-section, .beliefs-section, .site-footer) :focus-visible { outline-color: var(--cream); }

/* About reads as a welcome, a statement of faith, then an invitation. */
.about-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 1.5rem 4rem; }
.about-hero h1 { margin: 0; }
.about-hero > p { max-width: 25rem; }
.about-index { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.about-index a { padding: 0.6rem 1.15rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink); font-size: 0.9375rem; font-weight: 700; transition: background-color var(--duration-ui), color var(--duration-ui); }
.about-index a:last-child { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.about-intro { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: clamp(2rem, 7vw, 6rem); padding-top: 1rem; }
.about-story p { margin-bottom: 1.25rem; }
.about-story .hero-actions { margin-top: 2rem; }
.about-art { overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); }
.about-art img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.beliefs-section { background: var(--ink-deep); color: var(--cream); padding: var(--section-space) var(--gutter); }
.beliefs-inner { max-width: var(--content-width); margin: auto; display: grid; grid-template-columns: 1fr 1.6fr; gap: 4rem; }
.beliefs-section h2, .beliefs-section h3 { color: var(--cream); }
.beliefs-heading h2 { max-width: 8ch; position: sticky; top: 130px; }
.beliefs-list { display: flex; flex-direction: column; counter-reset: belief; }
.about-belief { counter-increment: belief; padding: 2rem 0 2rem 3.25rem; border-top: 1px solid var(--line-dark); position: relative; }
.about-belief:first-child { padding-top: 0; border-top: 0; }
.about-belief::before { content: counter(belief, upper-roman); position: absolute; left: 0; font: 500 1.35rem/1.6 var(--display-face); color: var(--mist); }
.about-belief:first-child::before { top: 0; }
.about-belief h3 { font-size: clamp(1.75rem, 2.6vw, 2.25rem); margin-bottom: 0.85rem; }
.about-scripture { font-size: var(--small); margin-top: 1rem; color: var(--mist); }
.about-visit { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; padding-top: var(--section-space); }
.about-visit > div:first-child > p { margin-bottom: 1.25rem; }
.about-visit .gathering-picker { padding: 2.5rem 1.5rem; }
.church-guides-intro { max-width: 42rem; margin-bottom: 2rem; }
.church-guides-grid { display: flex; flex-direction: column; gap: 1rem; }
.church-guide-card { display: grid; grid-template-columns: 1fr 2fr; gap: 0.5rem 3rem; padding: 2rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.church-guide-card time { color: var(--text-muted); grid-column: 1; }
.church-guide-card h3 { grid-column: 1; font-size: 1.6rem; line-height: 1.2; }
.church-guide-card p { grid-column: 2; grid-row: 1 / 3; color: var(--text-muted); }
.church-guide-card a { text-decoration: underline; text-decoration-color: var(--line-strong); }
.about-more-link { margin-top: 1.25rem; }

/* Services: a weekly programme. */
.services-grid { display: flex; flex-direction: column; gap: 1rem; }
.service-card { display: grid; grid-template-columns: 1fr 1fr 1.7fr; gap: 2rem; padding: 2.5rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); align-items: start; }
.service-card h2 { font-size: clamp(2.25rem, 3.8vw, 3.25rem); }
.service-time { font: 500 var(--lead)/1.3 var(--display-face); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.service-details { list-style: none; display: grid; gap: 0.6rem; }
.service-details li { font-size: 1rem; }
.service-card--featured { position: relative; overflow: hidden; isolation: isolate; background: var(--ink); border-color: var(--ink); color: var(--cream); }
.service-card--featured :is(h2, .service-time) { color: var(--cream); }
.note-box { padding: 2rem 2.5rem; background: var(--wash); border-radius: var(--radius); margin-top: 1.5rem; }
.upcoming-events { margin-top: var(--section-space); }
.upcoming-events-subtitle { margin-bottom: 2rem; }
.event-grid { display: flex; flex-direction: column; gap: 1rem; }
.event-card { display: grid; grid-template-columns: 1fr 1.2fr 1.5fr; gap: 0.75rem 2rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; align-items: baseline; }
.event-date { color: var(--ink); }
.event-card h3 { font-size: 1.75rem; }
.event-card p { font-size: 1rem; color: var(--text-muted); }
.event-time { grid-column: 1; font-variant-numeric: lining-nums tabular-nums; }
.event-calendar { grid-column: 2 / -1; width: fit-content; font-size: 1rem; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); padding: 0.5rem 0; }

.location-layout { display: grid; grid-template-columns: 1fr 1.2fr; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.address-card { background: var(--paper); padding: clamp(1.5rem, 4vw, 3.5rem); min-width: 0; }
.address-card h2 { font-size: clamp(2.25rem, 3.4vw, 3.25rem); margin-bottom: 1.5rem; }
.address-text { color: var(--ink); font: 500 var(--lead)/1.4 var(--display-face); margin-bottom: 1.5rem; }
.address-schedule { background: var(--wash); border-radius: var(--radius-sm); padding: 0.75rem 1.25rem; margin-bottom: 2rem; }
.address-schedule-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; padding: 0.6rem 0; font-size: 1rem; }
.address-schedule-row + .address-schedule-row { border-top: 1px solid var(--line); }
.address-day { font-weight: 700; color: var(--ink); }
.address-time { font-variant-numeric: lining-nums tabular-nums; }
.address-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.map-card { position: relative; min-height: 460px; background: var(--wash); }
.map-card iframe, .watch-embed-wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.watch-embed { margin-bottom: 2rem; }
.watch-embed-wrapper { position: relative; aspect-ratio: 16 / 9; background: var(--ink-deep); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.watch-unavailable { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 3rem; margin-bottom: 2rem; }
.watch-unavailable h2 { font-size: var(--heading); margin-bottom: 1rem; }
.watch-unavailable p { max-width: 42rem; margin-bottom: 1.5rem; }
.watch-cta { max-width: 50rem; padding: 1rem 0; }
.watch-cta p { margin-bottom: 1.5rem; }
.live-badge { display: flex; align-items: center; gap: 0.5rem; color: var(--ink); margin-bottom: 1rem; }
.live-dot { display: none; }
.video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 2rem; }
.video-card { display: block; min-width: 0; transition: transform var(--duration-ui) var(--ease); }
.video-thumbnail { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; background: var(--ink); color: var(--cream); border-radius: var(--radius-sm); overflow: hidden; }
.video-thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-title { font: 500 1.4rem/1.25 var(--display-face); color: var(--ink); margin-top: 1rem; }

.sermon-section { padding: 0 var(--gutter) var(--section-space); }
.sermon-inner { max-width: var(--content-width); margin: auto; }
.sermon-intro { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 2rem; margin-bottom: 2.5rem; }
.sermon-intro h2 { margin: 0; }
.sermon-intro p { max-width: 28rem; color: var(--text-muted); }
.sermon-selection { display: grid; grid-template-columns: 1.7fr 1fr; gap: 1.5rem 2rem; align-items: start; }
.sermon-selection > a { display: block; min-width: 0; }
.sermon-feature { grid-row: span 2; }
.sermon-selection img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); transition: transform var(--duration-ui) var(--ease), box-shadow var(--duration-ui); }
.sermon-caption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.35rem 1rem; padding: 0.85rem 0; font-size: 0.9375rem; color: var(--text-muted); }
.sermon-caption > span:first-child { font: 500 1.35rem/1.2 var(--display-face); color: var(--ink); }
.sermon-feature .sermon-caption > span:first-child { font-size: 1.75rem; }
.sermon-source { display: inline-block; margin-top: 1.5rem; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); }

/* The hymnal's title page and contents. */
.ergaran-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--ink-deep); color: var(--cream); padding: clamp(3rem, 7vw, 6.5rem) var(--gutter); margin-bottom: var(--section-space); }
.ergaran-hero-inner { max-width: var(--content-width); margin: auto; }
.ergaran-hero h1 { font-size: var(--display); color: var(--cream); margin-bottom: 1.5rem; }
.ergaran-tagline { font: italic 500 var(--lead)/1.35 var(--display-face); margin-bottom: 1.5rem; max-width: 36rem; }
.ergaran-rating-badge { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.ergaran-hero-cta { margin-bottom: 1rem; }
.ergaran-platforms { color: var(--mist); }
.hero-ornament, .ergaran-feature-icon, .ergaran-mode-number, .ergaran-highlight-divider { display: none; }
.ergaran-features-section, .ergaran-modes-section, .ergaran-highlights { padding: 0 var(--gutter) var(--section-space); }
.ergaran-features-inner, .ergaran-modes-inner, .ergaran-highlights-inner { max-width: var(--content-width); margin: auto; }
.ergaran-subtitle { max-width: 42rem; margin-bottom: 2rem; }
.ergaran-features-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ergaran-feature-card { padding: 2rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.ergaran-feature-card h3, .ergaran-mode-card h3 { font-size: 1.75rem; margin-bottom: 0.6rem; }
.ergaran-feature-card p { color: var(--text-muted); }
.ergaran-highlights-inner { display: flex; justify-content: space-between; gap: 2rem; border-block: 1px solid var(--line-strong); padding-block: 2.5rem; }
.ergaran-highlight { flex: 1; }
.ergaran-highlight-value { display: block; color: var(--ink); font: 500 var(--heading)/1 var(--display-face); margin-bottom: 0.75rem; }
.ergaran-highlight-label { font-size: 1rem; color: var(--text-muted); }
.ergaran-modes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; }
.ergaran-mode-card { padding-top: 1.5rem; border-top: 2px solid var(--ink); }
.ergaran-cta-inner > p { margin-bottom: 1.5rem; max-width: 40rem; }
.ergaran-cta-note { font-size: var(--small); margin-top: 1.5rem; color: var(--mist); }

/* Articles stay fully readable, including long titles and embedded tables. */
.blog-category-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 2rem; }
.blog-category-filter-label { font-size: 1rem; margin-right: 0.5rem; }
.blog-category-link, .blog-detail-category { display: inline-block; max-width: 100%; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink); padding: 0.55rem 1.1rem; font-size: 0.9375rem; font-weight: 700; transition: background-color var(--duration-ui), color var(--duration-ui); }
.blog-category-link.is-active { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.blog-list { display: flex; flex-direction: column; gap: 1rem; }
.blog-card { display: flex; gap: 3rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 2.5rem; transition: transform var(--duration-ui) var(--ease), border-color var(--duration-ui), box-shadow var(--duration-ui); }
.blog-card-date { flex-shrink: 0; display: flex; flex-direction: column; width: 5rem; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.blog-card-day { font: 500 3.25rem/1 var(--display-face); }
.blog-card-year { font-size: var(--small); color: var(--text-muted); }
.blog-card-body { min-width: 0; }
.blog-card-body h2 { font-size: clamp(1.85rem, 3vw, 2.5rem); line-height: 1.15; }
.blog-card-categories { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.blog-category-tag { display: inline-block; max-width: 100%; background: var(--wash); border-radius: 999px; padding: 0.25rem 0.75rem; font-size: var(--small); color: var(--ink); }
.blog-card-excerpt { margin-top: 1rem; max-width: 65ch; color: var(--text-muted); }
.blog-author { font-size: var(--small); color: var(--text-muted); }
.blog-card .blog-author { display: block; margin-top: 1rem; }
.blog-empty { padding: 2rem 0; }
.blog-detail-categories { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.page-blog_detail .page-hero h1, .page-about_detail .page-hero h1 { max-width: 24ch; font-size: clamp(2.75rem, 5.5vw, 4.75rem); line-height: 1.05; }
.blog-yt-link { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.7rem 1.15rem; margin-top: 1.25rem; font-size: 1rem; font-weight: 700; color: var(--ink); }
.blog-yt-link svg path { fill: currentColor; }
.blog-yt-link svg path[fill='white'] { fill: var(--cream); }
.blog-breadcrumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 auto 1.5rem; max-width: 850px; font-size: var(--small); color: var(--text-muted); }
.blog-breadcrumbs > * { min-width: 0; max-width: 100%; }
.blog-breadcrumbs a { text-decoration: underline; text-decoration-color: var(--line-strong); }
.blog-post-content { max-width: 850px; margin: auto; padding: clamp(1.25rem, 5vw, 4rem); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); font: 1.25rem/1.75 var(--serif); }
.blog-post-content > :first-child { margin-top: 0; }
.blog-post-content > :last-child { margin-bottom: 0; }
.blog-post-content :is(h1, h2, h3) { margin: 2.25rem 0 1rem; line-height: 1.15; }
.blog-post-content h1 { font-size: 2.75rem; }
.blog-post-content h2 { font-size: 2.25rem; }
.blog-post-content h3 { font-size: 1.85rem; }
.blog-post-content :is(p, ul, ol) { margin-bottom: 1.5rem; }
.blog-post-content :is(ul, ol) { padding-left: 1.5rem; }
.blog-post-content li { margin-bottom: 0.5rem; }
.blog-post-content blockquote { border-left: 2px solid var(--ink); padding: 0.25rem 0 0.25rem 1.5rem; margin: 2rem 0; font: italic 500 1.5rem/1.4 var(--display-face); color: var(--ink); }
.blog-post-content blockquote p:last-child { margin: 0; }
.blog-post-content img { margin: 1.75rem 0; border-radius: var(--radius-sm); }
.blog-post-content a, .blog-back-link { color: var(--ink); text-decoration: underline; }
.blog-post-content pre { background: var(--ink-deep); color: var(--cream); border-radius: var(--radius-sm); padding: 1.5rem; overflow-x: auto; margin: 1.75rem 0; font-size: 1rem; }
.blog-post-content code { font-family: monospace; font-size: 0.9em; }
.blog-post-content :not(pre) > code { background: var(--wash); border-radius: 4px; padding: 0.15rem 0.4rem; }
.blog-post-content hr { border: 0; height: 1px; background: var(--line-strong); margin: 3rem 0; }
.blog-post-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1.5rem 0; }
.blog-post-content th, .blog-post-content td { padding: 0.65rem; min-width: 8rem; border: 1px solid var(--line-strong); overflow-wrap: normal; } /* taste-skill-ignore: real data table */
.blog-back-link { display: block; width: fit-content; margin: 2rem auto 0; padding: 0.75rem 0; font-size: 1rem; font-weight: 700; }

/* The footer is the back of the programme: deep navy, cream type, the mark. */
.site-footer { position: relative; isolation: isolate; overflow: hidden; background: var(--night); color: var(--cream); padding: clamp(3.5rem, 7vw, 5.5rem) var(--gutter) 2rem; }
.site-footer::before { opacity: 0.04; height: 130%; right: 4%; }
.footer-invitation { max-width: var(--content-width); margin: 0 auto 3rem; font: italic 500 clamp(2.25rem, 5vw, 4rem)/1.1 var(--display-face); text-wrap: balance; }
.footer-inner { max-width: var(--content-width); margin: 0 auto 3rem; padding-top: 2.5rem; border-top: 1px solid var(--line-dark); display: grid; grid-template-columns: 1.4fr 0.8fr 1fr; gap: 3rem; }
.footer-inner > * { min-width: 0; }
.footer-brand { display: flex; align-items: center; gap: 1rem; max-width: 340px; }
.footer-logo { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; }
.footer-brand strong { font: 500 1.5rem/1.2 var(--display-face); }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; }
.footer-heading { color: var(--mist); margin-bottom: 0.75rem; }
.footer-links a { padding: 0.35rem 0; font-size: 1rem; }
.footer-address { display: block; font-size: 1rem; }
.footer-address > span { display: block; margin-top: 0.75rem; text-decoration: underline; text-decoration-color: var(--line-dark); }
.footer-copyright { max-width: var(--content-width); margin: auto; font-size: var(--small); color: var(--mist); }
.text-center { text-align: center; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.pt-0 { padding-top: 0; }
.divider { border: 0; margin: 2rem 0; }
.not-found-note { max-width: 35rem; margin: 0 auto 2rem; }
.text-center .hero-actions { justify-content: center; }
.ts-overlay { display: none; position: fixed; inset: 0; z-index: 9999; background: var(--cream); align-items: center; justify-content: center; flex-direction: column; gap: 1.25rem; padding: 1.5rem; }
.ts-overlay-logo { width: 72px; height: 72px; border-radius: 50%; }
.ts-overlay-text { text-align: center; }

@media (hover: hover) and (pointer: fine) {
  .nav-links a:not(.lang-pill):hover { color: var(--ink); }
  .nav-links a:not(.lang-pill):hover::after { transform: none; }
  .nav-links .lang-pill:not(.lang-pill--active):hover { background: var(--wash); }
  .btn:hover { transform: translateY(-2px); background: var(--ink); color: var(--cream); }
  .btn-primary:hover, .btn-youtube:hover { background: var(--ink-deep); border-color: var(--ink-deep); }
  :is(.stream-section, .ergaran-hero, .ergaran-cta-section, .beliefs-section) .btn:hover { background: var(--paper); border-color: var(--paper); color: var(--ink-deep); }
  .join-card:hover, .blog-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow); }
  .join-card:hover::after { transform: translateX(4px); }
  .video-card:hover { transform: translateY(-3px); }
  .sermon-selection > a:hover img { transform: translateY(-3px); box-shadow: var(--shadow); }
  .text-link:hover, .about-more-link:hover, .sermon-source:hover, .event-calendar:hover { text-decoration-color: currentColor; }
  .footer-links a:hover, .footer-address:hover > span { text-decoration: underline; text-decoration-color: currentColor; }
  .about-index a:not(:last-child):hover, .blog-category-link:not(.is-active):hover, .blog-detail-category:hover, .blog-yt-link:hover { background: var(--wash); }
  .gathering-tabs button:not([aria-pressed='true']):hover { background: var(--wash); }
}

@media (max-width: 1200px) {
  .navbar { position: static; }
  .navbar[data-enhanced] { position: sticky; }
  .nav-inner { flex-wrap: wrap; }
  .nav-brand { max-width: 440px; }
  .nav-links { width: 100%; flex-direction: column; align-items: stretch; }
  .nav-links a { white-space: normal; font-size: 1.0625rem; padding: 0.8rem 1rem; }
  .nav-links a:not(.lang-pill)::after { display: none; }
  .nav-links a.active { background: var(--wash); border-radius: var(--radius-sm); }
  .navbar[data-enhanced] .nav-inner { flex-wrap: nowrap; }
  .navbar[data-enhanced] .nav-toggle { display: flex; }
  .navbar[data-enhanced] .nav-links { position: absolute; top: calc(100% + 1px); left: 0; right: 0; width: auto; padding: 1rem var(--gutter) 1.5rem; background: var(--cream); border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px -24px rgb(31 58 71 / 0.35); visibility: hidden; opacity: 0; transform: translateY(-6px); transform-origin: top; transition: opacity var(--duration-ui) var(--ease), transform var(--duration-ui) var(--ease), visibility var(--duration-ui); max-height: calc(100dvh - 110px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
  .navbar[data-enhanced] .nav-links.open { visibility: visible; opacity: 1; transform: none; }
  .nav-lang-toggle { width: fit-content; margin: 0.75rem 0 0 0.5rem; }
  .service-card { grid-template-columns: 1fr 1.2fr; }
  .service-details { grid-column: 2; }
  .stream-inner { align-items: flex-start; flex-direction: column; gap: 2rem; }
}
@media (max-width: 900px) {
  .invitation-sheet { grid-template-columns: 1fr; text-align: center; }
  .invitation-seal { grid-row: 1; width: min(62vw, 300px); }
  .invitation-identity, .invitation-message { margin-inline: auto; }
  .invitation-sheet .hero-actions { justify-content: center; }
  .week-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: left; }
  .week-link { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 800px) {
  .sermon-intro { grid-template-columns: 1fr; gap: 1rem; }
  .sermon-intro .btn { width: fit-content; }
  .sermon-selection { grid-template-columns: 1fr 1fr; }
  .sermon-feature { grid-column: 1 / -1; grid-row: auto; }
  .welcome-inner, .about-intro, .about-visit, .location-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .location-layout { gap: 0; }
  .welcome-art img { aspect-ratio: 4 / 3; object-position: center 64%; }
  .join-inner { grid-template-columns: 1fr; }
  .join-subtitle { max-width: none; margin-bottom: 2rem; }
  .join-grid { grid-column: 1; grid-row: auto; }
  .about-hero { grid-template-columns: 1fr; }
  .about-hero > p { max-width: 36rem; }
  .about-art { grid-row: 1; }
  .about-art img { aspect-ratio: 16 / 9; object-position: center 58%; }
  .beliefs-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .beliefs-heading h2 { max-width: none; position: static; }
  .event-card { grid-template-columns: 1fr 2fr; }
  .event-card p { grid-column: 2; }
  .event-time { grid-row: 2; }
  .event-calendar { grid-column: 2; }
  .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ergaran-features-grid { grid-template-columns: 1fr; }
  .ergaran-modes-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .footer-brand { grid-column: 1 / -1; }
  .church-guide-card { grid-template-columns: 1fr; gap: 1rem; }
  .church-guide-card p { grid-column: 1; grid-row: auto; }
}
@media (max-width: 600px) {
  .week-strip { grid-template-columns: 1fr; gap: 0; padding-top: 0.5rem; }
  .week-strip li:not(.week-link) { display: grid; grid-template-columns: 6.5rem 1fr; align-items: baseline; gap: 0 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
  .week-time { margin: 0; font-size: 1.6rem; }
  .week-note { grid-column: 2; }
  .week-link { padding-top: 0.75rem; }
  .join-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .sermon-selection { grid-template-columns: 1fr; gap: 1rem; }
  .nav-inner { min-height: 76px; padding-top: 0.6rem; padding-bottom: 0.6rem; gap: 0.75rem; }
  .nav-brand { font-size: 1.05rem; gap: 0.65rem; }
  .nav-mark { width: 26px; }
  .nav-toggle { width: 44px; height: 44px; }
  .invitation-sheet h1 { font-size: clamp(3.5rem, 17vw, 4.75rem); }
  .invitation-message { margin: 1.25rem auto 1.75rem; }
  .invitation-sheet .hero-actions .btn { flex: 1 1 100%; }
  .gathering-picker { padding: 1.25rem 0.75rem; }
  .gathering-tabs button { padding: 0.55rem 0.8rem; font-size: var(--small); }
  .gathering-picker[data-enhanced] .gathering-panels { min-height: 6.2rem; }
  .page-hero { padding-top: 3rem; padding-bottom: 2rem; }
  .about-index { gap: 0.4rem; }
  .about-index a { font-size: var(--small); padding: 0.55rem 0.9rem; }
  .about-belief { padding-left: 2.5rem; }
  .hero-actions { gap: 0.75rem; }
  .join-card { padding: 1.5rem; }
  .scripture { margin-top: 2rem; }
  .service-card { grid-template-columns: 1fr; gap: 1rem; padding: 2rem 1.5rem; }
  .service-details { grid-column: 1; }
  .note-box { padding: 1.5rem; }
  .event-card { grid-template-columns: 1fr; gap: 0.85rem; padding: 1.5rem; }
  .event-card p, .event-time, .event-calendar { grid-column: 1; grid-row: auto; }
  .address-buttons .btn { width: 100%; }
  .map-card { min-height: 340px; }
  .video-grid { grid-template-columns: 1fr; }
  .watch-unavailable { padding: 2rem 1.5rem; }
  .ergaran-feature-card { padding: 1.5rem; }
  .ergaran-highlights-inner { flex-direction: column; gap: 2rem; }
  .blog-card { flex-direction: column; padding: 1.5rem; gap: 1rem; }
  .blog-card-date { flex-direction: row; align-items: baseline; gap: 0.35rem; width: auto; }
  .blog-card-day { font: 700 var(--small)/1.5 var(--sans); }
  .blog-category-filter-label { width: 100%; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-brand { grid-column: 1; }
  .stream-inner, .ergaran-cta-inner { border-radius: var(--radius); }
}

/* Armenian: no display face covers it, so Kelvinch carries headings with roomier leading. */
:lang(hy) :is(h1, h2, h3) { line-height: 1.3; letter-spacing: 0; }
:lang(hy) .invitation-sheet h1 { font-size: clamp(2.5rem, 7vw, 6rem); }
:lang(hy) .page-hero h1 { font-size: clamp(2.5rem, 6vw, 5rem); }
:lang(hy) :is(.eyebrow, .invitation-identity, .footer-heading, .join-card-label, .week-day, .blog-card-month, .church-guide-card time, .event-date, .scripture cite, .live-badge, .ergaran-platforms, .sermon-source) { letter-spacing: 0.06em; font-size: 0.8125rem; }
@keyframes reading-entrance { from { opacity: 0.65; } to { opacity: 1; } }
@keyframes title-entrance { from { opacity: 0.65; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes image-settle { from { transform: scale(1.035); } to { transform: none; } }
@keyframes seal-settle { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .reading-entered { animation: reading-entrance 600ms var(--ease) var(--entrance-delay, 0ms); }
  h1.reading-entered { animation-name: title-entrance; }
  img.reading-entered { animation-name: image-settle; animation-duration: 900ms; }
  .invitation-seal .brand-mark { animation: seal-settle 1100ms var(--ease) 120ms both; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  :is(.btn, .nav-toggle, .join-card, .video-card, .blog-card, .nav-links, .gathering-tabs button, .sermon-selection img) { transform: none !important; }
}
@media (prefers-contrast: more) { :root { --text-muted: var(--text); --line: var(--line-strong); } }
@media (forced-colors: active) {
  .brand-mark, :is(.stream-inner, .ergaran-cta-inner, .ergaran-hero, .site-footer)::before { forced-color-adjust: none; background: CanvasText; }
  .nav-links a.active, .blog-category-link.is-active, .lang-pill--active, .gathering-tabs button[aria-pressed='true'] { outline: 2px solid; text-decoration: underline; }
  .btn, .gathering-tabs button { border: 2px solid ButtonText; }
}