/* Responsive typography, spacing and proportion refinements. */
html, body { max-width: 100%; overflow-x: clip; }
p, li, span, a { overflow-wrap: normal; word-break: normal; }
p { text-wrap: wrap; hyphens: none; }
h1, h2, h3 { text-wrap: balance; hyphens: none; }

.section { padding-block: clamp(50px, 5.6vw, 74px); }
.section-heading h2,
.contact h2 { color: var(--ink); }
.contact h2 { color: var(--white); }
.section-heading h2 span,
.contact h2 span { color: inherit; }

.featured-lead,
.project-content > p,
.profile-content p,
.contact-copy > p,
.section-heading > p,
.journey p,
.capabilities p {
  max-width: 68ch;
  line-height: 1.55;
}
.profile-content p,
.contact-copy > p,
.section-heading > p:last-child:not(.kicker) {
  font-size: clamp(.96rem, 1.05vw, 1.04rem);
}

/* Profile */
.profile {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: start;
  gap: 34px clamp(40px, 5.5vw, 76px);
}
.profile-heading h2 {
  max-width: 11ch;
  font-size: clamp(2.5rem, 3.3vw, 3.5rem);
  line-height: 1.01;
  letter-spacing: -.052em;
}
.profile-content { padding-top: 1px; }
.profile-content p { margin-bottom: 11px; }
.profile-content .lead {
  margin-bottom: 14px;
  font-size: clamp(1rem, 1.12vw, 1.08rem);
  line-height: 1.48;
}
.text-link { margin-top: 3px; }

.journey { gap: 12px; margin-top: 0; }
.journey article { min-height: 0; padding: 19px 21px; }
.journey h3 { margin: 13px 0 7px; }
.journey p { font-size: .84rem; line-height: 1.5; }
.journey small { display: inline-block; }

/* Capabilities */
.section-heading.compact { max-width: none; }
.capabilities-section .section-heading h2 {
  max-width: none;
  white-space: nowrap;
  font-size: clamp(2.55rem, 3.7vw, 3.9rem);
  line-height: 1;
}
.capabilities-section .section-heading > p:last-child:not(.kicker) { margin-top: 11px; }
.capabilities { margin-top: 22px; }
.capabilities article { min-height: 0; padding: 21px 23px; }
.capabilities h3 { margin: 15px 0 8px; }
.capabilities p { font-size: .88rem; line-height: 1.48; }
.capabilities article > div { margin-top: 14px; padding-top: 0; }

/* Featured project */
.featured-project { grid-template-columns: minmax(0, 1.02fr) minmax(455px, .98fr); }
.featured-visual { min-height: 390px; }
.featured-content { padding: clamp(26px, 3vw, 36px); }
.featured-content h3 {
  margin: 20px 0 10px;
  font-size: clamp(2.5rem, 3.4vw, 3.55rem);
}
.featured-lead { font-size: .92rem; line-height: 1.5; }
.system-flow {
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 18px;
  padding: 13px 0;
}
.system-flow span { flex: 0 0 auto; padding: 7px 9px; font-size: .6rem; }
.system-flow i { flex: 0 0 auto; }
.featured-project .tags { margin-top: 14px; }
.featured-project .project-actions { margin-top: 17px; padding-top: 0; }

/* Technology labels are text, not buttons. */
.project-card .tags,
.featured-project .tags {
  gap: 7px;
  align-items: center;
}
.project-card .tags span,
.featured-project .tags span {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--green);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .62rem;
  font-weight: 760;
}
.featured-project .tags span { color: var(--mint); }
.project-card .tags span + span::before,
.featured-project .tags span + span::before {
  margin-right: 7px;
  color: var(--muted);
  content: "·";
}
.featured-project .tags span + span::before { color: rgb(255 255 255 / 35%); }

.featured-project .project-actions a,
.project-card .project-actions a {
  font-weight: 850;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.featured-project .project-actions a { color: var(--lime); }
.project-card .project-actions a { color: var(--green); }
.featured-project .project-actions a:hover,
.project-card .project-actions a:hover { color: var(--green-2); }
.featured-project .project-actions a:hover { color: var(--mint); }

/* Secondary project cards */
.secondary-projects .project-image {
  margin: 12px 12px 6px;
  overflow: hidden;
  border-radius: 14px;
}
.secondary-projects .project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-content { padding: 18px 22px 20px; }
.project-content h3 { margin: 15px 0 8px; }
.project-content > p { font-size: .84rem; line-height: 1.5; }
.project-content > .tags { margin-top: 15px; padding-top: 0; }
.project-content .project-actions { margin-top: 14px; padding-top: 0; }
.secondary-projects .project-card:nth-child(2) .project-content h3 {
  font-size: 1.2rem;
  white-space: nowrap;
  letter-spacing: -.035em;
}

/* Other work */
.other-projects {
  grid-template-columns: minmax(360px, .78fr) minmax(0, 1.22fr);
  align-items: center;
  gap: clamp(34px, 4.5vw, 64px);
}
.other-projects .section-heading h2 {
  max-width: 16ch;
  font-size: clamp(2.35rem, 3.05vw, 3.2rem);
  line-height: 1.02;
  text-wrap: balance;
}
.project-list {
  overflow: hidden;
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: 0 12px 34px rgb(15 23 20 / 4%);
}
.project-list a {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 66px;
  gap: 18px;
  padding: 0 4px;
  border-bottom-color: var(--line);
}
.project-list a:last-child { border-bottom: 0; }
.project-list a:hover {
  padding-inline: 10px;
  background: var(--surface-2);
}
.project-list strong { font-size: .95rem; }
.project-list em {
  color: color-mix(in srgb, var(--mint) 78%, var(--muted));
  font-size: .78rem;
  font-weight: 700;
  font-style: normal;
}
.project-list a:hover em { color: var(--mint); }

/* Contact: two compact independent columns. */
.contact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(28px, 3vw, 42px);
  margin-block: 16px 38px;
  padding: clamp(26px, 3vw, 34px) clamp(30px, 3.8vw, 44px);
}
.contact-heading,
.contact-copy { min-width: 0; }
.contact h2 {
  max-width: none;
  font-size: clamp(2.2rem, 2.6vw, 2.7rem);
  line-height: 1.02;
  letter-spacing: -.046em;
  white-space: normal;
}
.contact-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.contact-copy > p {
  max-width: none;
  margin: 0;
  font-size: clamp(.98rem, 1.04vw, 1.04rem);
  line-height: 1.5;
}
.open-to {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 22px;
  margin: 16px 0 18px;
}
.open-to span {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgb(255 255 255 / 84%);
  font-size: .78rem;
  font-weight: 720;
  line-height: 1.35;
}
.open-to span::before {
  margin-right: 7px;
  color: var(--mint);
  content: "·";
}
.email { margin: 0; }
.contact-links { margin-top: 12px; }

@media (min-width: 1081px) {
  .contact-heading { align-self: center; }
  .contact-copy { align-self: center; }
}

@media (max-width: 1080px) {
  .topbar { overflow: visible; }
  .nav-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand menu"
      "nav nav";
    gap: 0 12px;
    padding-block: 8px;
  }
  .menu-toggle { display: block; }
  .nav-cv:not(.mobile-nav-cv) { display: none; }
  .topbar nav[data-mobile-menu] {
    grid-area: nav;
    display: none !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    padding: 8px 0 4px;
  }
  .topbar nav[data-mobile-menu][data-open="true"] { display: grid !important; }
  .topbar nav[data-mobile-menu] a {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 9px 10px;
    border: 1px solid rgb(255 255 255 / 7%);
    border-radius: 10px;
    background: rgb(255 255 255 / 3.5%);
    color: var(--muted);
    font-size: .82rem;
    font-weight: 780;
    text-decoration: none;
  }
  .topbar nav[data-mobile-menu] > a:not(.mobile-nav-cv) { order: 1; }
  .topbar nav[data-mobile-menu] a:hover,
  .topbar nav[data-mobile-menu] a:focus-visible {
    border-color: color-mix(in srgb, var(--green) 45%, transparent);
    background: var(--surface-2);
    color: var(--ink);
  }
  .topbar nav[data-mobile-menu] .mobile-nav-cv {
    display: flex !important;
    order: 2;
    grid-column: 1 / -1;
    min-height: 44px;
    margin-top: 2px;
    border-color: var(--green);
    background: transparent;
    color: var(--green);
    font-weight: 850;
  }

  .profile { grid-template-columns: 1fr 1fr; }
  .featured-project { grid-template-columns: 1fr; }
  .featured-visual { min-height: 340px; }
  .system-flow { flex-wrap: wrap; }
  .secondary-projects .project-card:nth-child(2) .project-content h3 {
    white-space: normal;
    font-size: clamp(1.3rem, 2vw, 1.65rem);
  }
  .other-projects { grid-template-columns: .82fr 1.18fr; }
  .contact {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 26px;
  }
  .contact h2 { font-size: clamp(2.05rem, 3.1vw, 2.5rem); }
}

@media (max-width: 760px) {
  .nav-inner { width: min(var(--content), calc(100% - 24px)); }

  .hero { gap: 24px; padding: 23px; }
  .hero h1 {
    max-width: 10.5ch;
    font-size: clamp(2.35rem, 11.3vw, 3.45rem);
    line-height: .98;
    letter-spacing: -.052em;
  }
  .positioning { max-width: 38rem; font-size: 1rem; line-height: 1.55; }
  .portrait-card { width: 100%; max-width: none; }
  .portrait-frame { aspect-ratio: 4 / 3; }
  .portrait-frame img { object-position: center 22%; }

  .section { padding-block: 42px; }
  .profile,
  .other-projects { grid-template-columns: 1fr; gap: 20px; }
  .contact {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px;
    margin-bottom: 28px;
    padding: 20px;
  }
  .profile-heading h2,
  .other-projects .section-heading h2 {
    max-width: none;
    font-size: clamp(2.05rem, 9.1vw, 2.8rem);
  }
  .profile-content p { margin-bottom: 10px; }

  .journey article { min-height: 0; padding: 18px 20px; }
  .journey h3 { margin-top: 10px; }

  .capabilities-section .section-heading h2 {
    max-width: none;
    white-space: normal;
    font-size: clamp(2rem, 8.6vw, 2.55rem);
    line-height: 1.02;
    text-wrap: balance;
  }
  .capabilities { margin-top: 18px; }
  .capabilities article { min-height: 0; padding: 20px; }
  .capabilities h3 { margin-top: 12px; }
  .capabilities article > div { margin-top: 13px; }

  .featured-project { border-radius: 20px; }
  .featured-visual { min-height: 0; aspect-ratio: 16 / 9; }
  .featured-visual img { object-position: top center; }
  .featured-content { padding: 20px; }
  .featured-content h3 { margin-top: 16px; font-size: clamp(1.9rem, 9.4vw, 2.55rem); }
  .featured-lead { font-size: .92rem; }
  .system-flow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 15px;
    padding: 12px 0;
  }
  .system-flow span {
    display: block;
    min-width: 0;
    padding: 8px 7px;
    font-size: .59rem;
    text-align: center;
  }
  .system-flow span:last-child { grid-column: 1 / -1; }
  .system-flow i { display: none; }
  .featured-project .tags {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 10px;
    margin-top: 12px;
  }
  .featured-project .tags span { white-space: nowrap; }
  .featured-project .tags span:nth-child(4)::before { display: none; }
  .featured-project .project-actions { margin-top: 14px; }

  .project-status { align-items: flex-start; flex-direction: column; gap: 4px; }
  .secondary-projects .project-image { margin: 10px 10px 5px; border-radius: 12px; }
  .project-content { padding: 16px 19px 19px; }
  .project-content h3 { margin-top: 12px; }
  .project-content > .tags { margin-top: 13px; }
  .project-content .project-actions { margin-top: 12px; }

  .other-projects .section-heading h2 {
    max-width: 16ch;
    font-size: clamp(1.95rem, 8.2vw, 2.45rem);
    line-height: 1.04;
  }
  .project-list {
    padding: 5px 14px;
    border-radius: 16px;
  }
  .project-list a {
    grid-template-columns: 1fr;
    gap: 3px;
    min-height: 0;
    padding: 13px 2px;
  }
  .project-list em { grid-column: auto; }

  .contact h2 {
    max-width: none;
    font-size: clamp(1.55rem, 6.6vw, 1.82rem);
    line-height: 1.05;
    letter-spacing: -.035em;
    white-space: normal;
    text-wrap: pretty;
  }
  .contact-copy { width: 100%; min-width: 0; }
  .contact-copy > p { font-size: .96rem; line-height: 1.46; }
  .open-to {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 10px;
    margin: 12px 0 14px;
  }
  .open-to span { font-size: .69rem; }
  .email {
    max-width: 100%;
    font-size: clamp(.92rem, 4.5vw, 1.12rem);
    overflow-wrap: anywhere;
  }
  .contact-links { margin-top: 12px; gap: 8px 13px; }

  footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 22px 0 26px !important;
    border-top: 1px solid var(--line);
    font-size: .72rem;
  }
  .footer-profile {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px 9px;
  }
  .footer-profile strong,
  .footer-profile span { white-space: nowrap; }
  .footer-profile-links,
  .footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 13px;
  }
  footer > a { margin-top: 1px; }
}

@media (max-width: 430px) {
  .brand strong { max-width: 175px; }
  .hero { padding: 20px; }
  .hero h1 { max-width: 10ch; }
  .portrait-frame { aspect-ratio: 1 / 1; }
  .section { padding-block: 38px; }
  .capabilities-section .section-heading h2 { font-size: clamp(1.95rem, 8.3vw, 2.3rem); }
  .other-projects .section-heading h2 { max-width: 15ch; }
  .contact { padding: 18px; }
  .contact h2 { font-size: clamp(1.48rem, 6.35vw, 1.68rem); }
  .footer-profile { gap: 4px 7px; font-size: .68rem; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --muted: #c0cbc5;
    --surface: #101b17;
    --surface-2: #16231e;
    --line: #31443b;
  }
  .journey article,
  .capabilities article,
  .project-card { border-color: var(--line); }
  .capabilities article > span { color: #b8c5bf; }
  .project-card .project-actions a { color: var(--green); }
  .project-card .project-actions a:hover { color: var(--mint); }
  .project-list { box-shadow: 0 14px 38px rgb(0 0 0 / 16%); }
  .topbar nav[data-mobile-menu] a {
    border-color: rgb(255 255 255 / 7%);
    background: rgb(255 255 255 / 3%);
  }
  .topbar nav[data-mobile-menu] a:hover,
  .topbar nav[data-mobile-menu] a:focus-visible { background: #17241f; }
}