/* layout.css — navbar, hero, sections */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg-1) 98%, transparent);
  backdrop-filter: blur(0.375rem);
  border-bottom: 0.0625rem solid color-mix(in srgb, var(--text-0) 6%, transparent);
}
.nav__inner {
  width: 100%;
  /* max-width: 68.75rem; */
  max-width: 72rem;

  margin: 0 auto;
  padding: var(--space-sm) clamp(var(--space-md), 3.5vw, var(--space-3xl));
  min-height: clamp(4rem, 8svh, 4.8rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav__controls {
  display: flex;
  align-items: center;
}

.nav__controls > *:not(:first-child) {
  margin-left: 0.6rem;
}

/* Nav links */
.nav__links {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  margin-left: var(--space-md);
}

.nav__links a {
  color: var(--text-0);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
}

.nav__links a:focus-visible,
.nav__links a:hover {
  background: color-mix(in srgb, var(--bg-2) 70%, transparent);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-head);
  font-weight: 600;
}

.brand__logo {
  width: 3.8rem;
  height: auto;
  display: block;
}

.brand__name {
  line-height: 1;
}

html[data-theme='dark'] .brand__logo {
  filter: invert(1);
}

.hero {
  position: relative;
  min-height: max(0px, calc(96vh - var(--tools-min-height)));
  min-height: max(0px, calc(96svh - var(--tools-min-height)));
  padding: var(--hero-padding-block) var(--hero-padding-inline);
  display: flex;
  align-items: center;
  justify-content: flex-start; /* overlay aligned to left for all sizes */
  overflow: hidden;
}
.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}
.hero__overlay {
  position: relative;
  z-index: 2;
  /* keep overlay narrow so it doesn't cover much of the image on small screens */
  max-width: clamp(13.75rem, 46%, 37.5rem); /* 220px -> 13.75rem, 600px -> 37.5rem */
  min-height: clamp(12.5rem, 30svh, 18.5rem);
  padding: 0 clamp(1.75rem, 4vw, 3rem);
  margin-left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.75rem, 2.5svh, 1.75rem);
  text-align: left;
  color: var(--text-hero);
  text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.45); /* 1px 2px */
}
.hero__overlay h1 {
  font-family: var(--font-head);
  font-size: clamp(2rem, 4vw, 3.5rem);
  margin: 0;
  line-height: 0.9;
  min-height: 1.9em;
}
.hero__overlay p {
  margin: 0;
  color: inherit;
  min-height: 2.4em;
}

.hero__ctas {
  display: inline-flex;
  gap: clamp(0.8rem, 0.5vw, 1.75rem);
  /* margin-top: clamp(1rem, 2.5vh, 1.75rem); */
  flex-wrap: wrap;
  align-items: center;
}
.hero__ctas .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Hero badge (upper-right) */
.hero__badge {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 6; /* above overlay */
  width: var(--hero-badge-size);
  height: var(--hero-badge-size);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* decorative by default */
  filter: drop-shadow(0 6px 18px rgba(2, 8, 23, 0.18));
}
.hero__badge svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 48rem) {
  .hero__badge {
    display: none;
  }
}

/* Larger overlay width on wider screens, staying left-aligned */
@media (min-width: 30rem) {
  /* 480px */
  .hero__overlay {
    max-width: clamp(17.5rem, 40%, 32.5rem); /* 280px, 520px */
    padding: clamp(0.75rem, 2.4vw, 1.75rem) clamp(1.75rem, 3.4vw, 3rem) clamp(2rem, 3.6vw, 3.25rem);
  }
}

@media (min-width: 68.75rem) {
  /* 1100px */
  .hero__overlay {
    /* make the overlay approximately 1/3 of the viewport but clamp to sane sizes */
    width: clamp(20rem, 33vw, 37.5rem); /* ~1/3 of available width with min/max */
    max-width: 37.5rem; /* 600px */
    padding: clamp(0rem, 2vw, 1.75rem) clamp(2rem, 3vw, 3.25rem) clamp(2.5rem, 3.4vw, 3.5rem);
    /* reduce left margin on large screens so overlay sits closer to image edge */
    margin-left: clamp(0.5rem, 2vw, 1.5rem);
  }
}

.tools {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-container-gap);
}

.tools__inner {
  max-width: 68.75rem; /* 1100px */
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--space-section-x);
  display: flex;
  flex-direction: column;
  gap: var(--space-container-gap);
}

.tools__title {
  margin: 0;
  font-family: var(--font-head);
  color: var(--text-0);
}

main {
  max-width: 68.75rem; /* 1100px */
  margin: 0 auto;
  padding: var(--space-nav-to-main) var(--space-section-x) 0;
  display: grid;
  gap: var(--space-section-y);
}

main > * {
  min-width: 0;
}
/* About section */
.about {
  display: grid;
  gap: var(--space-section-y);
  color: var(--text-0);
}

.about__header {
  max-width: 68.75rem;
  margin: 0 auto;
  padding: 0 var(--space-section-x);
  display: flex;
  flex-direction: column;
  gap: var(--space-container-gap);
}

.about__header h2 {
  margin: 0;
}

.about__subtitle {
  font-family: var(--font-head);
  font-size: clamp(1.65rem, 3vw, 1.8rem);
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--text-0);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.about__subtitle strong {
  color: var(--color-secondary);
}

.about__layout {
  max-width: 68.75rem;
  margin: 0 auto;
  padding: 0 var(--space-section-x) clamp(2rem, 6vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0rem, 1fr));
  gap: clamp(1.5rem, 4vw, 2.75rem);
  align-items: stretch;
}
/* 
.about__layout > * {
  min-width: 0;
} */

.about__profile-card,
.about__story-card {
  /* background: var(--bg-1); */
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--bg-0) 70%, transparent) 0%) center/cover
      no-repeat,
    image-set(
        url('/assets/img/background_pattern-w640.webp') 1x,
        url('/assets/img/background_pattern-w1024.webp') 2x
      )
      center/cover no-repeat;
  border-radius: 1rem;
  border: 1px solid var(--surface-border);
  /* box-shadow: 0 2rem 3.5rem var(--surface-shadow); */
  box-shadow: 1px 1px 20px 0px var(--surface-shadow);
}

:root[data-theme='light'] .about__profile-card,
:root[data-theme='light'] .about__story-card {
  background: var(--bg-1);
}

.about__profile-card {
  display: grid;
  grid-template-rows: minmax(16.5rem, 35rem) auto;
  overflow: hidden;
}

.about__profile-media {
  position: relative;
}

.about__profile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__profile-text {
  padding: clamp(1.25rem, 4vw, 2rem) 2.6rem;
  display: flex;
  align-items: center;
}

.about__profile-text p {
  margin: 0;
  line-height: 1.6;
  color: var(--text-1);
  font-weight: 500;
}

.about__story {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.about__story-card {
  padding: clamp(1.25rem, 3.5vw, 1.85rem) 2.6rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.about__story-card p {
  margin: 0;
  line-height: 1.6;
  color: var(--text-1);
}

.about__story-card strong,
.about__profile-text strong {
  color: var(--color-secondary);
}

.about__story-card em,
.about__profile-text em {
  font-style: italic;
  color: inherit;
}

.about__cta {
  position: relative;
  margin: 0 auto;
  width: 100%;
  padding: clamp(2.5rem, 7vw, 5.5rem) clamp(1.25rem, 18vw, 14rem);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(1.1rem, 3vw, 1.75rem);
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--bg-0) 70%, transparent) 0%) center/cover
      no-repeat,
    image-set(url('/assets/img/orbe1-w640.webp') 1x, url('/assets/img/orbe1-w1024.webp') 2x)
      center/cover no-repeat;
  background-position: 1rem 80%;
  border: none;
  box-shadow: none;
  border-radius: 1.25rem;
  overflow: hidden;
  isolation: isolate;
}

:root[data-theme='light'] .about__cta {
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--bg-0) 10%, transparent) 0%) center/cover
      no-repeat,
    image-set(url('/assets/img/orbe1-w640.webp') 1x, url('/assets/img/orbe1-w1024.webp') 2x)
      center/cover no-repeat;
}

.about__cta-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(2.4rem, 6vw, 3.9rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--text-0);
  white-space: pre-line;
  text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.45); /* 1px 2px */
}

.about__cta-subtitle {
  margin: 0;
  font-family: var(--font-ui);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-1);
  max-width: 42rem;
}

.about__cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  width: 100%;
  margin-top: var(--space-control-gap);
}

:root[data-theme='light'] .about__cta-actions .btn--primary {
  background-color: var(--color-primary);
  color: var(--bg-0);
}

:root[data-theme='light'] .about__cta-actions .btn--secondary {
  color: var(--text-1);
  background-color: color-mix(in srgb, var(--color-tertiary) 15%, transparent);
  border: 1px solid var(--color-secondary);
}

@media (max-width: 64rem) {
  .about__layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 48rem) {
  .about__subtitle {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
  }

  .about__profile-card {
    grid-template-rows: minmax(13.5rem, 18rem) auto;
  }

  .about__cta {
    width: 100%;
    margin: 0 auto;
    padding: clamp(1.75rem, 5vw, 3.25rem) 1.25rem;
    background-position: center, center;
  }

  .about__cta-title {
    font-size: clamp(2rem, 10vw, 2.9rem);
  }
  .about__cta-actions a.btn {
    max-width: 16rem;
  }
}

@media (max-width: 36rem) {
  .about__layout {
    gap: var(--space-lg);
  }

  .about__profile-text {
    padding: var(--space-lg);
  }

  .about__story-card {
    padding: var(--space-lg);
  }

  .about__cta-actions a.btn {
    max-width: 14rem;
  }
}

.projects {
  position: relative;
  margin: 0;
}

.projects__inner {
  position: relative;
  padding: clamp(2.5rem, 7vw, 4.5rem) clamp(0.75rem, 6vw, 1.5rem);
  border-radius: clamp(1.5rem, 3vw, 2.75rem);
  overflow: hidden;
}

.projects__inner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.78;
}

.projects__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.85rem, 2.6vw, 2.35rem);
  letter-spacing: -0.01em;
  line-height: 1.05;
  display: inline-flex;
  align-items: flex-start;
}

.projects__header {
  margin: 0;
}

.projects__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

.projects__grid > * {
  min-width: 0;
}

@media (max-width: 62rem) {
  .projects__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 40rem) {
  .projects__inner {
    padding: clamp(2rem, 12vw, 2.5rem) clamp(1rem, 6vw, 1.5rem);
  }

  .projects__grid {
    grid-template-columns: 1fr;
    margin-top: clamp(2rem, 8vw, 2.75rem);
  }
}

/* Contact section */
.contact {
  margin: 0;
  padding: 0;
}

.contact__inner {
  max-width: 68.75rem;
  margin: 0 auto;
}

.contact__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(8, auto);
  gap: clamp(1rem, 3vw, 1.5rem);
  padding: clamp(2rem, 6vw, 3.5rem);
  border-radius: 1.75rem;
  border: 1px solid color-mix(in srgb, var(--text-0) 8%, transparent);
  background: color-mix(in srgb, var(--bg-1) 92%, transparent);
  box-shadow: 0 2.5rem 4rem rgba(2, 8, 23, 0.16);
  overflow: hidden;
}

.contact__grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      140% 120% at 0% 0%,
      color-mix(in srgb, var(--color-secondary) 26%, transparent) 0%,
      transparent 60%
    ),
    radial-gradient(
      110% 80% at 120% 0%,
      color-mix(in srgb, var(--color-tertiary) 20%, transparent) 0%,
      transparent 70%
    );
  opacity: 0.35;
  pointer-events: none;
}

.contact__grid > * {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.contact__intro {
  grid-area: 1 / 1 / 2 / 9;
  display: flex;
  flex-direction: column;
  gap: var(--space-heading-to-text);
}

.contact__intro h2 {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.85rem, 4vw, 2.5rem);
}

.contact__intro p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-1);
  overflow-wrap: anywhere;
}

.contact__visual {
  grid-area: 1 / 7 / 8 / 13;
  margin: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  overflow: hidden;
}

.contact__visual img {
  height: 70%;
  display: block;
  object-fit: cover;
}

.contact__form {
  grid-area: 2 / 1 / 7 / 9;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  z-index: 10;
}

.contact__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

.contact__fields > * {
  min-width: 0;
}

:root[data-theme='light'] .contact__grid {
  background: color-mix(in srgb, var(--bg-1) 96%, transparent);
  box-shadow: 0 2rem 4rem rgba(15, 76, 129, 0.18);
}

@media (max-width: 56rem) {
  .contact__grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .contact__intro,
  .contact__form {
    grid-column: 1 / -1;
  }

  .contact__intro {
    display: contents;
  }

  .contact__intro h2 {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .contact__visual img {
    height: 100%;
  }

  .contact__intro p {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .contact__form {
    grid-column: 1 / -1;
    grid-row: 4;
  }

  .contact__visual {
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 18rem;
  }
}

@media (max-width: 64rem) {
  .nav__inner {
    padding-inline: var(--space-md);
  }

  .about__profile-card {
    grid-template-rows: minmax(12rem, 22rem) auto;
  }

  .brand__logo {
    width: 3.2rem;
  }

  .nav__links {
    gap: var(--space-xs);
    margin-left: var(--space-sm);
  }

  .nav__links a {
    font-size: 0.88rem;
    padding: 0.3rem 0.4rem;
  }
}

@media (max-width: 42rem) {
  .contact__fields {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 48rem) {
  main {
    padding: var(--space-nav-to-main) var(--space-section-x) 0;
    gap: var(--space-section-y);
  }

  .hero__ctas {
    justify-content: flex-start;
    gap: var(--space-sm);
  }
  .nav__links {
    display: none;
  }
}

@media (max-width: 40rem) {
  main {
    padding: var(--space-nav-to-main) 0 0;
  }

  .contact__inner {
    padding-inline: var(--space-section-x);
  }

  .about__cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .about__cta-actions .btn {
    width: 100%;
    max-width: 22rem;
    margin-inline: auto;
  }

  .hero__ctas {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }
  .hero__ctas .btn {
    width: 100%;
  }
}

.site-footer {
  padding: var(--space-xl);
  text-align: center;
  color: var(--muted);
}