/* Personal site home
   Kept separate from the product styles so the homepage can evolve safely. */
.home-page {
  --home-canvas: #f7f6f2;
  --home-text: #1b1b19;
  --home-muted: #706f6a;
  --home-line: rgba(27, 27, 25, 0.13);
  --home-hover: rgba(27, 27, 25, 0.035);
  --home-focus: #586979;
  --home-tag: rgba(27, 27, 25, 0.055);
  --home-tag-paid: #7b4b17;
  --home-tag-paid-bg: #f4e5cf;
  --home-tag-free: #356546;
  --home-tag-free-bg: #dfede3;
  --home-tag-wip: #405f76;
  --home-tag-wip-bg: #e1e9ef;
  display: flex;
  min-height: 100dvh;
  flex-direction: column;
  background: var(--home-canvas);
  color: var(--home-text);
}

:root.dark .home-page {
  --home-canvas: #1c1c1a;
  --home-text: #f1f0ec;
  --home-muted: #aaa8a1;
  --home-line: rgba(241, 240, 236, 0.14);
  --home-hover: rgba(241, 240, 236, 0.035);
  --home-focus: #aebdca;
  --home-tag: rgba(241, 240, 236, 0.08);
  --home-tag-paid: #e5be8d;
  --home-tag-paid-bg: rgba(166, 104, 42, 0.22);
  --home-tag-free: #a8d4b4;
  --home-tag-free-bg: rgba(68, 130, 86, 0.23);
  --home-tag-wip: #b2cde0;
  --home-tag-wip-bg: rgba(78, 119, 148, 0.24);
}

.home-page .site-header {
  background-color: color-mix(in srgb, var(--home-canvas) 88%, transparent);
  border-color: var(--home-line);
}

.home-page .header-container,
.home-page .footer {
  width: min(1120px, calc(100% - 3rem));
  max-width: none;
}

.home-page .logo-link:hover .app-name {
  text-decoration: none;
}

.home-page .app-name {
  color: var(--home-text);
  letter-spacing: -0.015em;
}

.home-page .toggle-theme {
  width: 2rem;
  height: 2rem;
  justify-content: center;
  border-radius: 6px;
  transition: background-color 180ms ease, opacity 180ms ease;
}

.home-page .toggle-theme:hover {
  background: var(--home-hover);
}

.home-page .toggle-theme:focus-visible {
  outline: 2px solid var(--home-focus);
  outline-offset: 3px;
}

.home-main {
  width: min(1120px, calc(100% - 3rem));
  margin: 0 auto;
  flex: 1;
}

.home-intro {
  padding: clamp(5.5rem, 11vw, 8rem) 0 clamp(5rem, 9vw, 7rem);
}

.home-eyebrow,
.section-label,
.app-number,
.app-meta {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.home-eyebrow {
  margin-bottom: 1.5rem;
  color: var(--home-muted);
}

.home-intro h1 {
  max-width: 52rem;
  margin: 0;
  color: var(--home-text);
  font-family: "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(3.25rem, 6.2vw, 5.35rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 0.98;
  text-wrap: balance;
}

.app-index {
  padding-bottom: 1rem;
}

.section-label {
  margin: 0 0 1rem;
  color: var(--home-muted);
}

.app-list {
  border-top: 1px solid var(--home-line);
}

.app-project {
  display: grid;
  grid-template-columns: 2.75rem 7rem minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3.25rem);
  align-items: center;
  margin: 0 -1rem;
  padding: clamp(2.5rem, 4.5vw, 3.25rem) 1rem;
  color: var(--home-text);
  text-align: left;
  text-decoration: none;
  border-bottom: 1px solid var(--home-line);
  transition: background-color 180ms ease;
}

.app-number {
  align-self: start;
  padding-top: 0.35rem;
  color: var(--home-muted);
  font-variant-numeric: tabular-nums;
}

.app-project .app-icon {
  width: 7rem;
  height: 7rem;
  margin: 0;
  border-radius: 22%;
  box-shadow: none;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.app-content,
.app-heading,
.app-description,
.app-meta {
  display: block;
}

.app-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.app-heading strong {
  font-size: clamp(2rem, 3.6vw, 3.15rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
}

.app-arrow {
  color: var(--home-muted);
  font-size: 1.3rem;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), color 180ms ease;
}

.app-description {
  max-width: 36rem;
  margin-top: 0.85rem;
  color: var(--home-muted);
  font-size: clamp(0.98rem, 1.6vw, 1.1rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.app-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1.2rem;
  color: var(--home-muted);
}

.app-tag {
  padding: 0.28rem 0.55rem;
  background: var(--home-tag);
  border-radius: 999px;
  line-height: 1;
}

.app-tag--paid {
  color: var(--home-tag-paid);
  background: var(--home-tag-paid-bg);
}

.app-tag--free {
  color: var(--home-tag-free);
  background: var(--home-tag-free-bg);
}

.app-tag--wip {
  color: var(--home-tag-wip);
  background: var(--home-tag-wip-bg);
}

.app-project:hover {
  background: var(--home-hover);
}

.app-project:hover .app-icon {
  transform: translateY(-2px) scale(1.015);
}

.app-project:hover .app-arrow {
  color: var(--home-text);
  transform: translate(3px, -3px);
}

.app-project:focus-visible {
  outline: 2px solid var(--home-focus);
  outline-offset: 4px;
}

.home-page .footer {
  margin-top: 4.5rem;
  color: var(--home-muted);
  border-color: var(--home-line);
}

@media (max-width: 680px) {
  .home-page .header-container,
  .home-page .footer,
  .home-main {
    width: min(100% - 2rem, 1120px);
  }

  .home-intro {
    padding: 4.25rem 0 4.75rem;
  }

  .home-intro h1 {
    font-size: clamp(2.75rem, 13vw, 4.4rem);
  }

  .app-project {
    grid-template-columns: 4.75rem minmax(0, 1fr);
    gap: 1rem;
    margin: 0 -0.5rem;
    padding: 2rem 0.5rem 2.25rem;
  }

  .app-number {
    display: none;
  }

  .app-project .app-icon {
    width: 4.75rem;
    height: 4.75rem;
  }

  .app-heading strong {
    font-size: 1.8rem;
  }

  .app-description {
    margin-top: 0.65rem;
    font-size: 0.94rem;
  }

  .app-meta {
    margin-top: 0.9rem;
  }

  .home-page .footer {
    margin-top: 3rem;
  }
}

@media (max-width: 380px) {
  .app-project {
    grid-template-columns: 4.25rem minmax(0, 1fr);
  }

  .app-project .app-icon {
    width: 4.25rem;
    height: 4.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-project,
  .app-project .app-icon,
  .app-project .app-arrow {
    transition: none;
  }
}