@import url('https://cdn.jsdelivr.net/npm/@fontsource/geist-mono@5.2.5/index.css');

:root {
  --page-max: 1280px;
  --media-wide: 1024px;
  --prose: 640px;
  --small-col: 496px;
  --gutter: 80px;
  --section-space: 120px;
  --heading-gap: 32px;
  --caption-gap: 24px;
  --ink: #333333;
  --muted: #666666;
  --divider: rgba(0, 0, 0, 0.08);
  --project-accent: #0088FF;
  --hero-bg: #eef5f8;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: "Inter", Arial, sans-serif;
  font-size: 17px;
  line-height: 28px;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

a {
  transition: opacity 160ms ease;
}

a:hover,
a:focus-visible {
  text-decoration: none;
  opacity: 0.58;
}

img {
  display: block;
  max-width: 100%;
}

figure { margin: 0; }

.project-accent {
  position: static;
  width: 100%;
  height: 4px;
  background: var(--project-accent);
}

.shell {
  width: min(100%, var(--page-max));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-header {
  height: 88px;
  padding-top: 28px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.brand {
  font-family: "Inter", Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: #333;
}

.site-nav {
  display: flex;
  gap: 24px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.project-header {
  padding-top: 32px;
  padding-bottom: 68px;
}

.project-heading {
  max-width: var(--media-wide);
  margin-inline: auto;
}

h1,
h2,
p { margin-top: 0; }

h1 {
  margin-bottom: 4px;
  font-family: "Geist", "Inter", Arial, sans-serif;
  font-size: 48px;
  line-height: 60px;
  font-weight: 500;
  letter-spacing: -0.03em;
}

h2 {
  margin-bottom: var(--heading-gap);
  font-family: "Geist", "Inter", Arial, sans-serif;
  font-size: 28px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.subtitle {
  margin-bottom: 23px;
  font-size: 22px;
  line-height: 28px;
}

.metadata {
  margin-bottom: 0;
  font-family: "Geist Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.01em;
  color: var(--muted);
}

.prose {
  max-width: var(--prose);
  margin-inline: auto;
}

.intro {
  margin-top: 62px;
}

.intro p,
.body-copy p {
  margin-bottom: 0;
}

.full-divider {
  width: 100%;
  border-top: 1px solid var(--divider);
}

.section-divider {
  width: min(100%, var(--media-wide));
  margin: var(--section-space) auto 0;
  border-top: 1px solid var(--divider);
}

.section-divider + .section {
  padding-top: var(--section-space);
}

.section {
  padding-top: var(--section-space);
}

/* Keep 88px from the intro divider to the hero rectangle. */
.full-divider + .section {
  padding-top: 88px;
}

.section > h2 {
  width: min(100%, var(--media-wide));
  margin-inline: auto;
}

.media-wide {
  width: min(100%, var(--media-wide));
  margin-inline: auto;
}

.running-hero {
  height: 576px;
  overflow: visible;
  background: var(--hero-bg);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.running-hero img {
  width: auto;
  height: 620px;
  max-width: none;
}

.split {
  width: min(100%, var(--media-wide));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, var(--small-col)) minmax(0, var(--small-col));
  column-gap: 32px;
  align-items: start;
}

.media-small {
  width: 100%;
}

.icon-media {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.icon-media img {
  width: min(100%, 360px);
  height: auto;
}

.body-copy {
  font-size: 17px;
  line-height: 28px;
}

.square-media img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.flow-section {
  padding-top: 72px;
}

.phones-section {
  padding-top: 32px;
}

.phones-section img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.performance-section {
  padding-top: 88px;
  padding-bottom: 88px;
}

.performance-copy h2 {
  margin-bottom: var(--heading-gap);
}

.project-footer {
  min-height: 118px;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.project-nav-item {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  line-height: 20px;
}

.project-nav-item a {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}

.project-nav-next {
  text-align: right;
}

@media (max-width: 1100px) {
  :root {
    --gutter: 48px;
    --section-space: 96px;
  }

  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 32px;
  }

  .running-hero {
    height: min(56vw, 576px);
  }

  .running-hero img {
    height: min(61vw, 620px);
  }
}

@media (max-width: 760px) {
  :root {
    --gutter: 24px;
    --section-space: 72px;
    --heading-gap: 20px;
  }

  body {
    font-size: 17px;
    line-height: 28px;
  }

  .site-header {
    height: auto;
    padding-top: 24px;
    padding-bottom: 40px;
    gap: 24px;
  }

  .site-nav {
    gap: 16px;
  }

  .project-header {
    padding-top: 18px;
    padding-bottom: 48px;
  }

  h1 {
    font-size: clamp(38px, 10vw, 48px);
    line-height: 1.15;
  }

  h2 {
    font-size: 25px;
    line-height: 32px;
  }

  .subtitle {
    font-size: 17px;
    line-height: 26px;
  }

  .metadata {
    font-size: 12px;
    line-height: 18px;
  }

  .intro {
    margin-top: 44px;
  }

  .section {
    padding-top: var(--section-space);
  }

  .running-hero {
    height: 70vw;
    min-height: 360px;
  }

  .running-hero img {
    height: 78vw;
    min-height: 410px;
  }

  .split {
    grid-template-columns: 1fr;
    row-gap: 28px;
  }

  .split-media-text .body-copy {
    max-width: var(--prose);
  }

  .icon-media {
    max-width: 480px;
    margin-inline: auto;
  }

  .split-text-media .media-small {
    order: 2;
  }

  .body-copy {
    font-size: 17px;
    line-height: 28px;
  }

  .performance-section {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .project-footer {
    min-height: 104px;
    padding-top: 0;
    padding-bottom: 0;
    gap: 24px;
  }
}

@media (max-width: 520px) {
  .site-header {
    align-items: flex-start;
  }

  .brand {
    max-width: 150px;
  }

  .site-nav {
    gap: 14px;
    font-size: 13px;
  }

  .running-hero {
    min-height: 310px;
  }

  .running-hero img {
    min-height: 360px;
  }

  .project-footer {
    font-size: 13px;
  }

  .project-nav-item a {
    font-size: 14px;
    line-height: 20px;
  }
}

/* Alignment lock: header and footer share the 1024px media axis. */
.site-header,
.project-footer {
  width: min(calc(100% - (2 * var(--gutter))), var(--media-wide));
  margin-inline: auto;
  padding-inline: 0;
}

.project-nav-item > span {
  color: #666666;
}

/* ===== Shared portfolio system corrections ===== */
:root {
  --ink: #333333;
  --metadata: #666666;
}

.site-header,
.project-footer {
  width: min(calc(100% - (2 * var(--gutter))), var(--media-wide));
  padding-inline: 0;
}

.site-nav { font-weight: 500; }

h1,
h2 {
  font-family: "Geist", "Inter", Arial, sans-serif;
  font-weight: 500;
}

h1 {
  font-size: 48px;
  line-height: 60px;
  letter-spacing: -0.03em;
}

h2 {
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -0.02em;
}

.subtitle {
  font-size: 22px;
  line-height: 28px;
}

.metadata,
.project-nav-item > span { color: var(--metadata); }
.project-nav-item a { font-weight: 500; }

/* ===== Nexthink Portal V6: literal Figma handoff ===== */
.project-v6 { --project-accent: #8E8E93; }

.project-v6 .v6-block,
.project-v6 .v6-reflection {
  width: min(100%, var(--page-max));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.project-v6 .v6-hero-block {
  padding-top: 88px;
}

.project-v6 .section-divider {
  width: min(calc(100% - (2 * var(--gutter))), var(--media-wide));
  margin: 56px auto 0;
  border-top: 1px solid var(--divider);
}

.project-v6 .section-divider + .v6-block,
.project-v6 .section-divider + .v6-reflection {
  padding-top: 56px;
}

.project-v6 .v6-section-title {
  width: min(100%, var(--media-wide));
  margin: 0 auto 32px;
}

.project-v6 figure {
  margin: 0;
  overflow: visible;
}

.project-v6 figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* Final exported assets are 2x. Display dimensions follow the Figma frames. */
.project-v6 .v6-hero {
  width: min(100%, 1024px);
  margin-inline: auto;
}
.project-v6 .v6-hero img { width: 1024px; }

.project-v6 .v6-custom-dashboard {
  align-items: start;
}
.project-v6 .v6-custom-dashboard .body-copy h2 {
  margin-bottom: 32px;
}
.project-v6 .v6-square-image {
  width: 496px;
  height: 496px;
}
.project-v6 .v6-square-image img {
  width: 496px;
  height: 496px;
  object-fit: contain;
}

.project-v6 .v6-widgets {
  width: min(100%, 1024px);
  margin-inline: auto;
}
.project-v6 .v6-widgets img { width: 1024px; }

.project-v6 .v6-prose-below {
  margin-top: 32px;
}

.project-v6 .interaction-row {
  align-items: start;
}
.project-v6 .interaction-row-second {
  margin-top: 32px;
}
.project-v6 .interaction-copy {
  width: 496px;
}
.project-v6 .interaction-copy p { margin: 0; }
.project-v6 .interaction-frame {
  width: 496px;
  overflow: hidden;
}
.project-v6 .interaction-frame-short { height: 279px; }
.project-v6 .interaction-frame-tall { height: 400px; }
.project-v6 .interaction-frame-short img {
  width: 496px;
  height: 279px;
  object-fit: cover;
}
.project-v6 .interaction-frame-tall img {
  width: 496px;
  height: 400px;
  object-fit: cover;
}

.project-v6 .foundation-row {
  align-items: start;
}
.project-v6 .foundation-row + .foundation-row {
  margin-top: 32px;
}
.project-v6 .foundation-image {
  width: 496px;
  height: 279px;
  border: 1px solid var(--divider);
  overflow: hidden;
}
.project-v6 .foundation-image img {
  width: 496px;
  height: 279px;
  object-fit: cover;
  object-position: center;
}
.project-v6 .foundation-copy h3 {
  margin: 0 0 16px;
}

.project-v6 .v6-reusable {
  width: min(100%, 1024px);
  margin-inline: auto;
}
.project-v6 .v6-reusable img { width: 1024px; }

.project-v6 .v6-navigation {
  width: min(100%, 1024px);
  margin-inline: auto;
}
.project-v6 .v6-navigation img {
  width: 1024px;
  height: auto;
}

.project-v6 .v6-reflection {
  padding-top: 56px;
  padding-bottom: 88px;
}
.project-v6 .reflection-followup {
  margin-top: 72px;
}

@media (max-width: 1100px) {
  .project-v6 .v6-block,
  .project-v6 .v6-reflection {
    padding-inline: var(--gutter);
  }
  .project-v6 .section-divider {
    width: calc(100% - (2 * var(--gutter)));
  }
  .project-v6 .v6-hero img,
  .project-v6 .v6-widgets img,
  .project-v6 .v6-reusable img,
  .project-v6 .v6-navigation img {
    width: 100%;
    height: auto;
  }
  .project-v6 .v6-square-image,
  .project-v6 .v6-square-image img,
  .project-v6 .interaction-copy,
  .project-v6 .interaction-frame,
  .project-v6 .foundation-image,
  .project-v6 .foundation-image img {
    width: 100%;
  }
  .project-v6 .v6-square-image { height: auto; aspect-ratio: 1; }
  .project-v6 .v6-square-image img { height: 100%; }
  .project-v6 .interaction-frame-short,
  .project-v6 .foundation-image { height: auto; aspect-ratio: 496 / 279; }
  .project-v6 .interaction-frame-tall { height: auto; aspect-ratio: 496 / 400; }
  .project-v6 .interaction-frame img,
  .project-v6 .foundation-image img { height: 100%; }
}

@media (max-width: 760px) {
  .project-v6 .v6-hero-block { padding-top: 64px; }
  .project-v6 .section-divider { margin-top: 48px; }
  .project-v6 .section-divider + .v6-block,
  .project-v6 .section-divider + .v6-reflection { padding-top: 48px; }
  .project-v6 .interaction-row-second,
  .project-v6 .foundation-row + .foundation-row { margin-top: 28px; }
  .project-v6 .v6-reflection { padding-bottom: 64px; }
  .project-v6 .reflection-followup { margin-top: 56px; }
}


/* ===== Nexthink Redesign & Design System ===== */
.project-nexthink { --project-accent: #8E8E93; }
.project-nexthink .nx-section {
  width: min(100%, var(--page-max));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.project-nexthink .nx-wide {
  width: min(100%, var(--media-wide));
  margin-inline: auto;
}
.project-nexthink .nx-prose {
  width: min(100%, var(--prose));
  margin-inline: auto;
  font-size: 17px;
  line-height: 28px;
}
.project-nexthink .nx-hero-section {
  padding-top: 88px;
}
.project-nexthink .nx-hero {
  width: min(100%, 1024px);
  aspect-ratio: 16 / 9;
  background: #fff;
  margin-inline: auto;
}
.project-nexthink .nx-hero img,
.project-nexthink .nx-hero video,
.project-nexthink .nx-image-wide img,
.project-nexthink .nx-mini-media img,
.project-nexthink .nx-system-final-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.project-nexthink .nx-hero video {
  display: block;
  background: #fff;
}
.project-nexthink .nx-copy-after {
  margin-top: 32px;
}
.project-nexthink .nx-section-title {
  width: min(100%, 1024px);
  margin: 0 auto 32px;
}
.project-nexthink .nx-working {
  padding-top: 104px;
  padding-bottom: 80px;
}
.project-nexthink .nx-working-grid {
  width: min(100%, 1024px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 32px;
  align-items: start;
}
.project-nexthink .nx-working-copy,
.project-nexthink .nx-working-quote {
  min-width: 0;
}
.project-nexthink .nx-working-grid > h2 {
  grid-area: title;
  width: 100%;
  margin: 0 0 32px;
}
.project-nexthink .nx-working-copy p { margin: 0; }
.project-nexthink .nx-working-quote {
  font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;
  font-size: 24px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: 0;
}
.project-nexthink .nx-working-grid {
  grid-template-areas:
    "title title"
    "copy quote";
}
.project-nexthink .nx-working-copy { grid-area: copy; }
.project-nexthink .nx-working-quote { grid-area: quote; }
.project-nexthink .nx-foundation {
  padding-top: 0;
  padding-bottom: 80px;
}
.project-nexthink .nx-foundation-title {
  width: min(100%, 1024px);
  margin: 0 auto 32px;
}
.project-nexthink .nx-three-up {
  width: min(100%, 1024px);
  margin: 96px auto 0;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 32px;
}
.project-nexthink .nx-mini {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 32px;
  align-items: start;
}
.project-nexthink .nx-mini-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #fff;
}
.project-nexthink .nx-mini h3 {
  margin: 0 0 20px;
  font-family: "Geist", "Inter", Arial, sans-serif;
  font-size: 17px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: 0;
}
.project-nexthink .nx-mini p { margin: 0; }
.project-nexthink .nx-nav {
  padding-top: 0;
}
.project-nexthink .nx-image-wide {
  width: min(100%, 1024px);
  aspect-ratio: 16 / 9;
  background: #fff;
  margin-inline: auto;
}
.project-nexthink .nx-nav-copy { margin-top: 32px; }
.project-nexthink .nx-explore {
  padding-top: 56px;
}
.project-nexthink .nx-explore-copy { margin-top: 32px; }
.project-nexthink .nx-data {
  padding-top: 88px;
}
.project-nexthink .nx-data-copy { margin-top: 32px; }
.project-nexthink .nx-system {
  padding-top: 88px;
}
.project-nexthink .nx-system-copy { margin-top: 32px; }
.project-nexthink .nx-system-final {
  padding-top: 72px;
}
.project-nexthink .nx-system-final-image {
  width: min(100%, 1024px);
  aspect-ratio: 1024 / 760;
  background: #fff;
  margin-inline: auto;
}
.project-nexthink .nx-disappear-copy { margin-top: 32px; }
.project-nexthink .nx-conclusion {
  padding-top: 88px;
  padding-bottom: 88px;
}
.project-nexthink .nx-conclusion-title,
.project-nexthink .nx-conclusion-copy {
  width: min(100%, var(--prose));
  margin-inline: auto;
}
.project-nexthink .nx-conclusion-title { margin-bottom: 32px; }
.project-nexthink .nx-conclusion-copy p { margin-bottom: 0; }
.project-nexthink .nx-conclusion-copy p + p { margin-top: 20px; }

@media (max-width: 1100px) {
  .project-nexthink .nx-section { padding-inline: var(--gutter); }
}

@media (max-width: 760px) {
  .project-nexthink .nx-hero-section,
  .project-nexthink .nx-working,
  .project-nexthink .nx-foundation,
  .project-nexthink .nx-nav,
  .project-nexthink .nx-data,
  .project-nexthink .nx-system,
  .project-nexthink .nx-conclusion { padding-top: 64px; }
  .project-nexthink .nx-working { padding-bottom: 64px; }
  .project-nexthink .nx-working-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "copy"
      "quote";
    row-gap: 32px;
  }
  .project-nexthink .nx-working-grid > h2 { margin-bottom: 20px; }
  .project-nexthink .nx-working-quote { font-size: 24px; line-height: 32px; }
  .project-nexthink .nx-three-up {
    row-gap: 48px;
    margin-top: 64px;
  }
  .project-nexthink .nx-mini {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }
  .project-nexthink .nx-mini-media { aspect-ratio: 16 / 9; }
  .project-nexthink .nx-foundation,
  .project-nexthink .nx-nav { padding-top: 64px; }
  .project-nexthink .nx-explore { padding-top: 40px; }
  .project-nexthink .nx-system-final { padding-top: 48px; }
  .project-nexthink .nx-conclusion { padding-bottom: 64px; }
}

/* ===== Favr ===== */
.project-favr { --project-accent: #ff7a1a; --favr-bg: #f3f0eb; }
.project-favr .favr-intro-note { margin-top: 28px; }
.project-favr .favr-hero-section { padding-top: 88px; }
.project-favr .favr-hero {
  height: 576px;
  background: var(--favr-bg);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
}
.project-favr .favr-hero img {
  width: auto;
  height: 620px;
  max-width: none;
}
.project-favr .favr-how { padding-top: 88px; }
.project-favr .favr-how > h2 { margin-bottom: 32px; }
.project-favr .favr-contained-media {
  width: 496px;
  height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.project-favr .favr-contained-media img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.project-favr .favr-how .favr-contained-media img { max-width: 390px; max-height: 360px; }
.project-favr .body-copy p + p { margin-top: 20px; }
.project-favr .section-divider { margin-top: 88px; }
.project-favr .section-divider + .section { padding-top: 64px; }
.project-favr .favr-categories-section h2,
.project-favr .favr-monetization-section h2 { margin-bottom: 32px; }
.project-favr .categories-media img { width: 460px; max-height: 330px; object-fit: contain; }
.project-favr .favr-two-phones-section { padding-top: 88px; }
.project-favr .favr-two-phones {
  width: min(100%, 1024px);
  height: 576px;
  overflow: hidden;
}
.project-favr .favr-two-phones img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.project-favr .favr-app-section { padding-top: 88px; }
.project-favr .favr-app-section > h2 { margin-bottom: 32px; }
.project-favr .favr-app-grid {
  width: min(100%, var(--media-wide));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, 496px);
  column-gap: 32px;
  row-gap: 56px;
}
.project-favr .favr-app-grid figure {
  min-height: 530px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.project-favr .favr-app-grid img {
  width: auto;
  height: 480px;
  max-width: 100%;
  object-fit: contain;
}
.project-favr .favr-app-grid figcaption {
  width: 100%;
  margin-top: 18px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}
.project-favr .favr-monetization-section { padding-top: 64px; padding-bottom: 0; }
.project-favr .favr-monetization { align-items: end; }
.project-favr .favr-hand-media {
  width: 496px;
  height: 520px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
}
.project-favr .favr-hand-media img {
  width: auto;
  height: 520px;
  max-width: none;
}

@media (max-width: 1100px) {
  .project-favr .favr-hero { height: min(56vw, 576px); }
  .project-favr .favr-hero img { height: min(61vw, 620px); }
  .project-favr .favr-contained-media,
  .project-favr .favr-hand-media { width: 100%; }
  .project-favr .favr-app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-favr .favr-two-phones { height: auto; aspect-ratio: 16 / 9; }
}

@media (max-width: 760px) {
  .project-favr .favr-hero-section { padding-top: 64px; }
  .project-favr .favr-hero { height: 70vw; min-height: 360px; }
  .project-favr .favr-hero img { height: 78vw; min-height: 410px; }
  .project-favr .favr-how,
  .project-favr .favr-two-phones-section,
  .project-favr .favr-app-section { padding-top: 64px; }
  .project-favr .favr-contained-media { height: auto; min-height: 300px; }
  .project-favr .favr-app-grid { grid-template-columns: 1fr; row-gap: 40px; }
  .project-favr .favr-app-grid figure { min-height: 0; }
  .project-favr .favr-app-grid img { height: auto; max-height: 640px; }
  .project-favr .favr-hand-media { height: 420px; }
  .project-favr .favr-hand-media img { height: 420px; }
}


/* ===== Favr precise handoff corrections ===== */
.project-favr .favr-hero img {
  /* hand-splash is the intended hero artwork; preserve Running Hobo-style bleed */
  width: auto;
  height: 620px;
  max-width: none;
}

.project-favr .favr-how {
  padding-top: 88px;
}
.project-favr .favr-how > h2 {
  margin-bottom: 32px;
}
.project-favr .favr-how .split {
  min-height: 496px;
}
.project-favr .favr-how .favr-contained-media {
  width: 496px;
  height: 496px;
}
.project-favr .favr-how .favr-contained-media img {
  width: 496px;
  height: 496px;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

/* Section separators on Favr are part of the 88px chapter rhythm. */
.project-favr .section-divider {
  margin-top: 44px;
}
.project-favr .section-divider + .section {
  padding-top: 44px;
}

.project-favr .favr-categories-section .split {
  align-items: start;
}
.project-favr .categories-media {
  width: 496px;
  height: 400px;
}
.project-favr .categories-media img {
  width: 496px;
  height: 400px;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

.project-favr .favr-two-phones-section {
  padding-top: 88px;
}
.project-favr .favr-app-section {
  padding-top: 88px;
}
.project-favr .favr-app-grid {
  column-gap: 32px;
  row-gap: 32px;
}
.project-favr .favr-app-grid figure {
  min-height: 0;
}
.project-favr .favr-app-grid img {
  height: 496px;
}
.project-favr .favr-app-grid figcaption {
  margin-top: 16px;
  font-family: "Inter", Arial, sans-serif;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  color: var(--ink);
}

.project-favr .favr-monetization-section {
  padding-top: 44px;
  padding-bottom: 0;
}
.project-favr .favr-monetization {
  align-items: stretch;
}
.project-favr .favr-hand-media {
  width: 496px;
  height: 496px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
}
.project-favr .favr-hand-media img {
  width: 496px;
  height: 496px;
  max-width: none;
  object-fit: contain;
}

@media (max-width: 1100px) {
  .project-favr .favr-how .favr-contained-media,
  .project-favr .categories-media,
  .project-favr .favr-hand-media {
    width: 100%;
  }
  .project-favr .favr-how .favr-contained-media,
  .project-favr .favr-how .favr-contained-media img,
  .project-favr .categories-media,
  .project-favr .categories-media img,
  .project-favr .favr-hand-media,
  .project-favr .favr-hand-media img {
    height: auto;
  }
  .project-favr .favr-how .favr-contained-media,
  .project-favr .favr-hand-media { aspect-ratio: 1; }
  .project-favr .categories-media { aspect-ratio: 496 / 400; }
  .project-favr .favr-how .favr-contained-media img,
  .project-favr .categories-media img,
  .project-favr .favr-hand-media img {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  .project-favr .section-divider { margin-top: 36px; }
  .project-favr .section-divider + .section { padding-top: 36px; }
  .project-favr .favr-app-grid figcaption {
    font-size: 17px;
    line-height: 27px;
  }
}

/* Favr: exact Categories + Monetization handoff */
.project-favr .favr-categories-section {
  padding-top: 60px;
}
.project-favr .favr-categories-section > h2,
.project-favr .favr-monetization-section > h2 {
  margin: 0 0 32px;
}
.project-favr .favr-categories-section .split,
.project-favr .favr-monetization-section .split {
  gap: 32px;
  grid-template-columns: 496px 496px;
  align-items: start;
}
.project-favr .categories-media,
.project-favr .categories-media img {
  width: 496px;
  height: 279px;
  max-width: none;
}
.project-favr .categories-media img { object-fit: contain; }
.project-favr .favr-two-phones-section { padding-top: 32px; }
.project-favr .favr-monetization-section {
  padding-top: 60px;
  padding-bottom: 0;
}
.project-favr .favr-hand-media,
.project-favr .favr-hand-media img {
  width: 496px;
  height: 496px;
  max-width: none;
}
.project-favr .favr-hand-media img { object-fit: contain; }

@media (max-width: 1100px) {
  .project-favr .favr-categories-section .split,
  .project-favr .favr-monetization-section .split {
    grid-template-columns: 1fr;
  }
  .project-favr .categories-media,
  .project-favr .categories-media img,
  .project-favr .favr-hand-media,
  .project-favr .favr-hand-media img {
    width: 100%;
    height: auto;
    max-width: 100%;
  }
  .project-favr .categories-media { aspect-ratio: 496 / 279; }
  .project-favr .favr-hand-media { aspect-ratio: 1; }
}

/* Favr alignment lock: Categories and Monetization share the exact 1024px media axis. */
.project-favr .favr-categories-section,
.project-favr .favr-monetization-section {
  width: min(100%, var(--media-wide));
  margin-inline: auto;
  padding-inline: 0;
}
.project-favr .favr-categories-section > h2,
.project-favr .favr-monetization-section > h2,
.project-favr .favr-categories-section .split,
.project-favr .favr-monetization-section .split {
  width: 100%;
  margin-inline: 0;
}

@media (max-width: 1100px) {
  .project-favr .favr-categories-section,
  .project-favr .favr-monetization-section {
    width: auto;
    margin-inline: var(--gutter);
  }
}

/* ===== Food Tracker — built on the approved Favr template ===== */
.project-food { --project-accent: #CB30E0; --food-bg: #f4eef4; }
.project-food .food-hero-section { padding-top: 88px; }
.project-food .food-hero {
  height: 576px;
  background: var(--food-bg);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
}
.project-food .food-hero img { width: auto; height: 620px; max-width: none; }
.project-food .food-how { padding-top: 88px; }
.project-food .food-how > h2,
.project-food .food-age > h2,
.project-food .food-app-section > h2,
.project-food .food-rewards-section > h2,
.project-food .food-competition-section > h2 { margin-bottom: 32px; }
.project-food .food-contained-media {
  width: 496px;
  min-height: 279px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.project-food .food-contained-media img { display: block; width: 496px; height: 279px; object-fit: contain; }
.project-food .body-copy p + p { margin-top: 20px; }
.project-food .section-divider { margin-top: 60px; }
.project-food .section-divider + .section { padding-top: 60px; }
.project-food .food-two-phones-section { padding-top: 32px; }
.project-food .food-two-phones { height: auto; }
.project-food .food-two-phones img { width: 1024px; height: auto; display: block; }
.project-food .food-app-section { padding-top: 88px; }
.project-food .food-app-grid {
  width: min(100%, var(--media-wide));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 32px;
}
.project-food .food-app-grid figure {
  margin: 0;
  min-height: 612px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.project-food .food-app-grid img { display: block; width: auto; height: 560px; max-width: 100%; object-fit: contain; }
.project-food .food-app-grid figcaption { margin-top: 24px; font-family: "Inter", Arial, sans-serif; font-size: 18px; line-height: 28px; font-weight: 400; text-align: center; }
.project-food .food-rewards-section,
.project-food .food-competition-section { padding-top: 60px; }
.project-food .food-square-media { width: 496px; height: 496px; margin: 0; overflow: hidden; }
.project-food .food-square-media img { display: block; width: 496px; height: 496px; object-fit: contain; }
.project-food .food-competition-section { padding-bottom: 88px; }

@media (max-width: 1100px) {
  .project-food .food-hero { height: min(56vw, 576px); }
  .project-food .food-hero img { height: min(61vw, 620px); }
  .project-food .food-contained-media,
  .project-food .food-contained-media img,
  .project-food .food-square-media,
  .project-food .food-square-media img { width: 100%; height: auto; }
  .project-food .food-contained-media { aspect-ratio: 496 / 279; }
  .project-food .food-contained-media img { height: 100%; }
  .project-food .food-square-media { aspect-ratio: 1; }
  .project-food .food-square-media img { height: 100%; }
  .project-food .food-two-phones img { width: 100%; }
}
@media (max-width: 760px) {
  .project-food .food-hero-section { padding-top: 64px; }
  .project-food .food-hero { height: 70vw; min-height: 360px; }
  .project-food .food-hero img { height: 78vw; min-height: 410px; }
  .project-food .food-how,
  .project-food .food-app-section { padding-top: 64px; }
  .project-food .food-app-grid { grid-template-columns: 1fr; row-gap: 40px; }
  .project-food .food-app-grid figure { min-height: 0; }
  .project-food .food-app-grid img { height: auto; max-height: 640px; }
}

/* Food Tracker final lower-section alignment: artwork sits on footer divider like Favr. */
.project-food .food-competition-section {
  padding-bottom: 0;
}
.project-food .food-competition-section .split {
  align-items: end;
}
.project-food .food-competition-section .food-square-media {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
}
.project-food .food-competition-section .food-square-media img {
  object-position: center bottom;
}

/* Food Tracker: keep lower artwork on divider while text remains top-aligned. */
.project-food .food-competition-section .body-copy {
  align-self: start;
}

/* ===== Stitch ===== */
.project-stitch {
  --project-accent: #05C4D1;
  --stitch-bg: #edf7fb;
}
.project-stitch .intro p + p { margin-top: 20px; }
.project-stitch .intro a { text-decoration: underline; text-underline-offset: 3px; }
.project-stitch .stitch-hero-section { padding-top: 88px; }
.project-stitch .stitch-hero {
  height: 576px;
  background: var(--stitch-bg);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
}
.project-stitch .stitch-hero img {
  width: auto;
  height: 620px;
  max-width: none;
}
.project-stitch .stitch-conversations { padding-top: 88px; }
.project-stitch .stitch-conversations > h2,
.project-stitch .stitch-components-section > h2,
.project-stitch .stitch-closing > h2 { margin-bottom: 32px; }
.project-stitch .stitch-screen-row {
  width: min(100%, var(--media-wide));
  margin-inline: auto;
}
.project-stitch .stitch-screen-row + .stitch-screen-row { margin-top: 32px; }
.project-stitch .stitch-screen-row img {
  width: 100%;
  height: auto;
}
.project-stitch .stitch-copy { margin-top: 32px; }
.project-stitch .stitch-copy p { margin-bottom: 0; }
.project-stitch .stitch-copy p + p { margin-top: 20px; }
.project-stitch .section-divider { margin-top: 60px; }
.project-stitch .section-divider + .section { padding-top: 60px; }
.project-stitch .stitch-components img {
  width: 100%;
  height: auto;
}
.project-stitch .stitch-closing { padding-bottom: 88px; }

@media (max-width: 1100px) {
  .project-stitch .stitch-hero { height: min(56vw, 576px); }
  .project-stitch .stitch-hero img { height: min(61vw, 620px); }
}
@media (max-width: 760px) {
  .project-stitch .stitch-hero-section,
  .project-stitch .stitch-conversations { padding-top: 64px; }
  .project-stitch .stitch-hero { height: 70vw; min-height: 360px; }
  .project-stitch .stitch-hero img { height: 78vw; min-height: 410px; }
  .project-stitch .section-divider { margin-top: 40px; }
  .project-stitch .section-divider + .section { padding-top: 40px; }
  .project-stitch .stitch-screen-row + .stitch-screen-row { margin-top: 24px; }
}

/* ===== Nexthink Workspace ===== */
.project-workspace { --project-accent: #8E8E93; }
.project-workspace .ws-section {
  width: min(100%, var(--page-max));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.project-workspace .ws-prose {
  width: min(100%, var(--prose));
  margin-inline: auto;
  font-size: 17px;
  line-height: 28px;
}
.project-workspace .ws-hero-section { padding-top: 88px; }
.project-workspace .ws-image-wide {
  width: min(100%, 1024px);
  margin-inline: auto;
}
.project-workspace .ws-image-wide img,
.project-workspace .ws-final-image img {
  display: block;
  width: 100%;
  height: auto;
}
.project-workspace .intro p + p { margin-top: 32px; }
.project-workspace .ws-copy-after { margin-top: 32px; }
.project-workspace .ws-conversation,
.project-workspace .ws-bot,
.project-workspace .ws-action,
.project-workspace .ws-final { padding-top: 88px; }
.project-workspace .ws-section-title {
  width: min(100%, 1024px);
  margin: 0 auto 32px;
}
.project-workspace .ws-final { padding-bottom: 0; }
.project-workspace .ws-final-image {
  width: min(100%, 1024px);
  margin-inline: auto;
}
.project-workspace .ws-conclusion {
  padding-top: 88px;
  padding-bottom: 88px;
}
.project-workspace .ws-conclusion-title,
.project-workspace .ws-conclusion-copy {
  width: min(100%, var(--prose));
  margin-inline: auto;
}
.project-workspace .ws-conclusion-title { margin-bottom: 32px; }
.project-workspace .ws-conclusion-copy p { margin-bottom: 0; }
.project-workspace .ws-conclusion-copy p + p { margin-top: 20px; }

@media (max-width: 760px) {
  .project-workspace .ws-hero-section,
  .project-workspace .ws-conversation,
  .project-workspace .ws-bot,
  .project-workspace .ws-action,
  .project-workspace .ws-final,
  .project-workspace .ws-conclusion { padding-top: 64px; }
  .project-workspace .ws-conclusion { padding-bottom: 64px; }
}

/* Homepage */
.home {
  background: #fff;
  color: #333;
}
.home-accent {
  background: #fff;
}
.home-shell {
  width: min(100%, 1024px);
  margin-inline: auto;
  padding-inline: 0;
}
.home .site-header {
  height: 88px;
  padding-top: 28px;
  padding-bottom: 0;
  align-items: flex-start;
}
.home .site-nav {
  font-family: "Inter", Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}
.home-hero {
  padding-top: 56px;
}
.home-hero-inner {
  width: min(100%, 640px);
  margin-inline: auto;
}
.home-hero h1 {
  margin: 0 0 24px;
  font-family: "Geist", "Inter", Arial, sans-serif;
  font-size: 45px;
  line-height: 54px;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.home-intro {
  margin: 0 0 40px;
  font-family: "Inter", Arial, sans-serif;
  font-size: 17px;
  line-height: 28px;
  font-weight: 400;
}
.home-intro a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.home-meta {
  margin: 0;
  font-family: "Geist Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #666;
}
.home-work {
  padding-top: 96px;
}
.home-work > h2,
.archive > h2 {
  margin: 0 0 32px;
  font-family: "Geist", "Inter", Arial, sans-serif;
  font-size: 28px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.featured-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.work-card {
  display: block;
}
.home-media-placeholder {
  width: 320px;
  height: 240px;
  aspect-ratio: auto;
  background: #cfcfcf;
}
.work-card h3 {
  margin: 24px 0 8px;
  font-family: "Geist", "Inter", Arial, sans-serif;
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.work-card p {
  margin: 0;
  color: #666;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}
.archive {
  padding-top: 88px;
}

.archive-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}
.archive-grid .archive-placeholder {
  width: 232px;
  height: 174px;
  aspect-ratio: auto;
  background: #cfcfcf;
}
.archive-grid .work-card h3 {
  margin-top: 24px;
  font-size: 17px;
  line-height: 28px;
  letter-spacing: 0;
}
.archive-grid .work-card p {
  font-family: "Inter", Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
}
.home-about {
  padding-top: 96px;
}
.about-inner {
  width: min(100%, 640px);
  margin-inline: auto;
}
.about-inner h2 {
  margin: 0 0 24px;
  font-family: "Geist", "Inter", Arial, sans-serif;
  font-size: 45px;
  line-height: 54px;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.about-inner p {
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  font-size: 17px;
  line-height: 28px;
  font-weight: 400;
}
.about-inner p + p {
  margin-top: 24px;
}
.home-footer {
  padding-top: 96px;
  padding-bottom: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Inter", Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}
.home-footer span {
  font-weight: 500;
}
.home-footer a {
  font-weight: 400;
}
@media (max-width: 760px) {
  .home-shell {
    width: 100%;
    padding-inline: 24px;
  }
  .home .site-header {
    padding-top: 24px;
  }
  .home-hero {
    padding-top: 48px;
  }
  .home-hero-inner {
    width: 100%;
    padding-inline: 24px;
  }
  .home-hero h1 {
    font-size: 36px;
    line-height: 44px;
  }
  .home-work,
  .home-about {
    padding-top: 72px;
  }
  .featured-grid,
  .archive-grid {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .home-media-placeholder {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .archive-grid .archive-placeholder {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .archive {
    padding-top: 72px;
  }
  .home-footer {
    padding-top: 72px;
    padding-bottom: 24px;
  }
  .about-inner {
    width: 100%;
    padding-inline: 24px;
  }
}

/* ===== Global bottom scroll blur ===== */
html {
  --bottom-blur-height: 180px;
  --bottom-blur-amount: 18px;
}

body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--bottom-blur-height);
  z-index: 9999;
  pointer-events: none;
  opacity: 1;
  transition: opacity 180ms ease;
  backdrop-filter: blur(var(--bottom-blur-amount));
  -webkit-backdrop-filter: blur(var(--bottom-blur-amount));
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.03) 14%,
    rgba(0, 0, 0, 0.12) 30%,
    rgba(0, 0, 0, 0.3) 48%,
    rgba(0, 0, 0, 0.62) 70%,
    #000 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.03) 14%,
    rgba(0, 0, 0, 0.12) 30%,
    rgba(0, 0, 0, 0.3) 48%,
    rgba(0, 0, 0, 0.62) 70%,
    #000 100%
  );
}

@media (max-width: 760px) {
  html {
    --bottom-blur-height: 140px;
    --bottom-blur-amount: 14px;
  }
}

/* Hide the bottom blur when the page reaches its end so project navigation stays crisp. */
body.at-page-bottom::after { opacity: 0; }

/* Homepage thumbnail images */
.home-media-placeholder,
.archive-grid .archive-placeholder { overflow: hidden; background: #fff; }
.home-media-placeholder img,
.archive-grid .archive-placeholder img { width: 100%; height: 100%; display: block; object-fit: cover; }


/* ===== Mobile corrections ===== */
@media (max-width: 760px) {
  /* Favr hero: keep the artwork inside its section so it cannot overlap the intro copy above. */
  .project-favr .favr-hero {
    height: auto;
    min-height: 0;
    aspect-ratio: 953 / 1232;
    overflow: hidden;
  }

  .project-favr .favr-hero img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
  }

  /* Favr categories: restore the intended mobile inset and prevent the text/media row from overflowing. */
  .project-favr .favr-categories-section {
    width: calc(100% - 48px);
    margin-inline: auto;
    padding-inline: 0;
  }

  .project-favr .favr-categories-section .split {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 28px;
  }

  .project-favr .favr-categories-section .body-copy,
  .project-favr .favr-categories-section .categories-media,
  .project-favr .favr-categories-section .categories-media img {
    width: 100%;
    max-width: 100%;
  }

  .project-favr .favr-categories-section .categories-media {
    height: auto;
    aspect-ratio: 496 / 279;
  }

  .project-favr .favr-categories-section .categories-media img {
    height: 100%;
    object-fit: contain;
  }
}