/* ===========================================================
   Christchurch Miami microsite — shared, inherits HD monochrome + type system
   =========================================================== */
body.cs-body-pad { padding-top: 74px; }               /* clear the fixed header */

.cs-draftbar { background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; text-align: center; padding: .5rem 1rem; }
.cs-draftbar b { color: #fff; }

/* microsite tab nav */
.cs-subnav { position: sticky; top: 74px; z-index: 40; background: rgba(245,245,244,0.92); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); }
.cs-subnav .inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: flex; gap: 1.6rem; overflow-x: auto; }
.cs-subnav a { padding: .85rem 0; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; border-bottom: 2px solid transparent; transition: color .2s ease; }
.cs-subnav a:hover { color: var(--ink); }
.cs-subnav a.active { color: var(--ink); border-bottom-color: var(--ink); font-weight: 700; }

.cs-pagehead { padding: clamp(2.2rem,5vh,3.6rem) 0 clamp(2.4rem,5vh,3.4rem); }
.cs-crumb { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-faint); margin-bottom: 1rem; }
.cs-crumb a { color: var(--ink-soft); }
.cs-crumb a:hover { color: var(--ink); }

.cs-hero { padding: clamp(2rem,5vh,3.4rem) 0 clamp(2.5rem, 5vh, 4rem); }
.cs-eyebrow { font-family: var(--font-mono); font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.cs-hero-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: clamp(2rem,5vw,4rem); align-items: center; margin-top: 1rem; }
@media (max-width: 900px){ .cs-hero-grid { grid-template-columns: 1fr; } }
.cs-h1 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; font-size: clamp(2.1rem, 5vw, 3.4rem); margin-top: 1rem; }
.cs-lead { margin-top: 1.4rem; font-size: 1.15rem; line-height: 1.6; color: var(--ink-soft); font-weight: 300; max-width: 48ch; }
.cs-lead strong { color: var(--ink); font-weight: 600; }
.cs-took { margin-top: 1.6rem; display: grid; gap: .4rem; border-left: 2px solid var(--ink); padding-left: 1rem; }
.cs-took .k { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.cs-took span:not(.k) { font-size: .96rem; color: var(--ink); font-weight: 400; }
.cs-hero .btn, .cs-pagehead .btn { margin-top: 1.8rem; }

.cs-browser { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 24px 60px -34px rgba(31,41,55,.5); background: #fff; }
.cs-chrome { display: flex; align-items: center; gap: 6px; padding: .5rem .8rem; border-bottom: 1px solid var(--line); background: var(--paper); }
.cs-chrome span { width: 9px; height: 9px; border-radius: 50%; background: #cfcfca; }
.cs-chrome em { margin-left: .7rem; font-family: var(--font-mono); font-size: .72rem; color: var(--ink-faint); font-style: normal; }
.cs-browser img { display: block; width: 100%; height: auto; }

.cs-stats { margin-top: clamp(2rem,5vw,3.5rem); display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
@media (max-width: 680px){ .cs-stats { grid-template-columns: 1fr 1fr; } }
.cs-stats > div { background: var(--paper-pure); padding: 1.3rem 1.2rem; }
.cs-stats .n { font-family: var(--font-display); font-size: clamp(2rem,5vw,2.8rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1; }
.cs-stats b { display: block; margin-top: .4rem; font-size: .9rem; font-weight: 700; }
.cs-stats i { display: block; margin-top: .3rem; font-size: .8rem; color: var(--ink-soft); font-style: normal; font-weight: 300; }

.cs-band { background: var(--ink); color: var(--paper); padding: clamp(2.5rem,6vh,4rem) 0; }
.cs-band p { font-family: var(--font-display); font-size: clamp(1.3rem,3vw,1.9rem); font-weight: 300; line-height: 1.3; letter-spacing: -0.02em; max-width: 40ch; }

/* the full-cycle map (hub) */
.cs-cycle { margin-top: 2.2rem; display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; }
@media (max-width: 760px){ .cs-cycle { grid-template-columns: 1fr; } }
.cs-cyc { display: block; border: 1px solid var(--line); border-radius: 14px; padding: 1.7rem; background: var(--paper-pure); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.cs-cyc:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -26px rgba(31,41,55,.45); border-color: #d6d5d1; }
.cs-cyc .k { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.cs-cyc h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; font-size: 1.5rem; margin-top: .5rem; }
.cs-cyc p { margin-top: .6rem; color: var(--ink-soft); font-weight: 300; font-size: .98rem; line-height: 1.55; }
.cs-cyc .go { margin-top: 1.1rem; display: inline-block; font-family: var(--font-mono); font-size: .74rem; font-weight: 600; color: var(--ink); border-bottom: 2px solid var(--ink); padding-bottom: 1px; }

.cs-sec { padding: clamp(3.5rem,8vh,6rem) 0; }
.cs-sec.alt { background: var(--paper-pure); }
.cs-sec.dark { background: var(--ink); color: var(--paper); }
.cs-secnum { font-family: var(--font-mono); font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.cs-sec.dark .cs-secnum { color: #6b7280; }
.cs-h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; font-size: clamp(1.6rem,4vw,2.6rem); margin-top: .8rem; max-width: 24ch; }
.cs-body { margin-top: 1.1rem; font-size: 1.08rem; line-height: 1.65; color: var(--ink-soft); font-weight: 300; max-width: 62ch; }
.cs-body strong { color: var(--ink); font-weight: 600; }
.cs-sec.dark .cs-body { color: #cbd5d8; }
.cs-sec.dark .cs-body strong, .cs-sec.dark .cs-h2 { color: #fff; }
.cs-small { font-size: .92rem; }

/* The 17-page fan — ported from hybrid.church (monochrome re-skin).
   "One sermon" badge fans into 17 mini page-tiles that stagger in on
   scroll; hover/tap a tile for the detail panel below. */
.cs-fan { margin-top: 2rem; border: 1px solid var(--line); background: var(--paper-pure); border-radius: 14px; padding: 1.8rem 1.6rem 1.5rem; }
.cs-fan-top { display: flex; align-items: center; gap: 16px; margin-bottom: 1.2rem; }
.cs-fan-badge { background: var(--ink); color: var(--paper); padding: .7rem 1.1rem; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; white-space: nowrap; flex: 0 0 auto; border-radius: 8px; }
.cs-fan-badge em { font-family: var(--font-mono); font-style: normal; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-right: .7rem; }
.cs-fan-line { flex: 1; height: 3px; background: var(--ink); }
.cs-fan-lang { margin: 1.1rem 0 .5rem; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.cs-fan-lang i { font-style: normal; color: var(--ink-faint); opacity: .7; }
.cs-fan-row { display: grid; grid-template-columns: repeat(9, 1fr); gap: 8px; }
@media (max-width: 900px){ .cs-fan-row { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 560px){ .cs-fan-row { grid-template-columns: repeat(3, 1fr); } }
.cs-tile { position: relative; display: block; width: 100%; text-align: left; font: inherit; background: var(--paper-pure); border: 1px solid var(--line); border-radius: 5px; padding: 7px 7px 8px; cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .45s ease; }
.cs-fan[data-anim] .cs-tile { opacity: 0; transform: translateY(-8px); }
.cs-fan[data-anim] .cs-tile.is-in { opacity: 1; transform: none; }
.cs-tile:hover, .cs-tile[data-sel] { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(31,41,55,.45); }
.cs-tile-day { font-family: var(--font-mono); font-size: .56rem; font-weight: 600; letter-spacing: .08em; color: var(--ink-faint); }
.cs-tile-t { display: block; margin: 3px 0 6px; font-size: .68rem; font-weight: 700; line-height: 1.18; color: var(--ink); }
.cs-lines i { display: block; height: 2px; background: var(--line); margin-top: 3px; border-radius: 1px; }
.cs-hand { position: absolute; top: 4px; right: 6px; font-size: .68rem; color: var(--ink-soft); }
.cs-detail { margin-top: 1.1rem; border: 1px dashed var(--line); border-radius: 8px; padding: .85rem 1rem; min-height: 76px; }
.cs-detail-hint { font-size: .82rem; color: var(--ink-faint); font-style: italic; }
.cs-detail-day { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.cs-detail-t { font-weight: 700; font-size: .98rem; margin-top: .15rem; }
.cs-detail-why { font-size: .86rem; color: var(--ink-soft); font-weight: 300; margin-top: .2rem; }
.cs-detail-url { display: inline-block; margin-top: .35rem; font-family: var(--font-mono); font-size: .72rem; color: var(--ink); border-bottom: 1px solid var(--ink); word-break: break-all; }
.cs-fan-foot { margin-top: 1.2rem; font-size: .92rem; color: var(--ink-soft); font-weight: 300; }
.cs-fan-foot strong { color: var(--ink); }
.cs-fan-foot .cs-num { font-weight: 700; color: var(--ink); }

/* Count-up numerals (ported) — tabular so digits don't jitter mid-count */
.cs-num { font-variant-numeric: tabular-nums; }

/* Social grid */
.cs-social { margin-top: 2rem; display: grid; grid-template-columns: repeat(5,1fr); gap: .6rem; }
@media (max-width: 760px){ .cs-social { grid-template-columns: repeat(3,1fr); } }
.cs-social img { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); display: block; }

/* Screenshot figure grids */
.cs-2 { margin-top: 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.cs-4 { margin-top: 2rem; display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
@media (max-width: 760px){ .cs-2, .cs-4 { grid-template-columns: 1fr 1fr; } }
.cs-fig { margin: 0; }
.cs-fig img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); display: block; }
.cs-sec.dark .cs-fig img { border-color: var(--line-dark); }
.cs-fig figcaption { margin-top: .5rem; font-size: .8rem; color: var(--ink-soft); font-weight: 300; }
.cs-sec.dark .cs-fig figcaption { color: #9aa6b2; }

/* App phones */
.cs-phones { margin-top: 2rem; display: grid; grid-template-columns: repeat(5,1fr); gap: 1rem; align-items: start; }
@media (max-width: 860px){ .cs-phones { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 520px){ .cs-phones { grid-template-columns: repeat(2,1fr); } }
.cs-phone { margin: 0; }
.cs-phone img { width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line-dark); display: block; background:#000; }
.cs-phone figcaption { margin-top: .6rem; font-size: .82rem; color: #cbd5d8; font-weight: 300; }
.cs-phone figcaption b { display: inline-block; font-family: var(--font-mono); font-size: .7rem; color: #fff; margin-right: .35rem; }
.cs-phones2 { grid-template-columns: 1fr 1fr; max-width: 640px; }

/* Mentor concept card */
.cs-concept { margin-top: 2.4rem; border: 1px dashed var(--line-dark); border-radius: 14px; padding: 1.6rem 1.8rem; max-width: 640px; }
.cs-concept .tag { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #9aa6b2; }
.cs-concept h4 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: #fff; margin-top: .5rem; }
.cs-concept p { margin-top: .6rem; color: #cbd5d8; font-weight: 300; }
.cs-concept dl { margin-top: 1rem; display: grid; gap: .7rem; }
.cs-concept dt { font-size: .78rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: #9aa6b2; }
.cs-concept dd { margin: .15rem 0 0; color: #e5e7eb; font-weight: 300; }
.cs-concept .cap { margin-top: 1rem; font-size: .8rem; color: #9aa6b2; }

/* Quote */
.cs-quote { padding: clamp(3rem,7vh,5rem) 0; text-align: center; }
.cs-quote blockquote { font-family: var(--font-display); font-size: clamp(1.6rem,4vw,2.6rem); font-weight: 300; letter-spacing: -0.02em; line-height: 1.2; max-width: 22ch; margin: 0 auto; }
.cs-quote .cite { margin-top: 1.2rem; font-family: var(--font-mono); font-size: .8rem; letter-spacing: .04em; color: var(--ink-soft); }

/* How it starts */
.cs-start { margin-top: 2rem; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; counter-reset: step; }
@media (max-width: 760px){ .cs-start { grid-template-columns: 1fr; } }
.cs-start li { border-top: 2px solid var(--ink); padding-top: 1rem; counter-increment: step; }
.cs-start li::before { content: counter(step); font-family: var(--font-mono); font-size: .8rem; color: var(--ink-faint); }
.cs-start h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; margin-top: .3rem; }
.cs-start p { margin-top: .5rem; color: var(--ink-soft); font-weight: 300; font-size: .98rem; }

/* Search-to-serving funnel */
.cs-arc { margin-top: 2rem; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 1.1rem; }
@media (max-width: 760px){ .cs-arc { grid-template-columns: 1fr 1fr; } }
.cs-arc li { position: relative; border-top: 2px solid var(--ink); padding-top: 1rem; }
.cs-arc li .s { font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.cs-arc li h4 { font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em; margin-top: .35rem; }
.cs-arc li p { margin-top: .45rem; font-size: .9rem; line-height: 1.5; color: var(--ink-soft); font-weight: 300; }
.cs-arc li:not(:first-child)::before { content: "→"; position: absolute; left: -0.85rem; top: .75rem; font-size: .8rem; color: var(--ink-faint); }
@media (max-width: 760px){ .cs-arc li::before { content: none !important; } }

.cs-permission { margin-top: 2.4rem; font-size: .82rem; color: var(--ink-faint); max-width: 60ch; font-style: italic; }
.cs-cta { background: var(--ink); color: var(--paper); text-align: center; padding: clamp(4rem,10vh,7rem) 0; }

/* Kids arc */
.cs-kids-grid { margin-top: 2rem; display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: clamp(1.6rem,4vw,3rem); align-items: start; }
@media (max-width: 820px){ .cs-kids-grid { grid-template-columns: 1fr; } }
.cs-video { position: relative; width: 100%; max-width: 300px; padding-bottom: 177.7%; height: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line-dark); background: #000; }
.cs-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cs-video-cap { margin-top: .7rem; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; color: var(--ink-faint); max-width: 300px; }
.cs-posters { margin-top: 2rem; display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
@media (max-width: 560px){ .cs-posters { grid-template-columns: 1fr 1fr; } }
.cs-posters img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); display: block; }
.cs-surfaces { margin-top: 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
@media (max-width: 640px){ .cs-surfaces { grid-template-columns: 1fr; } }
.cs-surf { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: baseline; border: 1px solid var(--line); border-radius: 10px; padding: .7rem .9rem; background: var(--paper-pure); }
.cs-surf .n { font-family: var(--font-mono); font-size: .72rem; font-weight: 600; color: var(--ink-faint); }
.cs-surf .t { font-weight: 600; font-size: .94rem; color: var(--ink); }
.cs-surf .w { display: block; margin-top: .12rem; font-size: .82rem; color: var(--ink-soft); font-weight: 300; }
.cs-note { margin-top: 1.6rem; border-left: 2px solid var(--ink); padding: .3rem 0 .3rem 1rem; font-size: .9rem; color: var(--ink-soft); font-weight: 300; max-width: 60ch; }
.cs-note b { color: var(--ink); font-weight: 600; }

/* SEO scorecard */
.cs-scores { margin: 1.8rem 0 1rem; display: grid; gap: .55rem; max-width: 640px; }
.cs-score { display: grid; grid-template-columns: 210px 1fr 34px; gap: .9rem; align-items: center; }
@media (max-width: 560px){ .cs-score { grid-template-columns: 130px 1fr 30px; gap: .6rem; } }
.cs-score .lb { font-size: .84rem; color: var(--ink-soft); }
.cs-score .bar { height: 12px; background: var(--line); border-radius: 999px; overflow: hidden; }
.cs-score .bar span { display: block; height: 100%; background: var(--ink-faint); border-radius: 999px; }
.cs-score .val { font-family: var(--font-mono); font-size: .82rem; color: var(--ink-soft); text-align: right; }
.cs-score.top .lb { color: var(--ink); font-weight: 700; }
.cs-score.top .bar span { background: var(--ink); }
.cs-score.top .val { color: var(--ink); font-weight: 700; }
.cs-metrics { margin-top: 1.6rem; display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
@media (max-width: 640px){ .cs-metrics { grid-template-columns: 1fr; } }
.cs-metric { border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.2rem; background: var(--paper-pure); }
.cs-metric .m { font-family: var(--font-display); font-size: 1.7rem; font-weight: 300; letter-spacing: -0.02em; }
.cs-metric .m b { font-weight: 700; }
.cs-metric .d { margin-top: .4rem; font-size: .84rem; color: var(--ink-soft); font-weight: 300; }

/* prev / next */
.cs-nextprev { border-top: 1px solid var(--line); }
.cs-nextprev .inner { max-width: var(--max); margin: 0 auto; padding: 1.6rem var(--gutter); display: flex; justify-content: space-between; gap: 1rem; }
.cs-nextprev a { font-family: var(--font-mono); font-size: .78rem; font-weight: 600; color: var(--ink); }
.cs-nextprev a .k { display: block; font-size: .64rem; color: var(--ink-faint); font-weight: 400; margin-bottom: .25rem; letter-spacing: .06em; }
.cs-nextprev a.next { text-align: right; margin-left: auto; }