/* James Baxter — jamesbaxter.com
   Static single-page portfolio. Design tokens per design handoff (v2).
   No build step; served as static HTML/CSS. */

:root {
  --acc: #3ddc84;
  --bg: #0e1114;
  --card: #12161a;
  --hair: #1e242a;      /* hairline / grid borders */
  --edge: #2a323a;      /* pill / ghost borders */
  --edge-hi: #3a444d;   /* ghost border hover */
  --t-primary: #eef2f5;
  --t-strong: #e4e9ed;
  --t-body: #aeb8c0;
  --t-muted: #8b96a0;
  --t-faint: #4a545d;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: #c8d0d7;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 40px; }

/* --- utility (from prototype support runtime) --- */
.fx { display: flex; }
.gap16 { gap: 16px; }
.gap24 { gap: 24px; }

/* --- nav --- */
.nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 26px 0; border-bottom: 1px solid var(--hair);
}
.nav a { color: var(--t-muted); text-decoration: none; font-size: 13px; transition: color 150ms ease; }
.nav a:hover { color: var(--t-primary); }
.navlinks { display: flex; gap: 28px; }
.brand { color: var(--t-primary); font-size: 14px; }
.brand .cur { color: var(--acc); animation: cursor-blink 1.06s infinite; }
@keyframes cursor-blink { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .brand .cur { animation: none; } }

/* --- hero --- */
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); flex: none; }
.kicker { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--t-muted); margin-top: 88px; }
.hero {
  font-size: 46px; line-height: 1.2; font-weight: 600; color: var(--t-primary);
  letter-spacing: -0.02em; margin: 22px 0 0 0; max-width: 880px; text-wrap: pretty;
}
.hero .acc { color: var(--acc); }
.hero-sec .actions { margin-top: 40px; }

/* --- body copy --- */
.body { font-size: 16.5px; line-height: 1.75; color: var(--t-body); max-width: 680px; margin: 0; }
.body strong { color: var(--t-strong); font-weight: 500; }
.mt20 { margin-top: 20px; }

/* --- sections --- */
.sec { margin-top: 110px; }
.label {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--acc); margin: 0 0 28px 0;
}

/* --- what i do grid --- */
.grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--hair); border: 1px solid var(--hair);
}
.cell { background: var(--card); padding: 32px; }
.cell h3 { font-size: 19px; color: var(--t-primary); font-weight: 500; margin: 14px 0 10px 0; }
.cell p { font-size: 14.5px; line-height: 1.65; color: var(--t-muted); margin: 0; }
.num { font-size: 12px; color: var(--t-faint); }

/* --- selected work --- */
.work { border-top: 1px solid var(--hair); }
.workrow {
  display: grid; grid-template-columns: 56px 1fr; gap: 24px;
  padding: 26px 0; border-bottom: 1px solid var(--hair); align-items: baseline;
}
.workrow p { font-size: 16px; line-height: 1.7; color: var(--t-body); margin: 0; max-width: 760px; }
.workrow p strong { color: var(--t-strong); font-weight: 500; }

/* --- inline links in prose (nav, footer and buttons style their own) --- */
.body a, .workrow p a {
  color: var(--acc); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--acc) 32%, transparent);
  transition: border-color 150ms ease;
}
.body a:hover, .workrow p a:hover { border-bottom-color: var(--acc); }

/* --- buttons --- */
.btn {
  display: inline-block; background: var(--acc); color: #0e1114; font-weight: 600;
  font-size: 15px; padding: 14px 28px; border-radius: 4px; text-decoration: none;
  transition: filter 150ms ease;
}
.btn:hover { filter: brightness(1.1); }
.ghost {
  display: inline-block; color: #c8d0d7; font-size: 15px; padding: 13px 24px;
  border: 1px solid var(--edge); border-radius: 4px; text-decoration: none;
  transition: border-color 150ms ease, color 150ms ease;
}
.ghost:hover { border-color: var(--edge-hi); color: var(--t-primary); }

/* --- about credentials --- */
.creds { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.cred { font-size: 13px; color: var(--t-muted); border: 1px solid var(--edge); border-radius: 99px; padding: 7px 14px; }

/* --- contact --- */
#contact .actions { margin-top: 28px; }

/* --- footer --- */
.foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 36px 0; border-top: 1px solid var(--hair);
  color: var(--t-faint); font-size: 13px; margin-top: 110px;
}
.foot a { color: var(--t-muted); text-decoration: none; transition: color 150ms ease; }
.foot a:hover { color: var(--t-primary); }

/* --- responsive --- */
@media (max-width: 720px) {
  .wrap { padding: 0 24px; }
  .navlinks { display: none; }
  .kicker { margin-top: 64px; }
  .hero { font-size: 34px; }
  .sec { margin-top: 72px; }
  .grid { grid-template-columns: 1fr; }
  .foot { margin-top: 72px; }
}

@media (max-width: 420px) {
  .foot { flex-direction: column; gap: 16px; align-items: flex-start; }
}

/* --- entrance animation (progressive enhancement; only with JS + motion-safe) --- */
@media (prefers-reduced-motion: no-preference) {
  /* blinking block caret trailing the kicker line while it types out */
  .js .kicker-text.is-typing::after {
    content: "";
    display: inline-block;
    width: 0.5em;
    height: 1em;
    margin-left: 2px;
    transform: translateY(0.12em);
    background: var(--acc);
    animation: cursor-blink 1.06s infinite;
  }

  /* hero + buttons rise in (fill 'both' holds them hidden during the delay,
     so there is no flash; if animations are unsupported they stay visible) */
  .js .hero { animation: rise 0.55s ease 0.7s both; }
  .js .hero-sec .actions { animation: rise 0.55s ease 1.0s both; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}