* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}

:root {
  --u: 4px;
  --color-sepia: #f7f2ed;
  --color-brown: #946e47;
  --color-lichen: #dbdc87;
  --color-lichen-2: #8c8e0b;
  --color-bg: var(--color-sepia);
  --color-text: var(--color-brown);
  --color-border: var(--color-brown);

  --serif: "Times New Roman", serif;
  --sans: Helvetica, sans-serif;
  --text-sm: calc(var(--u) * 5);
  --text-md: calc(var(--u) * 6);
  --line-md: 1.5;
  --text-body: var(--text-md) / var(--line-md) var(--serif);
  --text-button: var(--text-sm) / var(--line-md) var(--sans);
  --gap: calc(var(--u) * 6);
  --pad-page: calc(var(--u) * 10);
  --pad-sm: calc(var(--u) * 2);

  background-color: var(--color-bg);
  color: var(--color-text);
  font: var(--text-body);

  @media (max-width: 700px) {
    --pad-page: calc(var(--u) * 6);
  }
}

a {
  color: var(--color-text);
}

canvas {
  display: block;
}

.text-body {
  font: var(--text-body);
}

.text-button {
  font: var(--text-button);
  text-transform: uppercase;
}

.sans {
  font-family: var(--sans);
}

.uppercase {
  text-transform: uppercase;
}

.hstack {
  display: flex;
  align-items: center;
}

.vstack {
  display: flex;
  flex-direction: column;
}

.spacer {
  flex-grow: 1;
}

.gap {
  gap: var(--gap);
}

.navitem-end {
  justify-self: end;
}

.pad {
  padding: calc(var(--u) * 5);
}

.pad-page-t {
  padding-top: var(--pad-page);
}

.pad-page-b {
  padding-bottom: var(--pad-page);
}

.pad-page-v {
  padding-top: var(--pad-page);
  padding-bottom: var(--pad-page);
}

.pad-page-h {
  padding-left: var(--pad-page);
  padding-right: var(--pad-page);
}

.home-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content 1fr min-content;
  grid-template-areas:
    "header"
    "main"
    "footer";
  height: 100dvh;
}

.home-grid-header {
  grid-template-area: header;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pad-page) var(--pad-page) 0;
  flex-wrap: wrap;
  gap: calc(var(--u) * 3);

  @media (max-width: 700px) {
    padding: var(--pad-page);
    border-bottom: 0.5px solid var(--color-border);
    justify-content: center;
  }
}

.home-grid-header nav {
  @media (max-width: 700px) {
    width: 100%;
    justify-content: center;
    gap: calc(var(--u) * 4);
  }
}

.home-grid-header nav a {
  text-decoration: none;
  font-size: calc(var(--u) * 4);
  transition: all 0.2s ease;
  text-transform: none;

  @media (max-width: 700px) {
    font-size: calc(var(--u) * 4.5);
  }
}

.home-grid-header nav a:hover {
  color: #6b4e2f;
  text-decoration: underline;
}

.home-grid-footer {
  grid-template-area: footer;
}

.home-grid-main {
  grid-area: main;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.home-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "start end";
  column-gap: var(--gap);
  row-gap: var(--pad-sm);
  justify-items: start;
  padding: 0 var(--pad-page) var(--pad-page);

  @media (max-width: 700px) {
    border-top: 0.5px solid var(--color-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
    padding: var(--pad-page);
  }
}

.home-nav > .navitem-start {
  grid-area: start;

  @media (max-width: 700px) {
    width: 100%;
    display: flex;
    justify-content: center;
  }
}

.home-nav > .navitem-end {
  grid-area: end;

  @media (max-width: 700px) {
    display: flex;
    justify-content: center;
    font-size: calc(var(--u) * 3);
  }
}

.hero-text {
  font-family: var(--serif);
  font-size: 15vw;
  letter-spacing: -0.012em;
  line-height: 0.8;
  text-align: left;
  align-self: center;
  padding-bottom: calc(var(--u) * 8);
}

.fill {
  width: 100%;
  height: 100%;
}

.text-body {
  font: var(--text-body);
}

.nodec {
  text-decoration: none;
}

.button-pill {
  --height: calc(var(--u) * 15);
  --border-width: 2px;
  --line-height: var(--height);
  background-color: var(--color-lichen);
  border-radius: var(--height);
  color: var(--color-lichen-2);
  display: block;
  font: var(--text-button);
  line-height: var(--line-height);
  height: var(--height);
  padding: 0 24px;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 200ms ease-out;

  @media (max-width: 700px) {
    width: 100%;
  }
}

.button-pill:hover {
  background-color: var(--color-lichen-2);
  color: var(--color-lichen);
}

.wordmark {
  display: block;
  width: auto;
  height: calc(var(--u) * 10);

  @media (max-width: 700px) {
    width: auto;
    height: calc(var(--u) * 8);
  }
}

#canvas-container {
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(34, 34, 34, 0) 0%,
    rgba(0, 0, 0, 1) 15%,
    rgba(0, 0, 0, 1) 85%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(34, 34, 34, 0) 5%,
    rgba(0, 0, 0, 1) 15%,
    rgba(0, 0, 0, 1) 85%,
    rgba(0, 0, 0, 0) 95%
  );
}

canvas {
  opacity: 0;
  visibility: hidden;
  filter: blur(8px);
}

canvas[data-live] {
  visibility: visible;
  animation: fadeIn 2500ms forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    filter: blur(128px);
  }

  10% {
    opacity: 0;
    filter: blur(16px);
  }

  100% {
    opacity: 1;
    filter: none;
  }
}

/* Text pages (/about/, /contact/). Same header/footer chrome as the home
   grid, but the page scrolls instead of being locked to the viewport. */
.page-stack {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* Prose runs at a smaller scale than the home-page chrome: --text-md (24px)
   is sized for nav and hero, not for reading. */
.prose {
  flex: 1;
  max-width: calc(var(--u) * 148);
  padding: calc(var(--u) * 9) var(--pad-page) var(--pad-page);
  font-family: var(--serif);
  font-size: calc(var(--u) * 4.25);
  line-height: 1.65;
}

.prose h1 {
  font-family: var(--serif);
  font-size: calc(var(--u) * 8);
  font-weight: normal;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: calc(var(--u) * 5);
}

.prose h2 {
  font-family: var(--sans);
  font-size: calc(var(--u) * 3);
  font-weight: normal;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-top: calc(var(--u) * 9);
  margin-bottom: calc(var(--u) * 3);
}

.prose p,
.prose address {
  font-style: normal;
  margin-bottom: calc(var(--u) * 3.5);
  max-width: calc(var(--u) * 130);
}

.prose address {
  white-space: pre-line;
}

.prose a {
  text-underline-offset: 0.18em;
}

.prose-meta {
  font-family: var(--sans);
  font-size: calc(var(--u) * 3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-top: calc(var(--u) * -3);
}