/* Hillcrest Church · the inner pages, in the home page's language (hillcrest.css is loaded first).
   The circle is the window and the frame (page heads, portraits, dates, the play button); the H's stems rule the
   lists, quotes and pairs; the H's crossbar sweeps under every page head and lands on the ring of the first heading.
   Ink on warm white, brick for small labels, door red for the way in. Straight 3px corners, no pills, no icon grids. */

/* ---------- page head: title and lede beside a window ---------- */
.ph { padding-top: clamp(28px, 5vw, 64px); }
.ph-grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .ph-grid { grid-template-columns: 1.2fr .8fr; gap: clamp(40px, 6vw, 96px); } }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; margin: 0 0 18px; padding: 0; font: 400 .78rem/1.3 var(--cond); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3); }
.crumbs li + li::before { content: "/"; margin: 0 10px; color: var(--ink-3); }
.crumbs a { display: inline-block; padding: 8px 0; color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--brick); }
.crumbs span { display: inline-block; padding: 8px 0; }
.ph h1 { font: 400 clamp(3.2rem, 7.4vw, 6.2rem)/.92 var(--display); letter-spacing: .01em; color: var(--ink); max-width: 12ch; margin-bottom: 24px; }
.ph-lede { font-size: clamp(1.06rem, 1.3vw, 1.2rem); line-height: 1.65; max-width: 34em; margin: 0; border-left: 3px solid var(--ink); padding: 2px 0 2px 18px; }
.window-ph { width: min(100%, 400px); }
@media (max-width: 899px) { .window-ph { width: min(100%, 340px); } }
.window-ph .window-glass img { object-position: 50% 50%; }

/* ---------- sections ---------- */
.sec { padding: clamp(72px, 9vw, 128px) 0; }
.sec-alt { background: var(--paper-2); }
.sec-first { padding-top: clamp(14px, 2vw, 24px); }
.sec-head { margin-bottom: clamp(28px, 4vw, 48px); }
.sec-head > p:last-child { margin-bottom: 0; }
.h2 { font: 400 clamp(2.6rem, 5.4vw, 4.4rem)/.95 var(--display); letter-spacing: .015em; margin-bottom: 22px; max-width: 16ch; }
.h3 { font: 400 clamp(1.9rem, 3vw, 2.5rem)/1 var(--display); letter-spacing: .02em; margin-bottom: 18px; }
.intro { max-width: 36em; font-size: 1.1rem; }

/* the lintel: where the page head's sweep lands, a ring over a heading held between two rules */
.lintel { text-align: center; margin-bottom: clamp(40px, 5vw, 64px); }
.lintel-ring { display: block; width: 40px; height: 40px; margin: 0 auto 14px; overflow: visible; }
.lintel-ring .draw { stroke-width: 2.4; }
.lintel .frieze { margin-top: 0; }

/* prose: what editors type */
.prose { max-width: 38em; }
.prose > :last-child { margin-bottom: 0; }
.prose a { color: var(--ink); text-decoration-color: var(--brick); text-underline-offset: 3px; }
.prose h2 { font: 400 clamp(2rem, 3.2vw, 2.6rem)/1 var(--display); letter-spacing: .02em; margin: 1.4em 0 .5em; }
.prose h3 { font: 400 clamp(1.5rem, 2.2vw, 1.85rem)/1.05 var(--display); letter-spacing: .03em; margin: 1.5em 0 .45em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.prose li { margin-bottom: .35em; }
.prose blockquote { margin: 0 0 1.4em; padding: 4px 0 4px 22px; border-left: 3px solid var(--ink); color: var(--ink); }

.split { display: grid; gap: 44px; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1.1fr .9fr; gap: clamp(48px, 7vw, 110px); } }

/* ---------- About: who we are, history, beliefs, leadership ---------- */
.who-side .stem-quote { margin-top: 4px; }
.timeline ol { list-style: none; margin: 0; padding: 4px 0 0; border-left: 2px solid var(--ink); }
.timeline li { position: relative; margin: 0; padding: 0 0 26px 30px; }
.timeline li:last-child { padding-bottom: 4px; }
.timeline li::before { content: ""; position: absolute; left: -9px; top: .2em; width: 16px; height: 16px; box-sizing: border-box; border: 2px solid var(--brick); border-radius: 50%; background: var(--paper-2); }
.timeline strong { display: block; font: 400 1.6rem/1 var(--display); letter-spacing: .03em; color: var(--ink); margin-bottom: 6px; }
.timeline p { margin: 0; }
.photo-frame { margin: 0 auto; width: min(100%, 460px); }
.photo-frame .doorway-frame img { aspect-ratio: auto; object-fit: contain; background: var(--white); }
.photo-frame figcaption { margin-top: 20px; text-align: center; font: 300 .8rem/1.4 var(--cond); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3); }

.doctrine { max-width: 46em; margin-top: clamp(36px, 5vw, 56px); }
.doctrine-title { font: 400 clamp(2rem, 3.4vw, 2.8rem)/1 var(--display); letter-spacing: .02em; margin-bottom: 22px; }
.doctrine blockquote p { font-size: 1.12rem; line-height: 1.6; }
.doctrine h3 { margin: 30px 0 8px; padding-top: 18px; border-top: 1px solid var(--hair); }

.affils { display: grid; gap: 26px; margin-top: clamp(48px, 6vw, 72px); padding: 26px 0; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.affil p { margin: 0 0 10px; }
.affil-label { font: 400 .78rem/1.3 var(--cond); text-transform: uppercase; letter-spacing: .14em; color: var(--brick); }
.affil h3 { font: 400 clamp(1.7rem, 2.4vw, 2.1rem)/1 var(--display); letter-spacing: .02em; margin-bottom: 10px; }
.affil-stem { display: block; width: 64px; height: 2px; background: var(--ink); }
@media (min-width: 900px) { .affils { grid-template-columns: 1fr 2px 1fr 2px 1fr; gap: clamp(24px, 3vw, 44px); } .affil-stem { width: 2px; height: auto; } }

/* people: a portrait in the logo's circle, ringed by its own line */
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 56px 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 340px)); justify-content: center; }
.person { text-align: center; }
.portrait { position: relative; width: min(100%, 210px); aspect-ratio: 1; margin: 0 auto 24px; }
.portrait .window-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.portrait .window-ring .ring { stroke-width: 2; }
.portrait .window-glass { inset: 6%; background: var(--paper-3); }
.initials { position: absolute; inset: 0; display: grid; place-items: center; font: 400 3.6rem/1 var(--display); letter-spacing: .04em; color: var(--ink); }
.person-role { font: 400 .78rem/1.4 var(--cond); text-transform: uppercase; letter-spacing: .14em; color: var(--brick); margin-bottom: 8px; }
.person h3 { font: 400 clamp(2rem, 2.8vw, 2.4rem)/1 var(--display); letter-spacing: .02em; margin-bottom: 6px; }
.person-creds { font: 300 .86rem/1.4 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
.person .prose { text-align: left; font-size: .98rem; }
.person .arrow-link { margin-top: 6px; }
.leaders { margin-top: clamp(64px, 8vw, 104px); }
.leaders-title { font: 400 clamp(2rem, 3.4vw, 2.8rem)/1 var(--display); letter-spacing: .02em; margin-bottom: 20px; }
.roster { list-style: none; margin: 0; padding: 0; display: grid; }
.roster li:first-child { border-top: 1px solid var(--hair); }
@media (min-width: 760px) { .roster { grid-template-columns: 1fr 1fr; column-gap: clamp(36px, 5vw, 80px); } .roster li:nth-child(2) { border-top: 1px solid var(--hair); } }
.roster li { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
@media (min-width: 520px) { .roster li { grid-template-columns: 9.5em 1fr; gap: 16px; } }
.roster span { font: 500 .8rem/1.4 var(--cond); text-transform: uppercase; letter-spacing: .14em; color: var(--brick); }
.roster b { font: 400 1.5rem/1.1 var(--display); letter-spacing: .03em; color: var(--ink); font-weight: 400; }

/* ---------- Ministries ---------- */
.ministries { border-top: 2px solid var(--ink); }
.ministry { display: grid; gap: 10px 40px; padding: clamp(30px, 4vw, 44px) 0; border-bottom: 1px solid var(--hair); scroll-margin-top: calc(var(--hdr) + 24px); }
@media (min-width: 900px) { .ministry { grid-template-columns: minmax(0, 17em) minmax(0, 1fr); } }
.m-meta .kicker { margin-bottom: 8px; }
.m-when { font: 400 .8rem/1.5 var(--cond); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-2); margin: 0; }
.m-photo { position: relative; width: 140px; aspect-ratio: 1; margin-top: 22px; }
.m-photo .window-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.m-photo .window-ring .ring { stroke-width: 2; }
.m-photo .window-glass { inset: 7%; }
.ministry h3 { font: 400 clamp(2rem, 3.2vw, 2.7rem)/1 var(--display); letter-spacing: .02em; margin-bottom: 14px; }
.m-summary { font-size: 1.1rem; color: var(--ink); max-width: 36em; }
.ministry .prose { margin-bottom: 8px; }
.empty-note { padding: 28px 0; margin: 0; color: var(--ink-3); }

.stem-band { display: grid; gap: 18px 48px; align-items: center; border-left: 3px solid var(--ink); padding: 6px 0 6px clamp(18px, 3vw, 32px); }
@media (min-width: 900px) { .stem-band { grid-template-columns: 1fr auto; } }
.stem-band h2 { font: 400 clamp(2.2rem, 4vw, 3.2rem)/1 var(--display); letter-spacing: .02em; margin-bottom: 10px; }
.stem-band p { margin: 0; max-width: 36em; }

/* ---------- Sermons: nothing loads from YouTube until someone presses play ---------- */
.screen { border: 2px solid var(--ink); padding: 10px; background: var(--paper); }
.yt { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--ink); color: var(--paper); text-decoration: none; overflow: hidden; }
.yt svg { width: clamp(76px, 11vw, 120px); height: auto; overflow: visible; margin-bottom: 22px; }
.yt .draw { stroke: var(--paper); stroke-width: 2; vector-effect: non-scaling-stroke; }
.yt .play-tri { fill: var(--paper); transition: fill .3s; }
.yt:hover .play-tri, .yt:focus-visible .play-tri { fill: var(--brick-soft); }
.yt-note { position: absolute; left: 12px; right: 12px; bottom: 10px; text-align: center; font: 400 .72rem/1.3 var(--cond); text-transform: uppercase; letter-spacing: .12em; color: #CFC7BA; }
.yt-small svg { width: clamp(56px, 8vw, 76px); margin-bottom: 18px; }
.yt-frame { position: relative; aspect-ratio: 16 / 9; background: var(--ink); }
.yt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.screen :focus-visible { outline-offset: 4px; }
.byline { font: 400 .78rem/1.5 var(--cond); text-transform: uppercase; letter-spacing: .14em; color: var(--brick); margin-bottom: 10px; }
.sermon-feature { display: grid; gap: 30px; align-items: center; }
@media (min-width: 900px) { .sermon-feature { grid-template-columns: 1.25fr .75fr; gap: clamp(40px, 5vw, 80px); } }
.sermon-feature h3 { font: 400 clamp(2.2rem, 3.8vw, 3.2rem)/.98 var(--display); letter-spacing: .015em; margin-bottom: 12px; }
.sermon-feature h3 a, .sermon-card h3 a { text-decoration: none; }
.sermon-feature h3 a:hover, .sermon-card h3 a:hover { text-decoration: underline; text-decoration-color: var(--brick); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.passage { font: 300 .9rem/1.4 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.sermon-links { display: flex; flex-wrap: wrap; gap: 4px 26px; }
.sermon-grid { list-style: none; margin: clamp(56px, 7vw, 88px) 0 0; padding: clamp(40px, 5vw, 56px) 0 0; border-top: 2px solid var(--ink); display: grid; gap: 48px 36px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.sermon-card h3 { font: 400 clamp(1.7rem, 2.2vw, 2rem)/1 var(--display); letter-spacing: .02em; margin: 18px 0 10px; }
.sermon-card .byline { margin: 18px 0 0; }
.sermon-card p { font-size: .98rem; }
.sermon-watch { margin-top: clamp(24px, 3vw, 36px); }
.sermon-watch .actions { margin-top: 26px; }

.watch-band .watch-grid { align-items: center; }
.podcast { max-width: 40em; }
.podcast .help-when { margin-bottom: 10px; }

/* ---------- Events ---------- */
.schedule { list-style: none; margin: 0 auto; padding: 0; max-width: 62em; border-top: 2px solid var(--ink); }
.schedule li { display: grid; gap: 4px 32px; padding: 20px 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
@media (min-width: 640px) { .schedule li { grid-template-columns: 12em 1fr; } }
.s-when { font: 500 .8rem/1.4 var(--cond); text-transform: uppercase; letter-spacing: .14em; color: var(--brick); margin: 0; }
.schedule h3 { font: 400 clamp(1.7rem, 2.4vw, 2.1rem)/1 var(--display); letter-spacing: .02em; margin-bottom: 6px; }
.s-time { font: 400 .92rem/1.4 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin: 0 0 4px; }
.s-note { margin: 0; color: var(--ink-3); font-size: .98rem; }

.events { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.event { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 0 clamp(20px, 3vw, 36px); padding: 28px 0; border-bottom: 1px solid var(--hair); align-items: start; }
.date-ring { position: relative; width: 92px; height: 92px; display: grid; place-content: center; text-align: center; }
.date-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.date-ring .draw { stroke-width: 2; }
.dr-m { display: block; font: 400 .74rem/1 var(--cond); text-transform: uppercase; letter-spacing: .16em; color: var(--brick); }
.dr-d { display: block; font: 400 2.5rem/1 var(--display); color: var(--ink); margin-top: 2px; }
.dr-tba { display: block; max-width: 60px; font: 400 .74rem/1.25 var(--cond); text-transform: uppercase; letter-spacing: .1em; color: var(--ink); }
.event h3 { font: 400 clamp(1.8rem, 2.6vw, 2.3rem)/1 var(--display); letter-spacing: .02em; margin: 4px 0 8px; }
.e-details { font: 400 .8rem/1.5 var(--cond); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-2); margin-bottom: 10px; }
.event p:last-child { margin-bottom: 0; }

/* ---------- Give ---------- */
.give-quote { max-width: 30em; margin: clamp(64px, 8vw, 104px) auto 0; text-align: center; }
.give-quote svg { display: block; width: 34px; height: 34px; margin: 0 auto 18px; overflow: visible; }
.give-quote .draw { stroke: var(--brick); stroke-width: 2; }
.give-quote p { font: 400 clamp(1.4rem, 2.4vw, 1.9rem)/1.4 var(--body); color: var(--ink); margin-bottom: 10px; }
.give-quote footer { font: 400 .78rem/1.3 var(--cond); text-transform: uppercase; letter-spacing: .16em; color: var(--brick); }

/* ---------- the closing band (every inner page but Give and Contact) ---------- */
.closing { padding: 0 0 clamp(72px, 9vw, 120px); }
.closing-row { display: grid; gap: 14px 40px; align-items: center; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 26px 0; }
.closing h2 { font: 400 clamp(2.6rem, 4.6vw, 3.6rem)/1 var(--display); letter-spacing: .03em; }
.closing p { margin: 0; max-width: 34em; }
@media (min-width: 900px) { .closing-row { grid-template-columns: auto 1fr auto; padding: 22px 0; } }
.sec-alt + .closing, .watch + .closing { padding-top: clamp(56px, 7vw, 96px); }

/* ---------- one sermon; contact ---------- */
.screen-one { max-width: 980px; }
.sermon-one-links { margin-top: 22px; }
.ph .passage { margin-top: -8px; }
.addr-block { margin: 0 0 22px; }
.lintel + .ministries, .lintel + .schedule { border-top: 0; }