/* ALVO typographic system — shared by Home, About and project dialogs.
 * Inter is installed from @fontsource-variable/inter during the build.
 * Keep editorial type changes here; page CSS owns layout and illustration. */
@font-face {
  font-family: 'ALVO Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2');
}
:root {
  --alvo-font: 'ALVO Inter', Inter, 'Helvetica Neue', Arial, sans-serif;
  --alvo-light: 300;
  --alvo-regular: 400;
  --alvo-medium: 500;
  --alvo-semibold: 600;
  --alvo-bold: 700;
  --alvo-tracking-display: -.055em;
  --alvo-tracking-tight: -.02em;
  --alvo-tracking-interface: .13em;
  --alvo-tracking-micro: .16em;
}
body, button, input, textarea, select {font-family:var(--alvo-font)}
body {font-weight:var(--alvo-regular)}
/* Wordmark and top-level editorial hierarchy. */
.brand-name {font-weight:var(--alvo-bold);letter-spacing:-.035em}
.hero .hero-role {font-weight:var(--alvo-light);letter-spacing:-.025em}
.about-main h1 {font-size:clamp(56px,6.4vw,90px);font-weight:var(--alvo-medium);letter-spacing:var(--alvo-tracking-display)}
.intro {font-size:clamp(21px,2.35vw,32px);font-weight:var(--alvo-regular);letter-spacing:-.025em}
.prose {font-size:clamp(16px,1.28vw,17px);font-weight:var(--alvo-regular);line-height:1.78}
.sectionhead h2 {font-weight:var(--alvo-medium)}
.project h3 {font-size:clamp(16px,1.35vw,18px);font-weight:var(--alvo-medium);letter-spacing:var(--alvo-tracking-tight)}
.overlay h2 {font-weight:var(--alvo-medium);letter-spacing:-.05em}
.contact-card h2 {font-weight:var(--alvo-medium);letter-spacing:var(--alvo-tracking-display)}
/* Readability for project descriptions without making the UI louder. */
.details p {font-size:16px;line-height:1.7;font-weight:var(--alvo-regular)}
/* Action text, navigation and metadata. */
.site-nav .nav-item {font-weight:var(--alvo-regular);letter-spacing:var(--alvo-tracking-interface)}
.pill {font-weight:var(--alvo-medium)}
.subpill {font-weight:var(--alvo-regular)}
.share-project,.close {font-weight:var(--alvo-medium)}
.contact-email {font-weight:var(--alvo-semibold);letter-spacing:var(--alvo-tracking-tight)}
.contact-option {font-weight:var(--alvo-medium);letter-spacing:var(--alvo-tracking-tight)}
.fact h2 {font-weight:var(--alvo-semibold);letter-spacing:var(--alvo-tracking-micro)}
.coverbg {font-weight:var(--alvo-light)}
.contact-close {font-weight:var(--alvo-light)}
.contact-arrow,.contact-email-arrow {font-weight:var(--alvo-regular)}
.eyebrow,.index,.contact-eyebrow {letter-spacing:var(--alvo-tracking-micro)}
.control-label,.detailtop span {letter-spacing:var(--alvo-tracking-interface)}
footer {font-weight:var(--alvo-regular);letter-spacing:.12em}
@media (max-width:680px) {
  /* Slightly larger controls, while preserving the existing header layout. */
  .site-nav .nav-item {font-size:11px!important}
  .about-main h1 {font-size:clamp(54px,13vw,79px)}
  .intro {font-size:clamp(21px,5.7vw,26px)}
  .prose {font-size:16px;line-height:1.75}
  .details p {font-size:15px}
}

/* Keyboard-only skip links, shared across both pages. */
.skip-link{position:fixed;z-index:100;top:8px;left:12px;padding:12px 16px;background:#f4f4f1;color:#0e0f10;border-radius:4px;transform:translateY(-160%);transition:transform .15s ease}
.skip-link:focus-visible{transform:translateY(0);outline:2px solid #e53935;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.skip-link{transition:none}}