:root{
    --bg: #181818;
    --surface: #222222;
    --text: #ffffff;
    --muted: #aaaaaa;
    --max-width: 600px;
    --gutter: 1rem;
    --logo-max-h: 100px;
    --logo-max-h-sm: 80px;
}

/*
    Global box-sizing
    Use border-box everywhere to make sizing/padding calculations intuitive.
*/
*, *::before, *::after { box-sizing: border-box; }

/*
    Base page styles
    Sets background, base text color and fallback font stack.
*/
html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: monospace, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Header layout
   Small top/bottom padding and centered content for the single-page layout.
*/
header {
    padding: 0.25rem 1rem 0.15rem;
    text-align: center;
}

/* Logo sizing
   Constrain the height so the logo scales predictably. Width remains auto.
*/
.logo {
    display: block;
    margin: 0 auto 0.5rem;
    max-height: var(--logo-max-h);
    width: auto;
}

/* Responsive tweak for small screens */
@media (max-width: 480px) {
    .logo { max-height: var(--logo-max-h-sm); }
}

/* Release blurb styling */
.release {
    margin: 0;
    padding: 0;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.1;
}

/* Main heading (site title) */
h1 {
    font-size: 2rem;
    margin: 0;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Section container
   Constrain content width and add padding/background for contrast.
*/
section {
    margin: 1.5rem auto;
    max-width: var(--max-width);
    padding: var(--gutter);
    background: var(--surface);
}

/* Album/image styling: responsive full-width image */
.album-cover { display: block; width: 100%; height: auto; margin: 0 auto; }

/* Section headings */
section h3 { margin-top: 0; margin-bottom: 0.5rem; font-size: 1.25rem; font-weight: 700; }

/* Small vertical rhythm for direct children of sections */
section > * { margin-top: 0; margin-bottom: 0.5rem; }
section > *:last-child { margin-bottom: 0; }

/* List reset for plain-looking lists */
ul { list-style: none; padding: 0; margin: 0; }
ul li { margin-bottom: 0.5rem; font-size: 1rem; }

/* Link styles: keep links visible on dark background */
a { color: var(--text); text-decoration: underline; font-weight: normal; }
a:hover, a:focus { color: var(--muted); }

/* Visible focus outline for accessibility (keyboard users) */
a:focus { outline: none; box-shadow: 0 0 0 3px rgba(170,170,170,0.12); border-radius: 3px; }

/* accessible visually-hidden helper */
/*
    Utility: visually-hidden (screen-reader only)
    Use this class to provide content only to assistive technologies.
*/
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}