@font-face { font-family: 'Figtree'; font-weight: 400; font-display: swap; src: url('/fonts/figtree-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 600; font-display: swap; src: url('/fonts/figtree-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 800; font-display: swap; src: url('/fonts/figtree-latin-800-normal.woff2') format('woff2'); }

:root {
  --night: #080b16;
  --panel: #10152a;
  --line: rgba(148, 163, 214, 0.18);
  --text: #eef1fb;
  --soft: #a7b0cc;
  --moon: #6d86f5;
  --wrenly: #5fd8e6;
  --turncoat: #f0b95a;
}

* { box-sizing: border-box; }

html { overflow-x: clip; scroll-behavior: smooth; background: var(--night); }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  color: var(--text);
  font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  background:
    radial-gradient(1000px 640px at 78% -8%, rgba(70, 92, 220, 0.26), transparent 70%),
    var(--night);
}

a { color: inherit; }
a:focus-visible { outline: 2px solid var(--moon); outline-offset: 4px; border-radius: 6px; }
img { display: block; max-width: 100%; height: auto; }

.top,
main,
.foot { width: min(1120px, 100%); margin-inline: auto; padding-inline: 2rem; }

.top { padding-block: 1.5rem; }
.logo { display: inline-block; }
.logo img { width: 200px; height: auto; }

.hero {
  position: relative;
  padding-block: clamp(4rem, 11vw, 8rem) clamp(4rem, 9vw, 6.5rem);
}

/* The logo's eclipse, large. */
.eclipse {
  position: absolute;
  top: clamp(1.5rem, 5vw, 3.5rem);
  right: clamp(-1rem, 3vw, 3rem);
  width: clamp(220px, 34vw, 400px);
  height: auto;
}

h1,
.lede,
.scroll { position: relative; }

h1 {
  margin: 0;
  max-width: 13ch;
  font-size: clamp(2.75rem, 7.4vw, 5.25rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
h1 em { font-style: normal; color: var(--moon); }

.lede {
  max-width: 34rem;
  margin: 1.5rem 0 0;
  color: var(--soft);
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
}

.scroll {
  display: inline-block;
  margin-top: 1.75rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--moon);
  padding-bottom: 0.15rem;
}
.scroll:hover { color: var(--moon); }

.projects { padding-bottom: 5rem; scroll-margin-top: 1.5rem; }

.heading { margin-bottom: 1.75rem; }
h2 { margin: 0; font-size: clamp(1.75rem, 3.6vw, 2.25rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.heading p { margin: 0.4rem 0 0; color: var(--soft); }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }

.card {
  --accent: var(--moon);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.card-wrenly { --accent: var(--wrenly); }
.card-turncoat { --accent: var(--turncoat); }

.shot { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--line); }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.card:hover .shot img { transform: scale(1.03); }

.body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 1.5rem; }

.badge {
  padding: 0.15rem 0.6rem;
  color: var(--accent);
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

h3 { margin: 0.8rem 0 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.kind { margin: 0.1rem 0 0; color: var(--accent); font-size: 0.9375rem; font-weight: 600; }
.body > p:not(.kind) { margin: 0.75rem 0 1.25rem; color: var(--soft); }

.go {
  margin-top: auto;
  padding: 0.55rem 1.1rem;
  color: var(--night);
  background: var(--accent);
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  transition: filter 0.15s ease;
}
.go:hover { filter: brightness(1.12); }
.go:focus-visible { outline-color: var(--text); }

.foot { padding-block: 0 2.5rem; color: var(--soft); font-size: 0.875rem; }
.foot p { margin: 0; padding-top: 1.5rem; border-top: 1px solid var(--line); }

@media (max-width: 760px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  /* Above the heading here: there's no room beside it. */
  .hero { padding-top: 11rem; }
  .eclipse { top: 0.5rem; right: 0; width: 150px; }
}

@media (max-width: 480px) {
  .top,
  main,
  .foot { padding-inline: 1rem; }
  .logo img { width: 165px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .shot img,
  .go { transition: none; }
}