@font-face {
  font-family: Jost;
  src: url("/fonts/jost-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: Jost;
  src: url("/fonts/jost-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light dark;
  --surface: #F4F6F5;      /* whiteboard */
  --ink: #1C1F22;          /* black marker */
  --ink-muted: #5E6469;
  --stroke: #5E6469;
  --stroke-alpha: .36;
  --ghost-alpha: .05;
  --accent: #8A2B2B;       /* red marker (oxblood) */
  --portrait-bg: #DDE2E0;
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface: #1B2120;    /* slate */
    --ink: #E6E9E4;        /* chalk */
    --ink-muted: #9BA39E;
    --stroke: #C9D0CB;
    --stroke-alpha: .26;
    --accent: #E7959B;
    --portrait-bg: #2A3230;
  }
}

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--surface); color: var(--ink);
  font-family: Jost, "Futura", "Century Gothic", system-ui, sans-serif;
  min-height: 100vh;
}

main {
  position: relative; z-index: 1;
  max-width: 560px; margin: 0 auto;
  padding: 30vh 24px 72px;
}
.id { display: flex; align-items: center; gap: 22px; }
.portrait {
  display: block; flex: none; width: 80px; height: 80px;
  border-radius: 50%; overflow: hidden; background: var(--portrait-bg);
}
.portrait img { display: block; width: 100%; height: 100%; }
/* Spaced capitals, after the cover lettering Alex picked; the markup stays "Alex Baker". */
h1 {
  font-size: 46px; line-height: 1.05; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; text-wrap: balance;
}
.about { margin-top: 28px; font-size: 20px; line-height: 1.55; max-width: 30em; }
.about span { display: block; color: var(--ink-muted); }
.contact { margin-top: 24px; font-size: 20px; line-height: 1.55; }

a {
  color: inherit;
  text-decoration: underline 1px color-mix(in srgb, var(--accent) 60%, transparent);
  text-underline-offset: 5px;
  transition: color .15s, text-decoration-color .15s;
}
a:hover { color: var(--accent); text-decoration-color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

@media (max-width: 520px) {
  main { padding-top: 17vh; }
  .id { flex-direction: column; align-items: flex-start; gap: 18px; }
  h1 { font-size: 34px; }
}

/* ---- whiteboard ---- */
.board {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; display: none;
}
/* Phone strips sit at their natural height against the top and bottom edges. */
.board--top { bottom: auto; height: auto; }
.board--bottom { top: auto; height: auto; }
/* The margin line stretches from under the top strip to above the bottom strip. */
.board--link {
  top: calc(100vw * 110 / 440); bottom: calc(100vw * 140 / 390);
  left: calc(100vw * 382 / 390 - 5px); right: auto; width: 10px; height: auto;
}
.board--link svg { display: block; width: 100%; height: 100%; }
@media (min-width: 1000px) and (min-aspect-ratio: 3/2) {
  .board--wide { display: block; }
}
@media (max-width: 440px) and (max-aspect-ratio: 1/1) and (min-height: 620px) {
  .board--top { display: block; }
  .board--link { display: block; }
  .board--bottom { display: block; }
}
@media (forced-colors: active), print {
  .board { display: none !important; }
}

.board path {
  fill: none; stroke: var(--stroke); stroke-opacity: var(--stroke-alpha);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.board path.scrib { stroke-width: 1.4; }
.board--top path, .board--link path, .board--bottom path { stroke-opacity: calc(var(--stroke-alpha) * .7); }
.board path.mark { stroke: var(--accent); stroke-opacity: .85; stroke-width: 2; }

/* ghost: the same drawing, never erased, barely there */
.ghost path { stroke-opacity: var(--ghost-alpha); }
.ghost path.mark { stroke-opacity: calc(var(--ghost-alpha) * 1.6); }

.live path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: draw 30s cubic-bezier(.45, .05, .4, 1) infinite;
  animation-delay: calc(var(--i) * .32s);
}
.live path.scrib { animation-delay: calc(var(--i) * .32s + .55s); }
@keyframes draw {
  0%        { stroke-dashoffset: 1; opacity: 1; }
  4%        { stroke-dashoffset: 0; opacity: 1; }
  68%       { stroke-dashoffset: 0; opacity: 1; }
  75%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .live path { animation: none; stroke-dashoffset: 0; }
}

/* board:delays:start */
.d0 { --i: 0; }
.d1 { --i: 1; }
.d2 { --i: 2; }
.d3 { --i: 3; }
.d4 { --i: 4; }
.d5 { --i: 5; }
.d6 { --i: 6; }
.d7 { --i: 7; }
.d8 { --i: 8; }
.d9 { --i: 9; }
.d10 { --i: 10; }
.d11 { --i: 11; }
.d12 { --i: 12; }
.d13 { --i: 13; }
.d14 { --i: 14; }
.d15 { --i: 15; }
.d16 { --i: 16; }
.d17 { --i: 17; }
.d18 { --i: 18; }
.d19 { --i: 19; }
.d20 { --i: 20; }
.d21 { --i: 21; }
/* board:delays:end */