:root{--ink:#202420;--paper:#fbfaf5;--sage:#e8eee3;--green:#294337;--muted:#677168;--line:#daddd3;--warm:#d99668}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}
button,input{font:inherit}
.library-wrap,.share-wrap{max-width:1080px;margin:auto;padding:30px 28px 80px}
header{display:flex;justify-content:space-between;align-items:center}
.wordmark{color:var(--green);text-decoration:none;font-weight:700;font-size:20px;letter-spacing:-.5px}
.church-label{font-size:11px;letter-spacing:1.8px;color:var(--muted);font-weight:700}
.hero{padding:95px 0 55px;max-width:690px}
.eyebrow{font-size:11px;letter-spacing:1.7px;font-weight:700;color:#58705f;margin:0 0 12px}
.hero h1{font:600 clamp(42px,7vw,76px)/.99 'Playfair Display',serif;letter-spacing:-2.4px;margin:0}
.hero h1 em{color:#617965}
.hero>p:last-child{font-size:17px;line-height:1.65;color:var(--muted);max-width:535px;margin:26px 0 0}
.upload-card{background:var(--sage);padding:38px;display:grid;grid-template-columns:1fr 1fr;gap:50px;border-radius:3px}
.upload-card h2,.library-head h2,.reading-card h2{font:600 29px 'Playfair Display',serif;margin:0 0 12px;letter-spacing:-.6px}
.muted{line-height:1.55;color:var(--muted)}
form{display:grid;gap:14px}
label{font-size:13px;font-weight:600;display:grid;gap:7px}
input{border:1px solid #c7d1c5;background:#fff;padding:12px;border-radius:2px}
.file-picker{background:#f8faf6;border:1px dashed #9cac9f;padding:16px;cursor:pointer}
.file-picker input{display:none}
.file-picker span{color:var(--green)}
.file-picker small{font-weight:400;color:var(--muted)}
button{background:var(--green);color:white;border:0;padding:14px 18px;font-weight:700;cursor:pointer;border-radius:2px}
button:disabled{opacity:.65;cursor:wait}
button span{margin-left:10px}
.status{min-height:20px;margin:0;font-size:13px;color:var(--green);line-height:1.45}
.status a,.sermon-card a{color:var(--green);font-weight:700}
.library-head{padding:75px 0 20px}
.sermon-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sermon-card,.reading-card,.empty{background:#fff;border:1px solid var(--line);padding:25px}
.sermon-card h3{font:600 24px/1.1 'Playfair Display',serif;margin:0 0 14px}
.sermon-card>p:not(.eyebrow){color:var(--muted);line-height:1.55;min-height:77px;font-size:14px}
.sermon-card a{text-decoration:none;font-size:14px}
.sermon-card a span{margin-left:8px}
.empty{color:var(--muted);grid-column:1/-1}
.share-page{background:#eff2eb}
.share-wrap{max-width:780px;padding-top:48px}
.share-wrap>h1{font:600 clamp(38px,6vw,62px)/1.05 'Playfair Display',serif;letter-spacing:-1.5px;margin:0 0 28px}
.share-wrap audio{width:100%;margin-bottom:24px}
.reading-card{margin-top:16px}
.summary{font-size:17px;line-height:1.7;white-space:normal}
.transcript{display:grid;gap:3px}
.transcript-line{background:transparent;color:var(--ink);text-align:left;padding:13px 0;display:grid;grid-template-columns:60px 1fr;gap:10px;border-bottom:1px solid var(--line);font-weight:400}
.transcript-line:hover{color:var(--green)}
time{font-family:monospace;color:#728078;font-size:12px;padding-top:2px}
@media(max-width:700px){.library-wrap,.share-wrap{padding:24px 18px 55px}
.hero{padding:65px 0 42px}
.upload-card{grid-template-columns:1fr;gap:24px;padding:25px}
.sermon-list{grid-template-columns:1fr}
.sermon-card>p:not(.eyebrow){min-height:0}
.share-wrap>h1{font-size:42px}
}

.wordmark-logo{display:block;width:132px;height:auto}
.field-hint{font-weight:400;color:var(--muted);margin-left:5px}
textarea{border:1px solid #c7d1c5;background:#fff;padding:12px;border-radius:2px;font:inherit;resize:vertical}
.songs h2{margin-bottom:18px}
.song-list{display:grid}
.song-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;padding:13px 0;border-bottom:1px solid var(--line)}
.song-actions{display:flex;align-items:center;gap:8px}
.youtube-link{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:#c00;color:#fff;border-radius:50%;text-decoration:none;transition:background .2s,transform .2s}
.youtube-link svg{width:24px;height:24px;fill:currentColor}
.youtube-link .youtube-play{fill:#c00}
.youtube-link:hover{background:#a00;transform:translateY(-1px)}
.youtube-link:hover .youtube-play{fill:#a00}
.song-actions a:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.song-row:first-child{border-top:1px solid var(--line)}
.song-name{min-width:0;font-weight:600;line-height:1.35}
.spotify-link{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:#1db954;color:#fff;border-radius:50%;text-decoration:none;transition:background .2s,transform .2s}
.spotify-link svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.spotify-link:hover{background:#169c46;transform:translateY(-1px)}
.account-actions{display:flex;align-items:center;gap:18px}
.account-actions a{color:var(--green);font-size:13px;font-weight:700;text-decoration:none}
.account-actions .logout-link{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:8px 13px;background:#fff;line-height:1;transition:background .2s,border-color .2s}
.account-actions .logout-link:hover{background:var(--sage);border-color:#bcc7bb}
.logout-link span{font-size:12px;color:var(--muted)}
.login-wrap{width:min(100% - 36px,480px);margin:0 auto;padding:42px 0}
.login-card{margin-top:80px;background:var(--sage);padding:38px}
.login-card h1{font:600 43px/1.05 'Playfair Display',serif;margin:0 0 14px;letter-spacing:-1px}
.login-card form{margin-top:25px}
.login-error{background:#fff1ed;color:#8a382b;padding:11px 13px;font-size:13px}
@media(max-width:520px){.song-row{grid-template-columns:minmax(0,1fr) auto;gap:10px}
.spotify-link,.youtube-link{width:38px;height:38px}
.account-actions{gap:11px}
.account-actions a:first-child{display:none}
.login-card{margin-top:48px;padding:26px}
.login-card h1{font-size:36px}
}

.sermon-card{position:relative}.sermon-card:has(.delete-sermon)>.eyebrow{padding-right:38px}.delete-sermon{position:absolute;right:12px;top:12px;width:40px;height:40px;padding:10px;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:#98443d;border-radius:6px}.delete-sermon:hover{background:#fff0ed}.delete-sermon:focus-visible{outline:2px solid #98443d;outline-offset:2px}