/* Static pages (about, contact) */

.page-title {
  margin: var(--space-8) 0 var(--space-6);
  font-size: var(--text-title);
  font-weight: var(--weight-semibold);
}

.page-intro {
  max-width: var(--width-measure);
}

.page-intro a {
  font-weight: var(--weight-semibold);
}

/* Contact: the opening and section titles are the contribute hub's (contribute.css). The four things to write about
   are an even grid of hairline-topped tiles (2 × 2 from 48rem); the site's own way to help is a soft panel with its
   button on the right. */
.contact-topics {
  display: grid;
  gap: var(--space-8) var(--grid-gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-topics li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--color-border);
}

/* The contribute hub's icon circle; its grid area there (`icon`) doesn't exist here. */
.contact-topics .way-icon {
  grid-area: auto;
}

.contact-topics p {
  margin: var(--space-2) 0 0;
  max-width: var(--width-measure);
}

.contact-topics li:hover .way-icon {
  color: var(--color-on-accent);
  background: var(--color-accent);
}

.contact-direct {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-8);
  background: var(--gradient-panel);
  border-radius: var(--radius-lg);
}

.contact-direct h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
}

.contact-direct p {
  margin: 0;
  max-width: var(--width-measure);
  color: var(--color-text-muted);
}

.contact-direct .button {
  justify-self: start;
}

@media (min-width: 48rem) {
  .contact-topics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-direct {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* About: the opening and section titles are the contribute hub's (contribute.css). Three numbers that count up, the
   story as numbered chapters (number and title beside the text from 48rem), the developers as two cards with a
   portrait in a turning gradient ring and links that sparkle on hover, then the closing band. */

.about-stats {
  display: grid;
  gap: var(--grid-gutter);
  margin: 0 0 var(--space-20);
  padding: 0;
  list-style: none;
}

.about-stats li,
.about-stats a {
  display: grid;
  gap: var(--space-1);
  color: var(--color-text-muted);
}

.about-stats li {
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--color-border);
}

.about-stats a {
  text-decoration: none;
}

.about-stat {
  color: var(--color-accent);
  font-size: var(--text-stat);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-tight);
}

.about-stats a:hover {
  color: var(--color-accent);
}

.chapters {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--border-width) solid var(--color-border);
}

.chapters li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  padding: var(--space-8) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}

.chapter-number {
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-normal);
}

.chapters h3 {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

.chapters p {
  grid-column: 2;
  max-width: var(--width-measure);
  margin: 0;
  color: var(--color-text-muted);
}

.developers {
  display: grid;
  gap: var(--grid-gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}

.developer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-10) var(--space-6) var(--space-8);
  text-align: center;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    translate var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

@media (hover: hover) {
  .developer:hover {
    translate: 0 calc(-1 * var(--space-1));
    box-shadow: var(--shadow-lg);
  }
}

/* The portrait: the photo inside a ring of the accent and the panel's pink, which turns while the card is hovered. */
.portrait {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--size-portrait);
  height: var(--size-portrait);
  margin-bottom: var(--space-5);
  padding: var(--space-1);
  border-radius: var(--radius-full);
}

.portrait::before {
  content: '';
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 0deg,
    var(--color-accent),
    var(--color-panel-end),
    var(--color-accent),
    var(--color-panel-start),
    var(--color-accent)
  );
  border-radius: inherit;
  animation: ring-turn 6s linear infinite paused;
}

.developer:hover .portrait::before {
  animation-play-state: running;
}

@keyframes ring-turn {
  to {
    rotate: 1turn;
  }
}

.portrait img,
.portrait span {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--color-on-accent);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  background: var(--color-accent);
  border: var(--border-width-strong) solid var(--color-surface);
  border-radius: var(--radius-full);
  object-fit: cover;
}

/* At rest the photo is a soft purple tint (grey, washed with the accent); hovering the card shows its true colours. */
.portrait img {
  filter: grayscale(1) contrast(0.9) brightness(1.05);
  transition: filter calc(2 * var(--duration-base)) var(--ease-out);
}

.portrait::after {
  content: '';
  position: absolute;
  inset: var(--space-1);
  background: color-mix(in srgb, var(--color-accent) 70%, var(--color-panel-end));
  border-radius: var(--radius-full);
  mix-blend-mode: color;
  opacity: 0.85;
  pointer-events: none;
  transition: opacity calc(2 * var(--duration-base)) var(--ease-out);
}

.developer:hover .portrait img {
  filter: none;
}

.developer:hover .portrait::after {
  opacity: 0;
}

.developer h3 {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
}

.developer-role {
  margin: var(--space-1) 0 var(--space-4);
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.developer-cv {
  display: grid;
  gap: var(--space-2);
  max-width: var(--width-form);
  margin: 0 0 var(--space-6);
  padding: 0;
  color: var(--color-text-muted);
  font-size: var(--text-md);
  list-style: none;
}

.developer-links {
  display: flex;
  gap: var(--space-3);
  margin: auto 0 0;
}

/* Round links that fill with the accent and lift on hover, while tiny stars twinkle around them (sparkles.css). */
.developer-links a {
  display: grid;
  place-items: center;
  width: var(--size-control-lg);
  height: var(--size-control-lg);
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
  border-radius: var(--radius-full);
  transition:
    color var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out),
    translate var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.developer-links a:hover,
.developer-links a:focus-visible {
  color: var(--color-on-accent);
  background: var(--color-accent);
  translate: 0 calc(-1 * var(--space-1));
  box-shadow: 0 0 0 var(--space-1) color-mix(in srgb, var(--color-accent) 18%, transparent);
}

@media (min-width: 48rem) {
  .about-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .chapters li {
    grid-template-columns: var(--space-12) minmax(0, var(--width-card)) minmax(0, 1fr);
    gap: var(--space-6);
  }

  .chapters p {
    grid-column: 3;
  }

  .developers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}