:root{
--paper:#f6f7ed;
--ink:#22392e;
--muted:#526452;
--accent:#b44526;
--on-accent:#fff8ea;
--line:#b8c4ad;
--panel:#e3e8d5;
--display:'Instrument Serif',Georgia,serif; /* unslop-ignore: deliberate botanical/editorial or stained-glass typography; paired with original artwork and non-default color, reviewed in-browser. */
--body:'DM Sans',Arial,sans-serif;
--radius:5px;
--small:14px;
--ease:cubic-bezier(.22,1,.36,1);
--shade:#16271f;
--focus:#ac351e;
--error:#9d251a;
--white:#fffefa;
--space:clamp(24px,5vw,80px)
}
*{
box-sizing:border-box
}
html{
scroll-behavior:smooth;
scroll-padding-top:28px
}
body{
margin:0;
background:var(--paper);
color:var(--ink);
font-family:var(--body);
font-size:17px;
line-height:1.6
}
button,input,textarea{
font:inherit
}
button,a{
-webkit-tap-highlight-color:transparent
}
button{
cursor:pointer
}
a{
color:inherit;
text-decoration:none
}
button{
color:inherit
}
a,button,input,textarea{
outline-offset:5px
}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
outline:3px solid var(--focus)
}
button:disabled{
opacity:.45;
cursor:default
}
p{
max-width:65ch;
text-wrap:pretty;
margin:0 0 24px
}
h1,h2,h3{
font-family:var(--display);
font-weight:400;
margin:0;
line-height:1.04;
letter-spacing:-.035em;
text-wrap:balance;
min-width:0
}
h1{
font-size:clamp(48px,6.5vw,100px)
}
h2{
font-size:clamp(40px,5vw,72px)
}
h3{
font-size:clamp(28px,3vw,42px)
}
em{
font-weight:400
}
svg,img{
display:block;
max-width:100%
}
button,a,input{
touch-action:manipulation
}
.skip{
position:fixed;
top:0;
left:20px;
z-index:100;
transform:translateY(-150%);
padding:12px;
background:var(--paper)
}
.skip:focus{
transform:none
}
.preview-bar{
display:flex;
align-items:center;
justify-content:space-between;
min-height:44px;
gap:16px;
padding:0 var(--space);
background:var(--ink);
color:var(--paper);
font-size:12px;
line-height:1.3
}
.preview-bar a,.preview-bar button{
min-height:44px;
display:flex;
align-items:center;
gap:8px
}
.preview-bar button{
background:transparent;
border:0;
padding:6px 0;
text-decoration:underline;
text-underline-offset:4px
}
.preview-bar a:hover{
text-decoration:underline
}
.site-header{
padding:20px var(--space);
display:flex;
justify-content:space-between;
align-items:center;
gap:20px
}
.brand{
display:flex;
align-items:center;
gap:10px;
font-size:23px;
letter-spacing:-.05em;
font-weight:500;
white-space:nowrap;
min-height:44px
}
.brand svg{
width:32px;
height:36px
}
nav{
display:flex;
align-items:center;
gap:32px;
font-size:14px
}
nav a{
padding:10px 0;
min-height:44px;
display:flex;
align-items:center;
gap:14px
}
nav a:hover{
color:var(--accent)
}
nav .nav-cta{
border-bottom:1px solid currentColor
}
.hero{
position:relative;
padding:48px var(--space) 24px
}
.hero-copy{
position:relative;
z-index:2
}
.hero-copy>p{
margin:28px 0;
max-width:420px;
font-size:18px
}
.primary,.secondary,.text-button{
display:inline-flex;
align-items:center;
justify-content:space-between;
gap:28px;
min-height:52px;
border-radius:var(--radius);
padding:14px 24px;
border:1px solid transparent;
font-size:15px;
font-weight:500;
transition:transform .2s,background .2s,color .2s
}
.primary{
background:var(--accent);
color:var(--on-accent)
}
.primary:hover{
background:var(--ink);
color:var(--paper);
transform:translateY(-2px)
}
.primary:active,.secondary:active,.text-button:active{
transform:scale(.97)
}
.secondary{
border-color:var(--line);
background:transparent
}
.secondary:hover{
background:var(--panel)
}
.text-button{
padding-left:0;
padding-right:0;
border:0;
background:transparent;
border-radius:0;
border-bottom:1px solid currentColor
}
.text-button:hover{
color:var(--accent)
}
.primary span,.text-button span{
font-size:21px;
line-height:1
}
.section{
padding:104px var(--space);
position:relative
}
.welcome{
display:grid;
grid-template-columns:1fr 1fr;
gap:32px 80px;
align-items:center;
border-top:1px solid var(--line);
margin:48px var(--space) 0;
padding:80px 0
}
.welcome p{
margin:0;
max-width:47ch
}
.tiny{
font-size:12px;
letter-spacing:.08em;
text-transform:uppercase;
display:block;
line-height:1.5
}
.section-opening{
display:grid;
grid-template-columns:1fr 1fr;
align-items:end;
gap:48px;
margin-bottom:48px
}
.section-opening p{
max-width:42ch;
margin:0
}
.section-sign{
display:none
}
.route-layout{
display:grid;
grid-template-columns:1.3fr 1fr;
gap:80px
}
.route-choices{
align-self:start
}
.route-choice{
width:100%;
text-align:left;
display:flex;
align-items:center;
justify-content:space-between;
gap:28px;
min-height:104px;
padding:20px 4px;
border:0;
border-top:1px solid var(--line);
background:transparent;
font-family:var(--display);
font-size:clamp(24px,3vw,38px);
line-height:1.2;
transition:color .2s
}
.route-choice:last-child{
border-bottom:1px solid var(--line)
}
.route-choice:hover,.route-choice[aria-expanded=true]{
color:var(--accent);
padding-left:16px
}
.route-choice>span:last-child{
font-family:var(--body);
font-size:24px
}
.route-answer{
padding:32px;
background:var(--panel);
align-self:start;
min-height:320px;
border-radius:var(--radius)
}
.route-answer .tiny{
margin-bottom:24px
}
.route-answer h3{
margin-bottom:16px
}
.route-answer p{
font-size:16px;
line-height:1.65
}
.sample{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
background:var(--panel);
align-items:center
}
.sample-symbol{
min-height:420px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
font-family:var(--display);
font-size:clamp(60px,8vw,110px);
line-height:1.05
}
.sample-symbol svg{
position:absolute;
width:180px;
height:180px;
top:-30px;
left:0;
opacity:.3
}
.sample-copy h2{
margin-bottom:24px
}
.sample-copy>p:not(.tiny){
max-width:48ch
}
.quiet-caption{
display:block;
font-size:13px;
margin-top:16px
}
.about{
display:grid;
grid-template-columns:1fr 2fr;
gap:60px;
border-bottom:1px solid var(--line)
}
.about-label{
font-size:14px
}
.about h2{
margin-bottom:32px
}
.about p{
max-width:52ch
}
.signature{
font-family:var(--display);
font-size:34px;
padding-top:16px
}
.signature span{
display:block;
font-family:var(--body);
font-size:13px;
letter-spacing:0
}
.updates{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center
}
.updates h2{
margin-bottom:24px
}
.updates p{
max-width:45ch
}
.signup-form label{
display:block;
font-size:14px;
margin-bottom:12px
}
.email-row{
display:flex;
gap:8px
}
.email-row input{
background:transparent;
border:1px solid var(--line);
border-radius:var(--radius);
padding:16px;
min-width:0;
width:100%;
color:var(--ink)
}
.email-row input::placeholder{
color:var(--muted)
}
.email-row button{
white-space:nowrap
}
.form-note,.form-result{
font-size:13px;
margin-top:16px
}
.form-result{
min-height:42px
}
.form-result.error{
color:var(--error)
}
footer{
display:flex;
gap:20px;
align-items:center;
padding:32px var(--space);
border-top:1px solid var(--line);
font-size:13px
}
footer svg{
width:26px;
height:30px
}
footer p{
margin:0 auto 0 0
}
footer a{
min-height:44px;
display:flex;
align-items:center
}
footer a:hover{
text-decoration:underline
}
.prayer-dialog{
border:1px solid var(--line);
color:var(--ink);
background:var(--paper);
padding:0;
width:min(680px,calc(100vw - 24px));
max-height:calc(100dvh - 32px);
border-radius:8px;
overflow-y:auto
}
.prayer-dialog::backdrop{
background:rgb(8 18 14 / .75);
backdrop-filter:blur(8px)
}
.dialog-head{
padding:12px 24px;
display:flex;
justify-content:space-between;
align-items:center;
font:13px var(--body);
gap:16px
}
.close-dialog{
background:none;
border:0;
width:44px;
height:44px;
font-size:22px
}
.prayer-progress{
height:3px;
background:var(--line)
}
.prayer-progress span{
display:block;
height:100%;
width:16.67%;
background:var(--accent);
transition:width .2s
}
.prayer-body{
padding:36px
}
.prayer-count{
margin-bottom:16px
}
.prayer-body h2{
font-size:clamp(32px,6vw,48px);
margin-bottom:28px
}
.prayer-body p{
font:18px/1.7 var(--body)
}
.prayer-body .prayer-cue{
font-size:15px;
color:var(--muted);
font-style:italic
}
.prayer-controls{
display:flex;
justify-content:space-between;
gap:16px;
margin-top:28px
}
.prayer-body .prayer-source,.reflection p{
font:12px/1.6 var(--body);
color:var(--muted);
margin:28px 0 0
}
.reflection textarea{
width:100%;
margin-top:16px;
border:1px solid var(--line);
background:var(--paper);
color:var(--ink);
padding:16px;
resize:vertical
}
.reflection[hidden]{
display:none
}
.reflection label{
font-size:15px
}
.motion-off *,.page-hidden *{
animation-play-state:paused!important
}
.motion-off [data-reveal]{
opacity:1!important;
transform:none!important
}
.motion-off{
scroll-behavior:auto
}
.motion-off *{
scroll-behavior:auto!important;
transition-duration:0s!important
}
.preview-bar :focus-visible{
outline-color:var(--paper)
}

@media(max-width:1000px){
nav{
gap:20px
}
.route-layout,.updates{
gap:40px
}
.email-row{
flex-direction:column
}
.sample{
gap:40px
}
.sample-symbol{
min-height:320px
}
.site-header{
padding-top:16px;
padding-bottom:16px
}

}

@media(max-width:700px){
body{
font-size:16px
}
.site-header{
align-items:center;
gap:10px
}
.brand{
font-size:21px
}
.site-header nav>a:not(.nav-cta){
display:none
}
nav{
font-size:12px
}
.nav-cta{
gap:8px
}
h1{
font-size:clamp(42px,9vw,68px)
}
.hero{
padding-top:32px
}
.hero-copy>p{
font-size:16px
}
.section{
padding:64px var(--space)
}
.welcome{
grid-template-columns:1fr;
margin:32px var(--space) 0;
padding:56px 0;
gap:24px
}
.section-opening{
grid-template-columns:1fr;
gap:24px;
margin-bottom:32px
}
.route-layout{
grid-template-columns:1fr;
gap:28px
}
.route-choice{
min-height:86px;
font-size:27px
}
.route-answer{
min-height:0;
padding:28px
}
.sample{
grid-template-columns:1fr;
gap:32px
}
.sample-symbol{
min-height:240px
}
.sample-symbol svg{
width:120px;
height:120px;
top:0
}
.about{
grid-template-columns:1fr;
gap:24px
}
.updates{
grid-template-columns:1fr;
gap:28px
}
.email-row{
flex-direction:column
}
.email-row button{
justify-content:center
}
.signup-form{
width:100%;
min-width:0
}
footer{
flex-wrap:wrap;
gap:12px
}
footer p{
width:calc(100% - 50px);
margin-left:38px
}
footer>a:last-child{
margin-left:38px
}
.preview-bar>span{
display:none
}
.preview-bar{
gap:8px;
font-size:11px
}
.prayer-body{
padding:24px
}
.prayer-body p{
font-size:16px
}
.dialog-head{
padding:8px 20px
}
.prayer-controls .primary,.prayer-controls .secondary{
padding:12px 16px
}
.quiet-caption{
font-size:12px
}

}

@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto
}
*,*::before,*::after{
animation:none!important;
transition:none!important;
scroll-behavior:auto!important
}
[data-reveal]{
opacity:1!important;
transform:none!important
}

}

@media print{
.preview-bar,nav,.primary,.secondary,.text-button,.prayer-dialog,.signup-form{
display:none!important
}
body{
background:white;
color:black
}
*{
animation:none!important
}
[data-reveal]{
opacity:1!important;
transform:none!important
}
.section{
padding:24px 0;
break-inside:avoid
}
a{
text-decoration:underline
}

}

.praying *{
animation-play-state:paused!important
}
.calling.praying #rays{
opacity:.1
}