:root {
  --page-gutter: clamp(18px, 4vw, 64px);
  --column-gap: clamp(20px, 3vw, 48px);
  --section-space: clamp(60px, 7vw, 112px);
}

/* All sections share the same centered content edges. */
.wrap {
  width: calc(100% - var(--page-gutter) - var(--page-gutter));
  max-width: 1440px;
  margin-inline: auto;
}
.header-brand { flex-shrink: 0; }
.hero-header {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--column-gap);
  min-height: 104px;
  padding-block: 20px;
}
.hero-header nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px clamp(16px, 3vw, 36px);
  min-width: 0;
}
.hero-header nav a { white-space: nowrap; }
.hero-content {
  padding-top: calc(var(--header-height, 104px) + clamp(36px, 5vw, 72px));
  padding-bottom: clamp(24px, 3vw, 40px);
}
.hero-cinema .hero-bottom {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: var(--column-gap);
}
.hero-bottom > *, .section-heading > *, .about-grid > *,
.project-grid > *, .ai-sections > *, .software-list > *,
.timeline > *, .project-card figcaption > div { min-width: 0; }
.identity { align-items: center; gap: clamp(12px, 1.5vw, 20px); }
.identity img, .circle { flex-shrink: 0; }
.identity p { min-width: 0; }
.hero-actions { justify-content: flex-end; gap: 16px clamp(16px, 2vw, 30px); }
.hero-actions .round-link { max-width: 100%; }
.hero-cinema .hero-foot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--column-gap);
}
.hero-foot span:last-child { text-align: right; }
.portfolio { padding-top: var(--section-space); }
.section-heading {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--column-gap);
  align-items: end;
}
.section-heading > p, .section-heading > .about-wordmark { justify-self: end; }
.category-index {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--column-gap);
}
.category-index a { min-width: 0; padding-inline: 0; }
.category-index a > span { flex-shrink: 0; }
.project-grid, .about-grid, .ai-sections, .timeline {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--column-gap);
}
.project-grid { row-gap: clamp(28px, 3vw, 40px); }
.project-grid.single { grid-template-columns: minmax(0, 1fr); }
.ai-section { padding: clamp(24px, 3vw, 38px); }
.ai-section h3 { font-size: clamp(2rem, 3.5vw, 4rem); overflow-wrap: break-word; }
.about-band { padding-block: var(--section-space); }
.personal > div { grid-template-columns: minmax(90px, .32fr) minmax(0, 1fr); }
.software-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: 24px var(--column-gap);
}
.software-list > div { overflow-wrap: anywhere; }
.ai-skills { gap: var(--column-gap); }
.ai-skills ul { min-width: 0; }
.timeline li { gap: clamp(16px, 2vw, 30px); }
.timeline time { flex-shrink: 0; }
.timeline li > div { min-width: 0; }
.timeline h4, .timeline p, .project-card h4 { overflow-wrap: break-word; }
footer { padding-top: var(--section-space); }
.email { min-width: 0; }
.email > span { flex-shrink: 0; }
.footer-bottom { align-items: center; flex-wrap: wrap; gap: 16px var(--column-gap); }
.dialog-toolbar p { min-width: 0; overflow-wrap: anywhere; }
.social-links { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 28px; }
.social-link { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%; color: #fff; transition: color .2s, border-color .2s, background-color .2s; }
.social-link svg { width: 22px; height: 22px; display: block; }
.social-link:hover, .social-link:focus-visible { color: var(--gold); border-color: var(--gold); background-color: #dab3590d; }

@media (max-width: 1100px) {
  .category-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .about-grid, .timeline { grid-template-columns: minmax(0, 1fr); }
  .about-grid { row-gap: 24px; }
}
@media (max-width: 760px) {
  .hero-cinema .hero-bottom { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hero-actions { width: 100%; justify-content: space-between; }
}
@media (max-width: 640px) {
  .section-heading, .category-index, .project-grid, .ai-sections {
    grid-template-columns: minmax(0, 1fr);
  }
  .section-heading { gap: 20px; }
  .section-heading > p { justify-self: start; }
  .about-wordmark { display: none; }
  .ai-sections { row-gap: var(--column-gap); }
  .ai-section h3 { min-height: 0; }
  .subheading { align-items: flex-start; flex-wrap: wrap; }
  .ai-skills { flex-direction: column; align-items: flex-start; gap: 20px; }
  .ai-skills ul { flex-direction: column; }
  .hero-cinema .hero-foot { grid-template-columns: minmax(0, 1fr); }
  .hero-foot span:last-child { display: none; }
  .project-grid.single .project-image > img { aspect-ratio: 1.6; }
}
@media (max-width: 420px) {
  .hero-header { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hero-header nav { width: 100%; justify-content: space-between; gap: 12px; }
  .personal > div { grid-template-columns: minmax(80px, .4fr) minmax(0, 1fr); gap: 12px; }
}