/* ============================================================ SHARED VISUAL SYSTEM — The Eliyahu Project / The Emmaus Project Single source of truth. Byte-identical in both sites. Rebuilt 2026-08-14. FIX: the previous build had a second @import at line 382. CSS requires @import to precede all other rules, so browsers discarded it and Frank Ruhl Libre never loaded — all Hebrew rendered in Times New Roman fallback. All four families now load from one hoisted request. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Archivo:wght@400;500;600&family=Frank+Ruhl+Libre:wght@400;500;700&display=swap'); /* ============================================================ THE ELIYAHU PROJECT Palette and ornament: engraved gold on deep black, double-rule cartouches, warm light. ============================================================ */ :root{ --black:#0B0A08; --black-2:#131108; --panel:#191509; --gold:#D4AE3A; --gold-lt:#F0DA9A; --gold-dk:#9C7C24; --cream:#FAF4E6; --body:#EDE4CF; --dim:#C6BBA1; --rule:#5A4A24; --rule-ui:#8A7338; /* 3.90:1 on --black — WCAG 1.4.11 for input borders and focus rings */ --measure:36rem; /* readable scale with real middle steps */ --s--1:clamp(1.00rem,.97rem + .14vw,1.08rem); --s-0: clamp(1.16rem,1.10rem + .26vw,1.30rem); --s-1: clamp(1.30rem,1.21rem + .38vw,1.54rem); --s-2: clamp(1.52rem,1.36rem + .62vw,1.96rem); --s-3: clamp(1.80rem,1.52rem + 1.05vw,2.48rem); --s-4: clamp(2.00rem,1.62rem + 1.75vw,3.05rem); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0; background:var(--black); /* gradients moved to body::before — background-attachment:fixed repainted the whole viewport on every scroll frame in mobile Safari */ color:var(--body); font-family:'Cormorant Garamond',Georgia,serif; font-size:var(--s-0); line-height:1.72; -webkit-font-smoothing:antialiased; } body::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background-image: radial-gradient(120% 80% at 50% -10%, rgba(201,162,39,.10), transparent 62%), radial-gradient(90% 60% at 50% 108%, rgba(201,162,39,.06), transparent 60%); } img,video{max-width:100%;display:block} a{color:inherit;text-decoration:none} a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible, summary:focus-visible,[tabindex]:focus-visible{ outline:3px solid var(--gold);outline-offset:3px;border-radius:1px } /* keyboard users on a dark palette are easy to strand — never remove the ring */ a:focus-visible{background:rgba(212,174,58,.10)} .lnk{color:var(--gold-lt);border-bottom:1px solid var(--rule);padding-bottom:.05em;transition:border-color .2s,color .2s} .lnk:hover{color:var(--cream);border-bottom-color:var(--gold)} .wrap{max-width:68rem;margin:0 auto;padding:0 clamp(1.5rem,4vw,2.6rem)} .narrow{max-width:var(--measure)} .dim{color:var(--dim)} .narrow.dim,p.dim{font-size:var(--s-0);line-height:1.72} p{margin:0 0 1.1rem} /* ---------- engraved display type ---------- */ .cz{font-family:'Cinzel',Georgia,serif;letter-spacing:.04em} h1,h2,h3{font-family:'Cinzel',Georgia,serif;color:var(--cream);font-weight:500;letter-spacing:.045em;margin:0} h1{font-size:var(--s-4);line-height:1.2;letter-spacing:.03em} h2{font-size:var(--s-2);line-height:1.3;margin:0 0 1.1rem;letter-spacing:.035em} h3{font-size:var(--s-1);letter-spacing:.04em;text-transform:none;margin:0 0 .55rem;color:var(--cream)} .eyebrow{ font-family:'Cinzel',serif;font-size:.84rem;font-weight:600; letter-spacing:.2em;text-transform:uppercase;color:var(--gold); margin:0 0 1.1rem } /* ---------- the ornament: a flourished divider ---------- */ .flourish{display:flex;align-items:center;gap:.85rem;margin:0 0 1.6rem;color:var(--gold-dk)} .flourish::before,.flourish::after{content:"";height:1px;background:linear-gradient(90deg,transparent,var(--gold-dk),transparent);flex:1} .flourish span{font-size:.8rem;color:var(--gold);letter-spacing:.3em} .flourish--left::before{display:none} .flourish--left{justify-content:flex-start} .flourish--left::after{max-width:9rem} /* ---------- cartouche: double-rule frame ---------- */ .cartouche{ position:relative; border:1px solid var(--gold-dk); padding:clamp(1.4rem,3.5vw,2.6rem); background:linear-gradient(180deg,rgba(201,162,39,.05),rgba(0,0,0,0) 55%),var(--panel); } .cartouche::before{ content:"";position:absolute;inset:7px;border:1px solid rgba(201,162,39,.34);pointer-events:none } .cartouche::after{ content:"";position:absolute;inset:14px;border:1px solid rgba(201,162,39,.12);pointer-events:none } .cartouche > *{position:relative;z-index:1} .corner{position:absolute;width:16px;height:16px;border-color:var(--gold);z-index:2} .corner--tl{top:-1px;left:-1px;border-top:2px solid;border-left:2px solid} .corner--tr{top:-1px;right:-1px;border-top:2px solid;border-right:2px solid} .corner--bl{bottom:-1px;left:-1px;border-bottom:2px solid;border-left:2px solid} .corner--br{bottom:-1px;right:-1px;border-bottom:2px solid;border-right:2px solid} /* ---------- masthead ---------- */ .masthead{border-bottom:1px solid var(--rule);background:rgba(11,10,8,.94);backdrop-filter:blur(6px);position:sticky;top:0;z-index:50} .masthead__in{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;padding-block:.75rem;flex-wrap:wrap} .wordmark b{font-family:'Cinzel',serif;font-weight:600;font-size:1.06rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);display:block} .wordmark span{font-size:.9rem;font-style:italic;color:#C6BBA1;display:block;margin-top:.25rem} .nav{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;font-family:'Cinzel',serif;font-size:.87rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase} .nav a{color:#DCD0B4;padding:.25rem 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s} .nav a:hover,.nav a[aria-current=page]{color:var(--gold);border-bottom-color:var(--gold)} /* ---------- sections ---------- */ .bay{padding:clamp(2.6rem,5.2vw,4.2rem) 0} .bay + .bay{border-top:1px solid rgba(74,60,28,.55)} /* ---------- hero ---------- */ .hero{padding:clamp(1.8rem,4vw,3.2rem) 0 clamp(2rem,4.2vw,3.4rem)} .hero h1{margin:0 0 1.05rem;max-width:17ch} .hero .lede{font-size:var(--s-1);color:var(--cream);max-width:var(--measure);margin:0 0 .8rem;font-weight:300} .hero .sub{color:var(--body);max-width:var(--measure);margin:0 0 1.5rem;font-size:var(--s-0);line-height:1.72} .gild{color:var(--gold-lt)} /* ---------- buttons ---------- */ .actions{display:flex;flex-wrap:wrap;gap:.8rem} .btn{ font-family:'Cinzel',serif;font-size:.92rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase; display:inline-block;padding:1rem 1.8rem;border:1px solid var(--gold);cursor:pointer; transition:background .22s ease,color .22s ease,box-shadow .22s ease } .btn--solid{background:var(--gold);color:#100D06} .btn--solid:hover{background:var(--gold-lt);box-shadow:0 0 22px rgba(201,162,39,.3)} .btn--ghost{background:transparent;color:var(--gold)} .btn--ghost:hover{background:rgba(201,162,39,.14);color:var(--gold-lt)} .btn[disabled]{opacity:.45;cursor:not-allowed} /* ---------- chapter strands ---------- */ .strands{margin:2.4rem 0 0;border-top:1px solid var(--rule)} .strand{display:grid;grid-template-columns:3.2rem minmax(0,1fr) auto;gap:1.4rem;padding:1.6rem 0;border-bottom:1px solid var(--rule);transition:background .22s} .strand:hover{background:rgba(201,162,39,.055)} .strand__n{font-family:'Cinzel',serif;font-size:.78rem;font-weight:600;color:var(--gold-dk);letter-spacing:.1em;padding-top:.4rem} .strand:hover .strand__n{color:var(--gold)} .strand p{margin:0;color:var(--body);font-size:var(--s-0);max-width:52ch;line-height:1.68} .strand__go{font-family:'Cinzel',serif;font-size:.84rem;letter-spacing:.07em;text-transform:uppercase;color:var(--gold);white-space:nowrap;padding-top:.5rem} @media (max-width:680px){.strand{grid-template-columns:1fr;gap:.4rem}.strand__n,.strand__go{padding-top:0}} /* ---------- credits ---------- */ .credits{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.8rem 0 0;padding:0;list-style:none} .credits li{font-family:'Cinzel',serif;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--rule);padding:.52rem .9rem;color:#DCD0B4} /* ---------- tiers ---------- */ .tiers{margin:2.4rem 0 0;border-top:1px solid var(--rule)} .tier{display:grid;grid-template-columns:minmax(0,1fr) 13rem;gap:1.4rem 2.4rem;padding:1.9rem 0;border-bottom:1px solid var(--rule)} .tier h3{color:var(--cream);font-size:var(--s-1);text-transform:none;letter-spacing:.05em;margin:0 0 .6rem} .tier__spec{list-style:none;padding:0;margin:0} .tier__spec li{font-size:var(--s-0);color:var(--body);padding:.24rem 0 .24rem 1.2rem;position:relative;line-height:1.6} .tier__spec li::before{content:"";position:absolute;left:0;top:.8em;width:.5rem;height:1px;background:var(--gold-dk)} .tier__note{font-style:italic;color:var(--body);margin:.8rem 0 0;max-width:48ch} .price{font-family:'Cinzel',serif;font-size:1.15rem;font-weight:600;color:var(--gold);display:block;text-align:right} .price small{display:block;font-size:.62rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-top:.35rem} @media (max-width:720px){.tier{grid-template-columns:1fr}.price{text-align:left}} /* ---------- two treatments ---------- */ .choices{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;margin:2rem 0 0} .choice{border:1px solid var(--rule);padding:1.5rem 1.4rem;background:rgba(201,162,39,.035)} .choice h3{color:var(--gold);font-size:.76rem;letter-spacing:.18em;margin:0 0 .7rem} .choice p{font-size:var(--s-0);color:var(--body);margin:0;line-height:1.68} @media (max-width:680px){.choices{grid-template-columns:1fr}} /* ---------- faq ---------- */ .faq{margin:2rem 0 0;border-top:1px solid var(--rule)} .faq details{border-bottom:1px solid var(--rule)} .faq summary{cursor:pointer;padding:1.15rem 0;font-family:'Cinzel',serif;font-size:1.02rem;letter-spacing:.03em;color:var(--cream);list-style:none;display:flex;justify-content:space-between;gap:1.4rem;align-items:baseline} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--gold);flex:none;font-size:1.1rem} .faq details[open] summary::after{content:"\2013"} .faq details p{margin:0 0 1.15rem;color:var(--body);font-size:var(--s-0);max-width:var(--measure);line-height:1.7} /* ---------- form ---------- */ .field{margin:0 0 1.5rem;max-width:44rem} .field label{display:block;font-family:'Cinzel',serif;font-size:.9rem;letter-spacing:.07em;text-transform:none;color:var(--gold);margin:0 0 .6rem} .field .hint{font-size:var(--s-0);color:var(--dim);font-style:italic;margin:.5rem 0 0} input[type=text],input[type=email],textarea{ width:100%;font-family:'Cormorant Garamond',Georgia,serif;font-size:var(--s-0); color:var(--cream);background:rgba(255,255,255,.04); border:1px solid var(--rule-ui);border-radius:0;padding:.78rem .85rem;line-height:1.55 } input::placeholder,textarea::placeholder{color:#8F8770} /* was #6E6650 — 2.0:1, failed AA */ textarea{min-height:17rem;resize:vertical;line-height:1.75} input:focus,textarea:focus{border-color:var(--gold);background:rgba(255,255,255,.06)} .measure{display:flex;align-items:center;gap:.9rem;margin:.75rem 0 0;font-family:'Cinzel',serif;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)} .measure__track{flex:1;max-width:22rem;height:2px;background:var(--rule);position:relative;overflow:hidden} .measure__fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--gold);transition:width .18s ease} .measure.is-over .measure__fill{background:var(--gold-lt)} .measure.is-over .measure__count{color:var(--gold-lt)} .tally{font-family:'Cinzel',serif;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:0 0 1.2rem} .note{border-left:3px solid var(--gold-dk);padding:.3rem 0 .3rem 1.25rem;margin:0 0 2rem;max-width:46rem;color:var(--body);font-size:var(--s-0);line-height:1.7} /* ---------- footer ---------- */ .foot{border-top:1px solid var(--rule);padding:2.2rem 0 1.8rem;background:rgba(0,0,0,.4)} .foot__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:2.4rem} .foot h3{font-family:'Cinzel',serif;font-size:.86rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:0 0 1rem} .foot p{font-size:var(--s-0);color:var(--body);max-width:36ch;margin:0;line-height:1.66} .foot ul{list-style:none;padding:0;margin:0;font-size:var(--s-0)} .foot li{margin:0 0 .6rem} .foot a{color:#E4DAC2;border-bottom:1px solid var(--rule);padding-bottom:.06em} .foot a:hover{color:var(--gold-lt);border-bottom-color:var(--gold)} .foot__base{margin-top:1.6rem;padding-top:1rem;border-top:1px solid var(--rule);font-family:'Cinzel',serif;font-size:.8rem;letter-spacing:.08em;color:#A2977F} @media (max-width:760px){.foot__grid{grid-template-columns:1fr;gap:1.9rem}} .skip{position:absolute;left:-9999px;background:var(--gold);color:#0B0A08;padding:.7rem 1.1rem;font-family:'Cinzel',serif;font-size:.75rem;z-index:99} .skip:focus{left:.6rem;top:.6rem} .sr{position:absolute;left:-9999px} /* ---------- publication rows ---------- */ .pubs{margin:1.6rem 0 0;border-top:1px solid var(--rule)} .pub{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.4rem;align-items:start; padding:1.5rem 0;border-bottom:1px solid var(--rule);transition:background .22s} .pub:hover{background:rgba(201,162,39,.05)} .pub__t{font-family:'Cinzel',serif;font-size:var(--s-0);color:var(--cream);letter-spacing:.03em; line-height:1.4;border-bottom:1px solid transparent;display:inline} a.pub__t:hover{color:var(--gold-lt);border-bottom-color:var(--gold-dk)} .pub__meta{font-size:var(--s-0);color:var(--gold);margin:.55rem 0 0;font-style:italic} .pub__note{font-size:var(--s-0);color:var(--body);margin:.6rem 0 0;max-width:56ch;line-height:1.66} .pub__go{font-family:'Cinzel',serif;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase; color:var(--gold);white-space:nowrap;padding-top:.45rem;border-bottom:1px solid transparent} a.pub__go:hover{color:var(--gold-lt);border-bottom-color:var(--gold)} .pub__go--off{color:#5A5340} @media (max-width:680px){.pub{grid-template-columns:1fr;gap:.5rem}.pub__go{padding-top:.2rem}} /* ---------- upgrade pack ---------- */ .topbar{background:#080706;border-bottom:1px solid var(--rule);font-family:'Cinzel',serif; font-size:.8rem;letter-spacing:.06em;text-transform:none} .topbar__in{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.5rem 0;flex-wrap:wrap} .topbar a{color:#DCD0B4;border-bottom:1px solid rgba(212,174,58,.35)} .topbar a:hover{color:var(--gold-lt)} .topbar strong{color:var(--gold);font-weight:600} @media (max-width:640px){.topbar__in{justify-content:center;text-align:center;font-size:.76rem;gap:.35rem}} .trust{display:grid;grid-template-columns:repeat(4,1fr);margin:2.4rem 0 0;border:1px solid var(--rule)} .trust div{padding:1.25rem 1.1rem;border-right:1px solid var(--rule)} .trust div:last-child{border-right:0} .trust b{display:block;font-family:'Cinzel',serif;font-size:.72rem;letter-spacing:.16em; text-transform:uppercase;color:var(--gold);margin:0 0 .45rem} .trust p{margin:0;font-size:var(--s-0);color:var(--body);line-height:1.62} @media (max-width:860px){.trust{grid-template-columns:1fr 1fr} .trust div{border-bottom:1px solid var(--rule)} .trust div:nth-child(2n){border-right:0} .trust div:nth-last-child(-n+2){border-bottom:0}} @media (max-width:520px){.trust{grid-template-columns:1fr} .trust div{border-right:0;border-bottom:1px solid var(--rule)} .trust div:last-child{border-bottom:0}} .cmp{width:100%;border-collapse:collapse;margin:2.2rem 0 0;font-size:var(--s-0);min-width:46rem} .cmp th,.cmp td{text-align:left;padding:.9rem;border-bottom:1px solid var(--rule);vertical-align:top} .cmp thead th{font-family:'Cinzel',serif;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase; color:var(--gold);border-bottom:1px solid var(--gold-dk)} .cmp tbody th{font-family:'Cinzel',serif;font-size:.74rem;color:var(--cream);font-weight:500;white-space:nowrap} .cmp td{color:var(--body)} .cmp .me{color:var(--gold-lt);background:rgba(201,162,39,.06)} .cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule);padding:0 1rem} .quotes{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;margin:2.2rem 0 0} .quote{border:1px solid var(--rule);padding:1.6rem 1.5rem;background:rgba(201,162,39,.035)} .quote p{font-size:var(--s-1);font-style:italic;color:var(--cream);line-height:1.55;margin:0 0 1rem} .quote cite{font-family:'Cinzel',serif;font-style:normal;font-size:.7rem;letter-spacing:.14em; text-transform:uppercase;color:var(--gold)} .quote small{display:block;color:var(--dim);font-size:var(--s--1);margin-top:.4rem; font-family:'Cormorant Garamond',serif;letter-spacing:0;text-transform:none;font-style:italic} @media (max-width:700px){.quotes{grid-template-columns:1fr}} .guides{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.2rem;margin:2.2rem 0 0} .guide{border:1px solid var(--rule);padding:1.5rem 1.4rem;transition:background .22s,border-color .22s} .guide:hover{background:rgba(201,162,39,.05);border-color:var(--gold-dk)} .guide h3{color:var(--cream);font-size:var(--s-0);letter-spacing:.04em;text-transform:none;margin:0 0 .6rem} .guide p{font-size:var(--s-0);color:var(--body);margin:0 0 1rem;line-height:1.66} .guide span{font-family:'Cinzel',serif;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)} .states{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin:2.2rem 0 0} .state{border:1px solid var(--rule);padding:1.6rem 1.4rem} .state__n{font-family:'Cinzel',serif;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 .8rem} .state h3{color:var(--cream);font-size:var(--s-0);text-transform:none;letter-spacing:.03em;margin:0 0 .6rem} .state p{font-size:var(--s-0);color:var(--body);margin:0 0 1rem;line-height:1.66} .state a{font-family:'Cinzel',serif;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)} @media (max-width:820px){.states{grid-template-columns:1fr}} .dock{display:none} @media (max-width:720px){ .dock{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60; border-top:1px solid var(--gold-dk);background:rgba(11,10,8,.97);backdrop-filter:blur(8px)} .dock a{flex:1;text-align:center;padding:1.05rem .5rem;font-family:'Cinzel',serif; font-size:.86rem;letter-spacing:.05em;text-transform:uppercase;color:var(--gold)} .dock a + a{border-left:1px solid var(--rule)} .dock a.dock--go{background:var(--gold);color:#100D06} body{padding-bottom:0} } .legal h2{font-size:var(--s-1);margin:2.4rem 0 .9rem} .legal p,.legal li{color:var(--body);font-size:var(--s-0);line-height:1.75;max-width:44rem} .legal ul{padding-left:1.1rem} .legal li{margin:0 0 .5rem} .bay,section[id]{scroll-margin-top:7rem} .mailto-btn{display:inline-block} /* ---------- long-form prose (sample chapter) ---------- */ .prose{max-width:38rem;margin:1.6rem 0 0} .prose p{font-size:calc(var(--s-0) * 1.06);line-height:1.78;color:var(--body);margin:0 0 1.25rem} .prose p:first-of-type{font-size:var(--s-1);color:var(--cream)} .prose p:first-of-type::first-letter{ float:left;font-family:'Cinzel',serif;font-size:3.4em;line-height:.82; color:var(--gold);padding:.06em .12em 0 0;font-weight:600} .prose .dlg{color:var(--cream);padding-left:1.2rem;border-left:1px solid var(--gold-dk); font-style:italic;margin:0 0 1.25rem} /* ---------- guaranteed-delivery fallback panel ---------- */ .fallback__text{width:100%;min-height:12rem;margin:0;font-family:'Cormorant Garamond',serif; font-size:var(--s--1);line-height:1.6;color:var(--cream);background:rgba(255,255,255,.05); border:1px solid var(--rule-ui);padding:.8rem;border-radius:0;resize:vertical} /* ============================================================ AUTHOR-FORWARD BLOCKS — portrait, byline, press ============================================================ */ /* the portrait, ringed in gold */ .portrait{position:relative;width:100%;max-width:19rem;margin:0} .portrait img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:50%;display:block; box-shadow:0 0 0 1px var(--gold-dk), 0 0 0 9px rgba(11,10,8,1), 0 0 0 10px rgba(201,162,39,.4), 0 22px 48px rgba(0,0,0,.6)} .portrait figcaption{ margin:1.15rem 0 0; font-family:'Cinzel',serif; font-size:.88rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); line-height:1.55; text-align:center; } .portrait figcaption em{ display:block; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:var(--s-0); letter-spacing:0.01em; text-transform:none; color:var(--body); margin-top:.4rem; } /* author block: portrait beside prose */ .author{display:grid;grid-template-columns:19rem minmax(0,1fr);gap:3.2rem;align-items:start;margin:2.4rem 0 0} @media (max-width:820px){ .author{grid-template-columns:1fr;gap:2rem} .portrait{max-width:14rem;margin:0 auto} .portrait figcaption{text-align:center} } /* small inline byline portrait */ .byline{display:flex;align-items:center;gap:1.1rem;margin:2.2rem 0 0} .byline img{width:4.6rem;height:4.6rem;object-fit:cover;border-radius:50%;flex:none; box-shadow:0 0 0 1px var(--gold-dk), 0 0 0 5px var(--black), 0 0 0 6px rgba(201,162,39,.35)} .byline b{display:block;font-family:'Cinzel',serif;font-size:.86rem;letter-spacing:.1em;color:var(--cream)} .byline span{display:block;font-size:var(--s-0);color:var(--body);font-style:italic;margin-top:.25rem} /* selected works, author-site style */ .works{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.4rem;margin:2.4rem 0 0} .work{border:1px solid var(--rule);padding:1.7rem 1.5rem;position:relative; background:linear-gradient(180deg,rgba(201,162,39,.05),transparent 60%)} .work__kind{font-family:'Cinzel',serif;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase; color:var(--gold);margin:0 0 .8rem} .work h3{color:var(--cream);font-size:var(--s-1);text-transform:none;letter-spacing:.02em;margin:0 0 .5rem} .work p{font-size:var(--s-0);color:var(--body);line-height:1.68;margin:0 0 1rem} .work a{font-family:'Cinzel',serif;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)} /* ============================================================ HEBREW ============================================================ */ .he{font-family:'Frank Ruhl Libre','Times New Roman',serif;direction:rtl;unicode-bidi:isolate} .he-name{font-family:'Frank Ruhl Libre',serif;direction:rtl;unicode-bidi:isolate; color:var(--gold);font-size:1.15em;letter-spacing:0} .wordmark .he-name{display:block;font-size:.98rem;margin-top:.3rem;opacity:.92} .hero .he-line{font-family:'Frank Ruhl Libre',serif;direction:rtl;unicode-bidi:isolate; color:var(--gold-lt);font-size:var(--s-1);line-height:1.9;margin:0 0 1.1rem; max-width:var(--measure);text-align:right} .foot .he-name{font-size:1rem;display:block;margin-top:.5rem} /* ============================================================ HOME HERO — portrait beside the headline ============================================================ */ .hero__grid{display:grid;grid-template-columns:minmax(0,1fr) 16rem;gap:2.8rem;align-items:center} .hero__grid .portrait{max-width:15.5rem} @media (max-width:900px){ .hero__grid{grid-template-columns:1fr;gap:1.6rem} .hero__grid .portrait{max-width:11rem;margin:0} .hero__grid .portrait figcaption{margin-top:1rem} } /* tightened top air — content starts higher, less empty black */ .hero{padding-top:clamp(1.8rem,4vw,3.2rem)} /* ---------- mobile: nav must stay inside the margins ---------- */ @media (max-width:760px){ .masthead__in{padding-block:.85rem} .nav{gap:.5rem .95rem;font-size:.8rem;letter-spacing:.04em;width:100%} .wordmark b{font-size:.98rem;letter-spacing:.12em} .wordmark span{font-size:.86rem} .wordmark .he-name{font-size:.94rem} } @media (max-width:420px){ .nav{font-size:.76rem;gap:.45rem .8rem} .hero .he-line{font-size:var(--s-0);text-align:right} } /* ---------- keep the masthead inside the page margins ---------- */ @media (max-width:760px){ .masthead__in{flex-direction:column;align-items:flex-start;gap:.7rem} .nav{justify-content:flex-start} } /* ============================================================ EDGE-BLEED FIX — appended, overrides earlier rules ------------------------------------------------------------ .wrap used padding:0 clamp(1.5rem,4vw,2.6rem) Any engine that cannot parse clamp() discards the WHOLE declaration, so padding falls to 0 and content sits flush against the viewport edge. Affects Safari 13 and earlier, older Chromium, and most in-app browsers (Facebook, Instagram, LinkedIn, Android webviews). Plain values + media queries. No clamp(). Works everywhere. ============================================================ */ .wrap{max-width:68rem;margin:0 auto;padding-left:1.5rem;padding-right:1.5rem} @media (min-width:48rem){.wrap{padding-left:2.1rem;padding-right:2.1rem}} @media (min-width:75rem){.wrap{padding-left:2.6rem;padding-right:2.6rem}} /* Top bar: floats instead of flex. Some engines drop padding on flex containers; floats never do. Also stops the WhatsApp number being clipped off the right edge. */ .topbar{overflow:hidden} .topbar__in{display:block;padding-top:.5rem;padding-bottom:.5rem} .topbar__in:after{content:"";display:table;clear:both} .topbar__in > :first-child{float:left;max-width:60%} .topbar__in > :last-child{float:right;max-width:38%;text-align:right;overflow-wrap:anywhere} @media (max-width:640px){ .topbar__in{text-align:center} .topbar__in > :first-child,.topbar__in > :last-child{ float:none;max-width:100%;display:block;text-align:center} .topbar__in > :first-child{margin-bottom:.25rem} } /* Nothing may exceed the viewport */ html,body{max-width:100%;overflow-x:hidden} img,figure,table,pre,iframe,video{max-width:100%} img{height:auto} /* Hebrew: isolate so bidi cannot reorder against Latin text */ .he-name,.he-line{direction:rtl;unicode-bidi:isolate} /* ============================================================ FIXES — Aug 2026 Centered portrait name, single-line WhatsApp, name modal ============================================================ */ /* Portrait caption always centered under the photo */ .portrait figcaption{ text-align:center; margin-top:1.15rem; } .hero__grid .portrait figcaption{ text-align:center; } /* Keep WhatsApp number on one line */ .topbar a[href*="wa.me"], .topbar a[href*="whatsapp"]{ white-space:nowrap; } .topbar__in > :last-child{ overflow-wrap:normal; white-space:nowrap; } @media (max-width:640px){ .topbar__in > :last-child{ white-space:normal; } .topbar a[href*="wa.me"]{ white-space:nowrap; display:inline-block; } } /* Wordmark is clickable for gematria modal */ .wordmark{ cursor:pointer; text-decoration:none; } .wordmark:hover b, .wordmark:hover span{ color:var(--gold-lt); } /* Gematria modal */ .gem-modal[hidden]{display:none !important} .gem-modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:1.25rem; background:rgba(8,7,5,.82); backdrop-filter:blur(5px); } .gem-modal__panel{ position:relative; width:100%; max-width:26rem; background:var(--panel); border:1px solid var(--gold-dk); padding:clamp(1.6rem,4vw,2.4rem); color:var(--body); box-shadow:0 0 0 1px rgba(201,162,39,.2), 0 24px 60px rgba(0,0,0,.55); } .gem-modal__panel::before{ content:""; position:absolute; inset:7px; border:1px solid rgba(201,162,39,.28); pointer-events:none; } .gem-modal__panel > *{position:relative;z-index:1} .gem-modal h2{ font-family:'Cinzel',serif; font-size:1.15rem; letter-spacing:.08em; color:var(--gold); margin:0 0 1rem; text-align:center; } .gem-modal .he-big{ font-family:'Frank Ruhl Libre',serif; direction:rtl; unicode-bidi:isolate; font-size:1.7rem; color:var(--cream); text-align:center; margin:0 0 1.4rem; line-height:1.5; } .gem-modal table{ width:100%; border-collapse:collapse; margin:0 0 1.2rem; font-size:var(--s-0); } .gem-modal th, .gem-modal td{ padding:.45rem .35rem; border-bottom:1px solid var(--rule); text-align:left; } .gem-modal th{color:var(--gold);font-family:'Cinzel',serif;font-weight:500;letter-spacing:.06em;font-size:.78rem;text-transform:uppercase} .gem-modal td:last-child, .gem-modal th:last-child{text-align:right} .gem-modal .total{ font-family:'Cinzel',serif; color:var(--gold-lt); font-size:1.05rem; letter-spacing:.06em; text-align:center; margin:1rem 0 0; } .gem-modal .note{ font-size:.9rem; color:var(--dim); font-style:italic; text-align:center; margin:.9rem 0 0; border:none; padding:0; } .gem-modal__close{ position:absolute; top:.7rem; right:.85rem; background:transparent; border:0; color:var(--gold); font-size:1.4rem; line-height:1; cursor:pointer; padding:.3rem .45rem; z-index:2; } .gem-modal__close:hover{color:var(--gold-lt)} @media (max-width:480px){ .gem-modal__panel{padding:1.4rem 1.15rem} .gem-modal .he-big{font-size:1.4rem} } /* ---------- Mobile nav: slightly tighter, better wrap ---------- */ @media (max-width:760px){ .nav{ gap:.4rem .75rem; font-size:.78rem; letter-spacing:.03em; line-height:1.5; } .masthead__in{ gap:.55rem; } } @media (max-width:420px){ .nav{ font-size:.74rem; gap:.35rem .65rem; } } /* ---------- Interactive gematria calculator ---------- */ .gem-lead{ text-align:center; color:var(--dim); font-size:var(--s-0); margin:0 0 1.3rem; font-style:italic; } .gem-label{ display:block; font-family:'Cinzel',serif; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin:0 0 .45rem; text-align:center; } .gem-input{ width:100%; background:rgba(0,0,0,.35); border:1px solid var(--rule); color:var(--cream); font-family:'Frank Ruhl Libre',serif; font-size:1.55rem; padding:.7rem 1rem; text-align:right; direction:rtl; border-radius:0; margin:0 0 1.2rem; line-height:1.4; } .gem-input:focus{ outline:2px solid var(--gold); outline-offset:2px; border-color:var(--gold-dk); } .gem-input::placeholder{color:#6a624f; opacity:1} .gem-result{ border-top:1px solid var(--rule); padding-top:1.15rem; } .gem-total-wrap{ display:flex; align-items:baseline; justify-content:center; gap:.75rem; margin:0 0 1rem; } .gem-total-label{ font-family:'Cinzel',serif; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); } .gem-total{ font-family:'Cinzel',serif; font-size:2.1rem; color:var(--gold-lt); letter-spacing:.04em; min-width:3ch; text-align:center; } .gem-breakdown{ display:flex; flex-wrap:wrap; gap:.45rem; justify-content:center; margin:0 0 .85rem; min-height:1.8rem; } .gem-chip{ display:inline-flex; align-items:center; gap:.35rem; border:1px solid var(--rule); padding:.28rem .55rem; font-size:.9rem; color:var(--body); background:rgba(201,162,39,.06); } .gem-chip b{ font-family:'Frank Ruhl Libre',serif; font-size:1.15rem; color:var(--cream); font-weight:500; } .gem-msg{ text-align:center; font-size:.9rem; color:var(--dim); font-style:italic; margin:0; } .gem-footnote{ text-align:center; font-size:.82rem; color:#8a8070; margin:1.2rem 0 0; line-height:1.5; } /* Standalone calculator block (About page etc.) */ .gem-box{ border:1px solid var(--gold-dk); background:linear-gradient(180deg,rgba(201,162,39,.05),rgba(0,0,0,0) 55%),var(--panel); padding:clamp(1.5rem,3.5vw,2.3rem); margin:2rem 0 0; position:relative; max-width:28rem; } .gem-box::before{ content:""; position:absolute; inset:7px; border:1px solid rgba(201,162,39,.25); pointer-events:none; } .gem-box > *{position:relative;z-index:1} .gem-box .gem-input{max-width:100%} @media (max-width:480px){ .gem-input{font-size:1.35rem} .gem-total{font-size:1.75rem} } /* ============================================================ GEMATRIA CALCULATOR + INTERPRETATION ============================================================ */ .gem-lead{ font-size:var(--s-0); color:var(--dim); margin:0 0 1.2rem; text-align:center; line-height:1.55; } .gem-label{ display:block; font-family:'Cinzel',serif; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin:0 0 .45rem; } .gem-input{ width:100%; background:rgba(0,0,0,.35); border:1px solid var(--rule); color:var(--cream); font-family:'Frank Ruhl Libre','Cormorant Garamond',serif; font-size:1.45rem; padding:.7rem .9rem; text-align:right; direction:rtl; margin:0 0 1.2rem; border-radius:0; } .gem-input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 1px rgba(212,174,58,.35); } .gem-input::placeholder{color:#6a624e} .gem-result{ border-top:1px solid var(--rule); padding-top:1.1rem; margin-bottom:.5rem; } .gem-total-wrap{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.85rem; } .gem-total-label{ font-family:'Cinzel',serif; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); } .gem-total{ font-family:'Cinzel',serif; font-size:2rem; font-weight:600; color:var(--gold-lt); letter-spacing:.04em; line-height:1; } .gem-breakdown{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 .7rem; justify-content:center; } .gem-chip{ display:inline-flex; align-items:center; gap:.35rem; border:1px solid var(--rule); padding:.28rem .55rem; font-size:.9rem; color:var(--body); background:rgba(201,162,39,.04); } .gem-chip .he{ font-family:'Frank Ruhl Libre',serif; font-size:1.15rem; color:var(--cream); font-weight:500; } .gem-msg{ text-align:center; font-size:.9rem; color:var(--dim); margin:0; font-style:italic; } .gem-footnote{ font-size:.82rem; color:#8a8070; line-height:1.5; margin:1.3rem 0 0; text-align:center; border:none; padding:0; } /* Interpretation block for 184 / Menachem Elyah */ .gem-interp{ margin-top:1.4rem; padding-top:1.3rem; border-top:1px solid var(--rule); } .gem-interp__title{ font-family:'Cinzel',serif; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin:0 0 .7rem; text-align:center; } .gem-interp__lead{ text-align:center; font-size:1.05rem; color:var(--cream); margin:0 0 1rem; } .gem-interp__lead strong{color:var(--gold-lt)} .gem-interp__list{ margin:0 0 1rem; padding:0 0 0 1.1rem; color:var(--body); font-size:var(--s-0); line-height:1.65; } .gem-interp__list li{margin:0 0 .75rem} .gem-interp__list strong{color:var(--cream);font-weight:500} .gem-interp__close{ text-align:center; font-family:'Cinzel',serif; font-size:.95rem; letter-spacing:.04em; color:var(--gold-lt); margin:0; line-height:1.5; } /* Modal panel a bit taller on mobile for the tool */ .gem-modal__panel{ max-width:28rem; max-height:90vh; overflow-y:auto; } @media (max-width:480px){ .gem-input{font-size:1.25rem} .gem-total{font-size:1.7rem} .gem-interp__list{padding-left:1rem;font-size:.95rem} } /* ============================================================ BALANCE + BOTTOM CLEARANCE + NAME UNDER PHOTO ============================================================ */ /* Keep bottom dock from covering footer content */ .dock{ position:fixed; bottom:0; left:0; right:0; z-index:40; display:flex; background:rgba(11,10,8,.94); border-top:1px solid var(--rule); backdrop-filter:blur(6px); } .dock a{ flex:1; text-align:center; padding:1rem .5rem; font-family:'Cinzel',serif; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:#DCD0B4; border-right:1px solid var(--rule); } .dock a:last-child{border-right:0} .dock a:hover{color:var(--gold-lt)} .dock--go{background:rgba(212,174,58,.12);color:var(--gold)!important} /* Space so footer content is never hidden behind dock */ body{padding-bottom:0} @media (min-width:900px){ /* On wider screens the dock can stay, but give more footer air */ } /* Portrait name block — always centered, clear hierarchy */ .portrait{text-align:center} .portrait figcaption{ text-align:center !important; margin-left:auto; margin-right:auto; } .hero__grid .portrait{ justify-self:center; } /* Hero: restore a little air so it does not feel crushed */ .hero h1{margin:0 0 1.15rem} .hero .lede{margin:0 0 1rem} .hero .sub{margin:0 0 1.8rem} /* Masthead: slightly more presence */ .masthead__in{padding-block:.9rem} /* Avoid overly tight mobile */ @media (max-width:760px){ .hero{padding:1.6rem 0 2rem} .bay{padding:2.2rem 0} .hero__grid .portrait{max-width:12rem;margin:0 auto} .portrait figcaption{margin-top:1rem} body{padding-bottom:0} } /* ============================================================ NEXT TIER — mobile nav, form success, elevation ============================================================ */ /* Nav toggle (hamburger) — hidden on desktop */ .nav-toggle{ display:none; background:transparent; border:1px solid var(--rule); width:2.6rem; height:2.6rem; padding:0; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:.28rem; margin-left:auto; } .nav-toggle span{ display:block; width:1.15rem; height:1.5px; background:var(--gold); transition:transform .2s, opacity .2s; } .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); } @media (max-width:820px){ .masthead__in{ flex-wrap:wrap; align-items:center; } .nav-toggle{display:inline-flex} .nav{ display:none; width:100%; flex-direction:column; gap:0; padding:0.4rem 0 0.6rem; border-top:1px solid var(--rule); margin-top:.35rem; } .nav.is-open{display:flex} .nav a{ padding:.7rem 0; border-bottom:1px solid rgba(90,74,36,.35); font-size:.86rem; } .nav a:last-child{border-bottom:0} .wordmark{flex:1;min-width:0} } /* Form thank-you state */ #thanks{ border:1px solid var(--gold-dk); background:linear-gradient(180deg,rgba(201,162,39,.06),transparent 60%),var(--panel); padding:clamp(1.5rem,3.5vw,2.2rem); margin-top:1rem; } #thanks h2{ margin:0 0 .8rem; font-size:var(--s-2); } #failed{margin-top:1rem} /* Sample page elevation — closing band */ .sample-close{ border-top:1px solid var(--rule); padding-top:0.5rem; } /* ============================================================ EMERGENCY FIX — remove blocking bottom bar ============================================================ */ .dock{ display:none !important; visibility:hidden !important; pointer-events:none !important; height:0 !important; overflow:hidden !important; } body{ padding-bottom:0 !important; } .foot{ padding-bottom:2.4rem !important; } /* Hero must be readable */ .hero{ padding:clamp(1.8rem,4vw,3.2rem) 0 clamp(2rem,4.2vw,3.4rem) !important; } .hero__grid{ display:grid !important; grid-template-columns:minmax(0,1fr) minmax(11rem,16rem) !important; gap:2rem !important; align-items:start !important; } .hero__grid .portrait{ max-width:15rem !important; margin:0 !important; justify-self:end !important; } .portrait img{ width:100% !important; height:auto !important; display:block !important; } .portrait figcaption{ text-align:center !important; display:block !important; } @media (max-width:900px){ .hero__grid{ grid-template-columns:1fr !important; gap:1.5rem !important; } .hero__grid .portrait{ max-width:12rem !important; margin:0 auto !important; justify-self:center !important; } } /* ============================================================ FINAL: NO BOTTOM DOCK — never cover content ============================================================ */ .dock, nav.dock, .dock a { display: none !important; visibility: hidden !important; height: 0 !important; max-height: 0 !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important; pointer-events: none !important; position: static !important; } html, body { padding-bottom: 0 !important; margin-bottom: 0 !important; } .foot { padding-bottom: 2.5rem !important; margin-bottom: 0 !important; } main { padding-bottom: 1rem; } /* ============================================================ TIGHT BOTTOM — no excess empty space under footer ============================================================ */ .foot{ padding: 2.2rem 0 1.6rem !important; margin-bottom: 0 !important; } .foot__base{ margin-top: 1.4rem !important; padding-top: 0.9rem !important; margin-bottom: 0 !important; } html, body{ padding-bottom: 0 !important; margin-bottom: 0 !important; } main{ padding-bottom: 0 !important; } /* Last section before footer shouldn't leave a huge gap */ .bay:last-of-type{ padding-bottom: clamp(1.8rem, 3.5vw, 2.6rem) !important; } /* ============================================================ MOBILE BROWSER TOOLBAR CLEARANCE Content must not sit behind iOS/Android browser chrome ============================================================ */ html { /* allow safe-area env() to work with viewport-fit=cover */ height: 100%; } body { min-height: 100%; min-height: 100dvh; /* base clearance + device home indicator / toolbar */ padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)) !important; } .foot { /* footer sits above the browser toolbar */ padding-bottom: calc(2.4rem + env(safe-area-inset-bottom, 0px)) !important; margin-bottom: 0 !important; } .foot__base { margin-bottom: 0 !important; padding-bottom: 0.25rem !important; } /* Extra room on small screens where browser bars are tallest */ @media (max-width: 820px) { body { padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)) !important; } .foot { padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px)) !important; } } /* ============================================================ LAPTOP FIRST VIEWPORT — keep each page opening above the fold The full wordmark and ten-link navigation wrap onto two rows on ordinary laptops. Compact that shared header and remove the oversized hero air without changing any page content. ============================================================ */ @media (min-width:821px) { .topbar { font-size:.82rem; } .topbar__in { padding-top:.28rem; padding-bottom:.28rem; } .masthead__in { gap:.45rem 1.1rem; padding-top:.45rem; padding-bottom:.45rem; } .wordmark b { font-size:1.28rem; line-height:1.18; letter-spacing:.14em; } .wordmark span { line-height:1.22; margin-top:.12rem; } .wordmark .he-name { margin-top:.12rem; } .hero { padding-top:1rem !important; } .hero__grid { align-items:start !important; } .hero__grid .portrait { align-self:start !important; } .home .hero .lede { margin-top:2rem !important; } } /* Extra-tight treatment for the short browser window shown on 1366×768-class laptops. */ @media (min-width:821px) and (max-height:800px) { .topbar { font-size:.8rem; } .topbar__in { padding-top:.25rem; padding-bottom:.25rem; } .masthead__in { gap:.28rem 1rem; padding-top:.3rem; padding-bottom:.3rem; } .wordmark b { font-size:1.32rem; letter-spacing:.13em; } .wordmark span { font-size:.82rem; } .wordmark .he-name { font-size:.88rem; } .nav { font-size:.8rem; gap:.25rem 1.05rem; } .hero { padding-top:.65rem !important; } .hero .eyebrow { margin-bottom:.65rem; } .home .hero .lede { margin-top:2.5rem !important; } } /* ============================================================ FULL GEMATRIA READOUT — Hebrew and English ============================================================ */ .gem-modal__panel { max-width:36rem; max-height:calc(100vh - 2rem); max-height:calc(100dvh - 2rem); overflow-y:auto; overscroll-behavior:contain; } .gem-input[dir="auto"] { direction:auto; text-align:start; unicode-bidi:plaintext; font-family:'Frank Ruhl Libre','Cormorant Garamond',Georgia,serif; margin-bottom:.65rem; } .gem-calculate { display:block; width:100%; margin:0 0 1.15rem; padding:.72rem 1rem; border:1px solid var(--gold); background:var(--gold); color:#100D06; font-family:'Cinzel',serif; font-size:.82rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; } .gem-calculate:hover, .gem-calculate:focus-visible { background:var(--gold-lt); } .gem-chip .gem-latin { font-family:'Cinzel',serif; font-size:.9rem; color:var(--cream); font-weight:600; } .gem-full-readout { margin:.9rem 0 .8rem; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:.9rem 0; } .gem-method { text-align:center; color:var(--dim); font-size:.88rem; line-height:1.45; margin:0 0 .8rem; } .gem-spelling { display:flex; justify-content:center; align-items:baseline; gap:.7rem; margin:0 0 .65rem; } .gem-spelling span, .gem-grand-total span, .gem-reduction span { font-family:'Cinzel',serif; font-size:.67rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); } .gem-spelling strong { color:var(--cream); font-size:1.25rem; font-weight:500; } .gem-word-table { border-top:1px solid rgba(90,74,36,.55); } .gem-word-row { display:grid; grid-template-columns:minmax(4.5rem,max-content) minmax(0,1fr) auto; gap:.65rem; align-items:baseline; padding:.55rem 0; border-bottom:1px solid rgba(90,74,36,.55); } .gem-word-name { color:var(--cream); font-weight:600; } .gem-word-name.he { font-size:1.12rem; font-weight:500; } .gem-equation { color:var(--body); font-size:.86rem; line-height:1.45; overflow-wrap:anywhere; } .gem-word-row > strong { color:var(--gold-lt); white-space:nowrap; } .gem-grand-total { display:flex; justify-content:space-between; align-items:baseline; margin:.8rem 0 .35rem; } .gem-grand-total strong { font-family:'Cinzel',serif; color:var(--gold-lt); font-size:1.45rem; } .gem-reduction { text-align:center; color:var(--body); font-size:.88rem; margin:0; } .gem-reduction span { margin-right:.45rem; } @media (max-width:520px) { .gem-modal { padding:.55rem; } .gem-modal__panel { max-height:calc(100vh - 1.1rem); max-height:calc(100dvh - 1.1rem); padding:1.25rem 1rem; } .gem-word-row { grid-template-columns:1fr auto; gap:.25rem .6rem; } .gem-equation { grid-column:1 / -1; grid-row:2; } } /* Landing-page prayer journey and author credential. */ .portrait-stack{width:100%;max-width:16rem;justify-self:end} .portrait-stack .portrait{max-width:none!important} .toi-credential{display:grid;grid-template-columns:auto 1fr;gap:.15rem .55rem;align-items:center;margin:.9rem auto 0;padding:.65rem .75rem;border:1px solid rgba(201,162,39,.6);background:#fff;color:#342b1a;text-decoration:none;text-align:left} .toi-credential>span{color:#6e6556;font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:.11em;text-transform:uppercase} .toi-credential img{grid-column:2;grid-row:1 / span 2;width:100%;max-width:8.5rem;height:auto} .toi-credential small{display:block;color:#6e6556;font-size:.67rem;line-height:1.2} .toi-credential:hover{border-color:var(--gold);box-shadow:0 0 0 2px rgba(201,162,39,.16)} .prayer-journey{padding:clamp(2.3rem,5vw,4.8rem) 0;border-top:1px solid rgba(74,60,28,.75);border-bottom:1px solid rgba(74,60,28,.75);background:radial-gradient(circle at 80% 20%,rgba(201,162,39,.13),transparent 38%),#0d0b07;color:var(--body)} .prayer-journey .eyebrow{margin-bottom:1rem} .journey-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(20rem,.95fr);gap:clamp(2rem,5vw,5rem);align-items:start} .journey-copy h2{max-width:13ch;margin:0;color:var(--cream);font-size:clamp(2.15rem,4.2vw,4.2rem);line-height:1.02} .journey-lede{color:var(--cream);font-size:clamp(1.15rem,2vw,1.42rem);line-height:1.55} .journey-he{margin:.7rem 0 1.15rem;color:var(--gold-lt);font-size:clamp(1.45rem,2.6vw,2.2rem);line-height:1.25;text-align:left} .journey-date{display:grid;gap:.2rem;margin-top:1.5rem;padding:1rem 1.1rem;border-left:3px solid var(--gold);background:rgba(201,162,39,.06)} .journey-date strong{color:var(--gold-lt);font-family:'Cinzel',serif;font-size:.84rem;letter-spacing:.05em} .journey-date span{color:var(--cream);font-size:1.05rem} .journey-date small{color:var(--dim);font-size:.84rem} .journey-action{min-width:0} .prayer-counter-card{text-align:center;background:linear-gradient(180deg,#fff 0%,#faf8f2 100%);border:1px solid #d4af37;border-radius:10px;padding:15px 20px;max-width:32rem;margin:0 auto 1rem;box-shadow:0 4px 15px rgba(212,175,55,.15)} .counter-label{font-size:.72rem;letter-spacing:2px;color:#aa771c;font-family:'Cinzel',serif;font-weight:700;text-transform:uppercase} .counter-number{font-size:clamp(2.8rem,7vw,4.4rem);font-weight:800;color:#1a1a1a;margin:5px 0;font-family:Georgia,serif;line-height:1} .counter-subtext{max-width:27rem;margin:0 auto!important;color:#555!important;font-size:.85rem!important;line-height:1.4!important} .journey-form{display:grid;gap:.72rem;padding:clamp(1rem,3vw,1.45rem);border:1px solid var(--gold-dk);background:var(--panel)} .journey-form>label:first-child{color:var(--gold-lt);font-family:'Cinzel',serif;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase} .journey-form textarea{width:100%;min-height:7.5rem;padding:.8rem;border:1px solid var(--rule);background:rgba(255,255,255,.04);color:var(--cream);font-family:'Cormorant Garamond',Georgia,serif;font-size:1.08rem;line-height:1.5;resize:vertical} .journey-form textarea::placeholder{color:#756c56} .journey-form textarea:focus{border-color:var(--gold)} .journey-form button{padding:.85rem 1rem;border:1px solid var(--gold);background:var(--gold);color:#100d06;cursor:pointer;font-family:'Cinzel',serif;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase} .journey-form button:hover{background:var(--gold-lt)} .journey-form button:disabled{cursor:not-allowed;filter:grayscale(.35);opacity:.7} .journey-consent{display:grid;grid-template-columns:auto 1fr;gap:.65rem;align-items:start;color:var(--body);font-size:.88rem;line-height:1.4} .journey-consent input{width:1.05rem;height:1.05rem;margin-top:.16rem;accent-color:var(--gold)} .journey-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important} .journey-status{min-height:1.3rem;margin:0!important;color:var(--dim)!important;font-size:.8rem!important;line-height:1.4!important} .journey-status--success{color:#d8c985!important}.journey-status--error{color:#efaaa0!important} .journey-scripture{margin-top:clamp(2.4rem,5vw,4rem)} .journey-psalm{max-width:48rem;margin:clamp(2.4rem,5vw,4rem) auto 0;padding:1.4rem;border-top:1px solid var(--gold-dk);border-bottom:1px solid var(--gold-dk);color:var(--cream);text-align:center} .journey-psalm>span{display:block;color:var(--gold-lt);font-size:clamp(1.35rem,3vw,2rem);line-height:1.6} .journey-psalm p{margin:.65rem 0;color:var(--body);font-size:1.08rem;font-style:italic} .journey-psalm cite{color:var(--gold);font-family:'Cinzel',serif;font-size:.66rem;font-style:normal;letter-spacing:.12em;text-transform:uppercase} .nav__prayer{padding:.25rem .55rem!important;border:1px solid var(--gold-dk)!important;color:var(--gold-lt)!important} @media(max-width:900px){.portrait-stack{justify-self:start}.journey-grid{grid-template-columns:1fr}.journey-copy h2{max-width:18ch}.journey-action{max-width:38rem}.journey-he{text-align:right}} @media(max-width:680px){.portrait-stack{max-width:13rem}.toi-credential{grid-template-columns:1fr;padding:.55rem;text-align:center}.toi-credential img{grid-column:1;grid-row:auto;max-width:7.5rem;margin:auto}.journey-grid{gap:1.6rem}.prayer-journey{padding:2rem 0}.journey-copy h2{font-size:2.25rem}.prayer-counter-card{border-radius:6px}.nav__prayer{border:0!important;padding:.8rem 0!important}} /* ============================================================ HERO + gematria — clean on laptops, no cutoff Layout: text | calculator | photo (wide) text on top, calc|photo below (medium) stack (narrow) ============================================================ */ /* Never clip hero text */ .hero, .hero__grid, .hero__grid--with-gem, .hero__copy { overflow: visible !important; max-height: none !important; } .hero__copy .lede, .hero__copy .sub, .hero__copy h1 { overflow: visible !important; text-overflow: unset !important; -webkit-line-clamp: unset !important; max-height: none !important; } /* Headline was limited to 17ch — too tight on laptops; allow full wrap */ .hero h1 { max-width: none !important; } .hero__grid--with-gem { display: grid !important; grid-template-columns: minmax(18rem, 1fr) minmax(15rem, 17.5rem) minmax(10.5rem, 13.5rem) !important; gap: 1.5rem 1.75rem !important; align-items: start !important; width: 100%; box-sizing: border-box; } .hero__grid--with-gem .hero__copy { min-width: 0; /* allow shrink without clipping words mid-line badly */ } .hero__grid--with-gem .portrait { max-width: 13.5rem !important; width: 100%; margin: 0 !important; justify-self: end !important; } .gem-box--hero { margin: 0 !important; max-width: none !important; width: 100%; box-sizing: border-box; padding: 1.2rem 1.15rem 1.35rem !important; align-self: start; overflow: visible !important; } .gem-box--hero .gem-lead { text-align: left; margin: 0 0 0.65rem; font-family: 'Cinzel', serif; font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-lt); } .gem-box--hero .gem-label { font-size: 0.72rem; } .gem-box--hero .gem-input { font-size: 1.05rem; padding: 0.65rem 0.75rem; width: 100%; box-sizing: border-box; } .gem-box--hero .gem-calculate { margin-top: 0.65rem; width: 100%; padding: 0.7rem 1rem; box-sizing: border-box; } .gem-box--hero .gem-total { font-size: 1.75rem; } .gem-box--hero .gem-footnote { margin-top: 0.6rem; line-height: 1.45; } /* Full reading under the calculator — wrap cleanly, never clip */ .gem-full-readout { margin-top: 0.9rem; padding-top: 0.85rem; border-top: 1px solid rgba(201,162,39,0.25); font-size: 0.88rem; line-height: 1.55; overflow: visible !important; word-wrap: break-word; overflow-wrap: anywhere; } .gem-full-readout .gem-method { color: var(--dim); margin: 0 0 0.55rem; font-size: 0.82rem; } .gem-full-readout .gem-spelling { margin: 0 0 0.45rem; } .gem-full-readout .gem-spelling span { display: block; font-size: 0.72rem; color: var(--dim); letter-spacing: 0.04em; text-transform: uppercase; } .gem-full-readout .gem-spelling strong { font-size: 1.1rem; } .gem-full-readout .gem-word-table { margin: 0.45rem 0; } .gem-full-readout .gem-grand-total, .gem-full-readout .gem-reduction, .gem-full-readout .gem-meanings, .gem-full-readout .gem-proportion, .gem-full-readout .gem-same-number { margin: 0.5rem 0 0; } .gem-full-readout .gem-grand-total span, .gem-full-readout .gem-reduction span, .gem-full-readout .gem-meanings > span, .gem-full-readout .gem-proportion > span, .gem-full-readout .gem-same-number > span { display: block; font-family: 'Cinzel', serif; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.15rem; } .gem-letter-mean { display: flex; flex-wrap: wrap; gap: 0.3rem 0.65rem; margin: 0.3rem 0 0; } .gem-letter-mean span { font-size: 0.84rem; color: var(--body); line-height: 1.4; } .gem-letter-mean b.he { font-size: 1rem; margin-inline-end: 0.2rem; } /* Medium laptops: text full width on top; calc + photo side by side below */ @media (max-width: 1199px) { .hero__grid--with-gem { grid-template-columns: minmax(0, 1fr) minmax(11rem, 13.5rem) !important; grid-template-areas: "copy copy" "gem photo" !important; gap: 1.4rem 1.5rem !important; } .hero__grid--with-gem .hero__copy { grid-area: copy; } .hero__grid--with-gem .gem-box--hero { grid-area: gem; } .hero__grid--with-gem .portrait { grid-area: photo; max-width: 13.5rem !important; justify-self: end !important; } } /* Phones / narrow: clean stack, nothing cut off */ @media (max-width: 700px) { .hero__grid--with-gem { grid-template-columns: 1fr !important; grid-template-areas: "copy" "gem" "photo" !important; gap: 1.35rem !important; } .hero__grid--with-gem .portrait { max-width: 11.5rem !important; margin: 0 auto !important; justify-self: center !important; } } /* ============================================================ PRINT The guides pages exist so families can print them and hand them out. Without this they print gold-on-black. ============================================================ */ @media print{ body{background:#fff !important;color:#111 !important;font-size:11.5pt;line-height:1.5} body::before{display:none !important} .topbar,.masthead,.nav,.nav-toggle,.foot,.skip,.dock, .journey-form,.journey-action,.prayer-journey,.scripture-tool, .actions,.btn,.gem-modal,form,.hero .portrait-stack,.toi-credential{display:none !important} main{padding:0 !important} .wrap{max-width:none;padding:0} h1,h2,h3,h4{color:#111 !important;page-break-after:avoid;font-family:Georgia,serif} h1{font-size:20pt}h2{font-size:15pt;margin-top:1.4em}h3{font-size:12.5pt} p,li,td,th{color:#111 !important} .eyebrow,.flourish,.strand__n,.strand__go{color:#555 !important} a{color:#111 !important;text-decoration:none;border:0 !important} a[href^="http"]::after{content:" (" attr(href) ")";font-size:8.5pt;color:#666;word-break:break-all} .bay,.band,.page-head{border:0 !important;padding:.5rem 0 !important;background:none !important} .strand,.tier,.guide,.state,.trust div,.quote,.work,.choice{ border-color:#bbb !important;background:none !important;page-break-inside:avoid} details{page-break-inside:avoid} details>summary{list-style:none;color:#111 !important;font-weight:600} details:not([open])>*:not(summary){display:block} /* print answers even when collapsed */ blockquote,figure,img,table{page-break-inside:avoid} img{max-width:60mm !important;filter:grayscale(1)} .he,.he-name,[lang="he"]{color:#111 !important} @page{margin:18mm 16mm} } /* ============================================================ NO-JAVASCRIPT FALLBACK The mobile menu is JS-only. Without this it cannot be opened. ============================================================ */ .no-js .nav-toggle{display:none !important} .no-js .nav{display:flex !important;max-height:none !important;height:auto !important; visibility:visible !important;opacity:1 !important;position:static !important} /* ============================================================ CURRENT PAGE ============================================================ */ .nav a[aria-current="page"]{color:var(--gold);border-bottom:2px solid var(--gold)} /* ============================================================ STICKY MOBILE CALL-TO-ACTION ============================================================ */ .mobile-cta{display:none} @media (max-width:760px){ .mobile-cta{ display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:60; background:rgba(11,10,8,.97);border-top:1px solid var(--rule-ui); backdrop-filter:blur(8px);padding-bottom:env(safe-area-inset-bottom)} .mobile-cta a{ font-family:'Cinzel',serif;font-size:.74rem;font-weight:600;letter-spacing:.09em; text-transform:uppercase;text-align:center;padding:.95rem .5rem;color:var(--gold)} .mobile-cta a + a{border-left:1px solid var(--rule-ui);color:var(--cream)} .mobile-cta a:active{background:rgba(212,174,58,.14)} body{padding-bottom:3.4rem} .foot{margin-bottom:.5rem} } @media print{.mobile-cta{display:none !important}} /* ---------- institution-type subnav (added 2026-08-17) ---------- */ .audnav{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin:1.8rem 0 0;padding:1rem 0 0;border-top:1px solid var(--rule)} .audnav a{font-family:'Cinzel',serif;font-size:.78rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-dk);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:.15rem;transition:color .2s,border-color .2s} .audnav a:hover,.audnav a:focus-visible{color:var(--gold-lt);border-bottom-color:var(--gold)} @media(max-width:640px){.audnav{gap:.5rem 1.1rem}} /* Resource Library + Story Mixer - added 2026-08-19 */ .resource-group{margin:3rem 0}.resource-group>h2{margin-bottom:1.2rem}.resource-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.resource-card{border:1px solid var(--rule);padding:1.35rem;background:rgba(255,255,255,.025);display:flex;flex-direction:column;min-height:15rem}.resource-card h3{font-size:1.18rem;margin:.25rem 0 .6rem}.resource-card p{font-size:.95rem;line-height:1.55}.resource-download{margin-top:auto;padding-top:1rem;font-weight:700;text-decoration:none;color:var(--gold);border-bottom:0}.library-intro{max-width:54rem;margin:0 auto 2.5rem}.mixer-wrap{max-width:72rem}.mixer-note{max-width:54rem;margin:0 auto 1.5rem;padding:1rem 1.2rem;border-left:3px solid var(--gold);background:rgba(212,174,58,.08)}.story-mixer{max-width:66rem;margin:auto}.mixer-client,.boundary-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.mixer-client label,.boundary-grid label,.full-label{display:grid;gap:.4rem;font-weight:700}.mixer-client input,.mixer-client select,.boundary-grid select,.full-label textarea{width:100%;padding:.75rem;border:1px solid var(--rule);background:rgba(255,255,255,.04);color:inherit;font:inherit}.mixer-board{margin:1.5rem 0;padding:1rem;border:1px solid var(--rule);background:rgba(0,0,0,.12)}.mixer-channel{padding:1rem .7rem;border-bottom:1px solid var(--rule)}.mixer-channel:last-child{border-bottom:0}.mixer-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}.mixer-head label{font-weight:700}.mixer-head output{min-width:2.2rem;text-align:center;font-weight:800;color:var(--gold);font-size:1.1rem}.mixer-channel input[type=range]{width:100%;accent-color:var(--gold)}.mixer-scale{display:flex;justify-content:space-between;gap:1rem;font-size:.75rem;opacity:.8}.boundary-box,.guide-box{margin:1.5rem 0;padding:1.2rem;border:1px solid var(--rule)}.boundary-box legend,.guide-box legend{padding:0 .5rem;font-family:Georgia,serif;font-size:1.3rem}.full-label{margin-top:1rem}.guide-box label{display:flex;gap:.7rem;align-items:flex-start}.mixer-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.2rem 0}.mixer-actions button{cursor:pointer}.mixer-summary{margin-top:2rem;padding:1.3rem;border:1px solid var(--gold);background:rgba(212,174,58,.06)}.mixer-summary pre{white-space:pre-wrap;font-family:inherit;line-height:1.55}.micro{font-size:.78rem;opacity:.78} @media(max-width:850px){.resource-grid{grid-template-columns:1fr 1fr}}@media(max-width:620px){.resource-grid,.mixer-client,.boundary-grid{grid-template-columns:1fr}.resource-card{min-height:0}} @media print{.resource-download,.mixer-actions,.masthead,.topbar,.foot,.mobile-cta{display:none!important}.mixer-board,.boundary-box,.guide-box,.mixer-summary{border-color:#888!important;background:#fff!important}.mixer-channel input[type=range]{accent-color:#555}.story-mixer{max-width:none}.mixer-summary[hidden]{display:block!important}.mixer-summary[hidden]::before{content:'Move the sliders before printing to include your mix.';display:block}} /* ===== 2026-08-21 conversion-focused rebuild ===== */ .nav--rebuilt{display:flex;align-items:center;gap:.1rem;flex-wrap:wrap} .nav--rebuilt>a,.nav-group__toggle{font-family:'Archivo',sans-serif;font-size:.78rem;letter-spacing:.045em;background:none;border:0;color:var(--body);padding:.7rem .62rem;cursor:pointer} .nav--rebuilt>a:hover,.nav-group__toggle:hover{color:var(--gold-lt)} .nav-group{position:relative} .nav-group__menu{display:none;position:absolute;z-index:50;top:100%;left:0;min-width:17rem;background:var(--black-2);border:1px solid var(--rule-ui);box-shadow:0 14px 32px rgba(0,0,0,.35);padding:.45rem} .nav-group:hover .nav-group__menu,.nav-group:focus-within .nav-group__menu,.nav-group.is-open .nav-group__menu{display:block} .nav-group__menu a{display:block;padding:.72rem .8rem;font-family:'Archivo',sans-serif;font-size:.82rem;line-height:1.3;border-bottom:1px solid rgba(212,174,58,.12)} .nav-group__menu a:last-child{border-bottom:0}.nav-group__menu a:hover{background:rgba(212,174,58,.08);color:var(--cream)} .nav-group__menu small{display:block;color:var(--dim);font-family:'Cormorant Garamond',serif;font-size:.95rem;margin-top:.15rem} .nav-primary-cta{border:0!important;border-bottom:2px solid transparent!important;color:var(--gold-lt)!important;margin-left:.25rem;transition:color .2s,border-color .2s} .nav-primary-cta:hover,.nav-primary-cta:focus-visible,.nav-primary-cta[aria-current="page"]{border-bottom-color:var(--gold)!important;color:var(--gold)!important} .home-offer{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:rgba(212,174,58,.045)} .home-offer__grid,.process-grid,.specialist-grid,.sample-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:3rem;align-items:start} .home-price{font-family:'Cinzel',serif;font-size:clamp(2rem,4vw,3.35rem);color:var(--gold-lt);line-height:1;margin:.4rem 0 1rem}.home-price small{display:block;font-family:'Archivo',sans-serif;font-size:.76rem;letter-spacing:.08em;color:var(--dim);margin-top:.55rem;text-transform:uppercase} .check-list{margin:1.2rem 0 0;padding:0;list-style:none}.check-list li{position:relative;padding:.35rem 0 .35rem 1.55rem}.check-list li:before{content:'✓';position:absolute;left:0;color:var(--gold)} .process-grid{grid-template-columns:repeat(3,1fr);gap:1.2rem}.process-step{border:1px solid var(--rule);padding:1.25rem;background:rgba(255,255,255,.015)}.process-step b{display:block;font-family:'Cinzel',serif;color:var(--gold);margin-bottom:.35rem}.process-step p{margin:0;font-size:1rem} .specialist-grid{grid-template-columns:1fr 1fr}.specialist-card{border-left:2px solid var(--gold-dk);padding-left:1.2rem} .sample-pull{font-size:1.26rem;line-height:1.65;border-left:2px solid var(--gold);padding-left:1.35rem;color:var(--cream)} .campaign-card{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;border:1px solid var(--rule);padding:1.4rem 1.6rem}.campaign-card p{margin-bottom:0} .cred-strip{display:flex;flex-wrap:wrap;gap:.65rem 1.35rem;align-items:center;font-family:'Cinzel',serif;color:var(--cream);font-size:.88rem;letter-spacing:.035em}.cred-strip span{opacity:.92} @media(max-width:900px){.nav--rebuilt{display:none}.nav--rebuilt.is-open{display:flex;flex-direction:column;align-items:stretch;width:100%}.nav-group{width:100%}.nav-group__toggle{width:100%;text-align:left}.nav-group__menu{position:static;box-shadow:none;margin-left:.6rem}.nav-group:hover .nav-group__menu{display:none}.nav-group.is-open .nav-group__menu,.nav-group:focus-within .nav-group__menu{display:block}.nav-primary-cta{margin-left:0}.home-offer__grid,.specialist-grid,.sample-grid{grid-template-columns:1fr}.process-grid{grid-template-columns:1fr}.campaign-card{grid-template-columns:1fr}} /* ================================================================ 2026-08-21 — uniform menu casing. The container rule .nav{text-transform:uppercase} was inherited by the items but not by the