@font-face {
  font-family: "Bodoni Moda";
  src: url("/fonts/bodoni-moda.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bodoni Moda";
  src: url("/fonts/bodoni-moda-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --background: #f5efdf;
  --foreground: #1f1a14;
  --foreground-muted: #544b40;
  --foreground-subtle: #857767;
  --surface: #f0e8d7;
  --surface-strong: #e9dfcb;
  --border: #d9cfbd;
  --border-strong: #c4b8a1;
  --brand: #1f1a14;
  --brand-soft: #e8deca;

  --serif: "Bodoni Moda", Didot, "Bodoni 72", "Bodoni MT", Georgia, serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Frame padding, and the wordmark size: as large as the narrower of
     width ("Company" is ~4.4em wide) and height allow. */
  --pad: clamp(1.25rem, 4.5vw, 3.5rem);
  --mark: min(19vw, 28vh, 14rem);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #1f1a14;
    --foreground: #f5efdf;
    --foreground-muted: #cfc4b1;
    --foreground-subtle: #a3968a;
    --surface: #2a241d;
    --surface-strong: #3a3229;
    --border: #3a3229;
    --border-strong: #52483b;
    --brand: #f5efdf;
    --brand-soft: #3a3229;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* One screen. Content is sized to fit the viewport, so the page never scrolls;
   at extreme zoom it scrolls rather than clipping (WCAG reflow). */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: var(--pad);
  background: var(--background);
  color: var(--foreground);
  font-family: var(--serif);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}

::selection {
  background: var(--foreground);
  color: var(--background);
}

/* Top right: the one action. */
body > header {
  justify-self: end;
}

.contact {
  display: inline-block;
  margin: -0.5rem -0.5rem 0 0;
  padding: 0.5rem;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.2;
  color: var(--brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: text-underline-offset 220ms var(--ease-out);
  animation: fade 900ms var(--ease-out) 450ms both;
}

.contact:hover {
  text-underline-offset: 0.16em;
}

/* Bottom left: the stacked wordmark. */
main {
  align-self: end;
}

h1 {
  margin: 0;
  font-weight: 400;
  font-size: var(--mark);
  line-height: 0.86;
  letter-spacing: -0.035em;
}

h1 span {
  display: block;
  animation: settle 1100ms var(--ease-out) both;
}

h1 span + span {
  animation-delay: 90ms;
}

.place {
  margin: 0.3em 0 0 0.04em;
  font-style: italic;
  font-size: calc(var(--mark) * 0.42);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--foreground-muted);
  animation: settle 1100ms var(--ease-out) 180ms both;
}

:focus-visible {
  outline: 2px solid var(--foreground);
  outline-offset: 4px;
  border-radius: 2px;
}

/* The one moment: the wordmark comes into focus as it settles.
   Text stays painted throughout, so it's never hidden from first paint. */
@keyframes settle {
  from {
    filter: blur(14px);
    transform: translateY(0.12em);
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact,
  h1 span,
  .place {
    animation: none;
    transition: none;
  }
}