@font-face{font-family:"Cormorant Garamond";src:url(/fonts/cormorant.woff2) format("woff2");font-weight:500 600;font-display:swap}
@font-face{font-family:"Bebas Neue";src:url(/fonts/bebas-neue.woff2) format("woff2");font-weight:400;font-display:swap}
:root{
  --sea:#1D4A50;--sea-deep:#0B2227;--paper:#F5F5F5;--ink:#1C1C1C;--slate:#555F61;--gilt:#D4A62A;--ribbon:#C12E1F;
  --serif:"Cormorant Garamond",Garamond,"Times New Roman",serif;
  --cjk:"Songti SC","STSong","Noto Serif CJK SC","Noto Serif SC","Source Han Serif SC",serif;
  --cjk-tc:"Songti TC","Noto Serif CJK TC","Noto Serif TC","Source Han Serif TC","PMingLiU",serif;
  --head:"Bebas Neue","PingFang SC","Microsoft YaHei",sans-serif;
  --line:rgba(255,255,255,.22)
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;color:#fff;font:500 18px/1.55 var(--serif)}
/* sea painted on the canvas so the ribbon (z-index:-1) can sit beneath the page but above the sea */
html{-webkit-text-size-adjust:100%;min-height:100%;background-color:var(--sea-deep);
  background:
    radial-gradient(130% 55% at 50% -5%,rgba(127,200,240,.20),transparent 62%),
    radial-gradient(80% 45% at 0% 100%,rgba(29,74,80,.85),transparent 70%),
    linear-gradient(180deg,#183E44 0%,var(--sea-deep) 58%,#071A1E 100%) var(--sea-deep)}
:lang(zh-Hans) body,body:lang(zh-Hans){font-family:var(--serif),var(--cjk)}
:lang(zh-Hant) body,body:lang(zh-Hant){font-family:var(--serif),var(--cjk-tc)}
.wrap{max-width:540px;margin:0 auto;padding:0 20px 40px}

/* top bar */
.top{display:flex;justify-content:space-between;align-items:center;padding:14px 0 6px}
.mark{margin:0;font-weight:600;font-size:1.2rem;letter-spacing:.01em}
.lang{display:flex}
.lang button{font:600 1.05rem var(--serif);color:rgba(255,255,255,.72);background:none;border:0;min-width:44px;min-height:44px;padding:0 8px;cursor:pointer;text-underline-offset:6px}
.lang button[aria-pressed=true]{color:#fff;text-decoration:underline;text-decoration-thickness:2px}

/* the Bible leaf */
.leaf{position:relative;margin:14px 0 104px;padding:20px 24px 26px;color:var(--ink);border-radius:2px 5px 5px 2px;
  background:linear-gradient(90deg,rgba(0,0,0,.07),rgba(0,0,0,0) 7%),var(--paper);
  box-shadow:1px 1px 0 #e6e6e6,2px 2px 0 #dadada,3px 3px 0 var(--gilt),4px 4px 0 #b08a1c,0 26px 60px rgba(0,0,0,.5)}
.runhead{display:flex;justify-content:space-between;gap:12px;font:400 1rem/1 var(--head);letter-spacing:.12em;color:var(--slate);padding-bottom:9px;margin-bottom:20px;border-bottom:1px solid rgba(28,28,28,.2)}
.verse{margin:0;font-size:1.6rem;line-height:1.48;text-wrap:pretty;min-height:7.4em}
.verse:lang(zh-Hans){font-family:var(--cjk);font-size:1.35rem;line-height:1.95;letter-spacing:.03em}
.verse:lang(zh-Hant){font-family:var(--cjk-tc);font-size:1.35rem;line-height:1.95;letter-spacing:.03em}
.chap{float:left;font:600 3.35em/.8 var(--serif);font-variant-numeric:lining-nums;margin:.07em .1em 0 -.03em}
.verse:lang(zh-Hans) .chap,.verse:lang(zh-Hant) .chap{font-size:3.6em;margin-top:.12em}
.vn{font:600 .5em/1 var(--serif);vertical-align:.9em;color:var(--slate);margin-right:.25em;font-variant-numeric:lining-nums}
.ref{margin:20px 0 0;text-align:right;font-weight:600;font-size:1.1rem;color:var(--slate)}
.ribbon{position:absolute;z-index:-1;right:18%;bottom:-86px;width:26px;height:130px;
  background:linear-gradient(90deg,rgba(0,0,0,.25),rgba(255,255,255,.2) 42%,rgba(0,0,0,.06) 58%,rgba(0,0,0,.28)),var(--ribbon);
  clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 15px),0 100%);
  animation:ribbon 1s cubic-bezier(.2,.75,.25,1) .3s both}
@keyframes ribbon{from{transform:translateY(-80px)}to{transform:none}}

/* bookmark verse, set on the sea */
.bm{margin:0 0 36px;padding-left:18px;border-left:3px solid var(--ribbon)}
.bm h2{margin:0 0 6px;font-size:1.05rem;font-weight:600;color:rgba(255,255,255,.75)}
.bm blockquote{margin:0;font-size:1.35rem;line-height:1.55}
.bm blockquote:lang(zh-Hans){font-family:var(--cjk);font-size:1.15rem;line-height:1.9}
.bm blockquote:lang(zh-Hant){font-family:var(--cjk-tc);font-size:1.15rem;line-height:1.9}
.bm .ref{text-align:left;color:rgba(255,255,255,.75);margin-top:8px}

/* actions */
.share{display:block;width:100%;min-height:54px;border:0;border-radius:3px;background:var(--paper);color:var(--ink);font:600 1.3rem var(--serif);cursor:pointer}
.links{margin:26px 0 0;border-top:1px solid var(--line)}
.links a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px;padding:10px 2px;border-bottom:1px solid var(--line);color:#fff;text-decoration:none;font-size:1.25rem}
.links a::after{content:"";flex:none;width:9px;height:9px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);opacity:.65}
.aff h2{margin:34px 0 0;font-size:1.05rem;font-weight:600;color:rgba(255,255,255,.75)}
.aff .links{margin-top:8px}

footer{margin-top:42px;text-align:center;font-size:1rem;color:rgba(255,255,255,.72)}
footer p{margin:2px 0}

:focus-visible{outline:2px solid #fff;outline-offset:3px}
.share:focus-visible{outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--paper);color:var(--ink);padding:10px 20px;border-radius:3px;font-weight:600}
@media (prefers-reduced-motion:reduce){.ribbon{animation:none}}
@media (min-width:600px){.leaf{padding:28px 40px 34px}.verse{font-size:1.85rem}}