/* Pray the Land, Apple craft layer, 3.10.2026.
   Shared by every page, loaded AFTER each page's own <style>. Palette and fonts are the locked house ones:
   basalt #15110D, parchment #FAF6EC, gold #C9A227 (frame, fills, text on dark only), olive panels,
   tekhelet #0038B8 / #7AA8FF. Nothing here changes a colour, only lightness steps within the same hue. */

:root{
  --a-basalt:#15110D; --a-basalt-2:#211C17; --a-basalt-3:#2C2620;
  --a-parchment:#FAF6EC; --a-tile:#F3EBD6;
  --a-gold:#C9A227; --a-gold-soft:#D9B23F; --a-gold-deep:#7a6420;
  --a-ease:cubic-bezier(.28,.11,.32,1);
}
html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%}
body{overflow-x:clip}
p{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}

/* ---------- focus, skip link ---------- */
:focus-visible{outline:3px solid var(--a-gold);outline-offset:2px;border-radius:4px}
.book :focus-visible,.wrap :focus-visible,.invite :focus-visible,.farm :focus-visible,.support :focus-visible{outline-color:var(--a-gold-deep)}
.skip{position:fixed;inset-block-start:8px;inset-inline-start:8px;z-index:100;transform:translateY(-200%);
  background:var(--a-gold);color:var(--a-basalt);font:600 16px/1 'Frank Ruhl Libre',Georgia,serif;
  padding:14px 22px;border-radius:980px;text-decoration:none}
.skip:focus{transform:none}

/* ---------- navigation: one slim translucent bar ---------- */
body > nav:not(.ptl-tabbar){
  position:sticky;top:0;left:auto;right:auto;z-index:50;
  display:flex;align-items:center;gap:8px;min-height:56px;
  padding:0 clamp(16px,4vw,40px);
  background:transparent;border-bottom:1px solid rgba(234,226,206,.14);
  transition:none;
}
body > nav:not(.ptl-tabbar)::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:color-mix(in srgb,#15110D 90%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
}
body > nav.solid{background:transparent;padding-top:0;padding-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:rgba(234,226,206,.14)}
nav .brand{position:relative;z-index:60;margin-inline-end:auto;font-size:21px;letter-spacing:0;color:var(--warm-white,#EAE2CE)}
nav .brand:not(:has(svg)){display:inline-block;line-height:44px} /* 44px tap target; the globe wordmark is already 50px */
nav .back{font-size:14px;letter-spacing:0;padding:0 8px;display:inline-flex;align-items:center;min-height:44px}
nav.has-links .back{display:none}
.navlinks{display:none;align-items:center;gap:4px}
.navlinks a,.navactions a:not(.navjoin),nav .links a:not(.navjoin){font-size:14px;letter-spacing:0;color:var(--parchment-dim,#E8DEC6);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:980px;transition:color .2s var(--a-ease)}
.navlinks a:hover{color:#fff}
.navlinks a[aria-current="page"],nav .links a[aria-current="page"]{color:var(--a-gold)}
@media (min-width:900px){.navlinks{display:flex}}
nav .navjoin,.navactions .navjoin,nav .links .navjoin{
  position:relative;z-index:60;border:0;border-radius:980px;background:var(--a-gold);color:var(--a-basalt);
  font:600 14px/1 'Frank Ruhl Libre',Georgia,serif;letter-spacing:0;padding:0 18px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;transition:transform .2s var(--a-ease),background .2s var(--a-ease)}
nav .navjoin:hover,.navactions .navjoin:hover,nav .links .navjoin:hover{background:var(--a-gold-soft);color:var(--a-basalt)}
nav .navjoin:active{transform:scale(.98)}
.navactions{display:flex;align-items:center;gap:6px}
nav .navtoggle{position:relative;z-index:60;background:transparent;border:0;border-radius:980px;color:var(--parchment-dim,#E8DEC6);
  font:500 15px/1 'Frank Ruhl Libre',Georgia,serif;letter-spacing:0;text-transform:none;min-height:44px;min-width:44px;padding:0 14px;cursor:pointer}
nav .navtoggle:hover{background:rgba(234,226,206,.1);color:#fff}
.navscrim{display:none!important}

/* ---------- full-screen menu sheet ---------- */
.navpanel{
  position:fixed;inset:0;width:auto;height:100dvh;z-index:40;transform:none;border:0;
  background:#15110D;
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  display:flex;flex-direction:column;gap:0;overflow-y:auto;overscroll-behavior:contain;
  padding:88px clamp(24px,8vw,120px) 56px;
  opacity:0;visibility:hidden;transition:opacity .25s var(--a-ease),visibility 0s linear .25s}
body.menu-open .navpanel{opacity:1;visibility:visible;transition:opacity .25s var(--a-ease)}
body.menu-open{overflow:hidden}
.navpanel a{
  display:flex;align-items:center;min-height:44px;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:28px;line-height:1.2;padding:8px 0;border:0;letter-spacing:0;color:var(--parchment-dim,#E8DEC6);text-decoration:none;
  opacity:0;transform:translateY(12px);transition:opacity .25s var(--a-ease),transform .25s var(--a-ease),color .2s}
body.menu-open .navpanel a{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 20ms),calc(var(--i,0) * 20ms),0s}
.navpanel a:hover,.navpanel a[aria-current="page"]{color:var(--a-gold)}
.navpanel .pgroup{display:block;font:600 17px/1.3 'Frank Ruhl Libre',Georgia,serif;letter-spacing:0;text-transform:none;
  color:var(--a-gold);opacity:1;margin:28px 0 6px;padding:0;break-after:avoid}
.navpanel .pgroup:first-child{margin-top:0}
@media (min-width:900px){
  .navpanel{display:block;column-count:2;column-gap:72px}
  .navpanel a{break-inside:avoid}
}

/* ---------- page heads (letters, wall, teachings): one big idea ---------- */
.head{padding:clamp(56px,7vw,104px) clamp(20px,6vw,80px) clamp(56px,7vw,96px)}
.head h1{font-size:clamp(44px,7.5vw,96px);line-height:1.04;letter-spacing:-.015em;font-weight:500;text-wrap:balance}
.head .eyebrow{font-size:19px;letter-spacing:0;text-transform:none;font-weight:600;color:var(--a-gold)}
.head .sub{font-size:clamp(22px,3vw,30px);line-height:1.3;max-width:32ch;margin-inline:auto}
.head .verse{font-size:19px;line-height:1.6;max-width:40ch}
.head .heb{font-size:24px;letter-spacing:0}

/* ---------- buttons: pill, accent fill ---------- */
.btn,.cta a,.foot .btn,.btn-gold{
  font-family:'Frank Ruhl Libre',Georgia,serif;font-weight:600;font-size:17px;letter-spacing:0;
  min-height:44px;padding:12px 26px;border-radius:980px;
  display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;
  transition:transform .2s var(--a-ease),background .2s var(--a-ease)}
.btn-gold,.cta a,.foot .btn{background:var(--a-gold);color:var(--a-basalt);border:0}
.btn-gold:hover,.cta a:hover,.foot .btn:hover{background:var(--a-gold-soft);transform:none;color:var(--a-basalt)}
.btn:active,.cta a:active,.foot .btn:active{transform:scale(.98)}
.btn-ghost{border:0;background:transparent;color:var(--a-gold)}
.btn-ghost:hover{background:rgba(201,162,39,.12);transform:none}
.btn-link{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;font:500 17px/1 'Frank Ruhl Libre',Georgia,serif;color:var(--a-gold);text-decoration:none}
.btn-link::after{content:" \203A";margin-inline-start:.35em;transition:transform .2s var(--a-ease)}
.btn-link:hover::after{transform:translateX(3px)}
.btn-link:hover{text-decoration:underline;text-underline-offset:4px}
/* the text link stays a text link even inside .cta (which otherwise styles every <a> as a pill) */
.cta a.btn-link{background:none;color:var(--a-gold);padding:0 6px;border-radius:0;font-weight:500}
.cta a.btn-link:hover{background:none;color:var(--a-gold);text-decoration:underline;text-underline-offset:4px}

/* ---------- footer: quiet ---------- */
.foot,footer{border-top:1px solid rgba(234,226,206,.14);padding:clamp(56px,8vw,96px) 24px}
.foot .sig,footer .sig,.foot p[style]{font-size:14px!important;letter-spacing:.02em!important;line-height:1.9!important;text-transform:none}
.foot a,footer a{min-height:44px;display:inline-flex;align-items:center;padding:0 6px}

/* ---------- scroll reveal (only hides when JS is on) ---------- */
.js .reveal,.js .rise{opacity:0;transform:translateY(24px);transition:opacity .44s var(--a-ease),transform .44s var(--a-ease);transition-delay:var(--d,0ms)}
.js .reveal.in,.js .rise.in{opacity:1;transform:none}

/* ---------- tiles: hover / press ---------- */
.tile-hover{transition:transform .22s var(--a-ease)}
.tile-hover:hover{transform:scale(1.01)}
.tile-hover:active{transform:scale(.99)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal,.js .rise{opacity:1!important;transform:none!important}
  .navpanel a{opacity:1!important;transform:none!important}
}