/* artist.partners — element defaults, type roles and section rhythm
   Load order is tokens -> base -> layout -> components -> responsive;
   the media queries come last so they can override component rules.
   See README.md for the rules this system holds to. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-16);
  line-height: var(--lh-prose);
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }

/* ========================== TYPE ROLES ========================= */
.display { font-family: var(--font-display); font-weight: 400; font-size: var(--t-96); line-height: .95; letter-spacing: -.01em; margin: 0; }
.h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-56); line-height: 1.05; margin: 0; }
.h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-34); line-height: 1.3; margin: 0; text-wrap: balance; }
.body { font-size: var(--t-16); margin: 0; max-width: var(--measure); }
.body + .body { margin-top: var(--s-1); }
.label { font-family: var(--font-mono); font-size: var(--t-12); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0; }
.caption { font-size: var(--t-14); color: var(--muted); margin: 0; max-width: 28em; }

/* ========================== SECTIONS ========================== */
.section { padding-block: var(--s-3); }
.section--tight { padding-block: var(--s-2); }
.rule-top { border-top: 1px solid var(--rule); }
.stack-1 { display: flex; flex-direction: column; gap: var(--s-1); }

.deep {
  background: var(--ground-deep);
  --rule: var(--rule-deep);
  --muted: #8A8A8A;
  --ink: var(--ink-on-deep);
  --highlight: #141414;
  --accent: #DD3D37;
  color: var(--ink-on-deep);
}