:root {
  --black: #0c0b0a;
  --black-soft: #151311;
  --ivory: #e8e2d8;
  --muted: #918a80;
  --line: #302c27;
  --warm: #a18469;
  --display: "Cormorant Garamond", Georgia, serif;
  --interface: "Inter", Arial, sans-serif;
  --page-padding: clamp(1.25rem, 4.6vw, 4.75rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body { margin: 0; background: var(--black); color: var(--ivory); font-family: var(--interface); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.sr-only { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.skip-link { background: var(--ivory); color: var(--black); left: 1rem; padding: .75rem 1rem; position: fixed; top: -4rem; z-index: 100; }
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 1px solid var(--ivory); outline-offset: 4px; }