/* Ahl-Alkitab. Tokens and derivations: see DNA-BRIEF.md.
   Palette B (KP, 2026-10-22): the green is retired. Dark bands are manuscript ink: sampled from the stroke
   cores of Walters Ms. W.592 (Arabic Gospels, Egypt 1684), fols. 250a and 256a, #232517 and #232416, which
   is the site's own ink #23241A within a few units, so deep = ink (paper on ink 13.2:1).
   olive (label grey) = ink hue 66, saturation 8%, lightness 38% (4.7:1 on paper); was green-derived.
   umber #8C4309 is the client's; umber-lt = umber at lightness 72%, only on deep grounds. */
@font-face{font-family:Markazi;src:url(/fonts/markazi.woff2?v=22724dae) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:AmiriQuran;src:url(/fonts/amiri-quran.woff2?v=22724dae) format("woff2");font-display:swap}

:root{
  --paper:#EDECE3;--ink:#23241A;--olive:#676959;--deep:var(--ink);--umber:#8C4309;
  --field:var(--deep);--umber-lt:#F6B079;
  --rule:rgba(89,105,93,.45);--rule-dk:rgba(237,236,227,.28);
  --gut:clamp(20px,4vw,48px);--max:1360px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:24px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Markazi,"Noto Naskh Arabic",Georgia,serif;font-size:23px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:lang(ar){line-height:1.8}
body:lang(ar),.col:lang(ar),.sec:lang(ar){font-size:25px}
h1,h2,h3,p,ul{margin:0}
ul,ol{padding:0;margin:0;list-style:none}
[lang=en],[lang=fr]{unicode-bidi:isolate}
[dir=rtl] [lang=en]:not([dir]),[dir=rtl] [lang=fr]:not([dir]){direction:ltr}
a{color:inherit}
img{max-width:100%;display:block}
[hidden]{display:none!important}
::selection{background:var(--olive);color:var(--paper)}
:focus-visible{outline:3px solid var(--umber);outline-offset:3px}
.dark :focus-visible,.field :focus-visible{outline-color:var(--umber-lt)}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.skip{position:absolute;inset-inline-start:12px;top:-200px;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:10;text-decoration:none}
.skip:focus{top:12px}
.q{font-family:AmiriQuran,Markazi,serif;font-size:1.3em;line-height:2.1}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:22px}
.mark{display:flex;align-items:baseline;gap:.4em;font-size:26px;font-weight:600;text-decoration:none;white-space:nowrap}
.mark span{font-weight:400;color:var(--olive)}
.menu{display:flex;align-items:center;gap:6px 26px;flex-wrap:wrap;font-size:20px}
.menu a{text-decoration:none;padding-block:10px;display:inline-block}
.menu a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.menu a[aria-current=page]{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--umber);text-decoration-thickness:2px}
.menu .beliefs{display:flex;gap:4px 18px}
.menu-btn{display:none}
.field .menu a,.field .mark span{color:var(--paper)}
.field .mark span{opacity:.75}

/* the opening: the client's name as a window onto their own Arabic Gospel of John (John 1, from
   /books/john.pdf, unedited). The page drifts slowly, like reading down it. */
.opening{position:relative}
.window{position:relative}
.window-pin{position:relative;overflow:hidden;min-height:calc(100svh - 92px);--mask:url(/name-mask.svg?v=2)}
/* the name, shaped from Markazi Text 700 into /name-mask.svg, masks the footage */
.window-video{position:absolute;inset:0 0 12vh;width:100%;height:calc(100% - 12vh);object-fit:cover;object-position:50% 35%;
  -webkit-mask:url(/name-mask.svg?v=2) 50% 50%/min(88vw,1260px) auto no-repeat;mask:url(/name-mask.svg?v=2) 50% 50%/min(88vw,1260px) auto no-repeat}
.window-pin::before{content:"";position:absolute;inset:0 0 12vh;z-index:1;pointer-events:none;background:url(/name-outline.svg?v=3) 50% 50%/min(88vw,1260px) auto no-repeat}
.window .word-lat{position:absolute;inset-inline:0;bottom:calc(10vh + 4px);text-align:center;font-size:clamp(22px,2.2vw,32px);font-weight:500;color:var(--olive);margin:0}
.word{margin:0;font-weight:700}
.motion-toggle{position:absolute;inset-inline-end:var(--gut);bottom:140px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--rule);background:none;color:var(--ink);cursor:pointer;z-index:3;transition:color .3s,border-color .3s}
.motion-toggle svg{fill:currentColor}
.motion-toggle .i-play,.window.paused .motion-toggle .i-pause{display:none}
.window.paused .motion-toggle .i-play{display:inline}
/* The opening, scrolled (KP, 2026-10-21, after New Life's portal on newlifeterrehaute.com): the
   stage pins, the name grows toward the reader around the thickest stroke of its first letter
   (أ, measured from name-mask.svg), the worship footage floods the screen, and the client's own
   line "نحن أهل الكتاب / We are People of the Book" arrives over it. site.js sets --ms/--mx/--my
   (mask size and place), --fill (footage outside the letters) and --line; reduced motion keeps
   the still opening above. */
.window-line{display:none}
.window.scroll{height:470svh}
.window.scroll .window-pin{position:sticky;top:0;height:100svh;min-height:0;background:color-mix(in srgb,var(--deep) calc(var(--fill,0) * 100%),var(--paper))}
.window.scroll::after{content:"";position:absolute;inset-inline:0;bottom:0;height:24svh;z-index:4;pointer-events:none;background:linear-gradient(transparent,var(--paper));opacity:calc(1 - var(--q,0))}   /* the footage ombres into the page */
html.reveal .hero h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}   /* the line was just said over the footage: once on screen, still read aloud */
.window.scroll .window-video{inset:0;height:100%;
  -webkit-mask-image:var(--mask),linear-gradient(rgba(0,0,0,var(--fill,0)) 0 0);mask-image:var(--mask),linear-gradient(rgba(0,0,0,var(--fill,0)) 0 0);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:var(--ms) auto,100% 100%;mask-size:var(--ms) auto,100% 100%;
  -webkit-mask-position:var(--mx) var(--my),0 0;mask-position:var(--mx) var(--my),0 0}
.window.scroll .window-pin::before{inset:0;background-size:var(--ms) auto;background-position:var(--mx) var(--my);opacity:var(--edge,1)}
.window.scroll .window-pin::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--deep);opacity:calc(var(--fill,0) * .5 * (1 - var(--b,0) * .75))}   /* the tint is for the words; the baptism has none */
.window.scroll .word-lat{opacity:max(calc(1 - var(--p,0) * 6),var(--q,0))}
.window.scroll .window-line{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1em;position:absolute;inset:0;z-index:2;margin:0;padding:0 var(--gut);text-align:center;color:var(--paper);
  opacity:calc(var(--line,0) * (1 - var(--b,0)));transform:translateY(calc((1 - var(--line,0)) * 28px - var(--b,0) * 36px));text-shadow:0 2px 28px rgba(35,36,26,.55)}
/* the second beat: the baptism (PERSIAN FINAL, 1:16, the 2.25 s before its burned-in subtitle, at
   two-thirds speed by held frames, 1080p) crossfades in; no words over it (KP, 2026-10-21) */
.window-video2{display:none}
.window.scroll .window-video2{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;opacity:var(--b,0)}
/* the third beat: the baptism draws back into the name (site.js --hold, the film outside the
   letters; the mask shares the opening's --ms/--mx/--my), so the opening ends where it began */
.window.scroll .window-video2{-webkit-mask-image:var(--mask),linear-gradient(rgba(0,0,0,var(--hold,1)) 0 0);mask-image:var(--mask),linear-gradient(rgba(0,0,0,var(--hold,1)) 0 0);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:var(--ms) auto,100% 100%;mask-size:var(--ms) auto,100% 100%;
  -webkit-mask-position:var(--mx) var(--my),0 0;mask-position:var(--mx) var(--my),0 0}
.window.scroll .window-video{opacity:calc(1 - var(--b,0))}
.window-line [lang=ar]{font-size:clamp(56px,8vw,128px);font-weight:600;line-height:1.35}
.window-line [lang=en],.window-line [lang=fr]{font-size:clamp(24px,2.4vw,36px);font-weight:500;line-height:1.3}
html[data-lang=en] .window-line [lang=en],html[data-lang=fr] .window-line [lang=fr]{font-size:clamp(46px,6.4vw,104px);font-weight:600;line-height:1.1;text-wrap:balance}
.window.flooded .motion-toggle{color:var(--paper);border-color:rgba(237,236,227,.55)}
/* bands meet softly: the dark fades into paper instead of cutting */
.verses::before,.verses::after,.contact::before,.contact::after{content:"";position:absolute;inset-inline:0;height:120px;pointer-events:none}
.verses,.contact{position:relative}
.verses::before,.contact::before{top:-1px;background:linear-gradient(var(--paper),transparent)}
.verses::after,.contact::after{bottom:-1px;background:linear-gradient(transparent,var(--paper))}
.verses{padding-top:180px!important;padding-bottom:200px!important}
.contact{padding-top:180px!important;padding-bottom:0!important}
.word-end{display:block;width:min(84vw,1180px);margin:88px auto 0;padding-bottom:200px;overflow:visible}
.word-end path{fill:none;stroke:var(--paper);stroke-width:1.3;vector-effect:non-scaling-stroke;stroke-linejoin:round}
@media (prefers-reduced-motion:no-preference){
  .js .word-end path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 4.2s cubic-bezier(.45,0,.2,1)}
  .js .word-end.drawn path{stroke-dashoffset:0}
}

/* language lead switch */
/* language: the picker at the top right sets the language of the whole site (KP, 2026-10-11) */
.langs{display:flex;gap:2px 4px;flex-wrap:wrap;margin-inline-start:auto;margin-inline-end:18px;direction:ltr}
.langs a{font-size:18px;text-decoration:none;padding:6px 12px;min-height:44px;display:inline-flex;align-items:center;border-radius:999px;border:1px solid transparent;color:var(--olive)}
.langs a:lang(ar),.langs a:lang(fa){font-size:20px}
.langs a:hover{color:var(--ink)}
.langs a[aria-current=true]{border-color:currentColor;color:var(--ink)}
.field .langs a{color:rgba(237,236,227,.75)}
.field .langs a:hover,.field .langs a[aria-current=true]{color:var(--paper)}
.menu .beliefs a{display:none}
html:not([data-lang]) .menu .beliefs a.own{display:inline-block}
html[data-lang=ar] .ml[data-ml~=ar]>[lang]:not([lang=ar]),html[data-lang=ar] .poly:has(>.col[lang=ar])>.col:not([lang=ar]){display:none}
html[data-lang=ar] .menu .beliefs a.b-ar{display:inline-block}
html[data-lang=en] .ml[data-ml~=en]>[lang]:not([lang=en]),html[data-lang=en] .poly:has(>.col[lang=en])>.col:not([lang=en]){display:none}
html[data-lang=en] .menu .beliefs a.b-en{display:inline-block}
html[data-lang=fr] .ml[data-ml~=fr]>[lang]:not([lang=fr]),html[data-lang=fr] .poly:has(>.col[lang=fr])>.col:not([lang=fr]){display:none}
html[data-lang=fr] .menu .beliefs a.b-fr{display:inline-block}
html[data-lang=fa] .ml[data-ml~=fa]>[lang]:not([lang=fa]),html[data-lang=fa] .poly:has(>.col[lang=fa])>.col:not([lang=fa]){display:none}
html[data-lang=fa] .menu .beliefs a.b-fa{display:inline-block}
html[data-lang] .poly:has(>.col[lang=ar]){grid-template-columns:1fr!important}
/* Interface text: the client's wording before a pick, then only the picked language (KP, 2026-10-19) */
.i18n,.i18n>.i-o{line-height:inherit}   /* the wrapper has no lang of its own: keep the parent's spacing, not the page's Arabic 1.8 */
.i18n>[lang]{display:none}
html[data-lang] .i18n>.i-o,html[data-lang] .unpicked{display:none}
html[data-lang=ar] .i18n>[lang=ar],html[data-lang=en] .i18n>[lang=en],html[data-lang=fr] .i18n>[lang=fr],html[data-lang=fa] .i18n>[lang=fa]{display:inline}
/* The library holds Arabic books only, so French and Persian readers get no link to it until
   books in their language exist (the owner, 2026-10-21). The page itself stays reachable. */
html[data-lang=fr] a[href="/books"],html[data-lang=fa] a[href="/books"]{display:none}
html[data-lang] .books-head{grid-template-columns:1fr}
html[data-lang=en] .books-head,html[data-lang=fr] .books-head{direction:ltr}
html[data-lang=en] .books-head .tag,html[data-lang=fr] .books-head .tag{text-align:left}
html[data-lang=en] .books-head h1,html[data-lang=fr] .books-head h1{line-height:1.1}
html[data-lang=ar] .verse .tr,html[data-lang=ar] .vcredit{display:none}   /* Arabic readers read the ayah itself */
/* Persian exists only after a pick: before it the home page stays the client's three languages */
html:not([data-lang=fa]) .ml>[lang=fa],html:not([data-lang=fa]) .poly>.col[lang=fa]{display:none}
html[data-lang=fa] .window-line [lang=fa]{font-size:clamp(56px,8vw,128px);font-weight:600;line-height:1.35}
.lead-switch{display:flex;gap:2px;direction:ltr}
.lead-switch button{font:inherit;font-size:18px;background:none;border:1px solid transparent;border-radius:999px;color:var(--olive);padding:6px 15px;min-height:44px;cursor:pointer}
.lead-switch button:hover{color:var(--ink)}
.lead-switch button[aria-pressed=true]{border-color:var(--ink);color:var(--ink)}
.lead-switch button:lang(ar){font-size:20px}

/* polyglot: three languages as parallel columns; the lead column widens */
.poly{display:grid;grid-template-columns:var(--cols,2.3fr 1fr 1fr);transition:grid-template-columns .8s var(--ease)}
.poly>.col{min-width:0;padding:28px 34px 0;border-inline-start:1px solid var(--rule)}
.poly>.col:first-child{border-inline-start:0;padding-inline-start:0}
.poly>.col:last-child{padding-inline-end:0}
.col p+p{margin-top:.9em}
.col p{max-width:36em;transition:opacity .5s,font-size .6s var(--ease)}
.col[data-lead=false] p{opacity:.82;font-size:20px}
.col[data-lead=false]:lang(ar) p{font-size:22px}
.col[data-lead=true] p{font-size:24px}
.col[data-lead=true]:lang(ar) p{font-size:27px}
.tag{display:block;font-size:19px;color:var(--olive);margin-bottom:14px}

/* hero */
.hero-bar{display:flex;justify-content:flex-end;margin-top:36px;margin-bottom:10px}
.hero{border-top:1px solid var(--ink);padding-bottom:88px}
.hero h2{font-weight:600;letter-spacing:-.01em;line-height:1.02;text-wrap:balance;transition:font-size .8s var(--ease)}
.hero h2:lang(ar){line-height:1.3}
.hero .col[data-lead=true] h2{font-size:clamp(64px,8.6vw,136px)}
.hero .col[data-lead=false] h2{font-size:clamp(30px,3vw,44px)}
.hero .intro{margin-top:28px}
.hero .more{margin-top:40px;padding-top:28px;border-top:1px solid var(--rule)}
.hero .q{color:var(--umber)}
/* Before a pick: Arabic leads across the width, its short and long statements side by side; English
   and French follow beneath as an equal pair, each wide enough for a full line (Quran.com: Arabic
   first, translation beneath). The colophon uses the same arrangement. */
.poly.hero{grid-template-columns:1fr 1fr}
.hero>.col[data-lead=true]{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 64px;align-items:start;padding:28px 0 56px;border:0}
.hero>.col[data-lead=true]>.tag,.hero>.col[data-lead=true]>h2{grid-column:1/-1}
.hero>.col[data-lead=true]>.more{margin-top:28px;padding-top:0;border-top:0;padding-inline-start:32px;margin-inline-start:-32px;border-inline-start:1px solid var(--rule)}
.poly.hero{column-gap:96px}
.hero>.col[lang=en],.hero>.col[lang=fr]{padding:36px 0 0;border:0;border-top:1px solid var(--rule)}
.hero>.col[data-lead=true]>.intro p{font-size:clamp(28px,2.4vw,36px);line-height:1.55}   /* the short statement is the first read */
.onward{display:flex;gap:10px 32px;flex-wrap:wrap;margin-top:40px;font-size:20px}
.onward a{text-underline-offset:6px;text-decoration-thickness:1px;padding-block:8px}

/* arrival: the rule draws across in reading direction, then the columns settle */
@media (prefers-reduced-motion:no-preference){
  .js .hero{border-top-color:transparent;position:relative}
  .js .hero::before{content:"";position:absolute;inset-inline:0;top:-1px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:right;animation:draw 1.1s var(--ease) .1s forwards}
  [dir=ltr] .js .hero::before{transform-origin:left}
  .js .hero .col{opacity:0;transform:translateY(14px);animation:settle .9s var(--ease) forwards}
  .js .hero .col:nth-child(1){animation-delay:.55s}
  .js .hero .col:nth-child(2){animation-delay:.7s}
  .js .hero .col:nth-child(3){animation-delay:.85s}
}
@keyframes draw{to{transform:scaleX(1)}}
@keyframes settle{to{opacity:1;transform:none}}

/* the verses */
.dark{background:var(--deep);color:var(--paper)}
.verses{padding-block:104px 120px}
.verses-grid{display:grid;grid-template-columns:200px 1fr;gap:56px}
.rail{position:sticky;top:40px;align-self:start;font-size:19px}
.rail a{display:block;position:relative;padding-block:6px;padding-inline-start:22px;color:rgba(237,236,227,.66);transition:color .4s}
.rail a::before{content:"";position:absolute;inset-inline-start:0;top:50%;width:7px;height:7px;margin-top:-3px;border-radius:50%;background:currentColor;opacity:0;transition:opacity .4s}
.rail a.on{color:var(--umber-lt)}
.rail a.on::before{opacity:1}
.rail a{text-decoration:none}
.vgroup+.vgroup{margin-top:112px}
.vgroup>h2{font-size:24px;font-weight:500;color:rgba(237,236,227,.75);display:flex;flex-wrap:wrap;gap:4px 28px;border-bottom:1px solid var(--rule-dk);padding-bottom:14px}
.vgroup>h2 span:lang(ar){font-size:1.1em}
.verse{padding-top:56px}
.verse+.verse{margin-top:40px}
.verse .ref{color:var(--umber-lt);font-size:21px;text-align:center}
.verse .ayah{font-family:AmiriQuran,serif;font-size:clamp(30px,3.2vw,46px);line-height:2.1;text-align:center;max-width:1000px;margin:18px auto 0;text-wrap:balance}
.verse .tr{display:grid;grid-template-columns:1fr 1fr;margin:48px auto 0;max-width:1000px;border-top:1px solid var(--rule-dk);direction:ltr}
.verse .tr>div{padding:24px 30px 0;font-size:22px;line-height:1.6;color:rgba(237,236,227,.93)}
.verse .tr>div+div{border-left:1px solid var(--rule-dk)}
.verse .tr .ref{text-align:left;display:block;font-size:18px;margin-bottom:8px}
/* Torah and Injil, marked by hand in the client's umber (palette B). Paper on umber 6.1:1. The swash grows in the
   reading direction (right to left in Arabic and Persian); without script or with reduced motion it is
   simply there. */
.tk{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath fill='%238C4309' d='M4 5.5C38 2.6 84 4.8 126 3.2S186 3.6 197 6.2l1.5 8.3c-46 2.6-95 .9-137 2.4S13 16.4 2.2 14.8z'/%3E%3C/svg%3E") no-repeat 0 72%/100% .66em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding-inline:.12em;margin-inline:-.12em;transition:background-size 1.2s var(--ease)}
.ayah .tk,[lang=fa] .tk{background-position-x:100%;background-size:100% .9em;background-position-y:80%}
.tk-wait .tk:not(.on){background-size:0 .66em}
.tk-wait .ayah .tk:not(.on),.tk-wait [lang=fa] .tk:not(.on){background-size:0 .9em}

.vcredit{margin-top:96px;padding-top:18px;border-top:1px solid var(--rule-dk);font-size:17px;line-height:1.6;color:rgba(237,236,227,.8);display:flex;flex-wrap:wrap;gap:4px 28px}

/* UPCI: the reader's lead language set as one large statement, the other two as notes beneath */
.upci{padding-block:120px 112px}
.upci>h2{font-size:clamp(34px,3.6vw,52px);font-weight:600;line-height:1.15;display:flex;flex-wrap:wrap;justify-content:center;text-align:center;gap:4px 1em;text-wrap:balance;padding-bottom:8px}
.upci>h2 [lang=ar]{font-size:1.08em}
.upci>h2 .i-o{display:flex;flex-direction:column;align-items:center;gap:.15em}   /* before a pick: each name on its own line, never one bidi run */
.upci>h2 .i-o [lang=ar]{order:-1}
.upci>h2 .i-o [lang=en]{font-size:.62em;font-weight:500;color:var(--olive)}
.poly.statement{grid-template-columns:1fr 1fr!important;margin-top:0}
.statement>.col{transition:none}
.statement>.col[data-lead=true]{grid-column:1/-1;order:-1;padding:44px 0 56px;border:0}
.statement>.col[data-lead=true] p{font-size:clamp(26px,2.5vw,36px);line-height:1.42;max-width:31em;opacity:1}
.statement>.col[data-lead=true]:lang(ar) p{font-size:clamp(28px,2.7vw,40px);line-height:1.6}
.statement>.col[data-lead=false]{padding-top:26px;border-top:1px solid var(--rule)}
.statement>.col[data-lead=false]+.col[data-lead=false]{border-inline-start:1px solid var(--rule)}
.statement .num{font-weight:650;font-variant-numeric:lining-nums}
.statement>.col[data-lead=false] .num{font-weight:inherit}
.statement a{text-underline-offset:5px;text-decoration-thickness:1px}
/* The colophon. Arabic manuscripts close with the colophon as a downward-tapering triangle of text
   (who made the book, when, where); the UPCI paragraph is that statement for this site. One run of
   text, justified, centred last line. The floats cut the taper and site.js fits their height so the
   text ends at the point; without script it stays a plain centred block. Every line stays level. */
.colophon{display:flow-root;margin-inline:auto;text-align:center}
.colophon p{display:inline;margin:0}
.colophon p+p::before{content:" "}
.taper{display:none}
.js .taper{display:block;width:calc(50% - var(--apex,1.7em));height:0;shape-margin:.15em}
.statement>.col[data-lead=false] .colophon{--apex:8em}
.js .taper:first-child{float:left;shape-outside:polygon(0 0,100% 100%,0 100%)}
.js .taper+.taper{float:right;shape-outside:polygon(100% 0,100% 100%,0 100%)}
.taper-end{display:inline-block;width:0;height:1em;vertical-align:bottom}
.statement>.col[data-lead=true] .colophon{max-width:1080px}
.statement>.col[data-lead=false]{text-align:center}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;min-height:52px;padding:10px 30px;background:var(--ink);color:var(--paper);text-decoration:none;font-size:21px;line-height:1.2;border-radius:999px;border:0;font-family:inherit;cursor:pointer;transition:background .25s}
.btn:hover{background:var(--olive)}

/* find a church: the one action of this stretch, on the ink band (class name kept from the green palette) */
.green{background:var(--deep);color:var(--paper)}
.green :focus-visible{outline-color:var(--paper)}
.church{margin-top:104px;padding:72px clamp(24px,5vw,72px) 64px}
.church h2 [lang=ar]{text-wrap:balance}
.church-go{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin-top:40px;padding-top:28px;border-top:1px solid var(--rule-dk);direction:ltr}
.church-go p{max-width:30em}
.church h2{font-weight:600;line-height:1.2}
.church h2 span{display:block}
.church h2 [lang=ar]{font-size:clamp(44px,4.6vw,72px)}
.church h2 [lang=en],.church h2 [lang=fr]{font-size:clamp(22px,1.8vw,28px);font-weight:500;line-height:1.35}
.church h2 [lang=en]{margin-top:14px}
.church h2{display:grid;grid-template-columns:auto auto;justify-content:space-between;align-items:end;gap:0 48px}
.church h2 [lang=ar]{grid-row:1/3;grid-column:1}
.church h2 [lang=en],.church h2 [lang=fr]{grid-column:2;text-align:left;direction:ltr}
.church-go p{font-size:22px;line-height:1.5;color:var(--paper);text-align:left}
/* after a pick only one heading shows, so it takes the large size whatever the language */
html[data-lang] .church h2{display:block}
html[data-lang] .church h2 span{font-size:clamp(40px,4.2vw,64px);font-weight:600;line-height:1.15;margin:0;text-align:start}
.field .btn,.green .btn{background:var(--paper);color:var(--ink)}
.field .btn:hover,.green .btn:hover{background:#fff}

/* contact */
.contact{padding-block:104px}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:72px}
.contact h2{font-size:clamp(44px,5vw,76px);font-weight:600;line-height:1.05}
.contact h3{font-size:30px;font-weight:500;margin-top:18px;display:flex;flex-wrap:wrap;gap:0 .6em}
.ask{margin-top:48px;font-size:22px}
.ask a{font-size:clamp(28px,2.6vw,38px);text-underline-offset:6px;text-decoration-thickness:1px;color:var(--umber-lt)}
form{display:grid;gap:22px;direction:ltr}
html[data-lang=ar] #contact-form,html[data-lang=fa] #contact-form{direction:rtl}
.ask-panel form{direction:inherit}   /* the assistant follows the panel, which follows the pick */
label{display:block;font-size:20px;color:rgba(237,236,227,.8);margin-bottom:6px}
input,textarea{width:100%;font:inherit;font-size:21px;color:var(--paper);background:transparent;border:0;border-bottom:1px solid rgba(237,236,227,.45);padding:10px 0;border-radius:0}
textarea{resize:vertical;min-height:150px;border:1px solid rgba(237,236,227,.45);padding:12px 14px}
input:focus,textarea:focus{outline:none;border-color:var(--umber-lt)}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--umber-lt);outline-offset:4px}
.dark .btn{background:var(--paper);color:var(--ink);justify-self:start}
.dark .btn:hover{background:#fff}
.form-note{font-size:17px;color:rgba(237,236,227,.75)}
.err{font-size:17px;color:var(--umber-lt);min-height:1.2em}

.trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}/* not off-canvas: on the RTL page that made the page scroll sideways */
.channels{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.dark .btn.channel{font-size:19px;min-height:48px;padding:8px 24px;background:transparent;color:var(--paper);border:1px solid rgba(237,236,227,.55)}
.dark .btn.channel:hover{background:rgba(237,236,227,.08)}
.form-status{font-size:19px;line-height:1.5;color:var(--paper);margin:0}
.form-status [data-state]{display:flex;flex-wrap:wrap;gap:4px 18px}
.form-status [hidden]{display:none}
/* The letter. رسالة is the client's word for a message and the Arabic Bible's word for Paul's
   epistles, written "to the people of" a place: so the form is a paper leaf addressed to أهل الكتاب,
   the message on ruled lines, the name and address beneath as the signature. Square, level, one shadow. */
.letter{background:var(--paper);color:var(--ink);padding:clamp(26px,4vw,56px);gap:30px;box-shadow:0 28px 64px rgba(10,10,6,.5)}
.letter :focus-visible{outline-color:var(--umber)}
.letter-to{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 24px;margin:0;padding-bottom:16px;border-bottom:1px solid var(--ink);font-size:21px}
.letter-to [lang=ar]{font-size:30px;font-weight:600;line-height:1.2}
.letter label{color:var(--olive);font-size:18px}
.letter input{color:var(--ink);border-bottom-color:var(--rule)}
.letter textarea{color:var(--ink);border:0;padding:0;min-height:216px;font-size:21px;line-height:36px;background:repeating-linear-gradient(transparent 0 35px,var(--rule) 35px 36px) local;resize:vertical}
.letter input:focus,.letter textarea:focus{border-color:var(--umber)}
.letter-sign{display:grid;grid-template-columns:1fr 1fr;gap:24px 32px}
.dark .letter .btn{background:var(--ink);color:var(--paper)}
.dark .letter .btn:hover{background:var(--olive)}
.letter .form-status{color:var(--ink)}

/* the guide (Sawa): a popout opened from the client's own question, "هل لديك أسئلة ؟ Do you
   Have Questions?". No chat bubble, no avatar, no typing dots: the panel is a small reading leaf
   in the site's ink; questions set like headings, answers like the beliefs page, scripture
   references in umber-lt as everywhere else on the site. KP asked for the popout, 2026-10-11. */
.ask-dock{position:fixed;inset-inline-end:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:20;direction:ltr}
.ask-open{display:flex;align-items:center;gap:.6em;min-height:52px;padding:8px 22px;border:1px solid rgba(246,176,121,.55);border-radius:999px;background:var(--deep);color:var(--paper);font:inherit;font-size:20px;line-height:1.2;cursor:pointer;box-shadow:0 10px 30px rgba(21,40,25,.28);transition:transform .3s var(--ease),border-color .3s}
.ask-open:hover{border-color:var(--umber-lt);transform:translateY(-2px)}
.ask-open [lang=ar],.ask-open [lang=fa]{font-size:22px}
.ask-open [lang=fr],.ask-open [lang=fa]{display:none}   /* shown only when the reader picks that language */
html[data-lang=fr] .ask-open [lang=fr],html[data-lang=fa] .ask-open [lang=fa]{display:inline}
.ask-open[aria-expanded=true]{visibility:hidden}
.ask-open.tucked{transform:translateY(calc(100% + 24px));opacity:0;pointer-events:none;transition:transform .35s var(--ease),opacity .25s}
.ask-open.tucked:focus-visible{transform:none;opacity:1;pointer-events:auto}
.ask-panel{position:absolute;right:0;bottom:0;width:min(460px,calc(100vw - 40px));height:min(680px,calc(100vh - 120px));display:flex;flex-direction:column;background:var(--deep);color:var(--paper);border:1px solid var(--rule-dk);border-radius:12px;box-shadow:0 24px 60px rgba(21,40,25,.4);overflow:hidden;animation:rise .28s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.ask-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 12px;border-bottom:1px solid var(--rule-dk)}
.ask-head h2{font-size:21px;font-weight:500;line-height:1.3;margin:0}
.guide-name{font-weight:600}
.ask-close{flex:none;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--paper);cursor:pointer}
.ask-close:hover{background:rgba(237,236,227,.08)}
.ask-body{flex:1;overflow-y:auto;padding:16px 20px 20px;overscroll-behavior:contain}
.guide-who{font-size:18px;color:rgba(237,236,227,.78)}
.starters{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:14px}
.starter{font:inherit;font-size:19px;color:rgba(237,236,227,.9);background:none;border:0;padding:7px 0;cursor:pointer;text-align:start;text-decoration:underline;text-decoration-color:rgba(237,236,227,.35);text-underline-offset:5px}
.starter:hover{color:var(--paper);text-decoration-color:var(--umber-lt)}
.ask-panel.asked .starters,.ask-panel.asked .guide-who{display:none}
.turn+.turn{margin-top:34px;padding-top:24px;border-top:1px solid var(--rule-dk)}
.turn .q{font-size:24px;font-weight:500;line-height:1.3;unicode-bidi:plaintext}
.turn .a{margin-top:10px}
.turn .a p{font-size:20px;line-height:1.6;color:rgba(237,236,227,.95);unicode-bidi:plaintext}
.turn .a p+p{margin-top:.7em}
.turn .a .ref{color:var(--umber-lt)}
.turn[aria-busy=true] .a:empty::before,.turn[aria-busy=true] .a p:last-child::after{content:"";display:inline-block;width:.5em;height:2px;margin-inline-start:4px;vertical-align:middle;background:var(--umber-lt)}
.handoff{margin-top:16px}
.guide-error{margin-top:18px;font-size:18px;color:var(--umber-lt)}
.guide-ask{display:flex;gap:10px;align-items:flex-end;padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--rule-dk);margin:0}
.guide-ask textarea{flex:1;min-height:0;height:auto;max-height:160px;font-size:20px;line-height:1.4;resize:none;padding:10px 12px}
.ask-panel .btn{flex:none;min-height:48px;padding:8px 22px;font-size:19px}
@media (max-width:600px){
  .contents a,[lang=ar] .contents a,[lang=fa] .contents a{font-size:20px}
  .ask-dock{inset-inline-end:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .ask-open{font-size:18px;padding:8px 18px;min-height:48px}
  html:not([data-lang=en]) .ask-open [lang=en]{display:none}
  .ask-panel{position:fixed;inset:0;width:auto;height:auto;border-radius:0;border:0}
}
@media print{.ask-dock{display:none}}
.draft-note{margin-top:14px;font-size:17px;display:inline-block;padding:6px 12px;border:1px solid var(--umber-lt);color:var(--paper)}

/* footer */
.foot{padding-block:40px 48px;font-size:18px;color:var(--olive);display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;align-items:center}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 22px}
.foot a{text-decoration:none;padding-block:8px;display:inline-block}
.foot a:hover{text-decoration:underline}

/* beliefs: the opening band. Title and language switch on the deep ground. */
.bhead{padding-block:96px 0}
.bhead-text{padding-bottom:64px;max-width:30em}
/* The page's own headings as its contents: the structure the field was missing. The opening is the
   reading layout writ large: the contents sit in the margin column, right above the margin contents,
   and the title in the text column. On desktop each entry drops into its place in the margin as the
   reader leaves the opening, last entry first, so none ever crosses another (site.js); --t is the
   travel, 0 to 1, and carries the colour from paper to the margin's olive. */
.bhead{display:grid;grid-template-columns:240px minmax(0,1fr);gap:0 72px;align-items:start}
.bhead-text{grid-column:2;grid-row:1}
.contents{grid-column:1;grid-row:1;list-style:none;margin:0;padding:14px 0 132px}
.contents a{position:relative;z-index:2;display:inline-block;padding-block:6px;font-size:24px;line-height:1.3;white-space:nowrap;color:rgba(237,236,227,.9);text-decoration:none;transform-origin:top left}
[dir=rtl] .contents a{transform-origin:top right}
[lang=ar] .contents a,[lang=fa] .contents a{font-size:26px}
.contents a:hover{color:var(--paper);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.travel .contents a{color:color-mix(in srgb,var(--olive) calc(var(--t,0)*100%),rgba(237,236,227,.9))}
.bhead h1{font-size:clamp(56px,7vw,112px);font-weight:600;line-height:1.08;text-wrap:balance}
.bhead h1:lang(ar){line-height:1.3}
.bhead-text>p{font-size:26px;color:rgba(237,236,227,.9);margin-top:14px}
.bhead .page-lang{justify-content:flex-start;margin-top:36px}
[dir=rtl] .bhead .page-lang{justify-content:flex-end}
.page-lang a{text-decoration:none;font-size:18px;padding:7px 16px;border-radius:999px;border:1px solid transparent;min-height:44px;display:inline-flex;align-items:center}
.page-lang a:lang(ar){font-size:20px}
.page-lang a[aria-current=true]{border-color:currentColor}
.field{position:relative;background:var(--field);color:var(--paper)}
.field::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:120px;background:linear-gradient(transparent,var(--paper));pointer-events:none}

/* beliefs: the reading pages */
.read{display:grid;grid-template-columns:240px minmax(0,1fr);gap:72px;padding-block:96px 120px}
.toc{position:sticky;top:32px;align-self:start;font-size:19px}
.toc a{display:block;position:relative;text-decoration:none;color:var(--olive);padding-block:6px;padding-inline-start:20px}
.toc a::before{content:"";position:absolute;inset-inline-start:0;top:50%;width:7px;height:7px;margin-top:-3px;border-radius:50%;background:var(--umber);opacity:0;transition:opacity .3s}
.toc a.on{color:var(--ink)}
.toc a.on::before{opacity:1}
.sec{max-width:30em}
.sec+.sec{margin-top:88px}
.sec h2{font-size:clamp(34px,3.2vw,48px);font-weight:600;line-height:1.15;margin-bottom:22px}
.sec p+p{margin-top:.9em}
.sec p{font-size:24px}
.sec:lang(ar) p{font-size:1.14em}
.next{margin-top:96px;padding-top:36px;border-top:1px solid var(--ink);display:flex;flex-wrap:wrap;gap:12px 40px;font-size:22px}
.next a{text-underline-offset:6px;text-decoration-thickness:1px;padding-block:6px}

/* beliefs: each paragraph carries its own scripture references in the margin, set level */
.pr{display:grid;grid-template-columns:minmax(0,30em) 200px;gap:0 44px}
.sec{max-width:none}
.sec h2{max-width:30em}
.pr+.pr{margin-top:.9em}
.pr .note{font-size:18px;line-height:1.5;color:var(--umber);padding-top:.35em;border-inline-start:1px solid var(--rule);padding-inline-start:14px;align-self:start}

/* books: the shelf. Spine width from page count, height from page size, color from kind */
.books-head{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px;align-items:end;margin-top:48px}
.books-head .tag{text-align:right}
.books-head h1{font-size:clamp(48px,5.6vw,84px);line-height:1.25;font-weight:600;text-wrap:balance}
.books-head p{font-size:22px;line-height:1.45;color:var(--olive);direction:ltr;text-align:left}
.shelf{display:flex;align-items:flex-end;gap:3px;margin-top:72px;min-height:480px;border-bottom:14px solid #D6D4C4;padding-inline:4px}
.book{position:relative;flex:0 0 var(--w);height:var(--h);display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:16px 0 14px;color:var(--paper);background:var(--c);text-decoration:none;transition:transform .45s var(--ease)}
.book.scripture{--c:var(--umber)}
.book.teaching{--c:var(--ink)}
.book:hover,.book:focus-visible{transform:translateY(-22px)}
.book .t{writing-mode:vertical-rl;font-size:var(--fs);line-height:1.1;font-weight:500;white-space:nowrap;overflow:hidden}
.book .n{font-size:15px;font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.readout{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;margin-top:22px;min-height:2.2em;font-size:21px}
.readout .key{display:flex;gap:22px;color:var(--olive);font-size:18px;direction:ltr}
.key i{display:inline-block;width:12px;height:12px;margin-right:8px;background:var(--umber);vertical-align:-1px}
.key i.tch{background:var(--ink)}
.readout output{direction:ltr}
.books{padding-bottom:112px}
.readout output{font-size:22px}

/* small screens: one column of the polyglot at a time; designed, not collapsed */
@media (max-width:900px){
  body{font-size:21px}
  :lang(ar){line-height:1.7}
  .i18n,.i18n>.i-o{line-height:inherit}   /* after the phone :lang(ar) rule, or it wins by source order and loosens translated headings */
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font:inherit;font-size:19px;background:none;border:1px solid currentColor;border-radius:999px;padding:4px 16px;color:inherit;cursor:pointer}
  .top{flex-wrap:wrap;row-gap:6px}
  .mark{flex-basis:100%}
  .langs{margin:0;flex:1 1 auto;justify-content:flex-start;gap:0}
  .langs a{padding:6px 9px;font-size:17px}
  .langs a:lang(ar),.langs a:lang(fa){font-size:19px}
  .menu{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:0;padding-bottom:12px}
  .menu.open{display:flex}
  .menu a{font-size:22px;padding-block:9px}
  .menu .beliefs{flex-direction:column;gap:0}
  .poly{display:block}
  .poly>.col{display:none;padding:22px 0 0;border:0}
  .poly>.col[data-lead=true]{display:block}
  .hero>.col[data-lead=true]>.more{margin:40px 0 0;padding:28px 0 0;border-inline-start:0;border-top:1px solid var(--rule)}
  .col[data-lead=true] p{font-size:21px}
  .col[data-lead=true]:lang(ar) p{font-size:24px}
  .hero{margin-top:20px;padding-bottom:64px}
  .hero .col[data-lead=true] h2{font-size:clamp(52px,15vw,84px)}
  .lead-switch{margin-top:6px}
  .verses{padding-block:72px 80px}
  .verses-grid{display:block}
  .rail{display:none}
  .verse .tr{grid-template-columns:1fr}
  .verse .tr>div{padding:22px 0 0}
  .verse .tr>div+div{border-left:0;border-top:1px solid var(--rule-dk);margin-top:22px}
  .church,.contact-grid{grid-template-columns:1fr;gap:28px}
  .letter-sign{grid-template-columns:1fr}
  .colophon{--apex:4.5em}
  .church{padding:44px 22px;margin-top:72px}
  .church h2{display:block}
  .church h2 [lang=en],.church h2 [lang=fr]{text-align:start}
  .upci>h2{justify-content:flex-start}
  .bhead{padding-top:48px}
  .bhead-text{padding-bottom:96px}
  .read{grid-template-columns:1fr;gap:0;padding-block:56px 80px}
  .toc{display:none}
  .bhead{display:block}
  .contents{columns:2;column-gap:28px;padding:0 0 104px;border-top:1px solid var(--rule-dk);padding-top:28px}
  .contents a{white-space:normal}
  .pr{display:block}
  .pr .note{margin-top:8px}
  .window-pin{min-height:78svh;--mask:url(/name-mask-stack.svg?v=22724dae)}
  .window-video,.window-pin::before{inset:0 0 14vh}
  .window-video{height:calc(100% - 14vh);-webkit-mask-image:url(/name-mask-stack.svg?v=22724dae);mask-image:url(/name-mask-stack.svg?v=22724dae);-webkit-mask-size:min(80vw,420px) auto;mask-size:min(80vw,420px) auto}
  .window-pin::before{background-image:url(/name-outline-stack.svg?v=2);background-size:min(80vw,420px) auto}
  .word-end{margin-top:56px;padding-bottom:120px}
  .books-head{grid-template-columns:1fr;gap:12px}
  /* the shelf becomes a stack: books lie flat, thickness from page count */
  .shelf{flex-direction:column;align-items:stretch;gap:3px;min-height:0;border-bottom:0;border-inline-start:10px solid #D6D4C4;padding:0}
  .book{flex:0 0 auto;height:var(--th);width:var(--sw);flex-direction:row;padding:0 14px;align-items:center}
  .book:hover,.book:focus-visible{transform:translateX(-12px)}
  [dir=ltr] .book:hover,[dir=ltr] .book:focus-visible{transform:translateX(12px)}
  .book .t{writing-mode:horizontal-tb;font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}
@media print{.top,.lead-switch,.rail,.toc,form{display:none}}