@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
}

:root {
  /* Amber phosphor on near-black. One saturated colour on the page, spent on
     the email — the only thing here anyone can act on. */
  --bg:    #0b0c0e;
  --ink:   #e4e2dd;
  --dim:   #8f8a82;   /* 5.7:1 on --bg; body-copy grey has to clear AA */
  --mute:  #76726b;   /* 4.1:1 — only ever on the wordmark, which stays above
                         WCAG's large-text threshold, where 3:1 is the bar */
  --amber: #f0a828;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  /* Extra bottom padding pulls the block a little above true centre, which is
     where the eye reads it as centred. */
  padding: 3rem 1.5rem 13vh;

  background: var(--bg);
  color: var(--ink);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
               Consolas, "Liberation Mono", monospace;
  font-size: 16px;
  line-height: 1.55;
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
}

.card { width: 100%; max-width: 30rem; }

/* Two sizes only: the wordmark, and everything else. */

/* Two blocks: the company, then the person. The gap between them is the only
   large space on the page, so the pairing inside each one is unambiguous. */

.mark {
  margin: 0 0 0.3rem;
  /* Floor is 1.5rem, not larger. Measured: at 24px "lightly held, llc" sets
     272px wide, against 280px of usable width on a 320px screen. At a 1.75rem
     floor it is 317px and wraps, stranding "llc" on its own line. */
  font-size: clamp(1.5rem, 6vw, 2.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
/* The legal suffix is not part of the name — it recedes. */
.mark-b { color: var(--mute); }

.trade, .who, .contact {
  margin: 0;
  font-size: 1.0625rem;
}

.trade   { font-size: 1.1875rem; color: var(--dim); }
.who     { margin-top: 1.75rem; font-weight: 600; }

/* Optically matched to .who rather than numerically equal to it. At the same
   17px the email reads larger: saturated amber irradiates against near-black,
   and at 21 characters it runs 214px against the name's 143px. A single pixel
   down is what makes the two look like the same size. */
.contact { margin-top: 0.2rem; font-size: 1rem; }

.mail {
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 168, 40, 0.35);
  padding-bottom: 2px;
  transition: border-color 180ms ease;
}
.mail:hover { border-bottom-color: var(--amber); }
.mail:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 4px;
  border-radius: 2px;
}

/* One quiet gesture on load. CSS-only, so a failed script can never leave the
   page blank — there is no script. */
@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.mark, .trade, .who, .contact {
  animation: rise 620ms cubic-bezier(.2,.7,.3,1) both;
}
/* Delays follow the grouping: the two lines of a block arrive together, the
   second block a beat later. */
.trade   { animation-delay: 60ms; }
.who     { animation-delay: 200ms; }
.contact { animation-delay: 260ms; }

@media (max-width: 32rem) {
  body { padding: 2.5rem 1.25rem 9vh; }
  .who { margin-top: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mark, .trade, .who, .contact { animation: none; }
  .mail { transition: none; }
}