/* andrewko.ca — rebuild of the former Carrd page.
   Restrained by intent: one accent, one rule weight, a single narrow measure.
   Sora sets the name and section labels, Inter carries everything else. */

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/sora.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/inter.woff2') format('woff2');
}

:root {
  --bg: #fbfbf9;
  --ink: #15181a;
  --ink-soft: #5c6360;
  --ink-faint: #8b918e;
  --accent: #2f6f5e;
  --rule: rgba(21, 24, 26, 0.1);
  --underline: rgba(21, 24, 26, 0.22);
  --measure: 33rem;
}

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

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

body {
  margin: 0;
  padding: clamp(3rem, 11vh, 7rem) 1.5rem clamp(2.5rem, 8vh, 5rem);
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.page {
  max-width: var(--measure);
  margin: 0 auto;
}

/* ---- masthead ---- */

.masthead {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 2.75rem;
}

.portrait {
  width: 4.5rem;
  height: 4.5rem;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  /* No border or shadow: the ring was doing decorative work the rest of the
     page doesn't ask for. */
}

.masthead-text { min-width: 0; }

h1 {
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 4.5vw, 1.875rem);
  letter-spacing: -0.021em;
  line-height: 1.15;
  margin: 0;
}

.credential {
  font-weight: 400;
  color: var(--ink-faint);
  letter-spacing: 0;
}

.eyebrow {
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.4;
}

/* ---- prose ---- */

.prose p {
  margin: 0;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* ---- sections ---- */

.work, .contact {
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.section-label {
  margin: 0 0 1.1rem;
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.work-list, .link-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---- current work ---- */

/* The four ventures carry their real brand marks in their own colours, so the
   row reads as a set of things that exist rather than a styled list. The marks
   therefore do NOT take the hover accent — recolouring someone's logo on hover
   would be wrong, and the underline already carries the affordance. */

.work-list li + li { margin-top: 1.35rem; }

.work-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  text-decoration: none;
  color: inherit;
}

.mark {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.16rem;
}

.work-text { min-width: 0; }

.work-name {
  display: block;
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.006em;
  /* The underline is the only affordance, so it stays visible at rest and
     simply gains contrast on hover. */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--underline);
  transition: color 130ms ease, text-decoration-color 130ms ease;
}

.work-note {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.work-item:hover .work-name,
.work-item:focus-visible .work-name {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* ---- elsewhere ---- */

.link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.link-list a {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 130ms ease;
}

.link-list a:hover,
.link-list a:focus-visible { color: var(--accent); }

/* ---- foot ---- */

.foot {
  margin-top: 3.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

.foot p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (max-width: 26rem) {
  .masthead { gap: 1rem; }
  .portrait { width: 3.75rem; height: 3.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* 404 page: reuses the page shell, needs its own paragraph rule since the
   masthead/prose structure doesn't apply there. */
.notfound {
  margin: 0.75rem 0 0;
  color: var(--ink-soft);
}
.notfound a { color: var(--accent); text-underline-offset: 3px; }