/* InnerBible's website (22 October 2026): the app's own look, "Evening and Morning", on the web.
   The page follows the visitor's light or dark setting, as the app follows the iPhone's. Apple's own fonts where they
   exist (New York for titles, San Francisco for the rest), common fonts elsewhere; nothing loaded from another company.
   Every writing at least semibold (the Owner's rule for the app, 13 October 2026). */

:root {
  --paper: #F7F4EE; --card: #FCFAF6; --quiet: #EFEBE3; --hairline: #E2DCD1; --wash: #F2E2C2;
  --ink: #36322D; --ink2: #4F4A43; --lamp: #8F5410; --on-lamp: #FCFAF6; --band: #F2CF7E; --on-band: #36322D;
  --shadow: 0 18px 40px rgba(54, 50, 45, 0.16);
  --serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141311; --card: #1F1D1A; --quiet: #1B1A17; --hairline: #2E2B27; --wash: #3D3020;
    --ink: #D9D3C8; --ink2: #BDB7AC; --lamp: #E2A653; --on-lamp: #141311; --band: #CFA24E; --on-band: #141311;
    --shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 600 1.0625rem/1.55 var(--sans);            /* 17 px, the app's reading size, lines at 1.55 */
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--lamp); text-underline-offset: 0.18em; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--lamp); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.15; text-wrap: balance; margin: 0; }
p { margin: 0; }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 16px; top: 16px; background: var(--card); padding: 8px 14px; border-radius: 8px; z-index: 10; }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding-inline: 20px; }
.eyebrow { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink2); }
.quiet { color: var(--ink2); }
.band { background: var(--band); color: var(--on-band); border-radius: 0.2em; padding: 0 0.12em;
        -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Top bar */
/* The name, larger, alone at the top (28 October 2026, the Owner: "making the InnerBible title and picture larger";
   Support, Privacy and Terms are in every page's footer). */
.top { display: flex; align-items: center; padding-block: 22px; }
.brand { display: flex; align-items: center; gap: 14px; color: var(--ink); text-decoration: none;
         font-family: var(--serif); font-size: 1.875rem; font-weight: 700; letter-spacing: -0.01em; }
.brand img { width: 60px; height: 60px; border-radius: 14px; }
@media (max-width: 520px) {
  .brand { font-size: 1.5rem; gap: 12px; }
  .brand img { width: 50px; height: 50px; border-radius: 12px; }
}

/* The first view */
.hero { display: grid; gap: 40px; align-items: center; padding-block: 28px 56px; }
.hero h1 { font-size: clamp(2.25rem, 7vw, 4rem); }
.hero .lede { font-size: 1.1875rem; color: var(--ink2); max-width: 34em; margin-top: 18px; }
.promise { margin-top: 22px; font-size: 0.9375rem; color: var(--ink2); }
.promise b { color: var(--ink); letter-spacing: 0.06em; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; }
.lamp { display: inline-flex; align-items: center; gap: 8px; background: var(--lamp); color: var(--on-lamp);
        border: 0; border-radius: 999px; padding: 13px 24px; font: 700 1rem/1 var(--sans); text-decoration: none; cursor: pointer; }
.lamp:hover { filter: brightness(1.06); }
.soon { display: inline-flex; align-items: center; gap: 10px; border: 1.5px solid var(--hairline); background: var(--card);
        border-radius: 999px; padding: 12px 20px; font-size: 0.9375rem; }
.small { font-size: 0.875rem; color: var(--ink2); }

/* A phone with a real screen of the app */
.phone { position: relative; width: min(300px, 74vw); margin-inline: auto; border-radius: 46px; padding: 9px;
         background: #0b0b0a; box-shadow: var(--shadow); }
.phone img { border-radius: 38px; width: 100%; }
.phone.small { width: min(250px, 64vw); border-radius: 40px; padding: 8px; }
.phone.small img { border-radius: 33px; }

/* Sections */
section { padding-block: 64px; }
section + section { border-top: 1px solid var(--hairline); }
.split { display: grid; gap: 40px; align-items: center; }
section h2 { font-size: clamp(1.75rem, 4.6vw, 2.75rem); }
.split p, .center p { margin-top: 16px; color: var(--ink2); max-width: 36em; }
.center { text-align: center; }
.center p { margin-inline: auto; }
ul.points { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
ul.points li { padding-left: 1.5em; position: relative; }
ul.points li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.6em; height: 0.6em;
                       border-radius: 50%; background: var(--band); }

/* Private by design: the app's Evening look, in both looks of the page */
.private { background: #141311; color: #D9D3C8; border-radius: 28px; padding: 44px 28px; }
.private h2 { color: #D9D3C8; }
.private .eyebrow, .private p { color: #BDB7AC; }
.private ul.points li::before { background: #CFA24E; }
.private .also { margin-top: 26px; padding-top: 22px; border-top: 1px solid #2E2B27; color: #BDB7AC; }
.private .also b { color: #E2A653; }
.private ul.points { margin-top: 26px; }
@media (prefers-color-scheme: dark) {
  .private { background: #1F1D1A; border: 1px solid #2E2B27; }   /* the Evening page is the same night: a raised card */
}

/* The read-along you can hear */
.readalong { background: var(--card); border: 1px solid var(--hairline); border-radius: 24px; padding: 26px 22px; }
.readalong .title { font-family: var(--serif); font-size: 1.625rem; font-weight: 700; display: inline; }
.readalong .ref { display: block; margin: 6px 0 16px; }
.readalong .verse { display: block; margin-top: 10px; font-family: var(--serif); font-size: 1.1875rem; }
.readalong .verse [data-at] { cursor: pointer; }                 /* inline, so the band hugs each line, as in the app */
.readalong .verse sup { font-family: var(--sans); font-size: 0.7em; color: var(--ink2); margin-right: 0.3em; }
.readalong [data-at] { border-radius: 0.2em; transition: background-color 0.25s ease, color 0.25s ease;
                       -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.readalong [data-at].on { background: var(--band); color: var(--on-band); }
.readalong [data-at].on sup { color: var(--on-band); }
.readalong .controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.readalong audio { display: none; }
.play::before { content: "\25B6\FE0E"; font-size: 0.8em; }
.play[aria-pressed="true"]::before { content: "\275A\275A"; font-size: 0.7em; letter-spacing: -0.12em; }

/* Screens */
.gallery { display: flex; gap: 22px; overflow-x: auto; padding: 8px 4px 22px; scroll-snap-type: x mandatory; }
.gallery figure { margin: 0; flex: 0 0 auto; scroll-snap-align: center; text-align: center; }
.gallery figcaption { margin-top: 14px; font-size: 0.9375rem; color: var(--ink2); max-width: 250px; margin-inline: auto; }

/* Free to begin */
.free { background: var(--quiet); border-radius: 28px; padding: 40px 26px; }
.free h2 { margin-bottom: 4px; }
.free p:not(.eyebrow) { margin-top: 14px; color: var(--ink2); max-width: 46em; }
.free b { color: var(--ink); }
.private .eyebrow, .free .eyebrow { margin-bottom: 8px; }

/* Questions */
.faq { max-width: 760px; margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--hairline); padding-block: 18px; }
.faq summary { cursor: pointer; font-family: var(--serif); font-size: 1.25rem; font-weight: 700; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--ink2); font-family: var(--sans); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: 10px; color: var(--ink2); }

/* Footer */
footer { border-top: 1px solid var(--hairline); padding-block: 36px 48px; font-size: 0.9375rem; color: var(--ink2); }
footer .links { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 14px; }
footer .links a { color: var(--ink); }

/* Support, Privacy and Terms */
.doc { max-width: 720px; margin: 0 auto; padding-block: 24px 64px; }
.doc h1 { font-size: clamp(2rem, 6vw, 3rem); margin-bottom: 8px; }
.doc h2 { font-size: 1.5rem; margin: 40px 0 12px; }
.doc p, .doc li { color: var(--ink2); }
.doc p + p { margin-top: 12px; }
.doc ul { padding-left: 1.2em; margin: 12px 0 0; }
.doc li + li { margin-top: 8px; }
.doc strong { color: var(--ink); }
.draft-note { background: var(--wash); border-radius: 14px; padding: 14px 18px; margin: 18px 0 8px; color: var(--ink); font-size: 0.9375rem; }
mark.todo { background: var(--band); color: var(--on-band); border-radius: 4px; padding: 0 4px; }

@media (min-width: 860px) {
  .hero { grid-template-columns: 1.15fr 0.85fr; padding-block: 48px 80px; }
  .split { grid-template-columns: 1fr 1fr; }
  .split.flip > :first-child { order: 2; }
  .private { padding: 56px 56px; }
  .free { padding: 52px 56px; }
  .readalong { padding: 34px 36px; }
  .gallery { justify-content: center; overflow: visible; }               /* all five screens in one row */
  .gallery .phone.small { width: 190px; border-radius: 32px; padding: 7px; }
  .gallery .phone.small img { border-radius: 26px; }
  .gallery figcaption { max-width: 190px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}