@font-face {
  font-family: Bodoni;
  src: url('/fonts/bodoni-moda.ttf') format('truetype');
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: JetBrains;
  src: url('/fonts/jetbrains-mono.ttf') format('truetype');
  font-weight: 100 800;
  font-display: swap;
}
:root {
  --paper: #f6f4ed;
  --ink: #070c09;
  --muted: #65675e;
  --line: #d4d4c9;
  --button-text: #f6f4ed;
  --light-logo: block;
  --dark-logo: none;
  color-scheme: light;
  font-family: JetBrains, monospace;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #070c09;
    --ink: #f0eee5;
    --muted: #acb1a7;
    --line: #343c35;
    --button-text: #070c09;
    --light-logo: none;
    --dark-logo: block;
    color-scheme: dark;
  }
}
[data-theme="dark"] {
  --paper: #070c09;
  --ink: #f0eee5;
  --muted: #acb1a7;
  --line: #343c35;
  --button-text: #070c09;
  --light-logo: none;
  --dark-logo: block;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
p { margin: 0; }
.page { max-width: 1600px; min-height: 100svh; margin-inline: auto; padding: 28px 24px 20px; display: flex; flex-direction: column; }
.header { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.brand { flex-shrink: 0; }
.brand img { width: 160px; height: auto; }
.logo-light { display: var(--light-logo); }
.logo-dark { display: var(--dark-logo); }
.hello-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 12px; white-space: nowrap; }
.hello-link:hover, .footer a:hover { text-decoration: underline; text-underline-offset: 5px; }
main { flex: 1; padding-top: 78px; }
.eyebrow { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hero { margin-top: 24px; }
h1 { margin: 0; font-family: Bodoni, Georgia, serif; font-weight: 400; font-optical-sizing: auto; font-size: clamp(45px, 11.8vw, 80px); letter-spacing: -.065em; line-height: 1.08; }
h1 span { color: var(--muted); }
.introduction { margin-top: 34px; max-width: 370px; }
.introduction p { font-size: 16px; line-height: 1.8; letter-spacing: -.035em; }
.contact { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 27px; min-height: 56px; width: fit-content; padding: 16px 20px; background: var(--ink); color: var(--button-text); font-size: 12px; transition: opacity 180ms; }
.contact:hover { opacity: .76; }
.focus { margin-top: 64px; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 24px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.footer { padding-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; font-size: 10px; line-height: 1.7; color: var(--muted); }
.footer a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; }
.skip-link { position: absolute; left: 24px; top: 0; transform: translateY(-150%); background: var(--ink); color: var(--button-text); padding: 12px; z-index: 2; }
.skip-link:focus { transform: translateY(0); }
@media (min-width: 700px) {
  .page { padding: 40px 48px 24px; }
  .brand img { width: 190px; }
  main { display: flex; flex-direction: column; justify-content: center; padding-top: 76px; }
  .hero { margin-top: 32px; }
  h1 { font-size: clamp(80px, 10vw, 150px); }
  .focus { margin-top: 70px; gap: 40px; }
}
@media (min-width: 1100px) {
  .page { padding: 48px 5.5vw 24px; }
  .hero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; align-items: end; }
  h1 { font-size: clamp(90px, 8.6vw, 138px); }
  .introduction { margin: 0 0 10px; }
  .introduction p { font-size: 15px; }
  .focus { margin-top: 84px; padding-block: 24px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero { animation: appear 650ms ease-out both; }
  @keyframes appear { from { opacity: 0; } to { opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }