/* ==========================================================================
   base.css — design tokens, reset, base typography, page grain

   The palette and type are taken from the Sofie Chie press kit:
   warm near-black, signal red for headings, coral for display type, and
   one bold geometric sans throughout.
   ========================================================================== */

:root {
  /* Sampled from the press kit */
  --bg: #151312;          /* page */
  --bg-deep: #0c0b0a;     /* bio and contact sections */
  --bg-footer: #060505;   /* darker still, to close the page */
  --surface: #1d1a18;     /* raised blocks */
  --line: #2e2a28;

  --text: #ffffff;
  --muted: #8a8683;

  --red: #c10606;         /* section headings — large type only */
  --red-bright: #dd2e2d;  /* standfirst, hover */
  /* Small red type. The press kit's #c10606 only reaches 2.9:1 on this
     background, below the 4.5:1 WCAG AA asks of text this size; this is
     the nearest red that clears the large-text threshold. */
  --red-text: #e03127;
  --coral: #fe7967;       /* display type, links, accents */

  /* The press kit is set in Subjectivity (Zeune Ink) + Minion Pro.
     Subjectivity is self-hosted — drop the files into css/fonts/ and
     css/fonts.css picks them up. Outfit, from Google Fonts, is the
     stand-in until then. The press kit sets its body copy in Minion Pro,
     but the page reads as one voice in Subjectivity throughout. */
  --display: 'Subjectivity', 'Outfit', system-ui, -apple-system, sans-serif;

  --maxw: 1100px;
  --gutter: 24px;

  --radius: 12px;      /* cards, media, photo frames */
  --radius-sm: 8px;    /* buttons, rows */

  color-scheme: dark;
}

/* --- Reset ---------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.65 var(--display);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
}

h1, h2, h3 {
  font-weight: 800;
  letter-spacing: -.01em;
}

::selection {
  background: var(--coral);
  color: var(--bg-deep);
}

:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
}

/* --- Film grain over the whole page --------------------------------------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .045;
  mix-blend-mode: screen;
  background-image: url("../img/noise.svg");
}

/* --- Shared bits ---------------------------------------------------------- */

/* Red section heading: BIO, MUSIC, LIVE, CONTACT */
.h-section {
  margin: 0 0 28px;
  font: 800 clamp(34px, 5.5vw, 58px)/1 var(--display);
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--red);
}

/* Small caption above or below a block */
.label {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}