/*
骨相五问 · 2026-11-02 · Church Haven public website
读；产品事实与人的叙述分区；来访教会/会众/授权机构需要认识与求证；3 分钟、手机优先；温厚而克制。
沿用产品的纸色、赭金、拱窗，不套个人书房体质。大标题与真实 App 录屏构成双栏；功能与团队用开放版面。
字号 1.25：16 / 20 / 25 / 32 / 40 / 64；间距采用 4px 标尺。字体在本地子集化，display:swap，不阻塞首屏。
*/
@font-face{font-family:HavenReading;src:url('reading.woff2') format('woff2');font-style:normal;font-weight:400 700;font-display:swap}
:root{
  --paper:#f5efe3;--surface:#fcf9f1;--wash:#ece3d1;--ink:#2b2923;--muted:#6c655a;--line:#d6cbb8;--accent:#906329;--accent-soft:#b89d71;
  --display:Georgia,HavenReading,serif;--body:HavenReading,Georgia,serif;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  color-scheme:light;
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#25241f;--surface:#302e27;--wash:#39352c;--ink:#eee6d6;--muted:#c0b5a1;--line:#59503f;--accent:#dfbd87;--accent-soft:#aa8a58;color-scheme:dark}}
:root[data-theme="dark"]{--paper:#25241f;--surface:#302e27;--wash:#39352c;--ink:#eee6d6;--muted:#c0b5a1;--line:#59503f;--accent:#dfbd87;--accent-soft:#aa8a58;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--s5);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.85;text-autospace:normal;text-spacing-trim:trim-start}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%236c655a' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
button{font:inherit;cursor:pointer}
button,a,summary{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,summary:focus-visible,video:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
img,video{max-width:100%;display:block}
img{height:auto}
[hidden]{display:none!important}
h1,h2,h3,p,figure,ul,ol{margin:0}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.45;text-wrap:balance}
h1{font-size:clamp(40px,4.5vw,64px);letter-spacing:-.02em;white-space:pre-line}
h2{font-size:clamp(32px,3vw,40px);white-space:pre-line}
h3{font-size:25px}
p{max-width:38em}
.wrap{width:min(1168px,100%);margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.skip{position:absolute;top:var(--s2);left:var(--s4);z-index:20;background:var(--surface);padding:var(--s2) var(--s4);transform:translateY(-180%)}
.skip:focus{transform:translateY(0)}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);padding-block:var(--s5);border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:var(--s3);text-decoration:none;flex-shrink:0}
.brand img{width:44px;height:44px;border-radius:var(--s2)}
.brand-title{display:grid;gap:0;line-height:1.4;font-family:var(--display);font-size:20px}
.brand-title small{font-family:var(--body);font-size:12px;letter-spacing:.12em;font-weight:500}
.nav-group{display:flex;align-items:center;gap:var(--s6)}
nav{display:flex;gap:var(--s5);flex-wrap:wrap}
nav a{font-size:16px;font-weight:500;text-decoration:none;color:var(--muted);white-space:nowrap}
nav a:hover,nav a[aria-current="page"]{color:var(--accent);text-decoration:underline}
.lang-switch{display:flex;gap:var(--s1);flex-shrink:0}
.lang-switch button{background:none;border:1px solid transparent;color:var(--muted);font-size:14px;font-weight:500;padding:var(--s1) var(--s2);min-width:36px;min-height:40px;border-radius:var(--s1)}
.lang-switch button[aria-pressed="true"]{border-color:var(--line);color:var(--accent)}
.eyebrow{font-size:14px;font-weight:500;letter-spacing:.12em;color:var(--accent)}
.hero{display:grid;grid-template-columns:1.02fr 1fr;gap:var(--s8);align-items:center;padding-block:var(--s8) var(--s9)}
.hero-copy{display:grid;gap:var(--s5);min-width:0}
.hero-copy .lead{color:var(--muted);max-width:27em;font-size:20px}
.hero-copy .availability{color:var(--muted);font-size:14px;font-weight:500;letter-spacing:.03em}
.button-row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);border:1px solid var(--accent);background:transparent;color:var(--accent);padding:var(--s3) var(--s5);border-radius:var(--s1);text-decoration:none;font-size:16px;font-weight:500;min-height:48px;line-height:1.5}
.button:hover{background:var(--wash)}
.button.quiet{border-color:var(--line);color:var(--ink)}
.text-link{display:inline-flex;align-items:center;gap:var(--s2);font-size:16px;font-weight:500;color:var(--accent)}
.hero-preview{position:relative;padding:var(--s6);display:grid;place-items:center;gap:var(--s4);min-height:520px;border-radius:48% 48% var(--s1) var(--s1);background:linear-gradient(180deg,var(--surface),var(--wash));border:1px solid var(--line);isolation:isolate}
.hero-preview::before{content:"";position:absolute;inset:var(--s4);border:1px solid var(--line);border-radius:48% 48% var(--s1) var(--s1);z-index:-1}
.hero-preview img{width:224px;border-radius:var(--s5);border:1px solid var(--line);box-shadow:0 16px 32px -24px var(--muted)}
.preview-caption{position:static;text-align:center;color:var(--muted);font-size:13px;font-weight:500}
.hero-preview .preview-seal{position:absolute;right:var(--s5);top:36%;width:80px;height:80px;border:1px solid var(--accent-soft);border-radius:50%;background:var(--surface);display:grid;place-items:center;line-height:1.4;font-family:var(--display);color:var(--accent);font-size:16px;text-align:center;padding:var(--s2)}
.section{padding-block:var(--s8);border-top:1px solid var(--line)}
.section-head{display:grid;gap:var(--s4);margin-bottom:var(--s6)}
.section-head .lead{color:var(--muted)}
.demo-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--s7);align-items:start}
.video-frame{background:var(--wash);border:1px solid var(--line);border-radius:var(--s2);overflow:hidden}
.video-frame video{width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--wash)}
.video-stage{position:relative}
.video-start{position:absolute;inset:0;display:grid;place-items:center;width:100%;height:100%;padding:0;border:0;background:transparent;color:var(--accent)}
.video-start span{display:grid;place-items:center;width:64px;height:64px;border:1px solid var(--accent);border-radius:50%;font-family:var(--body);font-size:32px;line-height:1;background:var(--surface)}
.video-start:hover span{background:var(--wash)}
.video-controls{display:flex;gap:var(--s4);justify-content:space-between;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding:var(--s3) var(--s4)}
.video-controls span{font-size:13px;font-weight:500;color:var(--muted)}
.video-controls button{padding:var(--s2) var(--s3);background:transparent;border:1px solid var(--accent);color:var(--accent);font-size:14px;font-weight:500;border-radius:var(--s1)}
.video-note{font-size:14px;font-weight:500;color:var(--muted);margin-top:var(--s3)}
.chapters{display:grid;gap:0;list-style:none;padding:0}
.chapter{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:var(--s4);row-gap:var(--s1);padding-block:var(--s4);border-bottom:1px solid var(--line)}
.chapter:first-child{padding-top:0}
.chapter b{font-size:14px;line-height:32px;font-weight:500;color:var(--accent);font-variant-numeric:tabular-nums}
.chapter h3{font-size:20px;line-height:32px}
.chapter p{grid-column:2;color:var(--muted);font-size:16px;line-height:1.8}
.chapter button{grid-column:2;justify-self:start;display:inline-flex;gap:var(--s2);align-items:center;border:0;background:none;padding:var(--s1) 0;color:var(--accent);font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:4px}
.demo-links{display:flex;gap:var(--s5);flex-wrap:wrap;padding-top:var(--s5)}
.space-section{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:start}
.space-section .section-head{position:static}
.spaces{display:grid;gap:var(--s7)}
.space{display:grid;gap:var(--s3)}
.space .small-label{color:var(--accent);font-size:14px;font-weight:500;letter-spacing:.08em}
.space p{color:var(--muted);font-size:18px}
.space .aside-note{font-size:14px;font-weight:500;padding-left:var(--s4);border-left:1px solid var(--accent-soft)}
.promise{padding-block:var(--s7);text-align:center;display:grid;justify-items:center;gap:var(--s4);background:linear-gradient(90deg,var(--paper),var(--wash),var(--paper))}
.promise h2{font-size:32px}
.promise p{color:var(--muted);font-size:16px;max-width:44em}
.download-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6)}
.download-option{display:grid;gap:var(--s3);padding-block:var(--s5);border-top:1px solid var(--line)}
.download-option span{font-size:16px;font-weight:500;color:var(--muted)}
.download-option .button{justify-self:start}
.apk{margin-top:var(--s5);font-size:16px;color:var(--muted)}
details{border-bottom:1px solid var(--line);padding-block:var(--s4)}
summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);color:var(--ink);font-size:18px;font-weight:500}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";flex-shrink:0;color:var(--accent);font-size:20px;font-weight:400}
details[open]>summary::after{content:"−"}
details p{padding-top:var(--s3);color:var(--muted);font-size:16px;max-width:52em}
details .text-link{margin-top:var(--s3)}
.faq-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--s8)}
.contact{display:grid;gap:var(--s4);justify-items:start}
.contact p{color:var(--muted)}
.email{font-family:var(--display);font-size:clamp(20px,3vw,32px);color:var(--accent);overflow-wrap:anywhere}
.contact .button-row{margin-top:var(--s2)}
.site-footer{border-top:1px solid var(--line);padding-block:var(--s6);display:flex;gap:var(--s5);align-items:flex-start;justify-content:space-between}
.footer-brand{display:grid;gap:var(--s2);font-size:14px;font-weight:500;color:var(--muted)}
.footer-links{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);max-width:36em;justify-content:flex-end;font-size:14px;font-weight:500;color:var(--muted)}
.about-intro{padding-block:var(--s8);display:grid;gap:var(--s5);max-width:54em}
.about-intro h1{font-size:clamp(32px,4vw,48px)}
.about-intro .lead{font-size:20px;color:var(--muted);max-width:40em}
.team{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);padding-bottom:var(--s8)}
.person{border-top:1px solid var(--line);padding-top:var(--s6);display:grid;gap:var(--s5);align-content:start}
.person-identity{display:flex;align-items:center;gap:var(--s5)}
.avatar{height:96px;width:96px;display:grid;place-items:center;flex-shrink:0;border-radius:50%;border:1px solid var(--line);background:var(--wash);font-family:var(--display);font-size:40px;color:var(--accent);overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.person-heading{display:grid;gap:var(--s1)}
.person-heading h2{font-size:32px}
.person-role{font-size:14px;font-weight:500;color:var(--accent)}
.person-place{font-size:14px;font-weight:500;color:var(--muted)}
.person p{color:var(--muted)}
.beliefs{list-style:none;padding:0;display:grid;gap:var(--s5)}
.beliefs li{display:grid;gap:var(--s2)}
.beliefs h3{font-size:20px}
.beliefs p{font-size:16px;color:var(--muted)}
@media(min-width:1500px){.wrap{width:min(1248px,100%)}}
@media(max-width:960px){.nav-group{gap:var(--s4)}nav{gap:var(--s4)}.hero{gap:var(--s6)}.hero-preview{min-height:480px;padding:var(--s5)}.hero-preview img{width:208px}.preview-seal{display:none!important}.demo-layout{gap:var(--s5)}.space-section,.faq-layout{gap:var(--s7)}}
@media(max-width:720px){
 body{font-size:16px}.site-header{flex-wrap:wrap;gap:var(--s4);padding-block:var(--s4)}.brand img{width:40px;height:40px}.brand-title{font-size:18px}.nav-group{display:contents}nav{order:3;width:100%;justify-content:space-between;gap:var(--s2)}nav a{font-size:14px}.lang-switch{margin-left:auto}.hero{grid-template-columns:1fr;gap:var(--s7);padding-block:var(--s7) var(--s8)}.hero-copy{gap:var(--s4)}.hero-copy .lead{font-size:18px}.hero-preview{min-height:480px;max-width:400px;width:100%;margin-inline:auto}.hero-preview img{width:208px}.section{padding-block:var(--s7)}.demo-layout,.space-section,.faq-layout,.team{grid-template-columns:1fr;gap:var(--s6)}.section-head{margin-bottom:var(--s5)}.spaces{gap:var(--s6)}.space p{font-size:16px}.promise{padding-block:var(--s6);padding-inline:var(--s4)}.promise h2{font-size:25px}.download-options{grid-template-columns:1fr;gap:0}.download-option{grid-template-columns:1fr auto;align-items:center;padding-block:var(--s4)}.download-option .button{padding-inline:var(--s4)}.site-footer{flex-direction:column}.footer-links{justify-content:flex-start}.about-intro{padding-block:var(--s7)}.about-intro .lead{font-size:18px}.team{padding-bottom:var(--s7)}.person-identity{gap:var(--s4)}.avatar{width:80px;height:80px;font-size:32px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
/* Full tutorial: phone screens keep their reading width; chapters stay beside them. */
.video-frame video.portrait-tutorial,body[data-page="tutorial"] .video-frame video{aspect-ratio:3/8}
.video-frame video::cue{font-family:HavenReading,Georgia,serif;font-size:16px;color:var(--ink);background:var(--paper)}
.demo-layout .demo-media{width:100%;max-width:380px;justify-self:center}
.demo-layout .chapters{align-self:center}
.demo-links .button{font-size:14px}
.tutorial-intro{padding-bottom:var(--s7)}
.tutorial-meta{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;font-size:14px;font-weight:500;color:var(--accent)}
.tutorial-layout{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:var(--s8);align-items:start;padding-bottom:var(--s8)}
.tutorial-player{position:sticky;top:var(--s5);min-width:0;scroll-margin-top:var(--s4)}
.tutorial-navigation{min-width:0}
.tutorial-navigation .section-head{margin-bottom:var(--s5)}
.tutorial-navigation h2{font-size:32px}
.tutorial-navigation .lead{font-size:16px}
.now-playing{display:grid;gap:var(--s1);padding-top:var(--s4);font-size:14px;line-height:1.7}
.now-playing>span:first-child{color:var(--muted);font-size:12px;font-weight:500}
.audience-filter{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s4)}
.audience-filter button{border:1px solid var(--line);border-radius:var(--s1);background:transparent;color:var(--muted);padding:var(--s2) var(--s3);font-size:14px;font-weight:500;min-height:44px}
.audience-filter button[aria-pressed="true"]{border-color:var(--accent);background:var(--wash);color:var(--accent)}
.tutorial-toc{list-style:none;padding:0;max-height:760px;overflow-y:auto;overscroll-behavior:contain;border-top:1px solid var(--line)}
.tutorial-entry{border-bottom:1px solid var(--line)}
.tutorial-entry button{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:var(--s4);width:100%;padding:var(--s4) var(--s2);border:0;background:transparent;color:var(--ink);text-align:left;line-height:1.6}
.tutorial-entry button:hover,.tutorial-entry button[aria-current="true"]{background:var(--wash)}
.chapter-number,.tutorial-entry time{color:var(--accent);font-size:14px;font-weight:500;font-variant-numeric:tabular-nums}
.chapter-title{display:block;font-size:18px;font-weight:500}
.chapter-description{display:block;padding-top:var(--s1);color:var(--muted);font-size:14px;font-weight:500;line-height:1.75}
.tutorial-transcript{max-width:52em}
.lesson summary{gap:var(--s5);align-items:start}
.lesson summary>span{min-width:0}
.lesson time{color:var(--accent);font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:auto}
.lesson-body{display:grid;gap:var(--s3);padding-block:var(--s4) var(--s2)}
.lesson-body p{padding:0;max-width:46em}
.lesson-play{background:transparent;border:0;padding:var(--s2) 0;min-height:44px}
@media(max-width:960px){.tutorial-layout{gap:var(--s6);grid-template-columns:minmax(0,340px) minmax(0,1fr)}}
@media(max-width:720px){.tutorial-layout{grid-template-columns:1fr;gap:var(--s7);padding-bottom:var(--s7)}.tutorial-player{position:static;width:100%;max-width:390px;justify-self:center}.tutorial-toc{max-height:none;overflow:visible}.tutorial-entry button{gap:var(--s3)}.chapter-title{font-size:16px}.chapter-description{font-size:14px}.tutorial-intro{padding-bottom:var(--s6)}}
.hero-copy .welcome{color:var(--ink);font-size:18px;font-weight:500;max-width:27em;text-wrap:balance}
.promise .closing{color:var(--ink)}
/* Founder: the product's arch window holds the portrait; true semicircle on a 4:5 box. */
.founder{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:var(--s8);align-items:center}
.founder-page{align-items:start;padding-block:var(--s7) var(--s8);border-top:1px solid var(--line)}
.founder-photo{padding:var(--s3);border:1px solid var(--line);border-radius:50% 50% var(--s1) var(--s1)/40% 40% var(--s1) var(--s1);background:linear-gradient(180deg,var(--surface),var(--wash))}
.founder-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:50% 50% var(--s1) var(--s1)/40% 40% var(--s1) var(--s1)}
.founder-copy{display:grid;gap:var(--s4);min-width:0}
.founder-copy>p:not(.eyebrow){color:var(--muted)}
.founder-copy .founder-note{font-size:16px;padding-left:var(--s4);border-left:1px solid var(--accent-soft)}
.team-single{grid-template-columns:1fr}
.contact-lines{display:grid;gap:var(--s2)}
@media(max-width:720px){.founder{grid-template-columns:1fr;gap:var(--s5)}.founder-photo{width:100%;max-width:280px;margin-inline:auto}.founder-page{padding-block:var(--s6) var(--s7)}.hero-copy .welcome{font-size:16px}}
@media print{.tutorial-player,.audience-filter,.lesson-play{display:none}.tutorial-toc{max-height:none;overflow:visible}.tutorial-layout{display:block}}
@media print{.site-header,.video-controls,.lang-switch,.button-row{display:none}.wrap{width:100%}.section{padding-block:var(--s5)}body{background:var(--surface)}.hero{padding-block:var(--s5)}a{overflow-wrap:anywhere}}