:root{--ivory:#faf6ec;--marble:#f3ecdc;--ink:#2b1d0e;--ink2:#5a4326;--gold:#b8892a;--gold2:#e7c66b;--ruby:#8f1426;--sap:#1d4fa8}
*{box-sizing:border-box}
html{overflow-x:clip;color-scheme:light}
body{margin:0;min-height:100vh;color:var(--ink);font:400 1.125rem/1.6 "Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
 background:
  radial-gradient(1200px 700px at 50% -10%,#fffdf6 0%,rgba(255,253,246,0) 70%),
  repeating-linear-gradient(115deg,rgba(184,137,42,.035) 0 2px,transparent 2px 38px),
  linear-gradient(#fbf8ef,#f4ecda);overflow-x:clip}
.haze,.rays{position:fixed;inset:0;pointer-events:none;z-index:0}
.rays{background:
  linear-gradient(105deg,transparent 30%,rgba(29,79,168,.07) 38%,transparent 46%),
  linear-gradient(80deg,transparent 52%,rgba(143,20,38,.06) 58%,transparent 64%),
  linear-gradient(95deg,transparent 64%,rgba(231,198,107,.14) 70%,transparent 78%);
  animation:drift 22s ease-in-out infinite alternate}
.haze{background:radial-gradient(60% 40% at 50% 100%,rgba(231,198,107,.18),transparent 70%),radial-gradient(40% 30% at 20% 70%,rgba(255,255,255,.6),transparent),radial-gradient(40% 30% at 80% 60%,rgba(255,255,255,.5),transparent);animation:haze 30s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
@keyframes haze{from{opacity:.7;transform:translateY(0)}to{opacity:1;transform:translateY(-3%)}}
header,main,footer{position:relative;z-index:1}
.nave{text-align:center;padding:28px 16px 8px}
.inscr{font:700 .82rem/1 Cinzel,serif;letter-spacing:.35em;color:var(--gold);margin:14px 0 4px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.banner{display:block;width:100%;max-width:1180px;margin:10px auto 0;line-height:0}
.banner img{display:block;width:100%;height:auto}
.sub{margin:4px 0 0;font:500 .95rem Cinzel,serif;letter-spacing:.18em;color:var(--ink2)}
.sanctuary{max-width:1180px;margin:0 auto;padding:16px;display:grid;gap:22px;grid-template-columns:1fr}
.player,.card{border-radius:14px}
.player{background:linear-gradient(#fffdf7,#f6efdf);border:1px solid #e4d3a6;box-shadow:0 0 0 6px #fffaf0,0 0 0 7px var(--gold2),0 18px 50px rgba(120,86,20,.16);padding:22px 20px}
.label{margin:0;font:700 .72rem Cinzel,serif;letter-spacing:.25em;text-transform:uppercase;color:var(--gold)}
.label.dark{color:#7a5414}
.now h2{margin:4px 0 0;font:700 clamp(1.3rem,4vw,1.7rem)/1.2 Cinzel,serif;color:var(--ink)}
.muted{color:var(--ink2);margin:2px 0 0;font-size:.95rem}
.seek{display:flex;align-items:center;gap:10px;margin:18px 0 8px;font:500 .9rem Cinzel,serif;color:var(--ink2);font-variant-numeric:tabular-nums}
input[type=range]{--p:0%;-webkit-appearance:none;appearance:none;flex:1;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--gold) var(--p),#e6dcc4 var(--p));outline-offset:4px;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:radial-gradient(#fff3c4,#c9952f);border:2px solid #7a5414}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:radial-gradient(#fff3c4,#c9952f);border:2px solid #7a5414}
.ctl{display:flex;justify-content:center;align-items:center;gap:18px;margin:10px 0}
.b{width:52px;height:52px;border-radius:50%;border:2px solid var(--gold);background:#fffaf0;color:var(--ruby);display:grid;place-items:center;cursor:pointer;transition:transform .15s,box-shadow .2s}
.b svg{width:24px;height:24px;fill:currentColor}
.b:hover{transform:translateY(-1px);box-shadow:0 0 0 4px rgba(231,198,107,.35)}
.b:focus-visible,.list button:focus-visible{outline:3px solid var(--sap);outline-offset:3px}
.b.big{width:72px;height:72px;background:radial-gradient(#fff4c8,#e2b650 70%,#b8892a);color:#4a0a14;border-color:#8a6418;box-shadow:0 6px 20px rgba(184,137,42,.4)}
.b.big svg{width:32px;height:32px}
.playing .b.big{animation:halo 3s ease-in-out infinite}
.b.tog.on{box-shadow:0 0 0 3px var(--gold),0 0 14px rgba(231,198,107,.55);color:var(--ruby)}
@keyframes halo{50%{box-shadow:0 0 0 10px rgba(231,198,107,.25),0 6px 24px rgba(184,137,42,.5)}}
.vol{display:flex;align-items:center;gap:10px;max-width:260px;margin:6px auto 0;color:var(--ink2)}
.vol svg{width:22px;height:22px;fill:currentColor}
.err{min-height:1.2em;text-align:center;color:var(--ruby);margin:6px 0 0;font-size:.95rem}
.list{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid #e4d3a6;max-height:min(52vh,520px);overflow:auto;-webkit-overflow-scrolling:touch}
.list button{width:100%;display:flex;gap:14px;align-items:center;padding:12px 10px;background:none;border:0;border-bottom:1px solid #eee2c4;font:inherit;color:var(--ink);text-align:left;cursor:pointer;min-height:48px}
.list .num{font:700 .9rem Cinzel,serif;color:var(--gold);min-width:2.2em}
.list button:hover{background:rgba(231,198,107,.14)}
.list .on button{background:linear-gradient(90deg,rgba(231,198,107,.3),transparent);font-weight:500}
.card{position:relative;padding:12px;background:linear-gradient(135deg,#e7c66b,#b8892a 30%,#f3dc8e 55%,#a87a22 80%,#e7c66b);box-shadow:0 20px 50px rgba(120,86,20,.22)}
.card-in{border-radius:8px;padding:26px 24px 22px;text-align:center;color:var(--ink);
 background:radial-gradient(ellipse at center,#fffaf0 40%,#f3e6c7 100%);border:1px solid #8a6418;outline:1px solid #fff4cf;outline-offset:-8px}
.crest{width:52px;height:52px}
.card h3{margin:6px 0 12px;font:700 1.35rem Cinzel,serif;color:var(--ruby);letter-spacing:.06em}
.lines p{margin:0 0 4px;font-size:1.18rem}
.lines .first::first-letter{font-family:"Shippori Mincho",serif!important;float:left;font:400 3.4rem/.85 "UnifrakturMaguntia",serif;color:var(--ruby);padding:4px 8px 0 0;border:1px solid var(--gold);margin-right:8px;background:linear-gradient(#fff6d8,#f0dca0)}
.lines{text-align:left;display:inline-block;max-width:30ch}
blockquote{margin:16px auto 0;max-width:34ch;font-style:italic;color:var(--ink2);border-top:1px solid #d9c28a;padding-top:12px}
blockquote cite{display:block;font:500 .78rem Cinzel,serif;font-style:normal;letter-spacing:.12em;margin-top:6px;color:#7a5414}
.amen{margin:16px 0 0;font:700 .78rem Cinzel,serif;letter-spacing:.22em;color:var(--gold)}
footer{text-align:center;padding:24px 16px 40px;font-size:.9rem;color:var(--ink2)}
@media(min-width:900px){
 .sanctuary{grid-template-columns:1.1fr 1fr;align-items:start}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.now h2,.card h3{font-family:"Shippori Mincho",serif;font-weight:700;letter-spacing:.08em}
.label,.sub,.seek{font-family:"Shippori Mincho",serif;letter-spacing:.2em}
.lines{text-align:left;max-width:20em}
.lines p{line-height:1.9}
blockquote{font-style:normal;line-height:1.9;max-width:22em}
blockquote cite{font-family:"Shippori Mincho",serif;letter-spacing:.08em}

footer a{color:var(--sap);text-decoration:underline;text-underline-offset:3px}

.about{max-width:1180px;margin:8px auto 0;padding:8px 16px 28px;color:var(--ink)}
.about h2{font:700 1.25rem/1.4 "Shippori Mincho",serif;color:var(--ruby);letter-spacing:.08em;margin:22px 0 10px}
.about p{margin:0 0 10px;line-height:1.9;max-width:46em}
.about p.en{color:var(--ink2);font-size:.98rem}
.faq{margin:0;max-width:46em}
.faq>div{margin:0 0 14px;padding:0 0 12px;border-bottom:1px solid #e4d3a6}
.faq dt{font-weight:700;margin:0 0 4px;color:var(--ink)}
.faq dd{margin:0;line-height:1.85;color:var(--ink2)}
.faq a{color:var(--sap)}
.track-index{columns:1;margin:8px 0 0;padding:0 0 0 1.4em;max-width:46em;line-height:1.75;font-size:.98rem;color:var(--ink2)}
.track-index li{break-inside:avoid;margin:0 0 2px}
@media(min-width:700px){.track-index{columns:2;column-gap:2.2em}}