:root {
  --paper: #f1eee5;
  --paper-2: #e7e1d4;
  --ink: #1a1c19;
  --muted: #77786f;
  --line: rgba(26, 28, 25, 0.2);
  --terracotta: #ae4d32;
  --moss: #707866;
  --sand: #c8bca9;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Helvetica Neue", Arial, sans-serif;
  --shell: min(1440px, calc(100vw - 64px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); overflow-x: hidden; cursor: default; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
::selection { background: var(--terracotta); color: white; }
.section-shell { width: var(--shell); margin-inline: auto; }
.section-label { margin: 0; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; }
.grain { position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
.cursor { width: 18px; height: 18px; border: 1px solid var(--ink); border-radius: 50%; position: fixed; top: -9px; left: -9px; z-index: 200; pointer-events: none; display: grid; place-items: center; transition: width .25s, height .25s, margin .25s, background .25s, color .25s; }
.cursor span { font-size: 10px; line-height: 1; }
.cursor.is-active { width: 52px; height: 52px; margin: -17px; background: var(--terracotta); color: white; border-color: var(--terracotta); }

.site-header { width: var(--shell); height: 92px; margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; position: absolute; z-index: 50; left: 50%; transform: translateX(-50%); top: 0; border-bottom: 1px solid rgba(26,28,25,.14); }
.brand { display: inline-flex; flex-direction: column; width: max-content; line-height: .9; }
.brand span { font-family: var(--serif); font-size: 28px; letter-spacing: -.04em; }
.brand small { font-size: 7px; letter-spacing: .32em; margin-top: 5px; }
.desktop-nav { display: flex; gap: 32px; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.desktop-nav a { position: relative; }
.desktop-nav a::after { content: ""; position: absolute; height: 1px; left: 0; bottom: -5px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s; }
.desktop-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.header-cta { justify-self: end; font-size: 11px; text-transform: uppercase; letter-spacing: .11em; display: flex; gap: 10px; align-items: center; }
.header-cta span { font-size: 17px; }
.menu-button { display: none; border: 0; background: transparent; padding: 10px; justify-self: end; z-index: 61; }
.menu-button span { display: block; width: 24px; height: 1px; margin: 6px 0; background: currentColor; transition: transform .35s ease; }
.menu-button[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-button[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.mobile-menu { display: none; }