.home-page {
  container-type: inline-size;
  max-width: 1440px;
  margin-inline: auto;
  background: #f5f2ec;
  color: #1e1b27;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  --home-rule: #d7d2c9;
}
.home-page *, .home-page *::before, .home-page *::after { box-sizing: border-box; }
.home-page h1, .home-page h2, .home-page h3, .home-page p { margin: 0; font-weight: 400; }
.home-page a { color: inherit; text-decoration: none; }
.home-page a:focus-visible, .home-page summary:focus-visible { outline: 2px solid #5429ff; outline-offset: 5px; }
.home-page img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-page .home-mobile, .home-menu { display: none; }
.home-header { position: relative; height: 6.6666667cqw; }
.home-header::after { content: ''; position: absolute; left: 4.4444444%; right: 4.4444444%; bottom: 0; height: 1px; background: var(--home-rule); }
.home-wordmark { position: absolute; left: 4.4444444%; top: 2.3611111cqw; font-size: clamp(16px, 1.3888889cqw, 20px); line-height: 2.0833333cqw; }
.home-navigation { display: flex; gap: 1.25cqw; position: absolute; left: 61.6666667%; top: 2.5cqw; font-size: clamp(12px, .9722222cqw, 14px); line-height: 1.3888889cqw; }
.home-navigation a:hover, .home-contact a:hover, .home-footer-navigation a:hover { text-decoration: underline; text-underline-offset: 3px; }
.home-hero { position: relative; height: 66.6666667cqw; }
.home-hero h1 { position: absolute; top: 6.6666667cqw; left: 4.4444444%; width: 54.6666667%; font-size: 6.6666667cqw; line-height: 1; letter-spacing: -.2013889cqw; }
.home-hero h1 span { color: #0967f7; }
.home-hero-illustration { position: absolute; left: 50.3326374%; top: 7.5cqw; width: 26.9166671%; aspect-ratio: 387.6000061 / 545.1400146; background: #ddc6a6; }
.home-hero-illustration img { object-fit: contain; }
.home-positioning { position: absolute; left: 4.4444444%; top: 22.1458333cqw; font-size: clamp(12px, .9722222cqw, 14px); line-height: 1.3888889cqw; }
.home-bio { position: absolute; left: 4.4444444%; top: 25.4861111cqw; width: 33.125%; font-size: 1.3888889cqw; line-height: 2.0833333cqw; }
.home-work-cta { position: absolute; top: 51.4583333cqw; left: 33.39375%; font-size: clamp(12px, .9722222cqw, 14px); line-height: 1.3888889cqw; }
.home-page .home-work-cta { color: #5429ff; }
.home-hero-detail { position: absolute; left: 60.3409704%; top: 52.7777778cqw; width: 26.9166671%; aspect-ratio: 387.6000061 / 322.2999878; box-shadow: inset 0 0 0 1px #1e1b271f; }
.home-selected { position: relative; height: 312.3611111cqw; scroll-margin-top: 24px; }
.home-selected-header::after { content: ''; position: absolute; top: 19.5833333cqw; left: 4.4444444%; right: 4.4444444%; height: 1px; background: var(--home-rule); }
.home-eyebrow { position: absolute; top: 6.5277778cqw; left: 4.4444444%; color: #5429ff; font-size: clamp(12px, .9722222cqw, 14px); line-height: 1.3888889cqw; }
.home-selected h2 { position: absolute; left: 4.4444444%; top: 9.3055556cqw; font-size: 3.8888889cqw; line-height: 4.1666667cqw; letter-spacing: -.1180556cqw; }
.home-project { position: absolute; left: var(--project-x); top: var(--project-y); width: var(--project-width); }
.home-project-link { display: block; }
.home-project-image { width: 100%; aspect-ratio: var(--image-ratio); overflow: hidden; }
.home-project-image picture { display: block; width: 100%; height: 100%; }
.home-project-9 .home-project-image { background: #3ca6bf; }
.home-project-9 .home-project-image img { object-fit: contain; }
.home-project-caption { position: relative; display: grid; grid-template-columns: 3.6111111cqw 1fr; grid-template-rows: 2.0833333cqw 1.3888889cqw; row-gap: .2777778cqw; margin-top: 1.25cqw; }
.home-project-number, .home-project-category { color: #24231f; font-size: clamp(12px, .9722222cqw, 14px); line-height: 1.3888889cqw; }
.home-project-number { padding-top: .1388889cqw; }
.home-project-title { font-size: 1.6666667cqw; line-height: 2.0833333cqw; letter-spacing: -.0138889cqw; }
.home-project-category { grid-column: 2; }
.home-project-inline-caption .home-project-caption { grid-template-columns: 3.1944444cqw auto 1fr; grid-template-rows: 2.0833333cqw; gap: 0; }
.home-project-inline-caption .home-project-number { padding-top: .3472222cqw; }
.home-project-inline-caption .home-project-category { grid-column: 3; justify-self: end; padding-top: .3472222cqw; }
.home-project-8 .home-project-caption { width: 82.4074074%; }
.home-project-9 .home-project-caption { margin-top: 1.4583333cqw; }
.home-project-10 .home-project-caption { margin-top: .7638889cqw; }
.home-project-link:hover .home-project-title { text-decoration: underline; text-underline-offset: .2em; }
.home-footer { height: 41.6666667cqw; position: relative; background: #1e1b27; color: white; }
.home-about-label { position: absolute; top: 5cqw; left: 4.4444444%; font-size: clamp(12px, .9722222cqw, 14px); line-height: 1.3888889cqw; }
.home-about-statement { position: absolute; top: 4.7222222cqw; left: 31.8472222%; width: 59.0277778%; font-size: 3.8888889cqw; line-height: 4.1666667cqw; letter-spacing: -.1180556cqw; }
.home-footer::after { content: ''; position: absolute; top: 24.4444444cqw; left: 4.4444444%; right: 4.4444444%; height: 1px; background: #4c4853; }
.home-contact { position: absolute; top: 27.6388889cqw; left: 4.4444444%; font-size: clamp(12px, .9722222cqw, 14px); line-height: 1.3888889cqw; }
.home-footer-navigation { position: absolute; left: 54.5833333%; top: 29.1666667cqw; display: flex; gap: 1.25cqw; font-size: clamp(12px, .9722222cqw, 14px); line-height: 1.3888889cqw; }
@media (max-width: 767px) {
  .home-page { color: #24231f; }
  .home-page .home-desktop { display: none; }
  .home-page .home-mobile { display: block; }
  .home-header { height: 80px; }
  .home-header::after { left: 20px; right: 20px; }
  .home-wordmark { top: 27px; left: 20px; font-size: 18px; line-height: 27px; color: #1e1b27; }
  .home-navigation { display: none; }
  .home-menu { display: block; position: absolute; z-index: 5; right: 20px; top: 29px; width: 76px; color: #1e1b27; font-size: 14px; line-height: 20px; }
  .home-menu summary { cursor: pointer; list-style: none; }
  .home-menu summary::-webkit-details-marker { display: none; }
  .home-menu nav { position: absolute; top: 34px; right: 0; display: grid; gap: 20px; width: 200px; padding: 24px; background: #f5f2ec; border: 1px solid var(--home-rule); }
  .home-hero { height: auto; display: flex; flex-direction: column; gap: 28px; padding: 48px 20px 64px; }
  .home-hero h1, .home-hero-illustration, .home-positioning, .home-bio, .home-work-cta { position: static; width: 100%; }
  .home-hero h1 { color: #1e1b27; font-size: 50px; line-height: 52px; letter-spacing: -1.5px; }
  .home-hero h1 span { color: inherit; }
  .home-hero-illustration { aspect-ratio: 350 / 456; flex: none; }
  .home-positioning { font-size: 14px; line-height: 20px; }
  .home-bio { font-size: 18px; line-height: 27px; }
  .home-page .home-work-cta { color: #24231f; font-size: 14px; line-height: 20px; }
  .home-hero-detail { display: none; }
  .home-selected { height: auto; padding: 16px 20px 64px; }
  .home-selected-header { display: flex; flex-direction: column; gap: 42px; margin-bottom: 42px; }
  .home-selected-header::after { display: none; }
  .home-eyebrow { position: static; color: #24231f; font-size: 14px; line-height: 20px; }
  .home-selected h2 { position: static; font-size: 36px; line-height: 40px; letter-spacing: -.7px; }
  .home-projects { display: flex; flex-direction: column; gap: 42px; }
  .home-project { position: static; width: 100%; }
  .home-project-image { aspect-ratio: var(--mobile-image-ratio); }
  .home-project-9 .home-project-image { background: #e9b453; }
  .home-project-9 .home-project-image img { object-fit: cover; }
  .home-project-10 .home-project-image { background: black; }
  .home-project-10 .home-project-image img { object-fit: contain; }
  .home-project-caption, .home-project-inline-caption .home-project-caption { display: grid; width: 100%; grid-template-columns: 42px 1fr; grid-template-rows: 26px 20px; row-gap: 12px; margin-top: 12px; }
  .home-project-number, .home-project-inline-caption .home-project-number { font-size: 14px; line-height: 20px; padding: 0; }
  .home-project-title { font-size: 20px; line-height: 26px; letter-spacing: 0; }
  .home-project-category, .home-project-inline-caption .home-project-category { grid-column: 1 / -1; justify-self: start; padding: 0; font-size: 14px; line-height: 20px; }
  .home-footer { display: flex; flex-direction: column; gap: 28px; height: auto; padding: 48px 20px; color: #24231f; background: #f5f2ec; }
  .home-footer::after { display: none; }
  .home-about-label, .home-about-statement, .home-contact { position: static; width: 100%; }
  .home-about-label { font-size: 14px; line-height: 20px; }
  .home-about-statement { font-size: 36px; line-height: 40px; letter-spacing: -.7px; }
  .home-contact { font-size: 14px; line-height: 20px; }
  .home-footer-wordmark { font-size: 24px; line-height: 30px; letter-spacing: -.3px; }
}
@media (max-width: 374px) {
  .home-hero h1 { font-size: 45px; line-height: 48px; }
  .home-selected h2, .home-about-statement { font-size: 32px; line-height: 37px; }
}