.hero { padding: var(--space-10) 0 0; }

.hero .wordmark { margin-bottom: var(--space-7); }

.hero .kicker {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-micro);
  color: var(--dim);
  margin-bottom: var(--space-6);
}
.hero .kicker .sep { color: var(--line-hi); margin: 0 var(--space-2); }

.hero h1 {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-tight);
  color: var(--text);
  max-width: 22ch;
}
.hero h1 .accent { color: var(--accent); text-transform: uppercase; }
.hero h1 .tail { white-space: nowrap; }
.hero h1 .caret {
  display: inline-block;
  width: 0.55ch;
  height: 1em;
  margin-left: 0.15em;
  vertical-align: -0.14em;
  background: var(--accent);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.hero .tagline {
  margin-top: var(--space-5);
  max-width: 56ch;
  font-size: 16px;
  color: var(--dim);
  line-height: var(--leading-relaxed);
}
.hero .tagline b { color: var(--text); font-weight: var(--weight-medium); }

.hero .reading {
  margin-top: var(--space-7);
  font-size: var(--text-sm);
  color: var(--dim);
}
.hero .reading + .reading { margin-top: var(--space-2); }
.hero .reading .lbl {
  display: inline-block;
  min-width: 12ch;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-micro);
  color: var(--accent);
  margin-right: var(--space-3);
}
.hero .reading b { color: var(--text); font-weight: var(--weight-medium); }

.hero .elsewhere {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--dim);
}
.hero .elsewhere .sep { color: var(--line-hi); margin: 0 var(--space-3); }
.hero .elsewhere a { display: inline-flex; align-items: center; }
.hero .elsewhere .icon {
  width: 1em;
  height: 1em;
  margin-right: 0.4em;
  fill: currentColor;
}

.projects { list-style: none; }

.project { border-top: 1px solid var(--line); }
.project:first-child { border-top: 0; }

.project a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-5) var(--space-6) var(--space-6) 0;
  color: inherit;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}
.project a > * { transition: transform var(--dur-base) var(--ease-out); }

.project a:focus-visible {
  text-decoration: none;
  background: var(--accent-14);
  box-shadow: var(--rail-accent);
}
@media (hover: hover) and (pointer: fine) {
  .project a:hover {
    text-decoration: none;
    background: var(--accent-14);
    box-shadow: var(--rail-accent);
  }
  .project a:hover > * { transform: translateX(var(--space-5)); }
}
.project a:active {
  text-decoration: none;
  background: var(--accent-14);
  box-shadow: var(--rail-accent);
  transform: var(--press-scale);
}

.project .name {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  color: var(--accent);
  overflow-wrap: anywhere;
}
.project .name .mark {
  font-size: 0.85em;
  color: var(--dim);
  transition: color var(--dur-fast) var(--ease-out);
}
.project a:hover .name { color: var(--accent-hi); }
.project a:hover .name .mark { color: var(--accent-hi); }

.project .lede {
  display: block;
  margin-top: var(--space-3);
  color: var(--text);
  line-height: var(--leading-normal);
}
.project .lede b { color: var(--accent); font-weight: var(--weight-medium); }

.project .body {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-base);
  color: var(--dim);
  line-height: var(--leading-normal);
}
.project .body { max-width: 68ch; }

.project .chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-5);
}
.project .chips i {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  font-style: normal;
  letter-spacing: var(--tracking-micro);
  line-height: 1;
  color: var(--accent-hi);
  background: var(--accent-14);
  border: 1px solid var(--accent-28);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  white-space: nowrap;
}

.sec-foot {
  border-top: 1px solid var(--line);
  padding-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--dim);
}

.posts { list-style: none; }

.posts li { border-top: 1px solid var(--line); }
.posts li:first-child { border-top: 0; }

.posts a {
  display: block;
  padding: var(--space-4) var(--space-5) var(--space-4) 0;
  color: inherit;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}
.posts .title,
.posts .blurb { transition: transform var(--dur-base) var(--ease-out); }

.posts a:focus-visible {
  text-decoration: none;
  background: var(--accent-14);
  box-shadow: var(--rail-accent);
}
@media (hover: hover) and (pointer: fine) {
  .posts a:hover {
    text-decoration: none;
    background: var(--accent-14);
    box-shadow: var(--rail-accent);
  }
  .posts a:hover .title,
  .posts a:hover .blurb { transform: translateX(var(--space-5)); }
}
.posts a:active {
  text-decoration: none;
  background: var(--accent-14);
  box-shadow: var(--rail-accent);
  transform: var(--press-scale);
}

.posts .head {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
}
.posts .title {
  color: var(--accent);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  transition: color var(--dur-fast) var(--ease-out);
}
.posts a:hover .title { color: var(--accent-hi); }

.posts .blurb {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-base);
  color: var(--dim);
  line-height: var(--leading-normal);
}

.posts .stamp {
  margin-left: auto;
  white-space: nowrap;
  font-size: var(--text-xs);
  color: var(--dim);
}
.posts .stamp .sep { margin: 0 var(--space-2); }

.posts-note {
  font-size: var(--text-base);
  color: var(--dim);
  padding: var(--space-5) 0;
}

@media (prefers-reduced-motion: reduce) {
  .hero h1 .caret { animation: none; }
  .posts a:active, .project a:active { transform: none; }
  .posts a:hover .title, .posts a:hover .blurb,
  .project a:hover > * { transform: none; }
}

@media (max-width: 640px) {
  .hero { padding-top: var(--space-9); }
  .posts .head { display: block; }
  .posts .stamp { display: block; margin-top: var(--space-1); }
  .hero h1 { max-width: none; }
  .project a { padding: var(--space-5) 0 var(--space-6); }
}

.more {
  display: block;
  width: 100%;
  padding: var(--space-4) 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--dim);
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.more:hover,
.more:focus-visible { color: var(--accent); }
.more .arrow { margin-left: var(--space-2); color: var(--accent); }

@media (max-width: 459px) {
  .hero .reading .lbl {
    display: block;
    min-width: 0;
    margin-right: 0;
  }
}