.welcome {
  max-width: 32rem;
  margin: 2rem auto;
  text-align: center;
}

/* The logo has black text on a transparent background, so it sits on a white card to stay legible in dark mode. */
.logo-card {
  display: inline-block;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  background: #fff;
  border-radius: 0.5rem;
}

.logo-card img { display: block; max-width: 100%; height: auto; }
.welcome [lang] + [lang] { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--md-default-fg-color--lightest); }
.md-content__inner > h1:first-child { display: none; }

:root {
  --portfolio-ink: #15213a;
  --portfolio-blue: #3255d6;
  --portfolio-cream: #f6f7fb;
  --portfolio-line: #dce2f2;
  --portfolio-card: var(--md-default-bg-color);
  --portfolio-contact: #15213a;
}

[data-md-color-scheme="slate"] {
  --portfolio-ink: #edf0ff;
  --portfolio-blue: #aebdff;
  --portfolio-cream: #202a46;
  --portfolio-line: #4a5879;
  --portfolio-card: #18213a;
  --portfolio-contact: #0e1529;
}

[data-md-color-scheme="slate"] .portfolio .button.primary {
  background: #6279e8;
}
.portfolio { max-width: 72rem; margin: 0 auto; color: var(--portfolio-ink); }
.portfolio section { margin: 4.5rem 0; }
.portfolio-hero { max-width: 54rem; margin: 3rem auto 5rem !important; text-align: center; }
.eyebrow, .project-kind { margin: 1.5rem 0 .65rem; color: var(--portfolio-blue); font-size: .72rem; font-weight: 700; letter-spacing: .1em; }
.portfolio-hero h1 { margin-bottom: .15rem; font-size: clamp(2.6rem, 7vw, 4.8rem); }
.portfolio-hero h2 { font-size: clamp(1.25rem, 3vw, 1.7rem); font-weight: 500; line-height: 1.45; }
.portfolio-hero > p:not(.eyebrow):not(.actions) { font-size: 1.1rem; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2rem; }
.button { display: inline-block; padding: .6rem 1rem; border: 1px solid var(--portfolio-blue); border-radius: .45rem; color: var(--portfolio-blue) !important; font-weight: 700; text-decoration: none !important; }
.button.primary { background: var(--portfolio-blue); color: #fff !important; }
.proof { padding: 1.75rem 2rem; background: var(--portfolio-cream); border: 1px solid var(--portfolio-line); border-radius: 1rem; }
.project-preview { margin: 1.75rem 0 2rem; overflow: hidden; border: 1px solid var(--portfolio-line); border-radius: .85rem; background: var(--portfolio-card); }
.project-preview img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--portfolio-line); }
.project-preview figcaption { padding: .85rem 1rem; color: var(--portfolio-ink); font-size: .82rem; }
.project-grid, .evidence-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.project-card { display: flex; flex-direction: column; padding: 1.5rem; border: 1px solid var(--portfolio-line); border-radius: .85rem; background: var(--portfolio-card); }
.project-card .project-kind { margin-top: 0; }
.project-card h3 { margin: 0 0 .75rem; }
.project-card p:last-child { margin-top: auto; margin-bottom: 0; }
.evidence { border-top: 1px solid var(--portfolio-line); padding-top: 3.5rem; }
.evidence-grid > div { padding: 1.35rem; border-left: 3px solid var(--portfolio-blue); background: var(--portfolio-cream); }
.contact { padding: 2.5rem; text-align: center; background: var(--portfolio-contact); border-radius: 1rem; color: #fff; }
.contact h2 { color: #fff; }
.contact .button { border-color: #fff; color: #fff !important; }
.contact .button.primary { background: #fff; color: #15213a !important; }
.english { padding-top: 2.5rem; border-top: 1px solid var(--portfolio-line); }
@media screen and (max-width: 44rem) { .portfolio section { margin: 3rem 0; } .project-grid, .evidence-grid { grid-template-columns: 1fr; } .proof, .contact { padding: 1.25rem; } }
.project-card.featured { grid-column: 1 / -1; }
.project-card .project-preview { margin: 0 0 1.5rem; }
.project-card ul { margin-top: .25rem; }
.metrics { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 1.5rem 0 2rem; }
.metrics > div { padding: 1.1rem 1rem; border: 1px solid var(--portfolio-line); border-radius: .85rem; background: var(--portfolio-card); text-align: center; }
.metrics strong { display: block; color: var(--portfolio-blue); font-size: clamp(1.2rem, 2.6vw, 1.85rem); line-height: 1.15; white-space: nowrap; }
.metrics span { display: block; margin-top: .4rem; font-size: .78rem; line-height: 1.4; }
@media screen and (max-width: 44rem) { .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The logo has dark strokes on a transparent background, so it sits on a light tile to stay legible on the indigo header. */
.md-header__button.md-logo { padding: .2rem; }
.md-header__button.md-logo img { height: 1.8rem; width: 1.8rem; padding: .15rem; background: #fff; border-radius: .4rem; }