/* 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; }

/* Anchor targets, :target jumps and the browser's restored scroll position all
   land at the top of the viewport, which the fixed nav covers. This keeps them
   clear of it — without it a restored position clips a display heading. */
html { scroll-padding-top: calc(var(--nav-h) + var(--s-1)); }

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); }

/* The one reversal in the page. It takes nothing from the scheme directly —
   every value comes from a -deep token, so the block flips whole. See the
   deep section notes in tokens.css. */
.deep {
  background: var(--ground-deep);
  --ground: var(--ground-deep);
  --rule: var(--rule-deep);
  --muted: var(--muted-deep);
  --ink: var(--ink-on-deep);
  --highlight: var(--highlight-deep);
  --accent: #DD3D37;         /* the deeper red, legible on black and on Bone */
  --logo-filter: var(--logo-filter-deep);
  --logo-blend: var(--logo-blend-deep);
  color: var(--ink-on-deep);
}