.page {
  min-height: 100vh;
  max-width: 100%;
  /* No overflow-x here — it breaks position:sticky on .nav_shell */
  background-color: var(--theme-background);
  color: var(--theme-text);
  transition: var(--theme-transition);
}

.page > main {
  max-width: 100%;
  overflow-x: clip;
}

.site_container {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  padding-inline: var(--site-margin);
  box-sizing: border-box;
}

.site_grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--site-gutter);
  row-gap: var(--space-4);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* —— Nav (single bar: expands → compact on scroll) —— */

.nav_shell {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background-color: var(--theme-background);
  color: var(--theme-text);
  transition: var(--theme-transition);
}

.nav_status,
.nav_weather,
.nav_theme,
.nav_name,
.nav_role,
.nav_link,
.nav_theme_label,
.nav_status_dot,
.nav_weather_icon {
  transition: var(--theme-transition);
}

.nav_bar {
  display: flex;
  flex-flow: column;
  justify-content: center;
  padding-block: var(--space-3);
  transition: padding-block 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Compact padding collapse is desktop-only — on mobile it jerks sticky + kills padding */

.nav_grid {
  align-items: center;
}

.nav_brand {
  grid-column: 1 / span 12;
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
  max-width: 100%;
}

.nav_brand_role {
  margin: 0;
  max-width: 100%;
  font-family: var(--font-display);
  font-size: var(--fs-text-md);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--theme-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav_logo {
  flex-shrink: 0;
  width: clamp(5.25rem, 28vw, 6.9375rem); /* scales down when cramped */
  height: auto;
  color: var(--theme-text);
  transition:
    width 560ms cubic-bezier(0.16, 1, 0.3, 1),
    color var(--theme-duration) var(--theme-ease);
}

.nav_shell.is-compact .nav_logo {
  width: clamp(5.25rem, 28vw, 6.9375rem);
}

.nav_center {
  display: none;
  position: relative;
  align-items: center;
  min-width: 0;
  min-height: 2.5rem;
  overflow: hidden;
}

.nav_shell.is-compact .nav_center {
  min-height: 1.5rem;
}

.nav_identity,
.nav_links {
  grid-area: 1 / 1;
}

.nav_identity {
  display: flex;
  flex-flow: column;
  justify-content: center;
  gap: 0.5rem;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 360ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0s;
}

.nav_shell.is-compact .nav_identity {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: none;
  transition:
    opacity 220ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 220ms;
}

.nav_name {
  margin: 0;
  font-size: 0.75rem;
  line-height: 0.7;
  color: var(--theme-text);
}

.nav_role {
  margin: 0;
  font-size: clamp(0.9375rem, 0.86rem + 0.28vw, 1.25rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--theme-text);
  white-space: nowrap;
}

.nav_links {
  display: flex;
  align-items: center;
  gap: var(--site-gutter);
  margin: 0;
  padding: 0;
  list-style: none;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 280ms;
}

.nav_links > li {
  opacity: 0;
  transition: opacity 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* After identity fades, all links fade in together */
.nav_shell.is-compact .nav_links {
  visibility: visible;
  pointer-events: auto;
  transition: visibility 0s linear 0s;
}

.nav_shell.is-compact .nav_links > li {
  opacity: 1;
  transition-delay: 180ms;
}

@media (prefers-reduced-motion: reduce) {
  .nav_links > li {
    transition: none;
  }

  .nav_shell.is-compact .nav_links > li {
    transition-delay: 0ms;
  }
}

.nav_link {
  display: inline-flex;
  font-size: var(--fs-nv-link);
  line-height: 1.5;
  color: var(--theme-text);
  white-space: nowrap;
}

.nav_link_flip {
  display: inline-block;
  overflow: hidden;
  height: 1.5em;
  vertical-align: top;
}

.nav_link_flip_track {
  display: flex;
  flex-flow: column;
  transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nav_link_flip_line {
  display: block;
  height: 1.5em;
  line-height: 1.5;
}

.nav_link:hover .nav_link_flip_track,
.nav_link:focus-visible .nav_link_flip_track {
  transform: translateY(-50%);
}

@media (prefers-reduced-motion: reduce) {
  .nav_link_flip_track {
    transition: none;
  }

  .nav_link:hover .nav_link_flip_track,
  .nav_link:focus-visible .nav_link_flip_track {
    transform: none;
  }

  .nav_link:hover,
  .nav_link:focus-visible {
    color: var(--theme-text-faded);
  }
}

.nav_meta {
  grid-column: 1 / span 12;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  min-width: 0;
}

.nav_status,
.nav_weather,
.nav_theme {
  align-items: center;
  gap: var(--space-0-5);
  font-size: var(--fs-text-xs);
  line-height: 1.5;
  color: var(--theme-text);
  white-space: nowrap;
}

/* Mobile Figma: availability + weather hidden (must win over shared display) */
.nav_status,
.nav_weather {
  display: none;
}

.nav_theme {
  display: inline-flex;
}

.nav_status {
  gap: var(--space-1);
}

.nav_theme {
  gap: var(--space-1-5);
}

.nav_status_dot {
  flex-shrink: 0;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--radius-round);
  background-color: var(--theme-text);
}

.nav_weather {
  min-width: 4.75rem;
  transition: opacity 320ms var(--theme-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.nav_weather.is-loading {
  opacity: 0.55;
}

.nav_weather_icon {
  flex-shrink: 0;
  display: inline-block;
  width: 1.125rem;
  height: 1.125rem;
  margin-block: -0.05em;
  background-color: var(--theme-text);
  -webkit-mask: var(--weather-mask) center / contain no-repeat;
  mask: var(--weather-mask) center / contain no-repeat;
}

.nav_weather_temp {
  display: inline-block;
  min-width: 2.75ch;
  font-variant-numeric: tabular-nums;
}

.nav_theme_label {
  min-width: 2.25rem;
}

.nav_toggle {
  position: relative;
  flex-shrink: 0;
  width: 2.25rem;
  height: 1.25rem;
  border-radius: var(--radius-round);
  background-color: var(--theme-toggle-track);
  box-shadow:
    0 0.0625rem 0.125rem rgba(16, 24, 40, 0.06),
    0 0.0625rem 0.1875rem rgba(16, 24, 40, 0.1);
  transition: background-color var(--theme-duration) var(--theme-ease);
}

.nav_toggle_thumb {
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1rem;
  height: 1rem;
  border-radius: var(--radius-round);
  background-color: var(--theme-toggle-thumb);
  box-shadow: 0 0.0625rem 0.125rem rgba(16, 24, 40, 0.12);
  transition:
    transform var(--theme-duration) var(--theme-ease),
    background-color var(--theme-duration) var(--theme-ease);
}

html[data-theme="brand"] .nav_toggle_thumb {
  transform: translateX(1rem);
}

.nav_contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;
  padding: 0.375rem;
  border: var(--border-small) solid var(--theme-button-bg);
  border-radius: var(--radius-xs);
  background-color: var(--theme-button-bg);
  color: var(--theme-button-text);
  font-size: var(--fs-btn-main);
  line-height: 1;
  white-space: nowrap;
  min-height: 1.5rem;
  transition:
    min-height 560ms cubic-bezier(0.16, 1, 0.3, 1),
    padding 560ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color var(--theme-duration) var(--theme-ease),
    color var(--theme-duration) var(--theme-ease),
    border-color var(--theme-duration) var(--theme-ease);
}

.nav_shell.is-compact .nav_contact {
  min-height: 1.5rem;
  padding: 0.375rem;
}

.nav_contact:hover {
  opacity: 0.92;
}

/* Mobile nav: logo+role | theme+contact — must not overlap when narrow */
@media (max-width: 63.999em) {
  .nav_bar {
    padding-block: var(--space-4);
  }

  .nav_grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
  }

  .nav_brand,
  .nav_meta {
    grid-column: auto;
  }

  .nav_brand {
    flex: 1 1 0;
    min-width: 0;
    padding-right: 0.25rem;
  }

  .nav_meta {
    flex: 0 1 auto;
    flex-wrap: nowrap;
    gap: 0.5rem;
    min-width: 0;
  }

  .nav_theme_label {
    min-width: 0;
  }
}

/* Narrow: drop theme label + shrink contact so brand/meta don’t collide */
@media (max-width: 25em) {
  .nav_theme_label {
    display: none;
  }

  .nav_brand_role {
    font-size: var(--fs-text-xs);
  }

  .nav_contact {
    padding-inline: 0.65rem;
  }
}

@media (max-width: 20em) {
  .nav_brand_role {
    display: none;
  }
}

@media (min-width: 64em) {
  .nav_shell.is-compact .nav_bar {
    padding-block: 0;
  }

  .nav_brand {
    grid-column: 1 / span 2;
    flex-flow: row;
    align-items: center;
    gap: 0;
  }

  .nav_brand_role {
    display: none;
  }

  .nav_logo {
    width: 8.125rem; /* was 8.875rem — slightly smaller at rest */
  }

  .nav_shell.is-compact .nav_logo {
    width: 4.9375rem;
  }

  .nav_center {
    display: grid;
    grid-column: 5 / span 4;
    align-items: center;
  }

  .nav_status,
  .nav_weather {
    display: inline-flex;
  }

  .nav_theme {
    display: inline-flex;
  }

  .nav_meta {
    grid-column: 9 / span 4;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: var(--space-3-5);
  }

  .nav_contact {
    margin-left: 0;
    min-height: 2.125rem;
    padding: var(--space-0-5) var(--space-2);
  }

  .nav_shell.is-compact .nav_contact {
    min-height: 1.5rem;
    padding: 0.15rem 0.65rem;
  }
}

.nav_shell.is-reduced-motion .nav_bar,
.nav_shell.is-reduced-motion .nav_logo,
.nav_shell.is-reduced-motion .nav_identity,
.nav_shell.is-reduced-motion .nav_links,
.nav_shell.is-reduced-motion .nav_links > li,
.nav_shell.is-reduced-motion .nav_contact {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .nav_bar,
  .nav_logo,
  .nav_identity,
  .nav_links,
  .nav_contact {
    transition: none;
  }
}

/* —— Hero —— */

.hero_wrap {
  background-color: var(--theme-background);
  color: var(--theme-text);
  padding-top: 4rem; /* mobile — more air below sticky nav */
  padding-bottom: 0;
}

.hero_title {
  margin: 0;
  grid-column: 1 / span 12;
  max-width: none;
  font-family: var(--font-display);
  font-size: var(--fs-display-xl); /* fluid 34→80 from tokens */
  font-weight: 500;
  line-height: var(--leading-display);
  letter-spacing: -0.03em;
  color: var(--theme-text);
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (min-width: 64em) {
  .hero_wrap {
    padding-top: var(--section-xl);
    padding-bottom: var(--section-md);
  }

  .hero_title {
    grid-column: 1 / span 8;
    max-width: 18.5ch;
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* Shared section primitives */

.section_tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0-5);
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-tag-main);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--theme-text);
}

.section_heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--theme-text);
}

/* —— Intro —— */

.intro_wrap {
  background-color: var(--theme-background);
  color: var(--theme-text);
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.intro_actions {
  grid-column: 1 / span 12;
  display: flex;
  align-items: flex-start;
  order: 2;
}

.intro_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.375rem;
  padding: var(--space-1) var(--space-2);
  border: var(--border-small) solid var(--theme-button-bg);
  border-radius: var(--radius-xs);
  background-color: var(--theme-button-bg);
  color: var(--theme-button-text);
  font-size: var(--fs-btn-main);
  line-height: 1;
  white-space: nowrap;
}

.intro_button:hover {
  opacity: 0.92;
}

.intro_text {
  grid-column: 1 / span 12;
  margin: 0;
  max-width: none;
  font-size: var(--fs-text-main); /* fluid 14→17 */
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  color: var(--theme-text);
  order: 1;
}

/* Mobile: title (hero) → copy → CTA */
@media (max-width: 63.999em) {
  .intro_wrap .site_grid {
    display: flex;
    flex-flow: column;
    gap: 2rem;
  }
}

@media (min-width: 64em) {
  .intro_wrap {
    padding-block: var(--section-md);
  }

  .intro_wrap .site_grid {
    display: grid;
  }

  .intro_actions {
    grid-column: 1 / span 4;
    order: 0;
  }

  .intro_text {
    grid-column: 5 / span 8;
    max-width: var(--text-max-body);
    order: 0;
  }
}

/* —— About me —— */

.about_wrap {
  background-color: var(--theme-background);
  color: var(--theme-text);
  padding-block: var(--section-md);
}

.about_intro {
  grid-column: 1 / span 12;
}

.about_content {
  grid-column: 1 / span 12;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 1.5rem;
  row-gap: var(--space-5);
  align-items: start;
}

.about_media {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: min(11rem, 100%);
  aspect-ratio: 1 / 1;
  height: auto;
  overflow: clip;
  border-radius: var(--radius-xs);
  background-color: #dadada;
}

/* Side-by-side portrait — Figma mobile ~402 (113px media) */
@media (min-width: 25em) and (max-width: 63.999em) {
  .about_content {
    grid-template-columns: clamp(5.5rem, 28vw, 7.0625rem) minmax(0, 1fr);
  }

  .about_media {
    max-width: none;
  }
}

.about_portrait {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: bottom center;
  aspect-ratio: 1 / 1;
  transform: scale(1.14);
  transform-origin: center center;
  /* will-change only while actively scaling (class toggled in JS if needed) */
  backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .about_portrait {
    transform: none;
    will-change: auto;
  }
}

.about_copy {
  display: flex;
  flex-flow: column;
  gap: var(--space-4);
  min-width: 0;
  padding-block: 0;
}

.about_heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-display-md); /* Figma mobile: display-md 20 */
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--theme-text);
}

.about_text {
  display: flex;
  flex-flow: column;
  gap: var(--space-4);
  max-width: var(--text-max-body);
}

.about_text p {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-text-main);
  font-weight: 500;
  line-height: 1.5;
  color: var(--theme-text);
}

.about_cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  width: fit-content;
  max-width: 100%;
  padding-top: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-text-main);
  font-weight: 500;
  line-height: 1.5;
  color: var(--theme-text);
}

.about_cta_label {
  display: inline-block;
  text-decoration: underline;
  text-decoration-thickness: max(1px, 0.06em);
  text-underline-offset: 0.22em;
  white-space: nowrap;
}

.about_cta_icon {
  flex-shrink: 0;
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  color: inherit;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.about_cta:hover .about_cta_icon,
.about_cta:focus-visible .about_cta_icon {
  transform: translate(0.2em, -0.2em);
}

@media (prefers-reduced-motion: reduce) {
  .about_cta_icon {
    transition: none;
  }

  .about_cta:hover .about_cta_icon,
  .about_cta:focus-visible .about_cta_icon {
    transform: none;
  }
}

@media (min-width: 64em) {
  .about_intro {
    grid-column: 1 / span 4;
  }

  .about_content {
    grid-column: 5 / span 8;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    column-gap: var(--space-5);
    align-items: stretch;
  }

  .about_media {
    max-width: 22rem;
  }

  .about_heading {
    font-size: var(--fs-display-md);
  }

  .about_copy {
    gap: var(--space-5);
    padding-block: var(--space-4);
    padding-inline: var(--space-5);
    justify-content: center;
  }
}

/* —— Teams logo bar —— */

.teams_wrap {
  background-color: var(--theme-background);
  color: var(--theme-text);
  padding-block: 1rem; /* mobile Figma section-s */
}

@media (min-width: 64em) {
  .teams_wrap {
    padding-block: var(--section-md);
  }
}

.teams_grid {
  align-items: center;
}

.teams_label_wrap {
  grid-column: 1 / span 12;
  display: flex;
  align-items: center;
}

.teams_label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0-5);
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-tag-main);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--theme-text);
}

.teams_bracket {
  display: inline-block;
}

.teams_marquee {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.teams_marquee_track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 0;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
  /* Motion driven by js/teams-marquee.js (modulo wrap — no keyframe reset jump) */
}

.teams_logos {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-3);
  /* Trailing gap = inter-logo gap so set A→B seam matches logo→logo */
  padding-inline-end: var(--space-3);
  margin: 0;
  padding-block: 0;
  padding-inline-start: 0;
  list-style: none;
}

.teams_logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 10.5rem;
  padding: var(--space-2) var(--space-1-5);
}

.teams_logo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 3.5rem;
  object-fit: contain;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.teams_logo--ukaria {
  width: 7.5rem;
}

.teams_logo--ukaria img {
  max-height: 2.65rem;
}

html[data-theme="brand"] .teams_logo img {
  filter: brightness(0) invert(1);
}

@media (prefers-reduced-motion: reduce) {
  .teams_marquee {
    mask-image: none;
    -webkit-mask-image: none;
    overflow-x: auto;
  }

  .teams_marquee_track .teams_logos[aria-hidden="true"] {
    display: none;
  }
}

@media (min-width: 64em) {
  .teams_label_wrap {
    grid-column: 1 / span 4;
  }

  .teams_marquee {
    grid-column: 5 / -1;
  }

  .teams_logo {
    width: 11.5rem;
    padding: 1.166rem 1.256rem;
  }

  .teams_logo img {
    max-height: 3.95rem;
  }

  .teams_logo--ukaria {
    width: 8rem;
  }

  .teams_logo--ukaria img {
    max-height: 2.85rem;
  }
}

/* —— Interlude (diagram animation slot) —— */

.interlude_wrap {
  background-color: var(--theme-background);
  color: var(--theme-text);
  padding-block: var(--section-md);
}

.interlude_copy {
  grid-column: 1 / span 12;
  display: flex;
  flex-flow: column;
  gap: var(--space-2-5);
  align-items: flex-start;
}

/* Mobile Figma hides the Interlude eyebrow tag */
.interlude_copy .section_tag {
  display: none;
}

.interlude_media {
  grid-column: 1 / span 12;
  width: 100%;
  min-width: 0;
}

.interlude_placeholder {
  width: 100%;
  aspect-ratio: 782 / 348;
  min-height: 12rem;
  border: var(--border-small) dashed color-mix(in srgb, var(--theme-text) 35%, transparent);
  border-radius: var(--radius-xs);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--theme-text) 6%, transparent) 0%,
      transparent 55%
    ),
    var(--theme-background);
}

@media (min-width: 64em) {
  .interlude_copy {
    grid-column: 1 / span 4;
  }

  .interlude_copy .section_tag {
    display: inline-flex;
  }

  .interlude_media {
    grid-column: 5 / span 8;
  }
}

/* —— How I help —— */

.help_wrap {
  background-color: var(--theme-background);
  color: var(--theme-text);
  padding-block: var(--section-md);
}

.help_intro {
  grid-column: 1 / span 12;
}

.help_panels {
  grid-column: 1 / span 12;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

/* Side heading + panels — Figma mobile ~402 */
@media (min-width: 25em) and (max-width: 63.999em) {
  .help_intro {
    grid-column: 1 / span 4;
  }

  .help_panels {
    grid-column: 5 / span 8;
  }
}

.help_panel {
  display: flex;
  flex-flow: column;
  gap: var(--space-5);
  min-width: 0;
}

.help_panel_title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--theme-text);
}

.help_panel_text {
  margin: 0;
  max-width: var(--text-max-body);
  font-family: var(--font-display);
  font-size: var(--fs-text-main);
  font-weight: 500;
  line-height: 1.5;
  color: var(--theme-text);
}

@media (min-width: 64em) {
  .help_intro {
    grid-column: 1 / span 4;
  }

  .help_panels {
    grid-column: 5 / span 8;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--site-gutter);
    row-gap: var(--space-8);
  }
}

/* —— Results Snapshot —— */

.results_wrap {
  background-color: var(--theme-background);
  color: var(--theme-text);
  padding-block: var(--section-md);
}

.results_intro {
  grid-column: 1 / span 12;
  display: flex;
  flex-flow: column;
  gap: var(--space-2-5);
  align-items: flex-start;
}

.results_note {
  grid-column: 1 / span 12;
  margin: 0;
  max-width: 15.625rem;
  padding-top: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--fs-text-xs);
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-brand-primary);
  opacity: 1;
  -webkit-text-fill-color: var(--color-brand-primary);
}

html[data-theme="brand"] .results_note {
  color: var(--color-brand-background);
  -webkit-text-fill-color: var(--color-brand-background);
}

.results_stats {
  grid-column: 1 / span 12;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 25em) and (max-width: 63.999em) {
  .results_intro {
    grid-column: 1 / span 4;
  }

  .results_stats {
    grid-column: 5 / span 8;
  }
}

.results_stat {
  display: flex;
  flex-flow: column;
  gap: 0.75rem;
  min-width: 0;
  padding-right: 0;
}

.results_value {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-results-value);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--theme-text);
  font-variant-numeric: tabular-nums;
}

.results_label {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-text-sm);
  font-weight: 500;
  line-height: 1.5;
  color: var(--theme-text);
}

@media (min-width: 64em) {
  .results_intro {
    grid-column: 1 / span 4;
    grid-row: 1;
  }

  .results_note {
    grid-column: 1 / span 4;
    grid-row: 2;
    padding-top: var(--space-1);
    align-self: start;
  }

  .results_stats {
    grid-column: 5 / span 8;
    grid-row: 1 / span 2;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
  }

  .results_stat {
    gap: var(--space-3);
    padding-right: var(--space-3);
  }
}

/* —— Who I work with —— */

.audience_wrap {
  background-color: var(--theme-background);
  color: var(--theme-text);
  padding-top: var(--section-md);
  padding-bottom: var(--section-lg);
}

.audience_intro {
  grid-column: 1 / span 12;
}

.audience_list {
  grid-column: 1 / span 12;
  display: flex;
  flex-flow: column;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.audience_item {
  display: flex;
  gap: var(--space-3-5);
  align-items: flex-start;
}

.audience_bullet {
  flex-shrink: 0;
  display: block;
  width: 1.368rem;
  height: 0.933rem;
  margin-top: 0.25rem;
  object-fit: contain;
}

html[data-theme="brand"] .audience_bullet {
  filter: brightness(0) invert(1);
}

.audience_copy {
  display: flex;
  flex-flow: column;
  gap: var(--space-0-5);
  min-width: 0;
}

.audience_title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--theme-text);
}

.audience_text {
  margin: 0;
  max-width: 42ch;
  font-family: var(--font-display);
  font-size: var(--fs-text-sm);
  font-weight: 500;
  line-height: 1.5;
  color: var(--theme-text);
  text-wrap: pretty; /* avoid orphan words on the last line */
}

@media (min-width: 64em) {
  .audience_intro {
    grid-column: 1 / span 4;
  }

  .audience_list {
    grid-column: 5 / span 6;
  }
}

/* —— Footer contact —— */

.site_footer {
  background-color: var(--theme-background);
  color: var(--theme-text);
  padding-top: var(--section-md);
  padding-bottom: var(--space-5);
}

.footer_grid {
  align-items: end;
}

.footer_links {
  grid-column: 1 / span 12;
  display: flex;
  flex-flow: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer_link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 1.75rem;
  font-family: var(--font-mono);
  font-size: var(--fs-ft-link);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: var(--theme-text);
}

.footer_link:hover {
  opacity: 0.8;
}

.footer_icon {
  flex-shrink: 0;
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
}

html[data-theme="brand"] .footer_icon {
  filter: brightness(0) invert(1);
}

.footer_brand {
  grid-column: 1 / span 12;
  display: flex;
  align-items: flex-end;
  gap: 0.9rem;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-top: var(--space-5);
}

.footer_logo {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: auto;
  color: var(--theme-text);
}

html[data-theme="brand"] .footer_logo {
  filter: brightness(0) invert(1);
}

.footer_dot {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-bottom: 2px;
  border-radius: var(--radius-round);
  background-color: var(--theme-text);
}

@media (min-width: 64em) {
  .footer_dot {
    width: 34px;
    height: 34px;
  }
}

@media (min-width: 64em) {
  .footer_links {
    grid-column: 1 / span 4;
  }

  .footer_brand {
    grid-column: 5 / span 8;
    margin-top: 0;
  }
}