/* music.vesselborn.com. Same palette and type as vesselborn.com, the Codex, the Chronicle and the shop. */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/bebas-neue-latin-400-normal.woff2') format('woff2'); }

:root {
  --ink: #050506; --panel: #0d0d0f; --panel-hi: #121215; --rule: #1f1f23;
  --text: #cfcfcf; --dim: #8a8a90; --bright: #ececec; --brass: #8b7355; --brass-hi: #b39a76;
  --measure: 36rem;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --display: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--ink); color: var(--text); font: 500 1.1875rem/1.7 var(--serif); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
body.playing-bar { padding-bottom: 5.5rem; }
main { flex: 1; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--bright); color: var(--ink); padding: .5rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; }

.site-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: .35rem 1.9rem; padding: .95rem 1rem; background: rgba(5,5,6,.9); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 10; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: Georgia, 'Times New Roman', serif; }
.site-nav a { color: var(--dim); text-decoration: none; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--bright); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem; }
.eyebrow { font-family: var(--display); font-size: .95rem; letter-spacing: .28em; color: var(--brass-hi); }
.sec { padding: 4.5rem 0; }
.sec + .sec { border-top: 1px solid var(--rule); }
.sec-h { font-weight: 500; font-size: clamp(1.7rem, 3vw, 2.2rem); line-height: 1.15; color: var(--bright); margin: 0 0 1.2rem; }
.lede { max-width: var(--measure); font-size: 1.2rem; }
.more { display: inline-block; margin-top: 1.6rem; color: var(--brass-hi); text-decoration: none; border-bottom: 1px solid rgba(179,154,118,.4); padding-bottom: 1px; }
.more:hover { color: var(--bright); border-color: var(--bright); }
.btn { display: inline-block; padding: .8rem 1.7rem; border: 1px solid var(--brass); color: var(--bright); background: transparent; text-decoration: none; font: 600 1.02rem/1.2 var(--serif); letter-spacing: .04em; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.btn:hover { background: var(--brass); color: var(--ink); }
.btn-quiet { border-color: #3a3a40; color: var(--text); }
.btn-quiet:hover { background: transparent; border-color: var(--brass-hi); color: var(--bright); }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

/* Streaming links */
.listen-on { margin-top: 1.4rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.2rem; font-size: 1rem; }
.listen-on span { font-family: var(--display); letter-spacing: .24em; color: var(--dim); font-size: .85rem; }
.listen-on a { color: var(--brass-hi); text-decoration: none; border-bottom: 1px solid rgba(179,154,118,.35); }
.listen-on a:hover { color: var(--bright); border-color: var(--bright); }

/* Home page of the music site */
.m-hero { padding: 5rem 0 3.5rem; border-bottom: 1px solid var(--rule); background: radial-gradient(ellipse at 20% 0%, rgba(139,115,85,.16), transparent 60%); }
.m-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 3rem; align-items: center; }
.m-cover { width: 300px; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--rule); box-shadow: 0 30px 60px rgba(0,0,0,.5); }
.m-title { font-family: var(--display); font-weight: 400; font-size: clamp(3rem, 8vw, 5.5rem); letter-spacing: .06em; line-height: 1; color: var(--bright); margin: .5rem 0 1.2rem; }

.trks { list-style: none; border-top: 1px solid var(--rule); }
.trk { display: grid; grid-template-columns: 2.6rem 56px minmax(0, 1fr) auto auto; align-items: center; gap: 1rem; padding: .8rem .6rem; border-bottom: 1px solid var(--rule); transition: background .15s; }
.trk:hover, .trk.is-current { background: var(--panel); }
.trk-play { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%; color: var(--dim); }
.trk-play svg { width: 1.15rem; height: 1.15rem; fill: currentColor; display: none; }
.trk-n { font-family: var(--display); font-size: 1.15rem; letter-spacing: .08em; }
.trk:hover .trk-n, .trk.is-current .trk-n { display: none; }
.trk:hover:not(.is-playing) .trk-play .i-play, .trk.is-current:not(.is-playing) .trk-play .i-play { display: block; }
.trk.is-playing .trk-play .i-pause { display: block; }
.trk.is-current .trk-play { color: var(--brass-hi); }
.trk-art { width: 56px; height: 56px; object-fit: cover; background: var(--panel-hi); }
.trk-meta { min-width: 0; display: flex; flex-direction: column; }
.trk-title { color: var(--bright); text-decoration: none; font-size: 1.2rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trk-title:hover { color: var(--brass-hi); }
.trk-by { color: var(--dim); font-size: .98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trk-dur { color: var(--dim); font-variant-numeric: tabular-nums; font-size: 1rem; }

/* One track */
.one-grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 3rem; align-items: start; }
.one-art { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--rule); background: var(--panel); }
.one-title { font-weight: 500; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.08; color: var(--bright); margin: .5rem 0 .6rem; }
.one-by { color: var(--brass-hi); font-size: 1.25rem; }
.one-facts { color: var(--dim); font-size: 1rem; margin-top: .2rem; }
.one-about { max-width: var(--measure); margin-top: 2rem; }
.one-about p + p { margin-top: 1rem; }
.one-play .l-pause, .one.is-playing .one-play .l-play { display: none; }
.one.is-playing .one-play .l-pause { display: inline; }

/* Player bar */
.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: rgba(13,13,15,.96); border-top: 1px solid var(--rule); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.bar-inner { max-width: 1080px; margin: 0 auto; padding: .7rem 1.5rem; display: grid; grid-template-columns: auto auto auto 44px minmax(8rem, 15rem) auto minmax(0, 1fr) auto auto 6.5rem; align-items: center; gap: .9rem; }
.bar-btn { width: 2.3rem; height: 2.3rem; display: grid; place-items: center; color: var(--text); border-radius: 50%; }
.bar-btn:hover { color: var(--bright); }
.bar-btn svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.bar-play { width: 2.8rem; height: 2.8rem; border: 1px solid var(--brass); color: var(--bright); }
.bar-play:hover { background: var(--brass); color: var(--ink); }
.bar-play .i-pause, .bar.is-playing .bar-play .i-play { display: none; }
.bar.is-playing .bar-play .i-pause { display: block; }
.bar-art { width: 44px; height: 44px; object-fit: cover; }
.bar-meta { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.bar-title { color: var(--bright); font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-by { color: var(--dim); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-time, .bar-dur { color: var(--dim); font-size: .9rem; font-variant-numeric: tabular-nums; }
.bar-seek { width: 100%; accent-color: var(--brass-hi); height: 4px; cursor: pointer; }

.site-foot { border-top: 1px solid var(--rule); padding: 2.4rem 1.5rem 2.8rem; color: var(--dim); font-size: .98rem; }
.foot-inner { max-width: 1080px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; justify-content: space-between; align-items: baseline; }
.site-foot a { color: var(--dim); text-decoration: none; }
.site-foot a:hover { color: var(--bright); }
.foot-links, .social { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }

@media (max-width: 820px) {
  .m-grid { grid-template-columns: 1fr; }
  .m-cover { display: none; }
  .one-grid { grid-template-columns: 1fr; gap: 2rem; }
  .one-art { max-width: 420px; }
  .bar-inner { grid-template-columns: auto auto auto minmax(0, 1fr) auto; grid-template-areas: "prev play next meta mute" "seek seek seek seek seek"; padding: .6rem 1rem .7rem; gap: .4rem .7rem; }
  .bar-mute { grid-area: mute; }
  .bar-vol { display: none; }
  .bar-btn[data-prev] { grid-area: prev; } .bar-play { grid-area: play; } .bar-btn[data-next] { grid-area: next; }
  .bar-meta { grid-area: meta; }
  .bar-art, .bar-time, .bar-dur { display: none; }
  .bar-seek { grid-area: seek; }
  body.playing-bar { padding-bottom: 7rem; }
}
@media (max-width: 620px) {
  body { font-size: 1.125rem; }
  .site-nav { gap: .3rem 1.1rem; }
  .sec { padding: 3.2rem 0; }
  .m-hero { padding: 3.5rem 0 2.5rem; }
  .wrap { padding: 0 1.1rem; }
  .trk { grid-template-columns: 2.2rem 48px minmax(0, 1fr) auto auto; gap: .5rem; padding: .7rem .2rem; }
  .trk-art { width: 48px; height: 48px; }
  .trk-play { width: 2.2rem; height: 2.2rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.m-dir { color: var(--dim); font-size: 1rem; margin-top: .6rem; }
.one-dir { color: var(--dim); font-size: 1rem; margin-top: .1rem; }
.one-codex { margin-top: 1.4rem; color: var(--dim); font-size: 1rem; }
.one-codex a { color: var(--brass-hi); text-decoration: none; border-bottom: 1px solid rgba(179,154,118,.35); }
.one-codex a:hover { color: var(--bright); border-color: var(--bright); }
.one-by a, .m-hero .lede a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(179,154,118,.35); }
.one-by a:hover, .m-hero .lede a:hover { color: var(--bright); border-color: var(--bright); }

/* Release notice */
.m-soon { margin-top: 1.1rem; color: var(--brass-hi); font-size: 1.02rem; font-style: italic; max-width: var(--measure); }
.one-soon { margin-top: 1.2rem; color: var(--dim); font-size: 1rem; font-style: italic; }

/* Volume */
.bar-mute .i-mute, .bar.is-muted .bar-mute .i-vol { display: none; }
.bar.is-muted .bar-mute .i-mute { display: block; }
.bar-vol { --fill: 100%; width: 100%; height: 4px; cursor: pointer; -webkit-appearance: none; appearance: none; background: linear-gradient(to right, var(--brass-hi) var(--fill), #34343a var(--fill)); border-radius: 2px; }
.bar-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--bright); border: 0; }
.bar-vol::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--bright); border: 0; }
.bar-vol::-moz-range-track { background: transparent; }

/* Lore on a track page */
.lore { background: var(--panel); }
.lore-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 3rem; align-items: start; }
.lore-text { max-width: 40rem; }
.lore-text p + p { margin-top: 1.1rem; }
.lore-text .one-codex { margin-top: 1.8rem; }

/* Track info button and side panel */
.trk-info { width: 2.3rem; height: 2.3rem; display: grid; place-items: center; color: var(--dim); border-radius: 50%; }
.trk-info svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }
.trk-info:hover { color: var(--brass-hi); }
body.drawer-open { overflow: hidden; }
.drawer { position: fixed; inset: 0; z-index: 40; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.6); opacity: 0; transition: opacity .2s; }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(30rem, 100%); background: var(--panel); border-left: 1px solid var(--rule); transform: translateX(100%); transition: transform .22s ease-out; display: flex; flex-direction: column; }
.drawer.open .drawer-scrim { opacity: 1; }
.drawer.open .drawer-panel { transform: none; }
.drawer-close { position: absolute; top: .8rem; right: .8rem; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; color: var(--text); border-radius: 50%; background: rgba(5,5,6,.6); z-index: 1; }
.drawer-close:hover { color: var(--bright); }
.drawer-close svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }
.drawer-body { overflow-y: auto; padding: 0 1.8rem 2.4rem; overscroll-behavior: contain; }
.dr-art { width: calc(100% + 3.6rem); max-width: none; margin: 0 -1.8rem 1.6rem; aspect-ratio: 1 / .62; object-fit: cover; border-bottom: 1px solid var(--rule); }
.dr-title { font-weight: 500; font-size: 2rem; line-height: 1.1; color: var(--bright); margin: .4rem 0 .5rem; }
.dr-by { color: var(--brass-hi); font-size: 1.1rem; }
.dr-by a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(179,154,118,.35); }
.dr-facts { color: var(--dim); font-size: .98rem; }
.drawer .btn-row { margin-top: 1.2rem; }
.dr-text { margin-top: 1.6rem; font-size: 1.08rem; }
.dr-h { font-family: var(--display); font-weight: 400; letter-spacing: .24em; font-size: .95rem; color: var(--dim); margin: 1.6rem 0 .5rem; }
.dr-h:first-child { margin-top: 0; }
.dr-text p + p { margin-top: .9rem; }
.dr-play .l-pause, .drawer.is-playing .dr-play .l-play { display: none; }
.drawer.is-playing .dr-play .l-pause { display: inline; }
@media (max-width: 820px) { .lore-grid { grid-template-columns: 1fr; gap: 1rem; } }
@media (max-width: 620px) { .drawer-body { padding: 0 1.2rem 2rem; } .dr-art { width: calc(100% + 2.4rem); margin: 0 -1.2rem 1.4rem; } }
@media (prefers-reduced-motion: reduce) { .drawer-panel, .drawer-scrim { transition: none; } }