/* =====================================================================
   VESPERS — Single teaching / sermon page
   Inherits tokens from main.css (:root). Mobile-first.
   ===================================================================== */

/* ---------- Header band (dark) ---------- */
.t-head{position:relative; overflow:hidden; background:var(--ink-900); color:var(--on-dark-1);
  padding-top:clamp(104px,15vw,150px); padding-bottom:clamp(86px,13vw,168px);}
.t-head-bg{position:absolute; inset:0; z-index:0;}
.t-head-bg img{width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.06); filter:saturate(.95);
  transition:opacity 1.2s var(--ease-veil), transform 14s var(--ease-veil);}
.js .t-head-bg img.lit{opacity:.34; transform:scale(1);}
.t-head-scrim{position:absolute; inset:0; z-index:1; background:
  linear-gradient(180deg, rgba(20,22,46,.78) 0%, rgba(20,22,46,.62) 36%, rgba(20,22,46,.9) 100%),
  radial-gradient(60% 56% at 20% 26%, rgba(226,203,148,.16), transparent 60%);}
.t-head .hero-arch{bottom:-30%;}
.t-head-inner{position:relative; z-index:2; max-width:60ch;}
.t-crumb{display:flex; align-items:center; gap:9px; flex-wrap:wrap; font:600 .76rem/1 var(--font-body); color:var(--on-dark-3);}
.t-crumb a{color:var(--on-dark-2); transition:color .25s;}
.t-crumb a:hover{color:var(--gilt-300);}
.t-crumb span[aria-current]{color:var(--gilt-300);}
.t-tag{display:inline-flex; align-items:center; gap:7px; margin-top:18px; font:700 .66rem/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase;
  color:var(--gilt-300); background:rgba(226,203,148,.1); border:1px solid var(--border-on-dark); padding:8px 14px; border-radius:999px;}
.t-tag vm-icon{color:var(--gilt-300);}
.t-head h1{color:var(--on-dark-1); font-size:clamp(2.3rem,5.4vw,4rem); line-height:1.04; margin:16px 0 0; letter-spacing:-.02em; text-shadow:0 2px 40px rgba(20,22,46,.5);}
.t-meta{display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin-top:18px; font:500 .86rem/1.4 var(--font-body); color:var(--on-dark-2);}
.t-meta vm-icon{color:var(--gilt-300); vertical-align:middle;}
.t-meta .dot{width:4px; height:4px; border-radius:50%; background:var(--border-on-dark);}
.t-author{display:inline-flex; align-items:center; gap:9px; font-weight:700; color:var(--on-dark-1);}
.t-author-mark{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%;
  font:700 .68rem/1 var(--font-body); letter-spacing:.02em; color:var(--ink-900); background:var(--gilt-300); box-shadow:0 0 0 1px var(--hairline-gold);}

/* ---------- Body ---------- */
.t-body{background:var(--parchment-50);}
.t-shell{max-width:840px; margin-inline:auto;}

/* player pulled up to overlap the dark header */
.t-stage{position:relative; z-index:5; margin-top:clamp(-120px,-9vw,-56px);}
/* The .t-player chrome (video + audio players) now lives in main.css so the
   Teachings library modal player can share the exact same styling.
   See the "Teaching player (shared)" block in main.css. */

/* stage bar (kind + share) */
.t-stage-bar{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:16px;}
.t-stage-kind{display:inline-flex; align-items:center; gap:8px; font:700 .68rem/1 var(--font-body); letter-spacing:.12em; text-transform:uppercase; color:var(--eyebrow-ink);}
.t-stage-kind vm-icon{color:var(--gilt-700);}
.t-share{display:flex; align-items:center; gap:8px;}
.t-share-lbl{font:700 .68rem/1 var(--font-body); letter-spacing:.12em; text-transform:uppercase; color:var(--fg3); margin-right:2px;}
.t-share-btn{position:relative; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%;
  border:1.5px solid var(--border-strong); color:var(--fg2); transition:color .25s, border-color .25s, background-color .25s, transform .16s var(--ease);}
.t-share-btn:active{transform:scale(.94);}
/* WhatsApp share carries the brand gilt gold (per Sanctuary Icons rules) */
.t-share-btn--wa{color:var(--gilt-700); border-color:var(--hairline-gold);}
@media (hover:hover){ .t-share-btn:hover{border-color:var(--gilt-500); color:var(--accent-strong); background:var(--gilt-100);}
  .t-share-btn--wa:hover{color:var(--gilt-700); border-color:var(--gilt-500); background:var(--gilt-100);} }
.t-share-btn.is-copied{border-color:var(--sage-600); color:var(--sage-600); background:var(--sage-50);}
.t-share-btn.is-copied::after{content:"Copied"; position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); white-space:nowrap;
  font:700 .64rem/1 var(--font-body); letter-spacing:.04em; color:var(--on-dark-1); background:var(--ink-900); padding:6px 10px; border-radius:8px; box-shadow:var(--shadow-md);}

/* ---------- Article ---------- */
.t-article{margin-top:clamp(34px,5vw,52px);}
.t-article p{font:400 clamp(1.06rem,1.2vw,1.18rem)/1.78 var(--font-body); color:var(--fg1); margin:0 0 1.1em;}
.t-article p em{font-style:italic; color:var(--accent-strong);}
.t-lede{font:500 clamp(1.2rem,1.6vw,1.44rem)/1.6 var(--font-display) !important; color:var(--fg1) !important; letter-spacing:-.01em; padding-bottom:6px;}
.t-scripture{position:relative; margin:clamp(30px,4vw,46px) 0; padding:clamp(24px,3vw,36px) clamp(22px,3vw,40px); text-align:center;
  background:var(--surface-warm); border:1px solid var(--hairline-gold); border-radius:18px;}
.t-scripture .t-quote{color:var(--gilt-500); opacity:.85;}
.t-scripture blockquote{margin:6px 0 0; font:italic 500 clamp(1.4rem,2.4vw,1.95rem)/1.5 var(--font-display); color:var(--fg1); letter-spacing:-.01em;}
.t-scripture .cite{margin-top:14px;}

/* ---------- Reflections / comments ---------- */
.t-comments{margin-top:clamp(44px,6vw,72px); padding-top:clamp(34px,4vw,48px); border-top:1px solid var(--border);}
.t-comments-head{max-width:58ch;}
.t-comments-head .mvt .num{display:inline-flex; align-items:center; color:var(--accent-strong);}
.t-comments-head .mvt .num vm-icon{color:var(--gilt-700);}
.t-comments-head .kicker{margin-top:8px; font-size:clamp(1.7rem,2.8vw,2.4rem);}
.t-comments-head .lead{margin-top:12px;}

.t-comments-list{list-style:none; margin:clamp(26px,3vw,36px) 0 0; padding:0; display:flex; flex-direction:column; gap:16px;}
.t-comments-empty{color:var(--fg3); font:italic 500 1.05rem/1.5 var(--font-display); padding:6px 0;}
.tcm-item{display:flex; gap:14px; align-items:flex-start;}
.tcm-item.is-fresh{animation:cmIn .6s var(--ease);}
@keyframes cmIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
.tcm-avatar{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%;
  font:700 .82rem/1 var(--font-body); color:var(--ink-900); background:linear-gradient(150deg, var(--gilt-300), var(--gilt-100)); box-shadow:0 0 0 1px var(--hairline-gold);}
.tcm-bubble{flex:1; min-width:0; background:var(--surface); border:1px solid var(--border-soft); border-radius:14px; padding:14px 18px; box-shadow:var(--shadow-sm);}
.tcm-meta{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.tcm-meta b{font:700 .94rem/1.2 var(--font-body); color:var(--fg1);}
.tcm-meta span{font:600 .72rem/1 var(--font-body); letter-spacing:.04em; color:var(--fg3);}
.tcm-bubble p{margin:7px 0 0; font:400 1rem/1.62 var(--font-body); color:var(--fg1); white-space:pre-line; overflow-wrap:anywhere;}

/* comment form */
.tcm-form{margin-top:clamp(28px,3.5vw,40px); background:var(--surface); border:1px solid var(--border-soft); border-radius:18px; padding:clamp(20px,3vw,30px); box-shadow:var(--shadow-sm);}
.tcm-form-h{font:600 1.3rem/1.1 var(--font-display); color:var(--fg1); margin:0 0 16px;}
.tcm-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.tcm-field{margin-bottom:16px;}
.tcm-field label{display:block; font:700 .72rem/1 var(--font-body); letter-spacing:.1em; text-transform:uppercase; color:var(--fg2); margin-bottom:9px;}
.req-mark{color:var(--accent-strong); text-decoration:none; margin-left:2px; font-weight:700;}
.tcm-field input, .tcm-field textarea{width:100%; font:400 1rem/1.6 var(--font-body); color:var(--fg1); background:var(--parchment-50);
  border:1.5px solid var(--border); border-radius:12px; padding:13px 16px; transition:border-color .25s, box-shadow .25s, background-color .25s;}
.tcm-field textarea{resize:vertical; min-height:108px;}
.tcm-field input::placeholder, .tcm-field textarea::placeholder{color:var(--fg3);}
.tcm-field input:focus, .tcm-field textarea:focus{outline:none; border-color:var(--gilt-500); background:var(--surface); box-shadow:0 0 0 3px rgba(198,164,92,.18);}
.tcm-field input.is-invalid, .tcm-field textarea.is-invalid{border-color:#B5523C; box-shadow:0 0 0 3px rgba(181,82,60,.14);}
.tcm-err{display:block; margin-top:7px; font:600 .8rem/1.3 var(--font-body); color:#B5523C;}
.tcm-err[hidden]{display:none;}
.tcm-actions{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.tcm-actions .btn[disabled]{opacity:.6; cursor:progress;}
.btn.is-busy{position:relative; color:transparent;}
.btn.is-busy::after{content:""; position:absolute; left:50%; top:50%; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%;
  border:2px solid rgba(27,30,61,.3); border-top-color:var(--ink-900); animation:cmSpin .7s linear infinite;}
@keyframes cmSpin{to{transform:rotate(360deg);}}
.tcm-msg{font:600 .86rem/1.4 var(--font-body);}
.tcm-msg.is-ok{color:var(--sage-600);}
.tcm-msg.is-bad{color:#B5523C;}

/* ---------- Related ---------- */
.t-related{margin-top:clamp(54px,7vw,86px);}
.t-related-head .mvt .num{color:var(--accent-strong); font-size:1rem;}
.t-related-head .kicker{margin-top:8px; font-size:clamp(1.7rem,2.8vw,2.4rem);}
.t-related-grid{display:grid; grid-template-columns:1fr; gap:clamp(18px,2.2vw,26px); margin-top:clamp(22px,3vw,32px);}
.t-related-act{display:flex; justify-content:center; margin-top:clamp(26px,3vw,38px);}
@media (min-width:620px){ .t-related-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:980px){ .t-related-grid{grid-template-columns:repeat(3,1fr);} }

/* ---------- Not found ---------- */
.t-missing{min-height:64vh; display:flex; align-items:center; text-align:center; background:var(--ink-900); color:var(--on-dark-1);
  padding-top:clamp(120px,16vw,170px); padding-bottom:clamp(60px,9vw,110px);}
.t-missing .wrap{max-width:54ch; margin-inline:auto;}
.t-missing .eyebrow{justify-content:center;}
.t-missing h1{color:var(--on-dark-1); font-size:clamp(2.2rem,5vw,3.4rem); line-height:1.06; margin:14px 0 0;}
.t-missing .lead{color:var(--on-dark-2); margin:14px auto 26px;}
@media (prefers-reduced-motion:reduce){ .tcm-item.is-fresh{animation:none;} .t-head-bg img, .js .t-head-bg img.lit{transition:opacity .3s !important; transform:none !important;} }