/* ==========================================================================
   Classical Music Rocks – site stylesheet
   One dark screen: the supplied CLASSICAL MUSIC ROCKS graphic on #111111, and a footer line.
   Plain CSS, sectioned for easy editing: 1. Tokens  2. Base  3. Hero  4. Footer  5. Utility pages
   ========================================================================== */

/* 1. Tokens ------------------------------------------------------------------ */
:root {
  color-scheme: dark;
  --bg: #111111;          /* the page ground; the graphic's background is the same value, so it has no edge */
  --text: #ffffff;
  --text-2: #8f8f8f;      /* muted, 5.5:1 on the ground */
  --accent: #00f3dc;      /* Moon Ink turquoise: links and focus, 13.4:1 on the ground */
  --sans: system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --footer-room: 4.5rem;  /* the footer's height, kept clear below the hero so both fit the first screen */
}

/* 2. Base ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 0.9375rem; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
h1, p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--text); color: var(--bg); }

/* 3. Hero ----------------------------------------------------------------------------
   The graphic is a 2000 × 2000 square with the words in its middle (78% wide, 42% tall) and #111111
   around them. It is centred and sized to fit the first screen: never taller than the window minus the
   footer, never wider than the window. On a desktop the height decides the size, on a phone the width. */
main { flex: 1 1 auto; display: grid; place-items: center; }
.hero { display: grid; place-items: center; width: 100%; }
.hero img { width: auto; height: auto; max-width: 100%; max-height: calc(100vh - var(--footer-room)); max-height: calc(100svh - var(--footer-room)); }

/* 4. Footer ------------------------------------------------------------------------------ */
.site-footer { padding: 1.5rem var(--gutter); text-align: center; font-size: 0.875rem; color: var(--text-2); }
.site-footer p { margin: 0; text-wrap: balance; }

/* 5. Utility pages (404) ------------------------------------------------------------------- */
.utility { text-align: center; padding: var(--gutter); }
.utility h1 { font-size: 1.25rem; font-weight: 600; }
.utility p { margin-top: 1rem; }