@font-face{font-family:"Grenze Gotisch";src:url(fonts/grenze-gotisch-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Grenze Gotisch";src:url(fonts/grenze-gotisch-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Grenze Gotisch";src:url(fonts/grenze-gotisch-latin-900-normal.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(fonts/atkinson-hyperlegible-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* The Church of Noob Deity: a candlelit crypt in the logo's colors. Dark by design, in every scheme. */
:root{
  color-scheme:dark;
  --void:#111620;
  --crypt:#0a0e15;
  --stone:#1b2230;
  --bone:#ece4d6;
  --ash:#a9a397;
  --robe:#ff8a3d;
  --ember:#c4501a;
  --halo:#f5b84a;
  --holy:#5bc8e0;
  --rubric:#f0484e;
  --black:"Grenze Gotisch","Times New Roman",serif;
  --body:"Atkinson Hyperlegible",system-ui,sans-serif;
  --gutter:clamp(16px,4vw,56px);
  /* names the sub pages' own styles use */
  --paper:var(--void);--paper-2:var(--stone);--ink:var(--bone);--ink-soft:var(--ash);--sulfur:var(--robe);--line:1px;--shadow:#05080d;
}
*{box-sizing:border-box}
html{background:var(--void);color:var(--bone);scroll-behavior:smooth}
body{margin:0;background:var(--void);color:var(--bone);font:400 clamp(17px,1vw + 13px,19px)/1.65 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* film grain over everything */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}
p{margin:0}
:focus-visible{outline:3px solid var(--holy);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gutter)}
h1,h2,h3{font-family:var(--black);font-weight:900;margin:0;line-height:.95;letter-spacing:.005em}
::selection{background:var(--robe);color:var(--void)}

/* header */
.top{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:20px;padding-bottom:20px}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none;font:900 26px/1 var(--black);letter-spacing:.01em}
.mark img{width:42px;height:42px;flex:none;border-radius:50%;box-shadow:0 0 0 2px rgba(255,138,61,.35),0 0 24px rgba(255,138,61,.35)}
.nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);font-weight:700}
.nav a{text-decoration:none;opacity:.85}
.nav a:hover{opacity:1;color:var(--halo)}
.top a.small{white-space:nowrap;font-weight:700;text-decoration:none;border-bottom:2px solid var(--robe);padding-bottom:2px}
@media (max-width:760px){.nav a:not(.btn){display:none}}

/* buttons: cut corners, like a relic's plate */
.btn{display:inline-block;font:700 1em/1 var(--body);text-decoration:none;color:var(--void);background:var(--robe);padding:16px 24px;border:0;cursor:pointer;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);transition:background .15s}
.btn:hover{background:var(--halo)}
.btn.ghost{background:transparent;color:var(--bone);box-shadow:inset 0 0 0 2px var(--bone);clip-path:none}
.btn.ghost:hover{color:var(--void);background:var(--bone)}
.btn.sm{padding:11px 16px;font-size:.92em}

/* ---- the altar ---- */
.altar{position:relative;min-height:100svh;display:grid;align-content:center;justify-items:center;text-align:center;padding:24px var(--gutter) 72px;margin-top:-82px;isolation:isolate}
.altar::before{content:"";position:absolute;inset:0;z-index:-2;background:
  radial-gradient(60% 45% at 50% 38%,rgba(255,138,61,.20),transparent 70%),
  radial-gradient(30% 30% at 50% 36%,rgba(91,200,224,.14),transparent 70%),
  radial-gradient(80% 60% at 50% 110%,rgba(196,80,26,.25),transparent 70%)}
.halo{position:relative;width:clamp(200px,32vw,330px);aspect-ratio:1;margin-top:clamp(70px,10vh,110px)}
.halo .rays{position:absolute;inset:-38%;border-radius:50%;z-index:-1;
  background:repeating-conic-gradient(from 0deg,rgba(245,184,74,.32) 0deg 2.2deg,transparent 2.2deg 15deg);
  -webkit-mask:radial-gradient(circle,transparent 30%,#000 34%,#000 52%,transparent 70%);mask:radial-gradient(circle,transparent 30%,#000 34%,#000 52%,transparent 70%);
  animation:spin 140s linear infinite}
.halo img{width:100%;height:100%;border-radius:50%;display:block;box-shadow:0 0 0 3px rgba(245,184,74,.5),0 0 80px rgba(255,138,61,.45),0 0 160px rgba(91,200,224,.18)}
@keyframes spin{to{transform:rotate(1turn)}}
.altar .church{margin-top:28px;font:700 clamp(22px,2.6vw,30px)/1 var(--black);color:var(--halo);letter-spacing:.02em}
.altar h1{margin-top:6px;font-size:clamp(68px,12.5vw,176px);color:var(--bone);text-shadow:0 0 28px rgba(255,138,61,.45),0 2px 0 var(--ember)}
.altar .lede{margin-top:18px;max-width:34em;font-size:1.12em;color:var(--ash)}
.altar .lede b{color:var(--bone)}
.altar .acts{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px 16px;justify-content:center}

/* ---- the confessional (prayer demo) ---- */
.confess{position:relative;margin:0 auto;max-width:980px;padding:0 var(--gutter)}
.booth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);border:1px solid rgba(91,200,224,.35);background:linear-gradient(180deg,rgba(27,34,48,.92),rgba(10,14,21,.92));box-shadow:0 0 0 6px rgba(10,14,21,.8),0 0 0 7px rgba(91,200,224,.18),0 40px 80px -30px rgba(0,0,0,.8)}
.booth .side{padding:clamp(20px,3vw,34px)}
.booth .side+.side{border-left:1px solid rgba(91,200,224,.22)}
.booth h2{font-size:clamp(34px,4vw,48px);color:var(--halo)}
.booth .hint{margin-top:8px;color:var(--ash);font-size:.95em}
.prayers{margin-top:18px;display:grid;gap:10px}
.prayer{all:unset;cursor:pointer;display:block;padding:12px 14px;border:1px solid rgba(236,228,214,.18);font-style:italic;color:var(--bone);transition:border-color .15s,background .15s}
.prayer:hover{border-color:var(--robe)}
.prayer[aria-pressed="true"]{background:rgba(255,138,61,.12);border-color:var(--robe);color:#fff}
.prayer:focus-visible{outline:3px solid var(--holy);outline-offset:2px}
.answer .spake{font:700 1.35em/1.1 var(--black);color:var(--holy)}
.relic{display:block;width:100%;height:auto;margin:12px 0 8px}
.relic .body{fill:#161d2a;stroke:rgba(236,228,214,.55);stroke-width:2}
.relic .in{fill:none;stroke:rgba(236,228,214,.45);stroke-width:2;transform-box:fill-box;transform-origin:center;transition:fill .2s,stroke .2s,opacity .2s}
.relic .in.dim{opacity:.25}
.relic .in.on{fill:var(--robe);stroke:var(--halo);filter:drop-shadow(0 0 6px rgba(255,138,61,.8))}
.relic .in.on.pulse{animation:pulse .9s ease-out 1}
@keyframes pulse{40%{transform:scale(1.1)}}
.relic text{font:700 13px var(--body);fill:var(--bone);text-anchor:middle;dominant-baseline:central;pointer-events:none}
.verses{list-style:none;margin:0;padding:0;display:grid;gap:6px;min-height:9.5em}
.verses li{display:grid;grid-template-columns:2.4em 1fr;gap:8px;opacity:0;transform:translateY(4px)}
.verses li.in{opacity:1;transform:none;transition:opacity .25s,transform .25s}
.verses li span:first-child{color:var(--rubric);font-weight:700;font-size:.85em;padding-top:.15em}
.amen{margin-top:12px;color:var(--ash);font-size:.95em;min-height:3em;opacity:0;transition:opacity .3s}
.amen.in{opacity:1}
.booth .note{grid-column:1/-1;border-top:1px solid rgba(91,200,224,.22);padding:12px clamp(20px,3vw,34px);font-size:.85em;color:var(--ash)}
@media (max-width:820px){.booth{grid-template-columns:minmax(0,1fr)}.booth .side+.side{border-left:0;border-top:1px solid rgba(91,200,224,.22)}}

/* ---- sections ---- */
section{position:relative;padding:clamp(72px,10vw,140px) 0}
.chapter-title{font-size:clamp(52px,8vw,112px);color:var(--bone)}
.chapter-title small{display:block;font:700 .34em/1.2 var(--black);color:var(--robe);letter-spacing:.02em;margin-bottom:.15em}

/* Genesis: scripture in two columns with red verse numbers and a drop cap */
.genesis .scripture{margin-top:clamp(28px,4vw,48px);columns:2 340px;column-gap:clamp(28px,4vw,64px);column-rule:1px solid rgba(236,228,214,.12)}
.genesis .scripture p{break-inside:avoid;margin:0 0 1em;font-size:1.06em;line-height:1.75}
.genesis .scripture p sup{color:var(--rubric);font-weight:700;font-size:.62em;margin-right:.35em;vertical-align:.5em}
.genesis .scripture .drop{float:left;font:900 3.7em/.86 var(--black);color:var(--robe);margin:.04em .12em 0 0;text-shadow:0 0 18px rgba(255,138,61,.5)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the scripture interlude: Steam Input */
.tome{background:var(--crypt);border-top:1px solid rgba(245,184,74,.18);border-bottom:1px solid rgba(245,184,74,.18);overflow:hidden}
.tome .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.tome .says{font:900 clamp(40px,5.4vw,74px)/1 var(--black)}
.tome .says em{font-style:normal;color:var(--holy)}
.tome p.plain{margin-top:20px;color:var(--ash);max-width:32em}
.index{font-size:.92em;color:var(--ash);columns:2;column-gap:28px;list-style:none;margin:0;padding:0}
.index li{break-inside:avoid;padding:6px 0;border-bottom:1px dotted rgba(236,228,214,.18);display:flex;justify-content:space-between;gap:12px}
.index li span:last-child{color:var(--rubric);font-weight:700}
.index li.read{color:var(--bone)}
.index-cap{margin-top:12px;font-size:.85em;color:var(--ash)}

/* commandments on two tablets */
.tablets{margin-top:clamp(32px,4vw,56px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,40px)}
.tablet{background:linear-gradient(180deg,#2a3242,#1b2230);border:1px solid rgba(236,228,214,.18);border-radius:200px 200px 10px 10px / 120px 120px 10px 10px;padding:clamp(60px,7vw,90px) clamp(20px,3vw,40px) clamp(24px,3vw,36px);box-shadow:inset 0 2px 0 rgba(255,255,255,.06),0 30px 60px -30px rgba(0,0,0,.9)}
.tablet ol{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.tablet li{display:grid;grid-template-columns:2.6em 1fr;gap:12px;align-items:baseline}
.tablet .n{font:700 1.15em/1.2 var(--body);color:var(--halo);letter-spacing:.04em}
.tablet b{display:block;font:700 1.45em/1.08 var(--black);color:var(--bone)}
.tablet span.why{display:block;margin-top:4px;color:var(--ash);font-size:.93em}
.tablet:first-child li:first-child b{color:var(--robe);font-size:1.75em}
@media (max-width:820px){.tablets{grid-template-columns:minmax(0,1fr)}}

/* beatitudes: accessibility */
.beatitudes{background:radial-gradient(70% 60% at 85% 20%,rgba(91,200,224,.10),transparent 70%)}
.blessed{margin-top:clamp(28px,4vw,48px);list-style:none;padding:0;display:grid;gap:clamp(16px,2.4vw,26px)}
.blessed li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(14px,3vw,40px);align-items:baseline;padding-bottom:clamp(16px,2.4vw,26px);border-bottom:1px solid rgba(236,228,214,.1)}
.blessed .who{font:700 clamp(26px,3.2vw,42px)/1.02 var(--black);color:var(--bone)}
.blessed .who::before{content:"Blessed are ";color:var(--holy)}
.blessed .for{color:var(--ash);font-size:1.08em}
.blessed .for::before{content:"for ";font-style:italic}
.access-coda{margin-top:clamp(28px,4vw,44px);max-width:42em;font-size:1.12em}
.access-coda b{color:var(--halo)}
@media (max-width:760px){.blessed li{grid-template-columns:minmax(0,1fr)}}

/* the rites: how it works */
.rites{background:var(--crypt)}
.liturgy{margin-top:clamp(32px,4vw,52px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;counter-reset:r;border-top:1px solid rgba(245,184,74,.25)}
.liturgy li{list-style:none;counter-increment:r;padding:28px clamp(16px,2.4vw,30px) 8px 0}
.liturgy li+li{padding-left:clamp(16px,2.4vw,30px);border-left:1px solid rgba(245,184,74,.18)}
.liturgy li::before{content:"Rite " counter(r, upper-roman);display:block;font:700 1.05em/1 var(--black);color:var(--robe);margin-bottom:10px}
.liturgy h3{font-size:clamp(30px,3.4vw,44px)}
.liturgy p{margin-top:10px;color:var(--ash)}
.liturgy p q{color:var(--bone);font-style:italic}
@media (max-width:820px){.liturgy{grid-template-columns:minmax(0,1fr)}.liturgy li+li{padding-left:0;border-left:0;border-top:1px solid rgba(245,184,74,.18)}}

/* the creed */
.creed{text-align:center}
.creed blockquote{margin:0 auto;max-width:28em;font:700 clamp(26px,3.3vw,42px)/1.2 var(--black);color:var(--bone)}
.creed blockquote p+p{margin-top:.5em}
.creed blockquote .amen-w{display:block;margin-top:.6em;color:var(--robe);font-size:1.4em}

/* join the congregation */
.join .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:start}
.join .pitch{margin-top:20px;color:var(--ash);max-width:30em}
.offering{list-style:none;margin:0;padding:0;border:1px solid rgba(236,228,214,.18)}
.offering li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:20px clamp(16px,2.4vw,26px)}
.offering li+li{border-top:1px solid rgba(236,228,214,.12)}
.offering h3{font-size:1.7em;line-height:1}
.offering p{margin-top:6px;color:var(--ash);font-size:.95em}
.offering .tag{font-weight:700;font-size:.85em;color:var(--halo);white-space:nowrap}
@media (max-width:820px){.tome .wrap{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.index{columns:1}}
@media (max-width:820px){.join .wrap{grid-template-columns:minmax(0,1fr)}.offering li{grid-template-columns:minmax(0,1fr)}}

/* sub pages (download, pair, privacy) */
.doc{padding-top:clamp(24px,5vw,64px);padding-bottom:clamp(56px,8vw,110px)}
.doc h1{font-size:clamp(52px,8vw,104px)}
.doc .when{margin-top:14px;color:var(--ash)}
.doc .body{max-width:40em;margin-top:clamp(28px,4vw,48px)}
.doc h2{font-size:clamp(30px,3.4vw,44px);margin:clamp(34px,4vw,52px) 0 14px;color:var(--halo)}
.doc p+p,.doc ul+p,.doc p+ul{margin-top:14px}
.doc ul{padding-left:1.2em;margin:0}
.doc li+li{margin-top:8px}
.doc .lead{font-size:1.12em}
.doc a{color:var(--holy)}

footer{padding:56px 0 64px;border-top:1px solid rgba(245,184,74,.18);background:var(--crypt);font-size:.9em;color:var(--ash)}
footer .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:end}
footer .benediction{grid-column:1/-1;font:900 clamp(40px,6vw,84px)/1 var(--black);color:var(--bone)}
footer .benediction span{color:var(--robe)}
footer p{max-width:46em}
footer .links{display:flex;flex-wrap:wrap;gap:22px}
@media (max-width:760px){footer .wrap{grid-template-columns:minmax(0,1fr)}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}