/* rose social. — base: reset, type, utilities. */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--cream);
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  background: var(--cream);
  color: var(--burgundy);
  font-family: var(--f-sans);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 0; }
ul, ol { list-style: none; padding: 0; }
[hidden] { display: none !important; }
::selection { background: var(--butter); color: var(--burgundy); }

:focus { outline: none; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

/* ---------- type ---------- */
h1, h2, h3, .serif {
  font-family: var(--f-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.04;
}
h1 em, h2 em, h3 em, .serif em, blockquote em { font-style: italic; }
.t-display { font-size: var(--t-display); line-height: 1.02; }
.t-h2 { font-size: var(--t-h2); }
.t-h3 { font-size: var(--t-h3); line-height: 1.1; }

.eyebrow, .label {
  font-family: var(--f-sans);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
}
.copy { max-width: 60ch; }
.copy p + p { margin-top: 1em; }
.muted { color: var(--muted); }
.mark {
  font-family: var(--f-mark);
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 16px; top: 16px; z-index: 500;
  padding: 14px 20px;
  background: var(--burgundy); color: var(--cream);
  font-size: var(--t-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }
