/* linenbible.com home page only (index.html). Loaded after site.css; same tokens.
   The page follows a day with the app: morning, any time, evening, night.
   CSP: no inline styles or scripts anywhere (style-src 'self'); home.js only toggles classes/attributes. */
:root{--am:#E3A98F;--noon:#D2A24A;--pm:#A0566A;--nightdot:#9C8CC9;--weave:rgba(120,88,66,.045);
  --lift:0 30px 60px -24px rgba(96,52,62,.38),0 8px 20px -10px rgba(45,38,34,.18)}
@media (prefers-color-scheme:dark){:root{--weave:rgba(255,240,225,.022);--lift:0 30px 60px -24px rgba(0,0,0,.7)}}

/* Linen weave: two hairline gradients crossing, barely there. */
body.home{background-image:repeating-linear-gradient(0deg,var(--weave) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,var(--weave) 0 1px,transparent 1px 4px)}
.home h2{font-size:clamp(26px,5.6vw,38px);letter-spacing:-.2px}
.home h3{font-size:20px}
.home section{scroll-margin-top:16px}
.eyebrow,.when{font:650 13px/1.4 var(--sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--accent);margin:0 0 12px}
.when{display:flex;align-items:center;gap:10px;color:var(--muted)}
.dot{width:10px;height:10px;border-radius:50%;flex:none;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 12%,transparent)}
.dot-am{background:var(--am)}.dot-noon{background:var(--noon)}.dot-pm{background:var(--pm)}.dot-night{background:var(--nightdot)}
@media (max-width:719px){.hide-s{display:none!important}}

/* Top: watercolor behind the bar and the hero, fading into the page. Morning art by day, evening art after 6pm (home.js). */
.top{position:relative;overflow:hidden}
.hero-art{position:absolute;inset:0;z-index:0;display:block;pointer-events:none}
.hero-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;opacity:.62;
  -webkit-mask-image:linear-gradient(#000 0,#000 38%,transparent 96%);mask-image:linear-gradient(#000 0,#000 38%,transparent 96%)}
.hero-art .art-pm{display:none}
.pm .hero-art .art-pm{display:block}.pm .hero-art .art-am{display:none}
@media (prefers-color-scheme:dark){.hero-art img{opacity:.2}}
.top .bar,.top .hero-grid{position:relative;z-index:1}
.t-am,.t-pm{display:none}
.am .t-am,.pm .t-pm{display:inline}.am .t-any,.pm .t-any{display:none}

.home .hero{display:block;padding:0}
.hero-grid{display:grid;gap:36px;padding-top:34px;padding-bottom:44px;align-items:center}
.hero-phone{position:relative;justify-self:center;padding:10px 0}
.hero-phone::before{content:"";position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 22%,transparent),transparent 72%);z-index:0}
.sprig{position:absolute;z-index:2;width:84px;height:auto;left:-44px;bottom:26px;transform:rotate(-14deg);filter:drop-shadow(0 6px 10px rgba(45,38,34,.18))}
@media (min-width:860px){.hero-grid{grid-template-columns:1.15fr .85fr;padding-top:64px;padding-bottom:84px}.sprig{width:104px;left:-62px}}

/* Phone frame around a raw app screenshot. */
.device{position:relative;z-index:1;width:min(272px,68vw);margin:0 auto;padding:9px;border-radius:46px;background:#211c1a;
  box-shadow:var(--lift),inset 0 0 0 1.5px #4d433d}
.device .shot,.device .shot.phone{display:block;width:100%;border-radius:38px;box-shadow:none;background:#f6efe8}
.device.dark .shot{background:#120e10}
@media (min-width:860px){.device{width:290px}}

/* Verse band */
.verse-band{padding:18px 0 8px;text-align:center}
.verse-band blockquote{margin:0;padding:34px 0 30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative}
.verse-band blockquote::before{content:"\201C";position:absolute;left:50%;top:-30px;transform:translateX(-50%);font:600 64px/1 var(--serif);color:var(--accent);background:var(--bg);padding:0 14px;height:52px;overflow:hidden}
.verse-band p{font:italic 400 clamp(20px,4.6vw,27px)/1.5 var(--serif);margin:0 0 14px;text-wrap:balance}
.verse-band footer{font-size:14.5px;color:var(--muted)}
.verse-band cite{font-style:normal;font-weight:650;color:var(--ink)}

.day-head{text-align:center;padding-top:64px;padding-bottom:8px}

/* Chapters: copy beside a phone, alternating sides. */
.chapter,.together-grid,.night-grid{display:grid;gap:34px;align-items:center}
.chapter{padding-top:44px;padding-bottom:56px}
.chapter-copy p{max-width:34em}
.chapter-copy h2{margin-bottom:16px}
@media (min-width:860px){
  .chapter,.night-grid{grid-template-columns:1.1fr .9fr;gap:56px}
  .chapter{padding-top:64px;padding-bottom:84px}
  .chapter.flip .chapter-art{order:-1}
  .chapter.flip{grid-template-columns:.9fr 1.1fr}
}
.ticks{list-style:none;margin:18px 0 0;padding:0}
.ticks li{position:relative;padding:10px 0 10px 34px;border-top:1px solid var(--line)}
.ticks li::before{content:"";position:absolute;left:4px;top:17px;width:14px;height:8px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}

/* How is your heart today? */
.heart{background:var(--soft);padding:60px 0 64px;margin:8px 0}
.heart-head{text-align:center;max-width:600px;margin:0 auto 22px}
.heart-head .when{justify-content:center}
.heart-head h2{margin-bottom:12px}
.feel{max-width:860px;margin:0 auto}
.feel-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:20px}
.feel-tabs button{font:600 16px/1 var(--sans);min-height:44px;padding:0 18px;border-radius:22px;border:1.5px solid color-mix(in srgb,var(--accent) 45%,transparent);background:transparent;color:var(--accent);cursor:pointer}
.feel-tabs button[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.feel-card{display:grid;background:var(--card);border-radius:26px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:14px}
.feel-card img{width:100%;height:180px;object-fit:cover;display:block}
.feel-card>div{padding:24px 24px 22px}
.feel-label{font:650 12.5px/1.4 var(--sans);letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.feel-verse{font:400 clamp(19px,4.4vw,23px)/1.5 var(--serif);margin-bottom:10px}
.feel-ref{font-weight:650;color:var(--accent);margin-bottom:16px}
.feel-prayer{font:italic 400 17px/1.5 var(--serif);color:var(--muted);margin:0;padding-top:16px;border-top:1px solid var(--line)}
.feel-note{text-align:center;margin:14px 0 0}
@media (min-width:700px){.feel-card{grid-template-columns:280px 1fr;align-items:stretch}.feel-card img{height:100%;min-height:300px}.feel-card>div{padding:34px 34px 30px;align-self:center}}
.js .feel-card[hidden]{display:none}
.js .feel-card{animation:feel .45s ease both}
@keyframes feel{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
html:not(.js) .feel-tabs{display:none}

/* Guides */
.guides{list-style:none;margin:20px 0 16px;padding:0;display:grid;gap:4px}
.guides li{display:grid;grid-template-columns:56px 1fr;column-gap:14px;align-items:center;padding:8px 0}
.guides img{grid-row:1/3;width:56px;height:56px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--g,var(--accent))}
.guides b{font:600 18px/1.25 var(--serif);align-self:end}
.guides span{color:var(--muted);font-size:15.5px;line-height:1.35;align-self:start}
.g-lydia{--g:#7D3F73}.g-priscilla{--g:#1C6F6A}.g-phoebe{--g:#B0564A}.g-timothy{--g:#4A6690}.g-barnabas{--g:#A8741C}
@media (prefers-color-scheme:dark){.g-lydia{--g:#C88DBD}.g-priscilla{--g:#6CC3BA}.g-phoebe{--g:#E59C8E}.g-timothy{--g:#9DB5D8}.g-barnabas{--g:#DDB461}}

/* Pray with the people you know */
.together{padding:60px 0 68px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--card) 60%,transparent)}
.thread{list-style:none;margin:0;padding:0;display:grid;gap:18px;max-width:420px}
.msg{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.msg .who{font-size:13.5px;color:var(--muted)}
.bubble{display:inline-block;padding:12px 16px;border-radius:20px 20px 20px 6px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);font-size:16.5px;line-height:1.4}
.msg.out{align-items:flex-end}
.msg.out .bubble{border-radius:20px 20px 6px 20px;background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.bubble.tap{border-radius:26px;border:1.5px solid var(--accent);background:var(--soft);color:var(--accent);font-weight:650;padding:13px 22px}
.msg.note .bubble{display:flex;align-items:center;gap:12px;border-radius:18px;width:100%}
.msg.note img{width:28px;height:28px;border-radius:7px;flex:none}
.msg.note b{display:block;font-size:13.5px}
@media (min-width:860px){
  .together-grid{grid-template-columns:1.1fr .9fr;grid-template-areas:"copy art" "thread art";gap:26px 56px}
  .together-grid .chapter-copy{grid-area:copy;align-self:end}.together-grid .thread{grid-area:thread;align-self:start}.together-grid .chapter-art{grid-area:art}
}

/* Night: always dark, whatever the system theme. */
.night{position:relative;overflow:hidden;background:#150f19;color:#EFE8E1;padding:68px 0 76px;margin-top:64px}
.night-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;pointer-events:none}
.night-grid{position:relative;z-index:1}
.night h2{color:#F6EFE8}
.night .when{color:#B9AEC6}
.night .tag{display:inline-block;margin-left:6px;font:650 12px/1.6 var(--sans);letter-spacing:1px;text-transform:uppercase;color:#E2A3B1;vertical-align:5px}
.night .chapter-copy>p{color:#D9CFD6}
.player{display:flex;align-items:center;gap:16px;margin:22px 0 22px;padding:16px 18px;border-radius:22px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);max-width:460px;flex-wrap:wrap}
.play{width:60px;height:60px;border-radius:50%;border:0;background:#E2A3B1;color:#1B1018;display:grid;place-items:center;cursor:pointer;flex:none}
.play svg{width:28px;height:28px;fill:currentColor}
.play .i-pause,.play[aria-pressed="true"] .i-play{display:none}
.play[aria-pressed="true"] .i-pause{display:block}
.player-meta{flex:1;min-width:180px}
.player-title{font:600 17px/1.3 var(--serif);margin:0 0 2px;color:#F6EFE8}
.player-sub{font-size:13.5px;color:#B9AEC6;margin:0 0 10px;line-height:1.35}
.track{height:4px;border-radius:2px;background:rgba(255,255,255,.16);overflow:hidden}
.track i{display:block;height:100%;width:0;background:#E2A3B1;border-radius:2px}
.player audio{width:100%}
.js .player audio{display:none}
html:not(.js) .play,html:not(.js) .track{display:none}
.psalm{max-width:30em}
.psalm p{font:italic 400 17.5px/1.6 var(--serif);color:#CFC4CE;margin:0 0 8px}
.psalm sup{font:600 11px/1 var(--sans);font-style:normal;color:#9C8CC9;margin-right:6px;vertical-align:6px}
.psalm-more{margin:18px 0 0}
.psalm-more a{color:#E2A3B1;display:inline-flex;align-items:center;min-height:44px}

/* Promises, pricing */
.promises{display:grid;gap:8px;padding-top:64px;padding-bottom:20px}
.promise{border-top:2px solid var(--accent);padding:18px 0 6px}
.promise h3{margin-bottom:8px}
.promise p{color:var(--muted);margin:0 0 10px}
@media (min-width:760px){.promises{grid-template-columns:repeat(3,1fr);gap:36px}}
.pricing{padding-top:48px;padding-bottom:36px}
.pricing>h2{text-align:center;margin-bottom:26px}
.plans{display:grid;gap:16px;margin-bottom:18px}
.plan{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:26px 26px 14px;box-shadow:var(--shadow)}
.plan h3{font-size:23px;margin-bottom:10px}
.plan.premium{border:1.5px solid var(--accent);background:linear-gradient(160deg,var(--soft),var(--card) 70%)}
.plan.premium h3{color:var(--accent)}
.pricing>.fine{max-width:760px;margin:0 auto;text-align:center}
@media (min-width:760px){.plans{grid-template-columns:1fr 1fr}}
.home .faq{margin-top:28px;margin-bottom:56px}

/* Closing */
.home .closing{position:relative;overflow:hidden;text-align:center;padding:76px 0 72px}
.closing-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;pointer-events:none;
  -webkit-mask-image:linear-gradient(transparent 0,#000 45%);mask-image:linear-gradient(transparent 0,#000 45%)}
@media (prefers-color-scheme:dark){.closing-art{opacity:.16}}
.home .closing .wrap{position:relative;z-index:1}
.closing-icon{width:72px;height:72px;border-radius:17px;box-shadow:var(--lift);margin-bottom:22px}
.home .closing h2{font-size:clamp(28px,6.4vw,42px);margin-bottom:24px}
.home .closing .fine{margin:14px 0 0}
.home .foot{margin-top:0}

/* Scroll reveal (only with JS, never with reduced motion) */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
  .js .reveal.in{opacity:1;transform:none}
  .js .chapter-art.reveal{transition-delay:.12s}
}
@media (prefers-reduced-motion:reduce){.js .feel-card{animation:none}}