@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/google-sans-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  font-display: swap;
  src: url("/assets/fonts/roboto-flex-latin.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  --background: #101010;
  --foreground: #f0efed;
  --secondary: #a1a09e;
  --muted: #797875;
  font-family: "Google Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  /* Shared scale: rem dimensions grow together with the root text size. */
  font-size: 112.5%;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.locale-navigation [data-enter] {
  animation: none !important;
}
.language-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--secondary);
  transition: color 180ms ease;
}
.language-toggle:hover {
  color: var(--foreground);
}
.language-toggle svg {
  width: 1.1875rem;
  height: 1.1875rem;
}
.language-current {
  font-size: 0.625rem;
  font-weight: 500;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@view-transition {
  navigation: auto;
}
::view-transition {
  background: var(--background);
}
::view-transition-group(root),
::view-transition-group(site-header) {
  animation: none;
}
::view-transition-old(root) {
  z-index: 1;
  mix-blend-mode: normal;
  animation: page-leave 220ms cubic-bezier(0.4, 0, 0.6, 1) both;
}
/* The incoming elements already fade and blur in; do not fade their snapshot too. */
::view-transition-new(root) {
  z-index: 0;
  mix-blend-mode: normal;
  animation: none;
}
::view-transition-old(site-header) {
  display: none;
}
::view-transition-new(site-header) {
  animation: none;
}
::view-transition-group(root),
::view-transition-group(site-header),
::view-transition-image-pair(root),
::view-transition-image-pair(site-header) {
  overflow: visible;
}

@keyframes page-leave {
  from {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0);
  }
  to {
    opacity: 0;
    filter: blur(0.5rem);
    transform: translateY(-0.875rem);
  }
}
@keyframes content-arrive {
  from {
    opacity: 0;
    filter: blur(var(--enter-blur, 0.75rem));
    transform: translateY(-0.375rem);
  }
  to {
    opacity: 1;
    filter: none;
    transform: none;
  }
}
@keyframes title-arrive {
  from {
    opacity: 0;
    transform: translateY(-0.375rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
[data-enter] {
  overflow: visible;
  will-change: filter, opacity, transform;
  animation: content-arrive 520ms cubic-bezier(0.2, 0.65, 0.25, 1)
    calc(var(--enter-delay, 0ms) + var(--page-enter-wait, 0ms)) both;
}
/* Give text filters their own padded paint area without changing the layout. */
.enter-shell {
  display: flow-root;
  overflow: visible;
}
.enter-layer {
  display: block;
  padding: 4rem;
  margin: -4rem;
  overflow: visible;
  pointer-events: none;
}
/* Blur padding must not intercept nearby links; controls keep their own hit boxes. */
.enter-layer :is(a, button) {
  pointer-events: auto;
}
.enter-inline {
  display: inline-flex;
  align-items: center;
  gap: inherit;
}
.display-name .enter-layer {
  --enter-blur: 1rem;
}
[data-enter]:focus-within,
.enter-shell:focus-within > [data-enter] {
  animation: none;
}

* {
  box-sizing: border-box;
}
html {
  background: var(--background);
  scroll-padding-top: 2rem;
  scrollbar-gutter: stable;
}
/* Only the viewport clips horizontally; the inner blur layers remain visible. */
body {
  margin: 0;
  overflow-x: clip;
  color: var(--foreground);
  line-height: 1.6;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  font: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
a,
img {
  -webkit-user-drag: none;
}
button {
  cursor: pointer;
}
img,
svg {
  display: block;
  max-width: 100%;
}
h1,
h2,
h3,
p {
  margin: 0;
}
ul {
  margin: 0;
  padding: 0;
}
[hidden] {
  display: none !important;
}
::selection {
  color: #fff;
  background: #ffffff26;
}
:focus-visible {
  outline: 0.125rem solid var(--foreground);
  outline-offset: 0.4375rem;
  border-radius: 0.125rem;
}
main:focus {
  outline: none;
}

.site-shell {
  width: min(100% - 7rem, 60rem);
  margin-inline: auto;
}
.site-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  column-gap: 1.5rem;
  height: 6.5rem;
  view-transition-name: site-header;
}
.main-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-shrink: 0;
}
.main-nav > a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-family: "Google Sans", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--secondary);
  transition: color 180ms ease;
}
.main-nav > a:hover {
  color: var(--foreground);
}
.main-nav [aria-current] {
  color: var(--foreground);
}
@media (min-width: 84.375em) {
  .site-header {
    position: relative;
  }
  .language-toggle {
    position: absolute;
    top: 50%;
    right: calc(50% - 50vw + 2rem);
    transform: translateY(-50%);
  }
}
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  margin-right: auto;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}
.breadcrumbs > a {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 2.75rem;
  color: var(--secondary);
  transition: color 180ms ease;
}
.breadcrumbs > a:hover {
  color: var(--foreground);
}
.breadcrumb-separator {
  color: var(--muted);
}
.breadcrumb-title {
  font: inherit;
  color: var(--foreground);
}
.breadcrumb-project {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.arrow {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
:is(.home-page, .contact-page) .site-shell {
  --header-height: 6.5rem;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
:is(.home-page, .contact-page) .site-header {
  flex: 0 0 var(--header-height);
  height: auto;
}
:is(.home-page, .contact-page) main {
  flex: 1;
  display: flex;
  align-items: center;
  padding-block: 3rem calc(var(--header-height) + 3rem);
}

.display-name,
.page-title {
  font-family: "Roboto Flex", sans-serif;
  font-weight: 700;
  font-stretch: 150%;
  font-variation-settings:
    "slnt" 0,
    "wdth" 150,
    "wght" 700,
    "GRAD" 0,
    "XOPQ" 125,
    "YOPQ" 50,
    "YTAS" 650,
    "YTDE" -203,
    "YTFI" 738,
    "YTLC" 514,
    "YTUC" 650;
}

.display-name:hover {
  font-variation-settings:
    "slnt" 0,
    "wdth" 150,
    "wght" 700,
    "GRAD" 0,
    "XOPQ" 155,
    "YOPQ" 50,
    "YTAS" 650,
    "YTDE" -203,
    "YTFI" 738,
    "YTLC" 514,
    "YTUC" 650;
}

.intro {
  padding: 0;
}
.display-name {
  width: fit-content;
  max-width: 100%;
  padding-block: 0.08em;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  letter-spacing: -0.015em;
  line-height: 1.4;
  overflow: visible;
  transition: font-variation-settings 350ms ease;
}
.intro .display-name {
  line-height: 1.2;
  padding-block: 0.05em 0;
}
.intro-bio {
  max-width: 36.25rem;
  margin-top: 0.625rem;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--secondary);
}
.intro-greeting {
  font-weight: 600;
  color: var(--foreground);
}
.intro-bio p + p {
  margin-top: 0.625rem;
}
.intro-bio a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: #ffffff20;
  text-underline-offset: 0.25rem;
  transition:
    color 200ms ease,
    text-decoration-color 200ms ease;
}
.intro-bio a:is(:hover, :focus-visible) {
  color: var(--foreground);
  text-decoration-color: currentColor;
}
.icon-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.icon-links a {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  color: var(--secondary);
  transition: color 180ms ease;
}
.icon-links a:hover {
  color: var(--foreground);
}
.icon-links svg {
  width: 1.1875rem;
  height: 1.1875rem;
}
.intro-icons {
  margin-top: 1.625rem;
  margin-left: -0.5rem;
}

/* Each nested surface keeps its own light position and proximity. */
:is(.feature, .button, .glass-card, .app-icon-link) {
  --light-x: 50%;
  --light-y: 0%;
  --light-proximity: 0;
}
.feature {
  position: relative;
  isolation: isolate;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 3.25rem 2.5rem 3rem;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 1.75rem;
  background:
    radial-gradient(
        ellipse 70% 110% at 50% -25%,
        #ffffff0e,
        #ffffff03 45%,
        transparent 75%
      )
      padding-box,
    linear-gradient(#171717e8, #121212f5) padding-box,
    linear-gradient(165deg, #ffffff24, #ffffff0c 38%, #ffffff05 72%, #ffffff0e)
      border-box;
  box-shadow:
    0 1.875rem 5rem -1.25rem #0009,
    0 4.375rem 10rem -2.5rem #000b,
    inset 0 1px 0 #ffffff05;
  -webkit-backdrop-filter: blur(1rem);
  backdrop-filter: blur(1rem);
}
.feature::before {
  content: "";
  position: absolute;
  inset: 0 15% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ffffff30, transparent);
  pointer-events: none;
}
.feature::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    ellipse 28.75rem 18.75rem at var(--light-x) var(--light-y),
    #ffffff08,
    transparent 75%
  );
  opacity: var(--light-proximity);
  transition: opacity 700ms cubic-bezier(0.2, 0.65, 0.2, 1);
}
.feature:is(:hover, :focus-within)::after {
  opacity: 1;
}
.app-icon-link {
  position: relative;
  isolation: isolate;
  display: block;
  flex: 0 0 auto;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.8125rem;
  --light-intensity: 0.6;
}
.app-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.8125rem;
  object-fit: cover;
}
.feature-copy {
  max-width: 35rem;
}
.feature-copy h2 {
  font-size: clamp(1.375rem, 2.3625vw, 1.625rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.025em;
  max-width: 40.625rem;
  margin-inline: auto;
}
.feature-copy h2 span {
  color: var(--foreground);
}
.feature-copy p {
  max-width: 33.125rem;
  margin: 0.9375rem auto 0;
  font-size: 0.875rem;
  color: var(--secondary);
  line-height: 1.8;
}
.feature-actions,
.detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5625rem;
}
.feature-actions {
  justify-content: center;
}
.button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.6875rem 1.25rem;
  color: var(--foreground);
  border: 1px solid #ffffff1a;
  border-radius: 62.4375rem;
  background:
    radial-gradient(ellipse 90% 150% at 50% -50%, #ffffff10, transparent 75%),
    #2a2a2a;
  box-shadow:
    0 0.5rem 1.5rem -0.625rem #000b,
    inset 0 1px 0 #ffffff0a;
  -webkit-backdrop-filter: blur(0.75rem);
  backdrop-filter: blur(0.75rem);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.6;
  transition:
    color 250ms ease,
    box-shadow 750ms ease;
}
.button:is(:hover, :focus-visible) {
  color: #fff;
  box-shadow:
    0 0.625rem 2rem -0.625rem #000b,
    0 0 1.5rem -0.625rem #ffffff10,
    inset 0 1px 0 #ffffff24;
}

/* Nearby pointers illuminate the surface and a second pool beneath the glass. */
:is(.button, .glass-card, .app-icon-link)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: calc(var(--light-proximity, 0) * var(--light-intensity, 0.85));
  background:
    radial-gradient(
      ellipse var(--light-width, 8.125rem) var(--light-height, 5.625rem) at
        var(--light-x, 50%) var(--light-y, 0%),
      #ffffff30,
      transparent
    ),
    radial-gradient(
      ellipse 5rem 1.5625rem at var(--light-x, 50%) 120%,
      #ffffff0c,
      transparent
    );
  background-repeat: no-repeat;
  box-shadow:
    inset 0 1px 0 #ffffff20,
    inset 0 -1px 0 #ffffff08;
  transition: opacity 700ms cubic-bezier(0.2, 0.65, 0.2, 1);
}
:is(.button, .glass-card, .app-icon-link)::after {
  content: "";
  position: absolute;
  inset: 35% 12% -35%;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    ellipse at var(--light-x, 50%) 50%,
    #ffffff1c,
    transparent 70%
  );
  filter: blur(0.9375rem);
  opacity: calc(var(--light-proximity, 0) * var(--light-intensity, 0.85));
  transition: opacity 850ms ease;
}
:is(.button, .glass-card, .app-icon-link):is(:hover, :focus-visible)::before {
  opacity: var(--light-intensity, 0.85);
}
:is(.button, .glass-card, .app-icon-link):is(:hover, :focus-visible)::after {
  opacity: var(--light-intensity, 0.85);
}
.quiet-link,
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  color: var(--secondary);
  font-size: 0.75rem;
  transition: color 200ms ease;
}
.quiet-link:hover,
.text-link:hover {
  color: var(--foreground);
}
.quiet-link .arrow,
.text-link .arrow {
  width: 1rem;
  height: 1rem;
}

.project-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.project-item {
  min-width: 0;
}
.glass-card {
  --light-intensity: 0.22;
  --light-width: 23.75rem;
  --light-height: 13.125rem;
  position: relative;
  isolation: isolate;
  display: block;
  height: 100%;
  padding: 1.375rem 1.5rem;
  border: 1px solid #ffffff0b;
  border-radius: 1.25rem;
  background:
    radial-gradient(ellipse 110% 170% at 50% -80%, #ffffff08, transparent 70%),
    #242424;
  box-shadow:
    0 0.875rem 2.25rem -1.5625rem #0009,
    inset 0 1px 0 #ffffff06;
  -webkit-backdrop-filter: blur(0.75rem);
  backdrop-filter: blur(0.75rem);
}
.glass-card::after {
  inset: 25% 6% -30%;
  filter: blur(1.5rem);
}
.project-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 0.875rem;
  column-gap: 1.25rem;
  align-items: center;
}
.project-copy {
  min-width: 0;
  align-self: start;
}
.project-chevron {
  color: var(--muted);
  width: 0.875rem;
  height: 0.875rem;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.project-card h3 {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: var(--foreground);
}
.project-card p {
  font-size: 0.875rem;
  color: var(--secondary);
  margin-top: 0.4375rem;
  max-width: 23.75rem;
}

.site-footer {
  padding-block: 1.25rem 2.1875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  font-size: 0.75rem;
  color: var(--secondary);
}
.footer-name {
}
.footer-icons {
  gap: 0.25rem;
  margin-right: -0.5rem;
}
.footer-icons svg {
  width: 1rem;
  height: 1rem;
}
.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  transform: translateY(-180%);
  background: var(--foreground);
  color: var(--background);
  z-index: 10;
  padding: 0.625rem 1rem;
}
.skip-link:focus {
  transform: translateY(0);
}

.page-intro {
  padding-block: 3.9375rem 3.875rem;
}
.page-title {
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  line-height: 1.4;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
  padding-block: 0.08em;
}
.page-description {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--secondary);
  margin-top: 1.1875rem;
  max-width: 42.5rem;
}
.collection {
  padding-top: 3rem;
  margin-bottom: 5.9375rem;
}
.collection-feature {
  margin-bottom: 4.5rem;
}
.featured-works-heading {
  margin-bottom: 1.625rem;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.025em;
}

.contact-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0;
  list-style: none;
}
.contact-links li {
  max-width: 100%;
}
.contact-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 100%;
  min-height: 2.75rem;
}
.contact-link > svg:first-child {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--secondary);
}
.contact-username {
  min-width: 0;
  color: var(--foreground);
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.3125rem;
  transition: text-decoration-color 200ms ease;
}
.contact-link:hover .contact-username {
  text-decoration-color: #ffffff40;
}
.contact-link:hover > svg {
  color: var(--foreground);
}

.detail-intro {
  position: relative;
  padding-bottom: 3.125rem;
}
.detail-eyebrow {
  margin-bottom: 1.0625rem;
  color: var(--muted);
  font-size: 0.75rem;
}
.detail-intro .page-title {
  position: relative;
  z-index: 1;
  padding-block: 1rem;
  overflow: visible;
  filter: none;
  will-change: opacity, transform;
  animation-name: title-arrive;
}
.detail-app-icon-shell {
  isolation: isolate;
  width: 5.625rem;
  height: 5.625rem;
  margin-block: 1.875rem 0.875rem;
}
.detail-app-icon {
  width: 5.625rem;
  height: 5.625rem;
  border-radius: 1.3125rem;
}
.detail-actions {
  margin-top: 1.8125rem;
}
.detail-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.125rem;
  padding-top: 1.5rem;
  padding-bottom: 5.125rem;
}
.detail-section-label {
  color: var(--muted);
  font-size: 0.75rem;
}
.prose {
  max-width: 41.25rem;
  color: var(--secondary);
  font-size: 1.0625rem;
  line-height: 1.85;
}
.prose p + p {
  margin-top: 1.375rem;
}
.prose h2 {
  font-size: 1.25rem;
  color: var(--foreground);
  font-weight: 500;
  margin-top: 2.25rem;
  margin-bottom: 1rem;
  letter-spacing: -0.025em;
}
.prose ul {
  padding-left: 1.25rem;
}
.prose li {
  padding-left: 0.3125rem;
  margin-block: 0.625rem;
}
.prose li::marker {
  color: var(--muted);
}
.research-links {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 0.5625rem;
  margin-top: 1.6875rem;
}
.research-links a {
  font-size: 0.75rem;
}
.project-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.875rem;
  padding-block: 1.875rem;
  margin-bottom: 5rem;
}
.project-pagination > .quiet-link .arrow {
  transform: rotate(180deg);
}
.next-project {
  display: grid;
  grid-template-columns: 1fr 1.25rem;
  column-gap: 1.75rem;
}
.next-project > span {
  font-size: 0.6875rem;
  color: var(--muted);
  grid-column: 1;
}
.next-project strong {
  grid-column: 1;
  font-size: 1rem;
  font-weight: 500;
  color: var(--foreground);
}
.next-project > .arrow {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
}
.error-intro {
  min-height: 65vh;
}
.error-intro .button {
  margin-top: 1.875rem;
}

@media (max-width: 56.25em) {
  .site-shell {
    width: calc(100% - 4rem);
  }
  .site-header {
    height: 6.25rem;
  }
  :is(.home-page, .contact-page) .site-shell {
    --header-height: 6.25rem;
  }
  .feature-copy h2 {
    font-size: 1.4375rem;
  }
}

@media (max-width: 39.375em) {
  .site-shell {
    width: calc(100% - 2.75rem);
  }
  .site-header {
    height: 5.5rem;
  }
  .main-nav {
    gap: 1.5rem;
  }
  .main-nav > a {
    font-size: 0.75rem;
  }
  .main-nav {
    gap: 1rem;
  }
  .projects-page .main-nav [aria-current="page"],
  .contact-page .main-nav [aria-current="page"],
  .detail-page .main-nav [aria-current="location"] {
    display: none;
  }
  .breadcrumbs {
    font-size: 0.75rem;
    gap: 0.4375rem;
  }
  .detail-page .site-header {
    flex-wrap: wrap;
    align-content: center;
    row-gap: 0.25rem;
    height: auto;
    min-height: 6.5rem;
    padding-block: 0.75rem;
  }
  .detail-page .breadcrumbs {
    flex-basis: 100%;
  }
  .detail-page .main-nav {
    margin-left: auto;
  }
  .site-header {
    column-gap: 1rem;
  }
  :is(.home-page, .contact-page) .site-shell {
    --header-height: 5.5rem;
  }
  .display-name {
    font-size: clamp(1.5625rem, 6.75vw, 2rem);
  }
  .intro-bio {
    font-size: 0.875rem;
  }
  .intro-icons {
    margin-top: 1.4375rem;
  }
  .feature {
    padding: 2.25rem 1.375rem 2rem;
    border-radius: 1.375rem;
  }
  .feature-copy h2 {
    font-size: 1.375rem;
    max-width: 20.625rem;
  }
  .feature-actions {
    gap: 0.625rem;
  }
  .project-grid {
    grid-template-columns: 1fr;
  }
  .glass-card {
    padding: 1.25rem;
  }
  .featured-works-heading {
    font-size: 1.5rem;
  }
  .site-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
    padding-block: 0.9375rem 1.875rem;
  }
  .footer-icons {
    margin-left: -0.5rem;
  }
  .page-intro {
    padding-top: 2.8125rem;
    padding-bottom: 2.625rem;
  }
  .page-title {
    font-size: 1.875rem;
  }
  .page-description {
    font-size: 1rem;
  }
  .collection-feature {
    margin-bottom: 2.75rem;
  }
  .collection {
    padding-top: 2rem;
    margin-bottom: 3.75rem;
  }
  .detail-eyebrow {
    font-size: 0.6875rem;
  }
  .detail-body {
    padding-block: 1.75rem 3.125rem;
  }
  .prose {
    font-size: 1rem;
  }
  .project-pagination {
    margin-bottom: 2.8125rem;
  }
  .next-project {
    column-gap: 0.9375rem;
  }
  .next-project strong {
    font-size: 0.8125rem;
  }
}

@media (max-width: 26.71875em) {
  .site-header {
    column-gap: 0.75rem;
  }
  .breadcrumbs {
    font-size: 0.6875rem;
    gap: 0.375rem;
  }
  .main-nav {
    gap: 1rem;
  }
  .main-nav > a {
    font-size: 0.6875rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  [data-enter] {
    will-change: auto !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
  .display-name:hover {
    font-variation-settings:
      "slnt" 0,
      "wdth" 150,
      "wght" 700,
      "GRAD" 0,
      "XOPQ" 125,
      "YOPQ" 50,
      "YTAS" 650,
      "YTDE" -203,
      "YTFI" 738,
      "YTLC" 514,
      "YTUC" 650;
  }
}