/* Fonts are self-hosted (SIL OFL 1.1, see /fonts/LICENSE-*.txt). No third-party requests. */
@font-face {
  font-family: "Libre Caslon Text";
  src: url("/fonts/libre-caslon-text-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Text";
  src: url("/fonts/libre-caslon-text-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f2eee5;
  --ink: #17150f;
  --muted: #6f695d;
  --rule: #d8d1c1;
  --signal: #d4541a;
  --serif: "Libre Caslon Text", ui-serif, Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gutter: clamp(16px, 4.5vw, 56px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c0d0b;
    --ink: #ebe7dc;
    --muted: #8c877b;
    --rule: #26271f;
    --signal: #ffb02e;
  }
}

* { box-sizing: border-box; }
html {
  background: var(--bg);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.45;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--signal); color: var(--bg); }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }

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

.page {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(28px, 5vh, 56px);
  padding:
    max(var(--gutter), env(safe-area-inset-top))
    max(var(--gutter), env(safe-area-inset-right))
    max(var(--gutter), env(safe-area-inset-bottom))
    max(var(--gutter), env(safe-area-inset-left));
  max-width: 1440px;
  margin: 0 auto;
}

.bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}
footer.bar {
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
footer.bar a { text-decoration: none; }
.foot-links { display: flex; gap: 20px; }
footer.bar a:hover { color: var(--ink); }

main { align-self: center; }
.home { grid-template-rows: 1fr auto; }
/* Phones and tablets: start at the top, about 1.5x the side margin. Desktop: centered. */
.home main { align-self: start; padding-top: calc(var(--gutter) * 0.5); }
@media (min-width: 900px) { .home main { align-self: center; padding-top: 0; } }

.kicker {
  margin: 0 0 clamp(8px, 1.5vw, 16px);
  font-size: min(0.75rem, calc((100vw - 2 * var(--gutter)) / 27.5));
  white-space: nowrap;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.name {
  margin: 0;
  font-weight: 400;
  font-size: clamp(3rem, 16.5vw, 6.5rem);
  line-height: 1.05; /* the Caslon J swash would touch the B below */
  letter-spacing: -0.025em;
}
.name span { display: inline-block; }
/* Desktop: keep the name on one line and the whole hero within the viewport. */
@media (min-width: 900px) {
  .name { font-size: min(10rem, calc((min(100vw, 1440px) - 2 * var(--gutter)) / 9.1), 19vh); line-height: 0.98; }
}

/* The oscilloscope line runs edge to edge, outside the text column. */
.scope {
  position: relative;
  margin: clamp(12px, 3vw, 28px) calc(50% - 50vw);
  height: clamp(88px, min(15vw, 16vh), 180px);
}
.scope canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.lvl {
  position: absolute;
  font-size: 0.68rem;
  color: var(--muted);
  transform: translateY(-140%);
}
.lvl-0 { top: 80%; left: max(var(--gutter), calc(50vw - 720px + var(--gutter))); }
.lvl-1 { top: 34%; right: max(var(--gutter), calc(50vw - 720px + var(--gutter))); }

.lower {
  display: grid;
  gap: clamp(20px, 4vw, 48px);
}
@media (min-width: 880px) {
  .lower { grid-template-columns: 1fr 1.1fr; align-items: end; }
  .lower .bio { max-width: 54ch; }
}

.claim {
  margin: 0;
  font-size: clamp(1.9rem, 5vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.01em;
}
.claim em { color: var(--signal); }

.bio {
  margin: 0 0 0.6em;
  max-width: 34ch;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.55;
  color: var(--ink);
  opacity: 0.86;
}

.bio:last-of-type { margin-bottom: 20px; }
.bio a { text-decoration-color: var(--signal); text-underline-offset: 3px; }
.bio a:hover { color: var(--signal); }

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
}
.links a {
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid var(--ink);
  transition: color .2s, border-color .2s;
}
.links a:hover { color: var(--signal); border-color: var(--signal); }
.nojs { text-transform: none; letter-spacing: 0; color: var(--muted); padding: 6px 0; }
/* The mail link only works with JS, so it only shows with JS. */
html:not(.js) a[data-mail] { display: none; }


/* Text pages (privacy, 404) */
.prose { max-width: 66ch; align-self: start; }
.prose h1 { font-weight: 400; font-size: clamp(2.6rem, 9vw, 4.5rem); line-height: 1; margin: 0 0 24px; }
.prose h2 { font-weight: 400; font-size: 1.6rem; margin: 36px 0 8px; }
.prose p, .prose li { color: var(--ink); opacity: 0.88; }
.prose a { text-decoration-color: var(--signal); text-underline-offset: 3px; }
.prose .mono { font-size: 0.8rem; color: var(--muted); }
header.bar a { text-decoration: none; }
header.bar a:hover { color: var(--ink); }