/* Unknown Horrors — holding page. Near-black, bone-white old-print type (IM Fell English, self-hosted),
   a dim ember glow, film grain, and a rare flicker on the title. Motion stops for reduced-motion users. */
@font-face { font-family:"Fell"; src:url("/fonts/fell.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:"Fell"; src:url("/fonts/fell-italic.woff2") format("woff2"); font-style:italic; font-display:swap; }
:root { --bg:#0d0b0a; --bone:#e9e0cf; --ash:#a8927a; --ember:#3a1f17; }
* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body { background:var(--bg); color:var(--bone); font-family:"Fell", Georgia, "Times New Roman", serif;
       min-height:100vh; display:flex; flex-direction:column; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; pointer-events:none;
  background:radial-gradient(60% 55% at 50% 45%, rgba(90,40,25,.35), transparent 70%),
             radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.75)); }
body::after { content:""; position:fixed; inset:-50%; pointer-events:none; opacity:.22; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9  0 0 0 0 .86  0 0 0 0 .8  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
main, .mast, footer { position:relative; z-index:1; }
.mast { text-align:center; padding:64px 20px 8px; }
main { flex:1; width:100%; max-width:1040px; margin:0 auto; padding:12px 20px 40px; }
body.simple main { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.logo { margin:0 auto; width:min(230px, 46vw); }
.logo img { width:100%; height:auto; display:block; filter:drop-shadow(0 0 30px rgba(233,224,207,.08)); }
.title { font-weight:400; font-size:clamp(3rem, 13vw, 8.5rem); line-height:.92; letter-spacing:.01em;
         text-shadow:0 0 28px rgba(233,224,207,.12); }
.title span { display:inline-block; }
.line { margin-top:22px; font-style:italic; font-size:clamp(1.15rem, 3.6vw, 1.6rem); color:var(--ash); letter-spacing:.02em; }
.back { margin-top:22px; font-size:1.1rem; }
a { color:var(--bone); text-underline-offset:4px; text-decoration-color:rgba(233,224,207,.35); }
a:hover { text-decoration-color:var(--bone); }
footer { text-align:center; padding:28px 20px 28px; color:#6f6151; font-size:.95rem; letter-spacing:.04em; }
/* section headings + soundtrack grid */
.sec { font-size:.95rem; letter-spacing:.32em; text-transform:uppercase; color:#c0603a; margin-bottom:22px; text-align:center; font-weight:400; }
.sec::before, .sec::after { content:""; display:inline-block; width:34px; height:1px; background:rgba(192,96,58,.6); vertical-align:middle; margin:0 14px; }
.work { margin-top:84px; }
.tiles { list-style:none; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:16px; }
.tile { width:100%; padding:0; border:0; background:none; color:var(--bone); font:inherit; cursor:pointer; text-align:left; }
.tile img { width:100%; height:auto; aspect-ratio:1; object-fit:cover; display:block; border-radius:4px; margin-bottom:8px;
            box-shadow:0 10px 24px rgba(0,0,0,.5); outline:2px solid transparent; outline-offset:3px; filter:saturate(.9);
            transition:transform .25s ease, filter .25s ease, outline-color .2s ease; }
.tile:hover img { transform:translateY(-3px); filter:saturate(1.05); }
.tile.active img, .tile:focus-visible img { outline-color:#c0603a; }
.tile:focus-visible { outline:none; }
.tile span { font-size:1.02rem; line-height:1.25; display:block; }
.work .members { display:grid; gap:28px; margin:34px 0 30px; }
.members h3 { font-weight:400; font-size:1.5rem; color:var(--bone); margin-bottom:6px; }
.members article p { margin-bottom:0; }
/* release */
.featured { margin-top:56px; }
.release { display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); gap:44px; align-items:center;
           padding:28px; border:1px solid rgba(233,224,207,.1); border-radius:10px;
           background:linear-gradient(160deg, rgba(58,31,23,.45), rgba(13,11,10,.2) 60%); box-shadow:0 30px 80px rgba(0,0,0,.35); }
.release h3 { font-weight:400; font-size:clamp(2rem, 4.6vw, 3rem); line-height:1.02; margin-bottom:16px; }
.release h3 em { display:block; font-size:.42em; letter-spacing:.14em; text-transform:uppercase; font-style:normal; color:#c0603a; margin-top:10px; }
.release p { font-size:1.08rem; line-height:1.6; color:#d9cfbd; margin-bottom:12px; }
.release .small { font-size:.98rem; color:var(--ash); margin:16px 0 0; }
.release .small a { color:var(--bone); }
.cover { width:100%; height:auto; display:block; border-radius:4px; box-shadow:0 30px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(233,224,207,.08); }
.kicker { font-style:italic; color:#c0603a; font-size:1.2rem; margin-bottom:6px; }
h2 { font-weight:400; font-size:clamp(2rem, 5.4vw, 3.2rem); line-height:1.02; margin-bottom:22px; }
h2 em { display:block; font-size:.55em; color:var(--ash); margin-top:8px; }
blockquote { font-style:italic; font-size:1.3rem; color:var(--bone); border-left:2px solid #c0603a; padding-left:16px; margin:18px 0 24px; }
blockquote cite { display:block; font-style:normal; font-size:.95rem; color:var(--ash); margin-top:6px; letter-spacing:.06em; text-transform:uppercase; }
.actions { display:flex; gap:12px; flex-wrap:wrap; }
.btn { font:inherit; font-size:1.1rem; letter-spacing:.03em; padding:12px 22px; border-radius:999px; cursor:pointer; text-decoration:none;
       background:var(--bone); color:var(--bg); border:1px solid var(--bone); transition:background .2s ease, color .2s ease; }
.btn:hover { background:transparent; color:var(--bone); }
.btn.ghost { background:transparent; color:var(--bone); border-color:rgba(233,224,207,.4); }
.btn.ghost:hover { border-color:var(--bone); }
.btn:focus-visible, a:focus-visible { outline:2px solid #c0603a; outline-offset:3px; }
.about { max-width:66ch; margin:80px auto 0; font-size:1.18rem; line-height:1.65; color:#d9cfbd; }
.about p { margin-bottom:18px; }
.socials { display:flex; gap:12px; justify-content:center; margin-bottom:16px; }
.ico { display:inline-grid; place-items:center; width:46px; height:46px; border-radius:50%; border:1px solid rgba(233,224,207,.3); color:var(--bone); }
.ico svg { fill:currentColor; } .ico:hover { border-color:var(--bone); background:rgba(233,224,207,.06); }
@media (max-width:860px) { .tiles { grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:520px) { .tiles { grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; } }
@media (max-width:720px) { .release { grid-template-columns:1fr; gap:24px; padding:18px; } .mast { padding:52px 20px 22px; } .about { margin-top:44px; font-size:1.1rem; } }
@media (prefers-reduced-motion: no-preference) {
  body::after { animation:grain 1s steps(5) infinite; }
  @keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(-4%,3%)} 50%{transform:translate(3%,-2%)} 75%{transform:translate(-2%,-4%)} 100%{transform:translate(0,0)} }

  @keyframes flicker { 0%,91%,100%{opacity:1} 92%{opacity:.35} 93%{opacity:.95} 94.5%{opacity:.2} 96%{opacity:1} }
  .line { opacity:0; animation:fadein 3s 1.2s ease forwards; }
  @keyframes fadein { to { opacity:1; } }
}

/* one player for the page: bottom bar */
body.has-bar footer { padding-bottom:120px; }
.bar { position:fixed; left:0; right:0; bottom:0; z-index:30; background:rgba(46,36,30,.96); backdrop-filter:blur(14px);
       -webkit-backdrop-filter:blur(14px); border-top:1px solid rgba(233,224,207,.22); color:var(--bone);
       box-shadow:0 -14px 40px rgba(0,0,0,.45); }
.bar[hidden] { display:none; }
.bar-main { max-width:1040px; margin:0 auto; padding:10px 16px 12px; display:grid; align-items:center; gap:4px 10px;
            grid-template-columns:minmax(0,1fr) auto auto auto; grid-template-areas:"info ctrl list close" "seek seek seek seek"; }
.bar .bar-info { grid-area:info; width:auto; height:auto; border-radius:8px; display:flex; align-items:center; gap:14px;
            padding:4px 8px 4px 4px; margin-left:-4px; text-align:left; font:inherit; min-width:0; justify-self:start; max-width:100%; }
.bar-art { width:56px; height:56px; border-radius:4px; object-fit:cover; flex:none; }
.bar-meta { display:flex; flex-direction:column; min-width:0; }
.bar-title { font-size:1.1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-sub { font-size:.9rem; color:var(--ash); font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:4px; }
.bar-count { font-style:normal; color:#c0603a; }
.bar .bar-sub .chev { width:18px; height:18px; fill:#c0603a; flex:none; transition:transform .2s ease; }
.bar.open .bar-sub .chev { transform:rotate(180deg); }
.bar-close { grid-area:close; }
.bar-ctrl { grid-area:ctrl; display:flex; align-items:center; gap:6px; }
.bar button { background:none; border:0; color:var(--bone); cursor:pointer; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; }
.bar button svg { width:22px; height:22px; fill:currentColor; }
.bar button:hover { background:rgba(233,224,207,.08); }
.bar .play { width:48px; height:48px; background:var(--bone); color:var(--bg); }
.bar .play:hover { background:#fff; }
.bar .i-pause, .bar.playing .i-play { display:none; } .bar.playing .i-pause { display:block; }
.bar-tracks { grid-area:list; }
.bar.open .bar-tracks { color:#c0603a; }
.bar-seek { grid-area:seek; display:flex; align-items:center; gap:12px; }
.bar-seek input { flex:1; accent-color:#c0603a; height:18px; }
.bar-time { font-size:.85rem; color:var(--ash); min-width:84px; text-align:right; font-variant-numeric:tabular-nums; }
.bar-list-wrap { display:none; max-height:min(52vh, 460px); overflow:auto; border-bottom:1px solid rgba(233,224,207,.16); background:rgba(0,0,0,.12); }
.bar.open .bar-list-wrap { display:block; }
.bar-list-head { max-width:1040px; margin:0 auto; padding:16px 16px 8px; display:flex; align-items:center; gap:14px; }
.bar-list-head img { width:64px; height:64px; border-radius:4px; object-fit:cover; }
.bar-list-head > div { flex:1; min-width:0; }
.bar-list-kicker { color:#c0603a; letter-spacing:.2em; text-transform:uppercase; font-size:.72rem; }
.bar-list-title { font-size:1.35rem; line-height:1.2; }
.bar-list-meta { color:var(--ash); font-size:.9rem; font-style:italic; }
.bar-list { list-style:none; max-width:1040px; margin:0 auto; padding:0 8px 10px; }
.bar-list button { width:100%; height:auto; border-radius:6px; display:grid; grid-template-columns:32px 1fr auto; place-items:center start; gap:10px; padding:9px 8px; text-align:left; font:inherit; }
.bar-list .d { justify-self:end; }
.bar-list button.on { color:#e8a07f; }
.bar-list .n, .bar-list .d { color:var(--ash); font-variant-numeric:tabular-nums; font-size:.9rem; }
.tile.active img { outline-color:#c0603a; }
@media (max-width:560px) {
  .bar-main { gap:4px 4px; padding:8px 10px 10px; }
  .bar-art { width:48px; height:48px; }
  .bar .bar-info { gap:10px; }
  .bar-tracks { display:none !important; }
  /* phones: show at most five tracks, scroll for the rest (fade hints there's more) */
  .bar-list-wrap { max-height:none; overflow:visible; }
  .bar-list { max-height:190px; overflow-y:auto; overscroll-behavior:contain; padding-bottom:0; margin-bottom:8px;
              -webkit-mask-image:linear-gradient(#000 calc(100% - 22px), transparent); mask-image:linear-gradient(#000 calc(100% - 22px), transparent); }
  .bar-list button { padding:8px 8px; }
  #bar-prev, #bar-next { display:none; }
  .bar-time { min-width:72px; }
}