/* Sarah Lee: shared foundation. Two typefaces (Fraunces, Geist), no capitals-only type. */

:root {
  --espresso: #15100e;
  --night: #0a0706;
  --cream: #f4ede3;
  --cream-2: #ebe2d5;
  --paper: #fbf7f1;
  --ink: #1b1412;
  --ink-2: #4a3d37;
  --muted: #8a7a70;
  --line: rgba(27, 20, 18, 0.12);
  --line-dark: rgba(244, 237, 227, 0.14);

  --rose: #eba795;
  --rose-deep: #b4553f;
  --caramel: #c47a3e;
  --sage: #9fc4a6;
  --short: #e0634c;
  --long: #4f9a6e;

  --serif: "Fraunces", ui-serif, Georgia, serif;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --gutter: clamp(20px, 4vw, 56px);
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: clip;
  font-variant-numeric: lining-nums;
}
img, canvas, svg, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--rose); color: var(--espresso); }
:focus-visible { outline: 2px solid var(--caramel); outline-offset: 4px; }

/* Masks used by splitChars / splitWords */
.cm, .wm { display: inline-block; overflow: hidden; vertical-align: top; }
.cm { padding: 0.06em 0.03em 0.14em; margin: -0.06em -0.03em -0.14em; }
.wm { padding-bottom: 0.1em; margin-bottom: -0.1em; }
.ci, .wi { display: inline-block; will-change: transform; }

/* Hidden until motion.js reveals them; shown anyway if scripts fail to load */
.js:not(.motion-failed) [data-reveal],
.js:not(.motion-failed) [data-split] { visibility: hidden; }

.foot {
  background: var(--espresso);
  color: rgba(244, 237, 227, 0.55);
  padding: 32px var(--gutter);
  font-size: 14px;
}
.foot__row { max-width: 1180px; margin: 0 auto; display: flex; justify-content: space-between; gap: 16px; }
.foot__name { font-family: var(--serif); font-size: 18px; color: var(--cream); }
.foot a { color: var(--cream); border-bottom: 1px solid var(--line-dark); transition: border-color 0.3s; }
.foot a:hover { border-color: var(--cream); }