/* Daily Devotion — dark glass + marble re-skin of the original reader.
   Selectors and layout are unchanged from the approved build; only surface
   colors moved from light paper to the shared dark theme tokens. */

.devotion-body{
  background-color:var(--bg);
  background-image:
    radial-gradient(ellipse at 82% 18%,rgba(57,166,125,.18),transparent 36%),
    radial-gradient(ellipse at 10% 30%,rgba(210,173,100,.11),transparent 34%),
    linear-gradient(160deg,#121c17 0%,#0d1512 48%,#101a15 100%);
  background-attachment:fixed;
}
.devotion-page{
  padding:clamp(55px,7vw,100px) clamp(18px,4vw,65px) 100px;
  background:
    radial-gradient(circle at 9% 8%,rgba(201,164,92,.10),transparent 25%),
    linear-gradient(180deg,rgba(5,14,10,.08),rgba(5,14,10,.34));
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.devotion-intro{max-width:900px;margin:0 auto 50px;text-align:center}
.devotion-intro h1{font:400 clamp(4rem,8vw,8rem)/.85 var(--serif);letter-spacing:-.05em;margin:0 0 24px}
.devotion-intro h1 span{color:var(--gold);font-style:italic}
.devotion-intro>p:last-child{max-width:720px;margin:auto;font:1.08rem/1.72 var(--serif);color:var(--muted)}
.devotion-intro,.devotion-reader{position:relative;z-index:2}

/* ---- reader layout (final desktop composition from the approved build) ---- */
.devotion-reader{
  width:min(1280px,100%);
  margin:auto;
  display:grid;
  grid-template-columns:280px minmax(0,760px);
  justify-content:start;
  gap:30px;
  align-items:start;
  padding-right:180px;
  box-sizing:border-box;
}

/* ---- sidebar ---- */
.reader-sidebar{
  position:sticky;
  top:25px;
  padding:28px;
  background:var(--glass-strong);
  color:#fff;
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 18px 50px rgba(0,0,0,.35);
  color-scheme:dark;
}
.reader-date-label{text-transform:uppercase;letter-spacing:.17em;color:#d9c27f;font-size:.65rem;font-weight:850}
.reader-sidebar time{display:block;font:400 2rem/1.1 var(--serif);margin:10px 0 22px}
.date-controls{display:grid;grid-template-columns:auto 1fr auto;gap:6px}
.date-controls button,.today-button,.reading-tabs button,.reader-tools button{border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;padding:10px;cursor:pointer;border-radius:8px}
.date-controls label span{position:absolute;clip:rect(0 0 0 0)}
.date-controls input{width:100%;height:100%;border:1px solid var(--glass-border);border-radius:8px;padding:7px;background:rgba(255,255,255,.08);color:var(--ink)}
.today-button{width:100%;margin:8px 0 25px;color:#e8d28f}
.reading-tabs{display:grid;grid-template-columns:1fr 1fr}
.reading-tabs button.active{background:var(--gold);color:#141109;border-color:var(--gold);font-weight:900}
.reader-tools{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}
.public-domain-note{margin:24px 0 0;font:italic .74rem/1.5 var(--serif);color:rgba(255,255,255,.58)}

/* ---- the reading surface: dark enough to remain readable over rotating art ---- */
.devotion-paper{
  width:100%;
  min-width:0;
  padding:clamp(38px,5vw,68px);
  background:
    linear-gradient(145deg,rgba(10,27,19,.58),rgba(4,13,9,.48)),
    radial-gradient(circle at 78% 18%,rgba(210,173,100,.08),transparent 38%);
  border:1px solid rgba(226,204,137,.34);
  border-radius:24px;
  box-shadow:0 24px 70px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.11);
  backdrop-filter:blur(1.5px) saturate(.9);
  -webkit-backdrop-filter:blur(1.5px) saturate(.9);
  position:relative;
}
.devotion-paper:before{display:none}
.entry-header,.entry-body,.roots-application{position:relative}
.entry-header{text-align:center;padding-bottom:38px;margin-bottom:40px;border-bottom:1px solid var(--line)}
.entry-header>p{text-transform:uppercase;letter-spacing:.22em;color:var(--gold);font-size:.68rem;font-weight:900}
.entry-header blockquote{max-width:730px;margin:20px auto 14px;font:italic 400 clamp(1.8rem,3.6vw,3rem)/1.25 var(--serif);color:#fffaf0;text-shadow:0 2px 7px rgba(0,0,0,.9)}
.entry-header a{color:var(--gold);font-weight:850;text-decoration:none}
.entry-header a:hover{color:var(--gold-pale)}
.entry-body p{font:1.08rem/1.9 var(--serif);color:#fffaf0;margin:0 0 1.35em;text-shadow:0 2px 6px rgba(0,0,0,.94),0 1px 1px #000}

/* ---- ROOTS application ---- */
.roots-application{margin-top:65px;padding-top:50px;border-top:4px double rgba(201,164,92,.55)}
.roots-application>header{text-align:center}
.roots-application h2{font:400 clamp(2.5rem,5vw,4.4rem)/1 var(--serif);margin:0 0 35px}
.roots-application-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.roots-task-links{display:grid;grid-template-columns:1fr 1fr;gap:14px}.roots-task-links a{display:block;overflow:hidden;border:1px solid rgba(218,177,82,.42);border-radius:14px;background:rgba(13,37,26,.76);color:#fff1cf;text-decoration:none;box-shadow:0 12px 28px rgba(0,0,0,.27);transition:.2s}.roots-task-links a:last-child{grid-column:1/-1}.roots-task-links img{display:block;width:100%;height:clamp(170px,20vw,245px);object-fit:cover}.roots-task-links strong{display:block;padding:15px;text-align:center;font:700 1.05rem/1.2 var(--serif)}.roots-task-links a:hover,.roots-task-links a:focus-visible{transform:translateY(-3px);border-color:#e4c46c;background:#153121}.roots-form-legacy[hidden]{display:none!important}
.roots-application-grid>div{
  padding:18px 15px;
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-top:3px solid var(--gold);
  border-radius:var(--radius-sm);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  overflow:hidden;
}
.roots-application-grid .root-card-art{display:block;width:calc(100% + 30px);max-width:none;height:clamp(125px,16vw,180px);margin:-18px -15px 16px;object-fit:cover;object-position:center 52%;border-bottom:1px solid rgba(201,164,92,.45)}
.roots-application-grid>div:last-child .root-card-art{height:clamp(145px,20vw,220px);object-position:center 48%}
.roots-application-grid>div:last-child{grid-column:1/-1}
.roots-application-grid span{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:var(--forest);border:1px solid var(--line);color:#fff;font:700 .85rem var(--serif)}
.roots-application-grid h3{font:700 1rem/1.15 var(--serif);margin:13px 0 8px}
.roots-application-grid p{font:.8rem/1.55 var(--serif);color:var(--muted);margin:0}
.roots-application-grid label{display:block;margin:17px 0 6px;font-size:.7rem;font-weight:850;color:var(--gold-pale)}
.roots-application-grid textarea{width:100%;padding:9px;border:1px solid var(--glass-border);border-radius:8px;background:rgba(255,255,255,.06);color:var(--ink);resize:vertical;font:.85rem/1.45 var(--serif)}
.application-response{
  margin-top:24px;
  padding:23px;
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-sm);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.application-response label{display:block;font:700 1rem var(--serif);margin-bottom:9px;color:#f4efe2}
.application-response textarea{width:100%;padding:13px;border:1px solid var(--glass-border);border-radius:8px;background:rgba(255,255,255,.06);color:var(--ink);resize:vertical;font:1rem/1.5 var(--serif)}
#note-status{min-height:1em;margin:7px 0 0;font-size:.72rem;color:var(--muted)}
#note-status a{color:var(--gold-pale);text-decoration:underline}

/* ---- narrator status (legacy hook) ---- */
.narrator-status{margin:12px 0 0;padding:10px 11px;border-left:2px solid var(--gold);background:rgba(255,255,255,.06)}
.narrator-status span,.narrator-status strong{display:block}
.narrator-status span{text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.5);font-size:.54rem}
.narrator-status strong{margin-top:3px;color:#e8d28f;font:400 .78rem/1.35 var(--serif)}

/* ---- full devotional audio player ---- */
.audio-reader{
  margin-top:18px;
  padding:15px;
  border:1px solid rgba(226,204,137,.34);
  border-radius:var(--radius-sm);
  background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.025));
  box-shadow:inset 0 1px rgba(255,255,255,.08);
}
.audio-reader-heading{display:flex;flex-direction:column;gap:4px;margin-bottom:13px}
.audio-reader-heading span{color:#e8d28f;font-size:.59rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
.audio-reader-heading strong{color:#fff8df;font:400 .82rem/1.35 var(--serif)}
.audio-controls{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:6px}
.audio-controls button,
.print-tool{
  min-height:41px;
  border:1px solid rgba(255,255,255,.27);
  border-radius:8px;
  background:rgba(255,255,255,.035);
  color:#fff;
  cursor:pointer;
  font-size:.7rem;
  font-weight:800;
}
.audio-controls .audio-play{background:var(--gold);border-color:#d9bd71;color:#141109}
.audio-controls button:disabled{cursor:not-allowed;opacity:.38}
.audio-control-symbol{margin-right:3px}
.audio-progress{height:5px;margin-top:13px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.14)}
.audio-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--gold),#f0dc9b);transition:width .22s linear}
#audio-status{min-height:2.5em;margin:8px 0 0;color:rgba(255,255,255,.68);font:italic .69rem/1.4 var(--serif)}
.print-tool{width:100%;margin-top:8px;color:#e8d28f}

/* ---- Spurgeon atmosphere: visible upper-right, feathering away before the
   reader text. On the dark build the portraits blend with `screen` so the
   light of the artwork glows out of the marble instead of vanishing. ---- */
.spurgeon-watermarks{
  position:absolute;
  z-index:1;
  inset:48px 0 auto auto;
  width:min(64vw,980px);
  height:900px;
  pointer-events:none;
  overflow:visible;
  background:transparent;
  border:0;
  box-shadow:none;
}
.spurgeon-watermarks img{
  position:absolute;
  top:0;
  right:-2vw;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top right;
  background:transparent;
  border:0;
  border-radius:0;
  outline:0;
  box-shadow:none;
  filter:grayscale(1) sepia(.26) contrast(1.04) blur(.25px);
  mix-blend-mode:screen;
  opacity:0;
  transform:scale(1.045);
  transform-origin:top right;
  -webkit-mask-image:radial-gradient(ellipse 76% 72% at 72% 38%,#000 0 27%,rgba(0,0,0,.92) 39%,rgba(0,0,0,.66) 54%,rgba(0,0,0,.3) 68%,transparent 86%);
  mask-image:radial-gradient(ellipse 76% 72% at 72% 38%,#000 0 27%,rgba(0,0,0,.92) 39%,rgba(0,0,0,.66) 54%,rgba(0,0,0,.3) 68%,transparent 86%);
  animation:spurgeon-portrait-fade 80s ease-in-out infinite;
}
.spurgeon-watermarks .portrait-one{animation-delay:0s}
.spurgeon-watermarks .portrait-two{animation-delay:10s}
.spurgeon-watermarks .portrait-three{animation-delay:20s}
.spurgeon-watermarks .portrait-four{animation-delay:30s}
.spurgeon-watermarks .portrait-five{animation-delay:40s}
.spurgeon-watermarks .portrait-six{animation-delay:50s}
.spurgeon-watermarks .portrait-seven{animation-delay:60s}
.spurgeon-watermarks .portrait-eight{animation-delay:70s}
@keyframes spurgeon-portrait-fade{
  0%,17%,100%{opacity:0}
  2.5%,12.5%{opacity:.46}
}

/* ---- responsive ---- */
@media(max-width:1050px){
  .devotion-reader{grid-template-columns:1fr;padding-right:0}
  .reader-sidebar{position:static}
  .spurgeon-watermarks{display:block;width:min(66vw,610px);height:620px;opacity:.82}
}
@media(max-width:720px){
  .devotion-paper{padding:42px 24px}
  .audio-controls{grid-template-columns:1fr 1fr}
  .audio-controls .audio-play{grid-column:1/-1}
  .spurgeon-watermarks{width:82vw;height:470px;inset:92px -9vw auto auto;opacity:.48}
  .spurgeon-watermarks img{
    -webkit-mask-image:radial-gradient(ellipse 82% 76% at 73% 36%,#000 0 24%,rgba(0,0,0,.82) 42%,rgba(0,0,0,.42) 61%,transparent 84%);
    mask-image:radial-gradient(ellipse 82% 76% at 73% 36%,#000 0 24%,rgba(0,0,0,.82) 42%,rgba(0,0,0,.42) 61%,transparent 84%);
  }
}
@media(max-width:700px){
  .roots-application-grid{grid-template-columns:1fr}
  .roots-task-links{grid-template-columns:1fr}.roots-task-links a:last-child{grid-column:auto}
  .roots-application-grid>div:last-child{grid-column:auto}
}
@media(max-width:620px){
  .devotion-page{padding-left:12px;padding-right:12px}
  .devotion-intro h1{font-size:3.6rem}
}
@media(prefers-reduced-motion:reduce){
  .spurgeon-watermarks img{display:none}
  .spurgeon-watermarks .portrait-one{display:block;animation:none;opacity:.32}
}

/* ---- print: paper is paper again — dark ink on white ---- */
@media print{
  .site-header,.devotion-intro,.reader-sidebar,.site-footer,.spurgeon-watermarks{display:none!important}
  body{background:#fff}
  body::before,body::after{display:none!important}
  .devotion-page{padding:0;background:#fff}
  .devotion-reader{display:block;padding-right:0}
  .devotion-paper{box-shadow:none;border:0;padding:20px}
  .application-response{display:none}
  .entry-header>p,.entry-header a{color:#5b4310!important}
  .entry-header blockquote,.roots-application h2,.roots-application-grid h3{color:#152820!important}
  .entry-body p,.roots-application-grid p,.roots-application-grid label{color:#233830!important}
  .roots-application-grid>div{background:#fff;border:1px solid #ccc;border-top:3px solid #b5974e}
  .roots-application-grid textarea{background:#fff;color:#233830;border:1px solid #ccc}
}

/* ---- Devotional shelf (2026-08-27) ---- */
.devotional-picker{display:grid;gap:6px;margin-bottom:14px}
.devotional-picker span{font:700 11px/1 var(--font-body,Arial,sans-serif);letter-spacing:.12em;text-transform:uppercase;color:#d9a847}
.devotional-picker select{width:100%;padding:.6rem .7rem;border:1px solid rgba(222,180,94,.4);border-radius:12px;background:rgba(4,20,12,.85);color:#f2e9cf;font-size:.9rem;cursor:pointer}
/* Spurgeon's portraits belong to Spurgeon's devotionals only; the cross, dove,
   and Bible imagery stay for every author. */
body[data-devotional]:not([data-devotional="spurgeon-morning-evening"]):not([data-devotional="faiths-checkbook"]) .portrait-one,
body[data-devotional]:not([data-devotional="spurgeon-morning-evening"]):not([data-devotional="faiths-checkbook"]) .portrait-four,
body[data-devotional]:not([data-devotional="spurgeon-morning-evening"]):not([data-devotional="faiths-checkbook"]) .portrait-five,
body[data-devotional]:not([data-devotional="spurgeon-morning-evening"]):not([data-devotional="faiths-checkbook"]) .portrait-seven{display:none}