/* 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:transparent}
.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%);
  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 paper: transparent over the marble, art feathers into it ---- */
.devotion-paper{
  width:100%;
  min-width:0;
  padding:clamp(38px,5vw,68px);
  background:transparent;
  border:0;
  box-shadow:none;
  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:#f4efe2}
.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:var(--ink);margin:0 0 1.35em}

/* ---- 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-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);
}
.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.08);
  mix-blend-mode:screen;
  opacity:0;
  -webkit-mask-image:linear-gradient(45deg,transparent 0 8%,rgba(0,0,0,.32) 28%,rgba(0,0,0,.72) 48%,#000 70%);
  mask-image:linear-gradient(45deg,transparent 0 8%,rgba(0,0,0,.32) 28%,rgba(0,0,0,.72) 48%,#000 70%);
  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:linear-gradient(45deg,transparent 0 10%,rgba(0,0,0,.35) 32%,rgba(0,0,0,.76) 55%,#000 78%);
    mask-image:linear-gradient(45deg,transparent 0 10%,rgba(0,0,0,.35) 32%,rgba(0,0,0,.76) 55%,#000 78%);
  }
}
@media(max-width:700px){
  .roots-application-grid{grid-template-columns:1fr}
  .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}
}