/* Vince shared design system: formal site pages only. */
:root {
  --ds-content-max: 1120px;
  --ds-media-max: 1240px;
  --ds-gutter-total-desktop: 96px;
  --ds-gutter-total-mobile: 32px;
  --ds-radius-control: 12px;
  --ds-radius-panel: 20px;
  --ds-radius-pill: 9999px;
  --ds-h1-desktop: 60px;
  --ds-h2-desktop: 44px;
  --ds-h1-mobile: 36px;
  --ds-h2-mobile: 32px;
  --ds-eyebrow-size: 11px;
  --ds-eyebrow-title-gap: 22px;
  --ds-accent: #a7f432;
  --ds-accent-rgb: 167, 244, 50;
  --ds-font-sans: 'Geist Web', Geist, 'Source Han Sans CN Web', SourceHan, system-ui, sans-serif;
  --ds-font-mono: 'Geist Mono Web', GeistMono, 'Source Han Sans CN Web', SourceHan, ui-monospace, monospace;

  /* Compatibility aliases for the existing page-specific systems. */
  --accent: var(--ds-accent);
  --radius-sm: var(--ds-radius-control);
  --radius-md: var(--ds-radius-control);
  --radius-lg: var(--ds-radius-panel);
  --radius-xl: var(--ds-radius-panel);
  --radius-full: var(--ds-radius-pill);
  --tl-radius: var(--ds-radius-panel);
  --article-radius: var(--ds-radius-panel);
  --radius: var(--ds-radius-panel);
  --max: var(--ds-content-max);
}

.creator-page,
.race-page,
.product-page {
  --accent: var(--ds-accent);
  --accent-rgb: var(--ds-accent-rgb);
}

/* Shared navigation shape. */
.nav,
.nav-inner,
.mobile-menu {
  border-radius: var(--ds-radius-panel);
}

.nav-link,
.nav-brand,
.mobile-btn,
.mobile-link {
  border-radius: var(--ds-radius-control);
}

/* Standard 1120px content measure. */
.home-page .container,
.home-page #skills .container,
.home-page .about-container,
.home-page .blog-container,
.home-page .collaboration-signal__container,
.home-page .main-contact__layout,
.timeline-page-body .timeline-shell,
.insights-page .topbar,
.insights-page .hero-row,
.insights-page .signal-strip,
.insights-page .filter-strip,
.insights-page .story-grid,
.article-detail-page .article-shell,
.app-product-page .shell,
.app-product-page .content-shell,
.contact-page .contact-shell,
.brand-page .shell,
.creator-page .shell,
.race-page .shell,
.product-page .shell {
  width: min(var(--ds-content-max), calc(100% - var(--ds-gutter-total-desktop)));
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}

/* The selected-work gallery is the only framed content allowed to reach 1240px. */
.home-page #projects .container {
  width: min(var(--ds-media-max), calc(100% - var(--ds-gutter-total-desktop)));
}

/* One eyebrow grammar: fluorescent green, mono, 11px, dot marker. */
.section-eyebrow,
.timeline-kicker,
.timeline-section-label,
.article-kicker,
.app-product-page .eyebrow,
.app-product-page .section-kicker,
.contact-page .kicker,
.brand-page .eyebrow,
.creator-page .eyebrow,
.race-page .eyebrow,
.product-page .eyebrow,
.brand-page .section-kicker,
.creator-page .section-kicker,
.race-page .section-kicker,
.product-page .section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ds-accent);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-eyebrow-size);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  margin: 0 0 var(--ds-eyebrow-title-gap);
}

.section-eyebrow::before,
.timeline-kicker::before,
.timeline-section-label::before,
.article-kicker::before,
.app-product-page .eyebrow::before,
.app-product-page .section-kicker::before,
.contact-page .kicker::before,
.brand-page .eyebrow::before,
.creator-page .eyebrow::before,
.race-page .eyebrow::before,
.product-page .eyebrow::before,
.brand-page .section-kicker::before,
.creator-page .section-kicker::before,
.race-page .section-kicker::before,
.product-page .section-kicker::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border: 0;
  border-radius: 50%;
  background: currentColor;
  box-shadow: none;
}

.timeline-kicker > i,
.article-kicker > i {
  display: none;
}

/* About establishes the site-wide vertical rhythm between eyebrow and title. */
.section-eyebrow + h1,
.section-eyebrow + h2,
.timeline-kicker + .timeline-title,
.timeline-section-label + .timeline-section-title,
.app-product-page .eyebrow + h1,
.app-product-page .section-kicker + h2,
.contact-page .kicker + h1,
.contact-page .kicker + h2,
.brand-page .eyebrow + h1,
.creator-page .eyebrow + h1,
.race-page .eyebrow + h1,
.product-page .eyebrow + h1 {
  margin-top: 0;
}

.contact-page .section-heading,
.brand-page .section-head,
.creator-page .section-head,
.race-page .section-head,
.product-page .section-head {
  display: block;
}

/* Page and section title contract. */
.home-page .hero-headline,
.timeline-page-body .timeline-title,
.insights-page .hero-row h1,
.article-detail-page .article-title,
.app-product-page .copy > h1,
.contact-page .contact-hero h1,
.brand-page .hero h1,
.creator-page .hero h1,
.race-page .hero h1,
.product-page .hero h1 {
  font-size: var(--ds-h1-desktop);
  line-height: 1.08;
  letter-spacing: 0;
}

.home-page .about-title,
.home-page #projects .section-title,
.home-page .blog-title,
.home-page .collaboration-signal__header h2,
.home-page .main-contact__title,
.timeline-page-body .timeline-section-title,
.article-detail-page .article-body h2,
.article-detail-page .section-heading h2,
.app-product-page .thesis-statement,
.app-product-page .section-title,
.contact-page .section-heading h2,
.contact-page .direct-copy h2,
.brand-page .section h2,
.creator-page .section h2,
.race-page .section h2,
.product-page .section h2 {
  font-size: var(--ds-h2-desktop);
  line-height: 1.14;
  letter-spacing: 0;
}

/* Controls and buttons. */
.home-page .btn,
.home-page .hero-project-cta,
.home-page .hero-project-cta .btn-primary,
.home-page .skill-carousel__tab,
.home-page .collaboration-signal__choice,
.home-page .collaboration-signal__mail,
.home-page .blog-filter,
.timeline-page-body button,
.insights-page .filter,
.article-detail-page input,
.article-detail-page textarea,
.article-detail-page .comment-submit,
.app-product-page .action,
.app-product-page .feature-tab,
.contact-page .direct-row,
.contact-page .copy-toast {
  border-radius: var(--ds-radius-control);
}

.home-page .about-trajectory,
.home-page .main-contact__prompt,
.home-page .main-contact__compose input,
.home-page .footer-logo {
  border-radius: var(--ds-radius-control);
}

/* Large panels and repeated content frames. */
.home-page .bento-card,
.home-page .skill-panel,
.home-page .skill-panel__metrics,
.home-page .collaboration-signal__choices,
.home-page .collaboration-signal__answer,
.home-page .main-contact__phone,
.home-page .blog-card,
.timeline-page-body .timeline-dashboard,
.timeline-page-body .log-entry,
.timeline-page-body .log-proof > div,
.insights-page .signal-strip,
.insights-page .story-card,
.article-detail-page .article-dashboard,
.article-detail-page .article-cover,
.article-detail-page .article-body blockquote,
.article-detail-page .comment-form,
.article-detail-page .comment,
.article-detail-page .recommend-card,
.app-product-page .phone,
.app-product-page .phone-screen,
.app-product-page .feature-panel,
.app-product-page .phase-note,
.app-product-page .card,
.app-product-page .app-nav,
.brand-page .flat,
.creator-page .flat,
.race-page .flat,
.product-page .flat,
.brand-page .quote,
.creator-page .quote,
.race-page .quote,
.product-page .quote {
  border-radius: var(--ds-radius-panel);
}

.home-page .about-profile,
.home-page .main-contact__bubble,
.product-page .phone {
  border-radius: var(--ds-radius-panel);
}

/* Status labels are the only pill-shaped text containers. */
.home-page .card-badge,
.home-page .card-tag,
.home-page .collaboration-signal__tags span,
.home-page .blog-category,
.timeline-page-body .log-tags span,
.insights-page .chip,
.insights-page .tag,
.article-detail-page .tag,
.app-product-page .product-status span,
.app-product-page .phase-note > span {
  border-radius: var(--ds-radius-pill);
}

.home-page .skill-panel__topline span,
.home-page .skill-panel__topline strong,
.article-detail-page .pill {
  border-radius: var(--ds-radius-pill);
}

/* Mechanical case imagery stays sharp. */
.home-page .projects-desktop-gallery,
.home-page .project-gallery-item,
.home-page .project-gallery-item img,
.home-page .project-index-media,
.home-page .project-index-media img,
.brand-page .hero-visual,
.creator-page .hero-visual,
.race-page .hero-visual,
.product-page .hero-visual {
  border-radius: 0;
}

.app-product-page .photo {
  border-radius: 0;
}

@media (max-width: 680px) {
  .home-page .container,
  .home-page #skills .container,
  .home-page #projects .container,
  .home-page .about-container,
  .home-page .blog-container,
  .home-page .collaboration-signal__container,
  .home-page .main-contact__layout,
  .timeline-page-body .timeline-shell,
  .insights-page .topbar,
  .insights-page .hero-row,
  .insights-page .signal-strip,
  .insights-page .filter-strip,
  .insights-page .story-grid,
  .article-detail-page .article-shell,
  .app-product-page .shell,
  .app-product-page .content-shell,
  .contact-page .contact-shell,
  .brand-page .shell,
  .creator-page .shell,
  .race-page .shell,
  .product-page .shell {
    width: calc(100% - var(--ds-gutter-total-mobile));
  }

  .timeline-page-body .timeline-shell,
  .insights-page .topbar,
  .insights-page .hero-row,
  .insights-page .signal-strip,
  .insights-page .filter-strip,
  .insights-page .story-grid,
  .article-detail-page .article-shell {
    width: 100%;
  }

  .home-page .hero-headline,
  .timeline-page-body .timeline-title,
  .insights-page .hero-row h1,
  .article-detail-page .article-title,
  .app-product-page .copy > h1,
  .contact-page .contact-hero h1,
  .brand-page .hero h1,
  .creator-page .hero h1,
  .race-page .hero h1,
  .product-page .hero h1 {
    font-size: var(--ds-h1-mobile);
    line-height: 1.08;
  }

  .home-page .about-title,
  .home-page #projects .section-title,
  .home-page .blog-title,
  .home-page .collaboration-signal__header h2,
  .home-page .main-contact__title,
  .timeline-page-body .timeline-section-title,
  .article-detail-page .article-body h2,
  .article-detail-page .section-heading h2,
  .app-product-page .thesis-statement,
  .app-product-page .section-title,
  .contact-page .section-heading h2,
  .contact-page .direct-copy h2,
  .brand-page .section h2,
  .creator-page .section h2,
  .race-page .section h2,
  .product-page .section h2 {
    font-size: var(--ds-h2-mobile);
    line-height: 1.16;
  }
}

@media (max-width: 360px) {
  :root {
    --ds-h1-mobile: 34px;
    --ds-h2-mobile: 30px;
  }
}