.calling{
--paper:#10130f;
--ink:#f6eccb;
--muted:#b7b99e;
--accent:#edb854;
--on-accent:#18190f;
--panel:#1c2118;
--line:#606549;
--display:'Barlow Condensed',Impact,sans-serif;
--radius:0px;
--focus:#edb854;
--error:#ffb4a3;
--portal-line:#d7ba79;
--glow-dark:#10130f;
--glow-mid:#55552c;
--glow-light:#b8964c;
--glow-hot:#ffe6a1
}
.calling .preview-bar{
background:var(--panel);
color:var(--ink);
border-bottom:1px solid var(--line)
}
.calling .site-header{
position:relative;
z-index:4;
padding-top:28px;
padding-bottom:28px
}
.calling .brand{
font-weight:600;
letter-spacing:-.04em
}
.calling .hero{
min-height:clamp(540px,calc(100svh - 146px),820px);
overflow:hidden;
padding-top:24px;
isolation:isolate;
display:flex;
align-items:center
}
.calling #rays{
position:absolute;
inset:0;
width:100%;
height:100%;
z-index:-3;
opacity:.75;
transform:rotate(180deg);
pointer-events:none
}
.calling .hero::after{
content:'';
position:absolute;
inset:0;
z-index:-1;
background:linear-gradient(0deg,var(--paper),transparent 40%),linear-gradient(90deg,rgba(16,19,15,.8),transparent 55%)
}
.calling .hero-copy{
width:100%;
padding-bottom:24px
}
.calling h1{
font-size:clamp(110px,16vw,230px);
font-weight:500;
line-height:.89;
letter-spacing:-.05em;
text-align:left;
max-width:850px
}
.calling h1 span{
display:block;
animation:calling-type 1.2s var(--ease) both
}
.calling h1 span:nth-child(2){
animation-delay:.12s
}
.calling-lower{
display:flex;
align-items:end;
justify-content:space-between;
gap:32px;
margin-top:40px;
max-width:1100px
}
.calling-lower p{
margin:0;
font-size:17px;
max-width:38ch
}
.calling .primary{
min-height:62px;
text-transform:uppercase;
font-size:13px;
letter-spacing:.05em;
gap:60px
}
.calling .primary:hover{
background:var(--ink);
color:var(--paper)
}
.portal{
position:absolute;
width:600px;
height:850px;
right:2%;
top:-60px;
z-index:-2;
perspective:900px;
transform:rotate(11deg);
overflow:visible
}
.portal-arch{
position:absolute;
inset:0;
border:1px solid var(--portal-line);
border-radius:350px 350px 0 0;
transform:translateZ(calc(var(--i) * -65px));
opacity:calc(.85 - var(--i) * .04);
animation:portal-breathe 9s ease-in-out infinite;
animation-delay:calc(var(--i) * -.45s);
box-shadow:inset 0 0 30px rgb(220 170 68 / .03) /* unslop-ignore: requested cinematic sacred-light effect, not a default interface shadow. */
}
.portal-cross{
position:absolute;
top:37%;
left:50%;
height:150px;
width:3px;
background:var(--ink);
box-shadow:0 0 40px var(--accent); /* unslop-ignore: requested cinematic sacred-light effect, not a default interface shadow. */
opacity:.5
}
.portal-cross::after{
content:'';
position:absolute;
top:44px;
left:-38px;
width:79px;
height:3px;
background:var(--ink)
}
.orbital-word{
position:absolute;
right:8%;
top:25%;
writing-mode:vertical-rl;
font-size:12px;
letter-spacing:.5em;
animation:orbit 15s ease-in-out infinite;
opacity:.8
}
.calling .manifesto{
padding-top:160px;
padding-bottom:128px;
border-bottom:1px solid var(--line);
display:grid;
grid-template-columns:1fr 1fr;
gap:32px
}
.manifesto>p{
font-size:16px;
grid-column:1/-1
}
.manifesto h2{
font-size:clamp(80px,11vw,150px);
line-height:.93;
letter-spacing:-.045em
}
.manifesto em{
font-style:normal;
color:var(--accent)
}
.manifesto-text{
align-self:end;
max-width:48ch
}
.calling .section-opening h2{
font-size:clamp(56px,7vw,100px);
line-height:1;
text-transform:uppercase
}
.calling .section-opening em{
font-family:'Instrument Serif',Georgia,serif; /* unslop-ignore: deliberate botanical/editorial or stained-glass typography; paired with original artwork and non-default color, reviewed in-browser. */
text-transform:none;
letter-spacing:-.03em
}
.calling .route-layout{
grid-template-columns:1.2fr 1fr;
gap:80px
}
.calling .route-choice{
font-family:var(--body);
font-size:25px;
min-height:120px
}
.calling .route-answer{
background:transparent;
border:1px solid var(--line);
padding:40px;
min-height:360px
}
.calling .route-answer h3{
font:48px/1.05 'Instrument Serif',Georgia,serif; /* unslop-ignore: deliberate botanical/editorial or stained-glass typography; paired with original artwork and non-default color, reviewed in-browser. */
letter-spacing:-.025em
}
.calling .sample{
background:var(--ink);
color:var(--paper);
--accent:#715316;
--on-accent:#fff4d4;
--line:#aba17f;
--focus:#715316
}
.calling .sample h2{
font-size:clamp(54px,5.8vw,83px);
text-transform:uppercase;
line-height:1
}
.calling .sample h2 em{
font-family:'Instrument Serif',Georgia,serif; /* unslop-ignore: deliberate botanical/editorial or stained-glass typography; paired with original artwork and non-default color, reviewed in-browser. */
text-transform:none
}
.calling .sample-symbol{
border:1px solid var(--line);
border-radius:220px 220px 0 0;
font-family:'Instrument Serif',Georgia,serif; /* unslop-ignore: deliberate botanical/editorial or stained-glass typography; paired with original artwork and non-default color, reviewed in-browser. */
min-height:480px
}
.calling .sample-symbol svg{
width:70px;
height:70px;
left:calc(50% - 35px);
top:36px
}
.calling .about{
padding-top:132px;
padding-bottom:132px
}
.calling .about h2{
font-size:clamp(56px,6vw,84px);
text-transform:uppercase
}
.calling .about h2 em{
text-transform:none;
font-family:'Instrument Serif',Georgia,serif /* unslop-ignore: deliberate botanical/editorial or stained-glass typography; paired with original artwork and non-default color, reviewed in-browser. */
}
.calling .signature{
font-family:'Instrument Serif',Georgia,serif; /* unslop-ignore: deliberate botanical/editorial or stained-glass typography; paired with original artwork and non-default color, reviewed in-browser. */
color:var(--accent)
}
.calling .updates{
background:var(--panel)
}
.calling .updates h2{
font-size:clamp(72px,9vw,126px);
text-transform:uppercase;
line-height:.95
}
.calling .updates h2 em{
font-family:'Instrument Serif',Georgia,serif; /* unslop-ignore: deliberate botanical/editorial or stained-glass typography; paired with original artwork and non-default color, reviewed in-browser. */
text-transform:none
}
.calling .email-row{
flex-direction:column
}
.calling .email-row button{
align-self:start
}
.calling .prayer-dialog{
--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. */
}
.calling .prayer-dialog .primary{
gap:24px
}
.calling .sample .primary:hover{
background:var(--paper);
color:var(--ink)
}
.calling .preview-bar :focus-visible{
outline-color:var(--ink)
}
@keyframes portal-breathe{
0%,100%{
transform:translateZ(calc(var(--i) * -65px)) rotateZ(-2deg)
}
50%{
transform:translateZ(calc(var(--i) * -43px)) rotateZ(2deg)
}

}
@keyframes orbit{
50%{
transform:translateY(60px)
}

}
@keyframes calling-type{
from{
transform:translateY(24px);
opacity:0
}
to{
transform:translateY(0);
opacity:1
}

}

@supports(animation-timeline:view()){
.calling .manifesto h2{
animation:rise-in linear both;
animation-timeline:view();
animation-range:entry 0% entry 90%
}
@keyframes rise-in{
from{
transform:translateY(60px);
opacity:.2
}
to{
transform:translateY(0);
opacity:1
}

}

}

@media(max-width:1000px){
.calling .hero{
min-height:clamp(540px,calc(100svh - 146px),700px)
}
.calling .portal{
right:-10%;
width:500px;
height:720px
}
.calling .route-layout{
gap:40px
}
.calling .route-choice{
font-size:21px
}
.calling .route-answer{
padding:32px
}
.calling .sample-symbol{
min-height:360px
}

}

@media(max-width:700px){
.calling .hero{
min-height:620px;
padding-top:24px
}
.calling h1{
font-size:clamp(93px,25.5vw,178px);
line-height:.97
}
.calling .portal{
top:-24px;
width:370px;
height:570px;
right:-35%;
transform:rotate(8deg)
}
.calling-lower{
display:block;
margin-top:32px
}
.calling-lower p{
font-size:15px;
margin-bottom:24px
}
.calling .primary{
min-height:56px;
gap:32px
}
.orbital-word{
display:none
}
.calling .manifesto{
grid-template-columns:1fr;
padding-top:72px;
padding-bottom:72px;
gap:24px
}
.manifesto h2{
font-size:clamp(78px,17vw,120px);
line-height:1
}
.calling .route-layout{
grid-template-columns:1fr;
gap:32px
}
.calling .section-opening h2{
font-size:54px
}
.calling .route-choice{
min-height:92px
}
.calling .route-answer{
min-height:0
}
.calling .about{
padding-top:72px;
padding-bottom:72px
}
.calling .about h2{
font-size:52px
}
.calling .sample h2{
font-size:49px
}
.calling .sample-symbol{
min-height:320px
}
.calling .site-header{
padding-top:16px;
padding-bottom:16px
}
.calling .prayer-controls .primary{
font-size:11px;
min-height:52px
}
.calling .preview-bar{
font-size:11px
}

}

.motion-off .calling h1 span,.motion-off .calling .manifesto h2{animation:none;opacity:1;transform:none}