@font-face{font-family:"Noto Sans Hebrew";font-style:normal;font-weight:400 600;font-display:swap;src:url("assets/fonts/NotoSansHebrew-Static.ttf") format("truetype")}
@font-face{font-family:"Noto Sans Phoenician";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/NotoSansPhoenician-Regular.ttf") format("truetype")}
/* ============================================================
   The House of the Highest One God — sales + interactive site
   Dark / gold, on-brand with the cover. Vanilla, no frameworks.
   ============================================================ */
:root{
  --bg:#081319; --bg2:#0d2530; --panel:#0f2c38; --line:#1d4250;
  --gold:#d9b45a; --gold-2:#e7c877; --cream:#efe9dd; --muted:#9fb4b8; --dim:#5d7278;
  --ink:#eef3f2; --shadow:0 18px 50px rgba(0,0,0,.45);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:radial-gradient(120% 80% at 50% -10%,#12303a 0%,#081319 60%,#050d11 100%);
  color:var(--ink);font-family:var(--serif);line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:var(--gold-2);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.center{text-align:center}
.gold{color:var(--gold)}
.muted{color:var(--muted)}
.eyebrow{font-family:var(--sans);letter-spacing:.22em;text-transform:uppercase;font-size:.72rem;color:var(--gold);font-weight:600}
h1,h2,h3{font-family:var(--serif);line-height:1.15;font-weight:700}
h1{font-size:clamp(2.1rem,5vw,3.4rem);margin:.2em 0}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem);margin:0 0 .3em}
h3{font-size:1.2rem;margin:0 0 .3em}
.section{padding:72px 0;border-top:1px solid rgba(255,255,255,.05)}
.lead{font-size:1.18rem;color:var(--cream)}

/* buttons */
.btn{display:inline-block;font-family:var(--sans);font-weight:600;font-size:1rem;
  padding:15px 30px;border-radius:999px;cursor:pointer;border:1px solid transparent;transition:.15s;text-align:center}
.btn-gold{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#20160a;box-shadow:var(--shadow)}
.btn-gold:hover{transform:translateY(-2px);text-decoration:none;filter:brightness(1.05)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--cream)}
.btn-ghost:hover{border-color:var(--gold);text-decoration:none}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}
.btn-row.center{justify-content:center}

/* header */
header.nav{position:sticky;top:0;z-index:50;background:rgba(8,19,25,.82);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:62px}
.brand{font-family:var(--serif);font-weight:700;color:var(--cream);font-size:1.02rem;letter-spacing:.01em;text-decoration:none}
.brand:hover{text-decoration:none}
.brand span{color:var(--gold)}
.nav nav{display:flex;align-items:center}
.nav a.navlink{font-family:var(--sans);font-size:.9rem;color:var(--muted);margin-left:20px}
.nav a.navlink:hover{color:var(--gold);text-decoration:none}
.nav a.navlink-cta{color:var(--gold);font-weight:600}
/* hamburger button (hidden on desktop) */
.navtoggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:9px;margin:0;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.navtoggle span{display:block;height:2px;width:100%;background:var(--cream);border-radius:2px;transition:transform .25s,opacity .2s}
.navtoggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle.open span:nth-child(2){opacity:0}
.navtoggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:760px){
  .navtoggle{display:flex}
  .nav nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    background:rgba(8,19,25,.98);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
    padding:8px 22px 16px;gap:0;max-height:0;overflow:hidden;opacity:0;visibility:hidden;
    transition:max-height .28s ease,opacity .2s ease,visibility .28s}
  .nav nav.open{max-height:70vh;opacity:1;visibility:visible}
  .nav a.navlink{margin:0;padding:14px 4px;font-size:1.05rem;color:var(--cream);
    border-bottom:1px solid rgba(255,255,255,.06)}
  .nav a.navlink:last-child{border-bottom:none}
  .nav a.navlink-cta{margin-top:8px;color:#20160a;background:linear-gradient(180deg,var(--gold-2),var(--gold));
    border-radius:999px;text-align:center;font-weight:700;padding:14px}
}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding:70px 0 40px}
@media(max-width:820px){.hero{grid-template-columns:1fr;text-align:center}.hero .cover{order:-1;margin:0 auto}}
.hero .cover{width:100%;max-width:330px;border-radius:10px;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.08)}
.paleo-strip{font-family:"Noto Sans Phoenician",serif;font-size:1.6rem;letter-spacing:.35em;color:var(--gold);margin:.5em 0}

/* cards / grids */
.grid{display:grid;gap:18px}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.cols-3,.cols-2{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  border:1px solid var(--line);border-radius:14px;padding:22px}
.card h3{color:var(--cream)}

/* ---- interactive: Bereshit decoder ---- */
.decoder{background:linear-gradient(180deg,#0c2531,#0a1b23);border:1px solid var(--line);border-radius:18px;padding:34px;box-shadow:var(--shadow)}
.word-letters{display:flex;flex-direction:row-reverse;justify-content:center;gap:6px;flex-wrap:wrap;margin:10px 0 6px}
.wl{font-family:"Noto Sans Hebrew",var(--serif);font-size:clamp(2.4rem,8vw,4rem);color:var(--cream);
  cursor:pointer;padding:6px 12px;border-radius:12px;border:1px solid transparent;transition:.15s;position:relative}
.wl:hover,.wl.active{color:var(--bg);background:var(--gold);border-color:var(--gold);transform:translateY(-3px)}
.rtl-note{font-family:var(--sans);font-size:.78rem;color:var(--dim);letter-spacing:.12em}
.reveal{margin-top:18px;min-height:150px;display:flex;gap:22px;align-items:center;justify-content:center;
  background:rgba(0,0,0,.22);border:1px solid var(--line);border-radius:14px;padding:22px;transition:.2s}
.reveal.empty{color:var(--dim);font-style:italic}
.reveal .glyphs{display:flex;gap:20px;align-items:center}
.reveal .g{width:78px;height:78px;color:var(--gold)}
.reveal .g svg{width:100%;height:100%;fill:currentColor}
.reveal .txt{max-width:360px;text-align:left}
.reveal .txt .nm{font-size:1.35rem;color:var(--cream);font-weight:700}
.reveal .txt .cr{color:var(--gold);font-size:.95rem}
.reveal .txt .sp{color:var(--muted);font-style:italic;margin-top:4px}

/* ---- interactive: alphabet explorer ---- */
.alpha-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px}
.tile{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:12px 6px;text-align:center;cursor:pointer;transition:.15s}
.tile:hover{border-color:var(--gold);transform:translateY(-3px);background:rgba(217,180,90,.08)}
.tile.active{border-color:var(--gold);background:rgba(217,180,90,.14)}
.tile .sym{width:46px;height:46px;margin:0 auto 6px;color:var(--cream)}
.tile .sym svg{width:100%;height:100%;fill:currentColor}
.tile .lbl{font-family:var(--sans);font-size:.72rem;color:var(--muted);letter-spacing:.04em}
.detail{margin-top:22px;background:linear-gradient(180deg,#0c2531,#0a1b23);border:1px solid var(--line);border-radius:16px;
  padding:26px;display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;min-height:150px}
@media(max-width:620px){.detail{grid-template-columns:1fr;text-align:center}}
.detail .pair{display:flex;gap:24px;align-items:center;justify-content:center}
.detail .pc{text-align:center}
.detail .pc .art{width:96px;height:96px;color:var(--gold)}
.detail .pc .art svg{width:100%;height:100%;fill:currentColor}
.detail .pc .cap{font-family:var(--sans);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:6px}
.detail .info .nm{font-size:1.7rem;color:var(--cream);font-weight:700}
.detail .info .modern{font-family:"Noto Sans Hebrew",serif;font-size:1.9rem;color:var(--gold);margin-left:10px}
.detail .info .core{color:var(--gold-2);font-weight:600;margin:.3em 0 .1em}
.detail .info .spir{color:var(--muted);font-style:italic}
.detail.empty .info{color:var(--dim);font-style:italic}

/* ---- email capture ---- */
.capture{background:linear-gradient(180deg,rgba(217,180,90,.10),rgba(217,180,90,.02));border:1px solid rgba(217,180,90,.35);
  border-radius:18px;padding:34px;text-align:center}
.form-row{display:flex;gap:10px;max-width:480px;margin:16px auto 0}
.form-row input[type=email]{flex:1;padding:15px 16px;border-radius:999px;border:1px solid var(--line);background:#07161d;color:var(--ink);font-size:1rem;font-family:var(--sans)}
.form-row input[type=email]:focus{outline:none;border-color:var(--gold)}
@media(max-width:520px){.form-row{flex-direction:column;border-radius:16px}.form-row .btn{width:100%}}
.form-note{font-family:var(--sans);font-size:.78rem;color:var(--dim);margin-top:10px}
.msg{font-family:var(--sans);margin-top:14px;font-size:.95rem}
.msg.ok{color:var(--gold-2)}
.msg.err{color:#e6896f}

/* price */
.pricebox{display:inline-flex;flex-direction:column;align-items:center;gap:6px;background:linear-gradient(180deg,#0c2531,#0a1b23);
  border:1px solid var(--line);border-radius:18px;padding:34px 46px;box-shadow:var(--shadow)}
.price{font-size:3rem;color:var(--gold);font-weight:700;line-height:1}
.price small{font-size:1rem;color:var(--muted)}

/* preview */
.preview-box{max-height:640px;overflow:hidden;position:relative;background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:14px;padding:30px 34px}
.preview-box .heb{font-size:1.15em}
.preview-box .paleo{font-size:1.05em}
.preview-box:after{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;background:linear-gradient(180deg,transparent,#0a1a22)}
.preview-box p{color:var(--cream)}

/* faq */
details.faq{border-bottom:1px solid var(--line);padding:16px 2px}
details.faq summary{cursor:pointer;font-weight:700;color:var(--cream);font-size:1.05rem;list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary:before{content:"+";color:var(--gold);margin-right:12px;font-weight:700}
details.faq[open] summary:before{content:"–"}
details.faq p{color:var(--muted);margin:.6em 0 .2em}

/* delivery choice (success page) */
.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
@media(max-width:720px){.choices{grid-template-columns:1fr}}
.choice{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;padding:22px;text-align:center}
.choice h3{color:var(--cream)}
.choice .ic{font-size:1.8rem}

footer{padding:46px 0;border-top:1px solid rgba(255,255,255,.06);color:var(--dim);font-family:var(--sans);font-size:.85rem;text-align:center}
.hide{display:none}

/* ---- Article / readings prose ---- */
.prose h1{color:var(--cream);margin:.2em 0 .6em}
.prose h2{color:var(--gold);font-size:1.4rem;margin:1.6em 0 .3em}
.prose p{color:#dfe6e4;font-size:1.12rem;margin:0 0 1.05em}
.prose blockquote{border-left:3px solid var(--gold);margin:1.2em 0;padding:.2em 0 .2em 1em;color:var(--cream);font-style:italic}
.prose em{color:var(--cream)}
.prose a:not(.btn){color:var(--gold-2)}

/* Button label colors must always win over link/prose colors (fixes pale text on gold) */
a.btn-gold, .btn.btn-gold{color:#20160a !important}
a.btn-ghost, .btn.btn-ghost{color:var(--cream) !important}

/* ---- Resources / church cards ---- */
.res-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:22px}
@media(max-width:760px){.res-grid{grid-template-columns:1fr}}
.res{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));border:1px solid var(--line);border-radius:16px;padding:26px;display:flex;flex-direction:column}
.res .tag{font-family:var(--sans);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600}
.res h3{color:var(--cream);margin:.4em 0 .2em;font-size:1.25rem}
.res p{color:var(--muted);flex:1}
.res .btn{margin-top:14px;align-self:flex-start}

/* ---- Join / membership benefit list ---- */
ul.join-list{list-style:none;padding:0;margin:20px auto 22px;max-width:440px;text-align:left;display:inline-block}
ul.join-list li{color:var(--cream);font-size:1.04rem;margin:.5em 0;padding-left:30px;position:relative}
ul.join-list li:before{content:"✦";position:absolute;left:0;top:0;color:var(--gold);font-size:1rem}
ul.join-list strong{color:#fff}

/* ---- Stats bar ---- */
.stats{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:26px 0 34px}
.stats>div{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:16px 26px;text-align:center;min-width:118px}
.stats b{display:block;font-family:var(--serif);font-size:1.9rem;color:var(--gold);line-height:1}
.stats span{font-family:var(--sans);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* ---- Journey / what's inside timeline ---- */
ol.journey{list-style:none;padding:0;max-width:660px;margin:0 auto}
ol.journey li{display:flex;gap:18px;padding:16px 2px;border-bottom:1px solid rgba(255,255,255,.06)}
ol.journey li:last-child{border-bottom:none}
ol.journey .jn{flex:0 0 42px;height:42px;border-radius:50%;border:1px solid var(--gold);color:var(--gold);
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:1.05rem}
ol.journey h3{color:var(--cream);margin:0;font-size:1.12rem}
ol.journey .jv{font-family:var(--sans);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
ol.journey p{color:var(--muted);margin:.25em 0 0;font-size:.98rem}

/* ---- Full-chapter sample: inline letter glyphs, icon pairs, tables ---- */
.prose svg.glyph{width:56px;height:56px;fill:currentColor;color:var(--gold);vertical-align:middle;display:inline-block}
.prose .icon-pair{display:flex;gap:30px;justify-content:center;align-items:flex-start;flex-wrap:wrap;margin:1.3em 0}
.prose .icon-wrap{display:inline-flex;flex-direction:column;align-items:center;text-align:center}
.prose .icon-wrap svg.glyph{width:74px;height:74px}
.prose .icon-label{font-family:var(--sans);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.prose ul{color:#dfe6e4;font-size:1.08rem;line-height:1.6;padding-left:22px}
.prose li{margin:.4em 0}
.prose table{width:100%;border-collapse:collapse;margin:1.4em 0;table-layout:fixed}
.prose th,.prose td{border:1px solid var(--line);padding:9px 10px;font-size:.9rem;color:var(--cream);text-align:left;vertical-align:middle;overflow-wrap:break-word}
.prose thead th{background:rgba(217,180,90,.12);color:var(--gold);text-align:center;font-weight:700}
.prose td svg.glyph{width:46px;height:46px;display:block;margin:0 auto}
.prose td .heb{color:var(--gold);font-size:1.3em}
.prose .heb{color:var(--cream)} .prose .paleo{color:var(--gold)}

/* ============================================================
   Mobile + tablet polish — tighter spacing, bigger tap targets,
   no horizontal overflow. Keeps desktop untouched.
   ============================================================ */
/* Tablet */
@media(max-width:900px){
  .section{padding:58px 0}
  .wrap{padding:0 24px}
}
/* Phone */
@media(max-width:600px){
  .wrap{padding:0 18px}
  .section{padding:44px 0}
  .hero{padding:34px 0 20px;gap:26px}
  h1{font-size:clamp(1.9rem,7.4vw,2.6rem)}
  h2{font-size:clamp(1.5rem,5.6vw,2rem)}
  .lead{font-size:1.08rem}
  .brand{font-size:.9rem}
  .eyebrow{font-size:.66rem}
  /* full-width, thumb-friendly CTAs */
  .btn{padding:15px 24px;font-size:1rem}
  .btn-row{gap:12px}
  .btn-row .btn{flex:1 1 auto}
  /* shrink oversized component padding */
  .decoder{padding:22px 16px}
  .capture{padding:26px 18px}
  .pricebox{padding:26px 22px;width:100%}
  .price{font-size:2.5rem}
  .preview-box{padding:24px 18px}
  .card{padding:18px}
  .detail{padding:20px 16px}
  .choice,.res{padding:20px 18px}
  /* interactive letters comfortable on small screens */
  .wl{padding:5px 9px}
  .reveal{flex-direction:column;text-align:center;padding:20px 16px}
  .reveal .txt{text-align:center;max-width:100%}
  .alpha-grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px}
  .stats{gap:10px}
  .stats>div{padding:12px 16px;min-width:92px}
  .stats b{font-size:1.6rem}
  /* prose + tables readable, never overflow */
  .prose p{font-size:1.06rem}
  .prose h2{font-size:1.28rem}
  .prose table{font-size:.8rem}
  .prose th,.prose td{padding:7px 5px}
  .prose td svg.glyph{width:38px;height:38px}
  .prose .icon-wrap svg.glyph{width:60px;height:60px}
  .prose svg.glyph{width:46px;height:46px}
}