@font-face {
  font-family: "Manrope";
  src: url("./assets/fonts/Manrope-Variable.ttf?v=20260830-1") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("./assets/fonts/GeistMono-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --text-default: #151716;
  --text-subtle: #696e6c;
  --text-subtler: #969c99;
  --text-disabled: #bac2be;
  --background-default: #f2f2f2;
  --background-subtle: #e1e5e5;
  --border-default: #e1e5e5;
  --border-subtle: #d9dede;
  --border-subtler: #c8cccc;
  --grid-default: #ebebeb;
  --grid-bold: #e0e0e0;
  --tabbar-bg: rgb(2 48 48 / 8%);
  --tabbar-fg: #ffffff;
  --mockup-01-default: #e1e5e5;
  --mockup-01-bold: #c8cccc;
  --mockup-02-default: #ebe9e5;
  --mockup-02-bold: #d4d2ce;
  --paper: var(--background-default);
  --paper-raised: var(--tabbar-fg);
  --surface: var(--background-subtle);
  --surface-alt: var(--border-subtle);
  --ink: var(--text-default);
  --muted: var(--text-subtle);
  --quiet: var(--text-subtler);
  --line: var(--border-default);
  --line-strong: var(--border-subtle);
  --accent: #128c80;
  --page-pad: clamp(20px, 3vw, 40px);
  --page-padding-inline: 20px;
  --grid-unit: 50px;
  --grid-line: var(--grid-default);
  --content-width: 700px;
  --grid-origin-x: 20px;
  --content-origin-x: max(
    var(--page-padding-inline),
    calc(
      var(--page-padding-inline) + round(
        nearest,
        calc((100vw - var(--content-width)) / 2 - var(--page-padding-inline)),
        var(--grid-unit)
      )
    )
  );
  --grid-origin-y: 20px;
  --font-latin: "Manrope", "MiSans VF", "PingFang SC", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-cjk: "MiSans VF", "MiSans Latin VF", "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  --font: var(--font-latin);
  --icon-invert: 0;
  --navigation-icon: var(--ink);
  --navigation-popup-bg: #f2f2f2;
  --navigation-control-bg: rgb(2 48 48 / 8%);
  --navigation-control-fg: #696e6c;
  --navigation-control-hover: rgb(0 0 0 / 4%);
  --navigation-control-hover-fg: #151716;
  --navigation-control-selected: #ffffff;
  --navigation-control-selected-fg: #151716;
  --tooltip-background: #141414;
  --tooltip-foreground: #f5f5f6;
  --social-popover-bg: #f2f2f2;
  --social-popover-border: #ffffff;
  --social-background-default: #f2f2f2;
  --social-background-subtle: #e1e5e5;
  --social-border-default: #e1e5e5;
  --social-border-subtle: #d9dede;
  --social-text-default: #151716;
  --social-text-subtle: #696e6c;
  --social-text-subtler: #969c99;
  --social-text-subtlest: #acb2af;
  --social-popover-shadow: 0 16px 20px rgba(21, 23, 22, 0.14), 0 3px 4px rgba(21, 23, 22, 0.08);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --text-default: #ffffff;
  --text-subtle: #aeb0af;
  --text-subtler: #838584;
  --text-disabled: #515251;
  --background-default: #0a0a0a;
  --background-subtle: #1e1f1f;
  --border-default: #191a1a;
  --border-subtle: #282929;
  --border-subtler: #343636;
  --grid-default: #121212;
  --grid-bold: #121212;
  --tabbar-bg: rgb(255 255 255 / 10%);
  --tabbar-fg: #414242;
  --mockup-01-default: #e1e5e5;
  --mockup-01-bold: #c8cccc;
  --mockup-02-default: #ebe9e5;
  --mockup-02-bold: #d4d2ce;
  --accent: #36b5a6;
  --icon-invert: 1;
  --navigation-control-bg: rgb(255 255 255 / 10%);
  --navigation-control-fg: #aeb0af;
  --navigation-control-hover: rgb(255 255 255 / 6%);
  --navigation-control-hover-fg: #ffffff;
  --navigation-popup-bg: #141414;
  --social-popover-bg: #141414;
  --social-popover-border: rgba(255, 255, 255, 0.18);
  --social-background-default: #0a0a0a;
  --social-background-subtle: #141414;
  --social-border-default: #191a1a;
  --social-border-subtle: #282929;
  --social-text-default: #ffffff;
  --social-text-subtle: #aeb0af;
  --social-text-subtler: #838584;
  --social-text-subtlest: #727372;
  --social-popover-shadow: 0 16px 20px rgba(21, 23, 22, 0.14), 0 3px 4px rgba(21, 23, 22, 0.08);
}

@view-transition {
  navigation: auto;
}

@keyframes page-transition-old {
  to { opacity: 0; filter: blur(2px); transform: translateY(-3px); }
}

@keyframes page-transition-new {
  from { opacity: 0; filter: blur(5px); transform: translateY(8px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes page-transition-fallback-enter {
  from { opacity: 0; filter: blur(5px); transform: translateY(8px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes page-transition-narrow-new {
  from { opacity: 0; filter: blur(3px); }
  to { opacity: 1; filter: blur(0); }
}

@keyframes page-transition-primary-mobile-old {
  0%, 28% { opacity: 1; }
  to { opacity: 0; }
}

@keyframes project-title-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes project-transition-root-old {
  from { opacity: 1; filter: blur(0); }
  to { opacity: 0; filter: blur(2px); }
}

@keyframes project-transition-root-new {
  from { opacity: 0; filter: blur(4px); }
  to { opacity: 1; filter: blur(0); }
}

@keyframes project-transition-root-soft {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes project-transition-root-soft-old {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes project-cover-source-settle {
  0%, 55% { opacity: 1; }
  to { opacity: 0; }
}

@keyframes project-cover-target-settle {
  0%, 48% { opacity: 0; }
  to { opacity: 1; }
}

::view-transition-group(root) {
  animation-duration: 440ms;
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

::view-transition-old(root) {
  animation: page-transition-old 180ms cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(root) {
  animation: page-transition-new 440ms cubic-bezier(0.2, 0, 0, 1) both;
}

html.is-primary-page::view-transition-group(root) {
  animation-duration: 420ms;
}

html.is-primary-page::view-transition-old(root) {
  opacity: 1;
  z-index: 2;
  animation: page-transition-primary-mobile-old 420ms cubic-bezier(0.4, 0, 1, 1) both;
}

html.is-primary-page::view-transition-new(root) {
  opacity: 1;
  z-index: 1;
  filter: none;
  transform: none;
  animation: none;
}

::view-transition-group(project-cover) {
  animation-duration: 560ms;
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

::view-transition-image-pair(project-cover) {
  overflow: clip;
}

::view-transition-group(project-title) {
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

::view-transition-new(project-title) {
  animation: project-title-enter 280ms cubic-bezier(0.2, 0, 0, 1) both;
  mix-blend-mode: normal;
}

html.is-project-transition::view-transition-group(root) {
  animation-duration: 520ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

html.is-project-transition::view-transition-old(root) {
  animation: none;
  opacity: 0;
}

html.is-project-transition::view-transition-new(root) {
  animation: project-transition-root-new 240ms 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

html.is-project-fade-transition::view-transition-group(root) {
  animation-duration: 360ms;
}

html.is-project-fade-transition::view-transition-new(root) {
  animation: project-transition-root-new 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

html.is-project-return::view-transition-group(root) {
  animation-duration: 300ms;
}

html.is-project-return::view-transition-old(root) {
  animation: project-transition-root-old 140ms cubic-bezier(0.4, 0, 1, 1) both;
}

html.is-project-return::view-transition-new(root) {
  animation: project-transition-root-new 220ms 55ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

html.is-project-cover-transition::view-transition-group(project-cover) {
  z-index: 3;
  overflow: clip;
  border-radius: 0;
  animation-duration: 620ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

html.is-project-cover-transition::view-transition-image-pair(project-cover) {
  overflow: clip;
  isolation: isolate;
}

html.is-project-cover-transition::view-transition-old(project-cover),
html.is-project-cover-transition::view-transition-new(project-cover) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

html.is-project-cover-transition::view-transition-old(project-cover) {
  animation: project-cover-source-settle 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
  mix-blend-mode: normal;
}

html.is-project-cover-transition::view-transition-new(project-cover) {
  animation: project-cover-target-settle 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
  mix-blend-mode: normal;
}

html.is-project-single-cover-transition::view-transition-group(root) {
  animation-duration: 620ms;
}

html.is-project-single-cover-transition::view-transition-new(root) {
  animation: project-transition-root-soft 240ms 70ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

html.is-project-single-cover-transition::view-transition-old(root) {
  animation: project-transition-root-soft-old 160ms cubic-bezier(0.4, 0, 1, 1) both;
}

html.is-project-single-cover-transition::view-transition-group(project-cover) {
  animation-duration: 560ms;
  animation-delay: 0ms;
  animation-timing-function: cubic-bezier(0.3, 0.65, 0.25, 1);
}

html.is-project-single-cover-transition::view-transition-old(project-cover) {
  animation: none;
  opacity: 1;
}

html.is-project-single-cover-transition::view-transition-new(project-cover) {
  animation: none;
  opacity: 0;
}

html.is-project-transition .shared-bottom-navigation {
  view-transition-name: project-navigation;
}

html.is-project-transition::view-transition-group(project-navigation) {
  z-index: 10;
  animation: none;
}

html.is-project-transition::view-transition-old(project-navigation) {
  animation: none;
  opacity: 0;
}

html.is-project-transition::view-transition-new(project-navigation) {
  animation: none;
  opacity: 1;
  mix-blend-mode: normal;
}

html.no-cross-document-transition body {
  animation: page-transition-fallback-enter 440ms cubic-bezier(0.2, 0, 0, 1) both;
}

html.no-cross-document-transition.is-primary-page body {
  animation: none;
}

html.no-cross-document-transition.is-page-leaving body {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 170ms ease, transform 170ms cubic-bezier(0.4, 0, 1, 1);
}

@media (max-width: 760px) {
  :root {
    --page-padding-inline: 16px;
  }

  html.is-project-transition::view-transition-group(root) {
    animation-duration: 280ms;
  }

  html.is-project-transition::view-transition-old(root) {
    animation: none;
    opacity: 0;
  }

  html.is-project-transition::view-transition-new(root) {
    animation: page-transition-narrow-new 280ms cubic-bezier(0.2, 0, 0, 1) both;
  }

  html.is-project-single-cover-transition::view-transition-group(root) {
    animation-duration: 620ms;
  }

  html.is-project-single-cover-transition::view-transition-old(root) {
    animation: project-transition-root-soft-old 120ms cubic-bezier(0.4, 0, 1, 1) both;
  }

  html.is-project-single-cover-transition::view-transition-new(root) {
    animation: project-transition-root-soft 220ms 50ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  ::view-transition-group(root) {
    animation-duration: 280ms;
  }

  ::view-transition-old(root) {
    animation: none;
    opacity: 0;
  }

  ::view-transition-new(root) {
    animation: page-transition-narrow-new 280ms cubic-bezier(0.2, 0, 0, 1) both;
  }

  html.is-primary-page::view-transition-group(root) {
    animation-duration: 0.01ms;
  }

  html.is-primary-page::view-transition-old(root) {
    opacity: 0;
    animation: none;
  }

  html.is-primary-page::view-transition-new(root) {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none;
  }

  html.no-cross-document-transition body {
    animation: page-transition-narrow-new 280ms cubic-bezier(0.2, 0, 0, 1) both;
  }

  html.no-cross-document-transition.is-page-leaving body {
    transform: none;
    transition: opacity 120ms ease-out;
  }

}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 20px;
  background: var(--paper);
}

body {
  position: relative;
  isolation: isolate;
  margin: 0;
  padding-bottom: 96px;
  overflow-x: hidden;
  background-color: var(--paper);
  background-image: linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-position: 0 var(--grid-origin-y);
  background-size: var(--grid-unit) var(--grid-unit);
  color: var(--ink);
  font-family: var(--font);
  letter-spacing: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 180ms ease, color 180ms ease;
}

body * {
  letter-spacing: 0 !important;
}

body::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px);
  background-position: var(--grid-origin-x) 0;
  background-size: var(--grid-unit) var(--grid-unit);
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 2px, transparent 2px 4px);
  mask-image: repeating-linear-gradient(to bottom, #000 0 2px, transparent 2px 4px);
}

.has-js .reveal {
  opacity: 0;
  filter: blur(3px);
  transform: translateY(18px);
  transition-property: opacity, filter, transform;
  transition-duration: 880ms;
  transition-delay: var(--reveal-delay, 0ms);
  transition-timing-function: cubic-bezier(0.45, 0, 0.2, 1);
}

.has-js .reveal.is-visible {
  opacity: 1;
  filter: none;
  transform: none;
}

.gallery-page .gallery-photo.reveal {
  filter: blur(4px);
  transform: none;
  transform-origin: 50% 45%;
  transition-duration: 680ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, filter;
}

.gallery-page .gallery-photo.reveal.is-visible {
  filter: blur(0);
  transform: translateY(0) scale(1);
}

html.is-subpage-loading :is(
  .section-heading > *,
  .project-slide,
  .experience > .section-label,
  .experience-item,
  .stack > .section-label,
  .stack-list > *,
  .albums > .section-label,
  .album-room,
  .project-group > h2,
  .project-group .project-card,
  .project-group > .project-more,
  .gallery-photo
) {
  opacity: 0;
  filter: blur(3px);
  transform: translateY(18px);
}

button,
a,
summary {
  color: inherit;
  font: inherit;
}

a {
  text-decoration: none;
}

button {
  border: 0;
}

button,
summary {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-button {
  position: relative;
  color: var(--muted);
  font-size: 13px;
}

.text-button:hover,
.text-button:focus-visible {
  color: var(--ink);
}

.text-button {
  padding: 6px 0;
  background: transparent;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
}

.control-icon {
  width: 18px;
  height: 18px;
}

.control-icon-static,
.theme-icon-stack {
  opacity: 0.72;
  transition-duration: 260ms;
  transition-timing-function: cubic-bezier(0.45, 0, 0.2, 1);
}

.control-icon-static {
  filter: invert(var(--icon-invert));
  transition-property: opacity;
}

.icon-button:hover .control-icon-static,
.icon-button:focus-visible .control-icon-static,
.icon-button:hover .theme-icon-stack,
.icon-button:focus-visible .theme-icon-stack {
  opacity: 1;
}

.theme-icon-stack {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  transition-property: opacity;
}

.theme-icon {
  position: absolute;
  inset: 0;
  transition-property: opacity, filter, scale;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.theme-icon-stack .theme-icon-sun {
  opacity: 1;
  filter: invert(var(--icon-invert)) blur(0);
  scale: 1;
}

.theme-icon-stack .theme-icon-moon {
  opacity: 0;
  filter: invert(var(--icon-invert)) blur(4px);
  scale: 0.25;
}

:root[data-theme="dark"] .theme-icon-stack .theme-icon-sun {
  opacity: 0;
  filter: invert(var(--icon-invert)) blur(4px);
  scale: 0.25;
}

:root[data-theme="dark"] .theme-icon-stack .theme-icon-moon {
  opacity: 1;
  filter: invert(var(--icon-invert)) blur(0);
  scale: 1;
}

.intro {
  width: min(calc(100% - (var(--page-padding-inline) * 2)), var(--content-width));
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  margin: 0 0 0 var(--content-origin-x);
  padding: clamp(76px, 9vw, 112px) 0 64px;
}

.intro-copy {
  width: min(100%, 610px);
}

.intro-heading {
  display: flex;
  align-items: center;
  gap: 16px;
}

.intro h1 {
  margin: 0;
  font-size: clamp(26px, 3.2vw, 32px);
  font-family: var(--font-latin);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.1;
}

.intro-trait {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  min-width: 66px;
  padding: 5px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.intro-trait-text {
  display: block;
  will-change: opacity, transform, filter;
}

.intro-description {
  max-width: 610px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.62;
  letter-spacing: -0.015em;
}

.intro-description strong {
  color: var(--ink);
  font-weight: inherit;
}

.intro-portrait {
  --portrait-size: clamp(132px, 19vw, 172px);
  position: relative;
  z-index: 1;
  flex: 0 0 var(--portrait-size);
  width: var(--portrait-size);
  min-width: var(--portrait-size);
  height: var(--portrait-size);
  min-height: var(--portrait-size);
  aspect-ratio: 1 / 1;
  margin: 0;
  align-self: center;
  overflow: hidden;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
  cursor: grab;
  touch-action: none;
  user-select: none;
  will-change: translate;
  -webkit-user-select: none;
}

.intro-portrait.is-dragging {
  z-index: 20;
  cursor: grabbing;
}

.intro-portrait img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  pointer-events: none;
  transition: opacity 220ms ease;
  -webkit-user-drag: none;
}

.intro-portrait-light {
  opacity: 1;
}

.intro-portrait-dark {
  opacity: 0;
  object-position: center 44%;
}

:root[data-theme="dark"] .intro-portrait-light {
  opacity: 0;
}

:root[data-theme="dark"] .intro-portrait-dark {
  opacity: 1;
}

.intro-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-left: auto;
  padding-bottom: 4px;
}

.intro-tools[hidden] {
  display: none;
}

.section {
  width: min(calc(100% - (var(--page-padding-inline) * 2)), var(--content-width));
  margin: 0 0 0 var(--content-origin-x);
  padding: clamp(64px, 7vw, 92px) 0;
}

.selected {
  --carousel-outset: var(--content-origin-x);
  --carousel-end-inset: max(
    0px,
    calc(
      100vw - var(--content-origin-x) - min(calc(100vw - (var(--page-padding-inline) * 2)), var(--content-width))
    )
  );
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 26px;
}

.section-label {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-family: var(--font-latin);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.carousel-controls {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0;
}

.carousel-button {
  position: relative;
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  transition: color 160ms ease, transform 120ms ease;
}

.carousel-button::before {
  position: absolute;
  z-index: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  content: "";
  pointer-events: none;
  transition: background-color 160ms ease;
}

.carousel-button svg {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.carousel-button:hover,
.carousel-button:focus-visible {
  color: var(--ink);
}

.carousel-button:hover::before,
.carousel-button:focus-visible::before {
  background: var(--surface);
}

.carousel-button:active {
  transform: scale(0.9);
}

.carousel-button:disabled,
.carousel-button:disabled:hover,
.carousel-button:disabled:active {
  background: transparent;
  color: var(--text-disabled);
  cursor: default;
  pointer-events: none;
  transform: none;
}

.carousel-button:disabled::before,
.carousel-button:disabled:hover::before,
.carousel-button:disabled:active::before {
  background: transparent;
}

.text-button {
  transition-property: color, border-color, scale;
  transition-duration: 260ms;
  transition-timing-function: cubic-bezier(0.45, 0, 0.2, 1);
}

.text-button:active {
  scale: 0.96;
}

.carousel {
  display: flex;
  gap: 18px;
  width: 100vw;
  margin-left: calc(-1 * var(--carousel-outset));
  padding-right: var(--carousel-end-inset);
  padding-left: var(--carousel-outset);
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scroll-behavior: smooth;
  scroll-padding-right: var(--carousel-end-inset);
  scroll-padding-left: var(--carousel-outset);
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.carousel.is-resetting {
  scroll-behavior: auto;
  scroll-snap-type: none;
}

.carousel::-webkit-scrollbar {
  display: none;
}

.project-slide {
  flex: 0 0 clamp(260px, 27.4vw, 360px);
  min-width: 0;
  scroll-snap-align: start;
}

.project-canvas {
  position: relative;
  min-height: 0;
  aspect-ratio: 1.42 / 1;
  overflow: hidden;
  padding: clamp(22px, 3vw, 46px);
  background: var(--surface);
}

.canvas-one {
  background: var(--surface);
}

.canvas-two {
  background: var(--surface-alt);
}

.canvas-three {
  background: color-mix(in srgb, var(--surface) 82%, var(--paper-raised));
}

.canvas-four {
  background: var(--surface-alt);
}

.canvas-five {
  background: color-mix(in srgb, var(--surface) 74%, var(--paper-raised));
}

.canvas-meta {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  color: var(--quiet);
  font-size: 10px;
  letter-spacing: 0.02em;
}

.canvas-title {
  position: absolute;
  right: clamp(22px, 3vw, 46px);
  bottom: clamp(22px, 3vw, 46px);
  left: clamp(22px, 3vw, 46px);
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.canvas-title p {
  margin: 0;
  font-size: 15px;
  font-family: var(--font-latin);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.canvas-title span {
  max-width: 280px;
  color: var(--muted);
  font-size: 10px;
  text-align: left;
}

.project-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-top: 18px;
}

.project-meta h2,
.project-meta p {
  margin: 0;
}

.project-meta h2 {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.025em;
}

.project-meta p,
.project-meta > span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
}

.experience-list {
  margin-top: 34px;
  border-top: 1px solid var(--line-strong);
}

.experience-item {
  display: grid;
  grid-template-columns: 190px 1fr;
  align-items: center;
  gap: 34px;
  min-height: 76px;
  border-bottom: 1px solid var(--line);
}

.experience-item p {
  margin: 0;
  font-family: var(--font-latin);
  font-size: 15px;
}

.experience-item strong {
  font-weight: 500;
  letter-spacing: -0.02em;
}

.experience-item span {
  margin-left: 8px;
  color: var(--quiet);
}

.experience-item .experience-period {
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.stack-list {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.stack-item {
  position: relative;
  width: 72px;
  height: 72px;
}

.stack-link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  transition-property: scale;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

.stack-link:active {
  scale: 0.96;
}

.stack-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
  opacity: 1;
  transition-property: opacity, transform;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.45, 0, 0.2, 1);
}

:root[data-theme="dark"] .stack-item--endel .stack-link::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 6px;
  border-radius: 15px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.04);
  pointer-events: none;
  transition-property: transform;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.45, 0, 0.2, 1);
}

.stack-link:hover img,
.stack-link:focus-visible img {
  opacity: 1;
  transform: translateY(-3px) scale(1.03);
}

:root[data-theme="dark"] .stack-item--endel .stack-link:hover::before,
:root[data-theme="dark"] .stack-item--endel .stack-link:focus-visible::before {
  transform: translateY(-3px) scale(1.03);
}

.stack-tooltip {
  --popover-surface-bg: var(--social-popover-bg);
  --popover-surface-border: var(--social-popover-border);
  --popover-surface-filter:
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.06))
    drop-shadow(0 -6px 6px rgba(0, 0, 0, 0.03))
    drop-shadow(0 14px 14px rgba(0, 0, 0, 0.08));
  position: absolute;
  z-index: 4;
  top: auto;
  bottom: calc(100% + 10px);
  left: 50%;
  width: max-content;
  padding: 5px 13px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--social-text-default);
  font-family: var(--font-latin);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transform-origin: bottom center;
  transition-property: opacity, transform, visibility;
  transition-duration: 140ms, 160ms, 140ms;
  transition-timing-function: ease-out, cubic-bezier(0.2, 0, 0, 1), ease-out;
}

.stack-tooltip[data-placement="bottom"] {
  top: calc(100% + 10px);
  bottom: auto;
  transform: translate(-50%, -6px);
  transform-origin: top center;
}

:root[data-theme="dark"] .stack-tooltip {
  --popover-surface-filter: none;
}

.stack-link:hover .stack-tooltip,
.stack-link:focus-visible .stack-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

@media (hover: none) and (pointer: coarse), (max-width: 740px) {
  .stack-tooltip {
    display: none;
  }
}

.album-room {
  --album-depth: 3px;
  --album-duration: 330ms;
  --album-spread: 48%;
  --album-shadow-rgb: 27 22 17;
  position: relative;
  width: min(700px, calc(100vw - 32px));
  margin: 0 auto;
  isolation: isolate;
}

:root[data-theme="dark"] .album-room {
  --album-shadow-rgb: 0 0 0;
}

.album-viewport {
  position: relative;
  z-index: 2;
  overflow: clip;
  cursor: grab;
  touch-action: pan-y;
}

.album-room[data-album-state="dragging"] .album-viewport {
  cursor: grabbing;
}

.album-shelf {
  --album-spread: 48%;
  display: grid;
  place-items: end center;
  margin: 0;
  padding: 40px 0 4px;
  list-style: none;
  overflow: visible;
  isolation: isolate;
  perspective: 900px;
  perspective-origin: center bottom;
}

.album-card {
  position: relative;
  grid-area: 1 / 1;
  width: clamp(116px, 27vw, 152px);
  z-index: var(--album-z, 1);
  pointer-events: none;
}

.album-trigger {
  position: relative;
  display: block;
  width: 100%;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  color: inherit;
  background: transparent;
  text-decoration: none;
  cursor: default;
  pointer-events: none;
  touch-action: manipulation;
  transform: translateX(calc(var(--album-offset, 0) * var(--album-spread)))
    translateY(calc(var(--album-rest-offset, 0) * 1px))
    translateZ(calc(var(--album-forward, 0) * 1px))
    rotateZ(calc(var(--album-rest-tilt, 0) * 1deg))
    rotateY(calc(var(--album-direction, 0) * var(--album-angle, 0) * -1deg))
    scale(var(--album-scale, 1));
  transform-origin: var(--album-origin, 50%) bottom;
  transform-style: preserve-3d;
  transition: transform var(--album-duration) cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

.album-room[data-album-state="dragging"] .album-trigger {
  cursor: grabbing;
  transition: none;
}

.album-object {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  transform: translate(0, 0);
  transform-style: preserve-3d;
  transition: transform var(--album-duration) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.album-hit-corner {
  position: absolute;
  z-index: -1;
  width: 0;
  height: 0;
  pointer-events: none;
}

.album-hit-corner[data-corner="top-left"] {
  top: 0;
  left: 0;
}

.album-hit-corner[data-corner="top-right"] {
  top: 0;
  right: 0;
}

.album-hit-corner[data-corner="bottom-right"] {
  right: 0;
  bottom: 0;
}

.album-hit-corner[data-corner="bottom-left"] {
  bottom: 0;
  left: 0;
}

.album-cover {
  position: relative;
  z-index: 2;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--surface);
  box-shadow:
    0 0 0 0.5px rgb(0 0 0 / 0.09),
    1px 2px 3px -1px rgb(var(--album-shadow-rgb) / 0.2),
    4px 9px 16px -9px rgb(var(--album-shadow-rgb) / 0.3);
  transform: translateZ(var(--album-depth));
  backface-visibility: hidden;
  transition: box-shadow var(--album-duration) cubic-bezier(0.2, 0, 0, 1);
}

.album-cover::before,
.album-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.album-cover::before {
  z-index: 2;
  background-image: var(--album-crease-image, none);
  background-position: var(--album-crease-position, 0 0);
  background-repeat: no-repeat;
  background-size: var(--album-crease-size, 0 0);
  opacity: 0.55;
  transition: opacity var(--album-duration) cubic-bezier(0.2, 0, 0, 1);
}

.album-cover::after {
  z-index: 3;
  background: linear-gradient(118deg, rgb(255 255 255 / 0.12), transparent 28% 70%, rgb(25 16 9 / 0.11));
}

.album-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.album-paper {
  position: absolute;
  z-index: 2;
  inset: 0;
  background-image:
    radial-gradient(circle at var(--album-wear-x, 12%) var(--album-wear-y, 16%), rgb(65 45 30 / 0.16) 0 0.5px, rgb(65 45 30 / 0.05) 1px 4%, transparent 9%),
    linear-gradient(118deg, rgb(255 255 255 / 0.12), transparent 28% 70%, rgb(30 20 12 / 0.1)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='108' height='108'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .52 0 0 0 0 .46 .06 .06 .06 0 -.03'/%3E%3C/filter%3E%3Crect width='108' height='108' filter='url(%23n)'/%3E%3C/svg%3E");
  background-position: center, center, var(--album-paper-x, 0) var(--album-paper-y, 0);
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: 100% 100%, 100% 100%, var(--album-paper-size, 108px) var(--album-paper-size, 108px);
  mix-blend-mode: soft-light;
  box-shadow: inset 1px 1px rgb(255 255 255 / 0.22), inset -1px -1px rgb(45 27 13 / 0.14);
  opacity: var(--album-wear-opacity, 0.13);
  pointer-events: none;
}

.album-spine {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  width: var(--album-depth);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--album-spine-ink, #30302e);
  background: var(--album-spine-color, #dedbd5);
  box-shadow: inset 1px 0 rgb(255 255 255 / 0.22), inset -1px 0 rgb(0 0 0 / 0.2);
  font-family: var(--font-mono);
  font-size: 4px;
  line-height: 1;
  writing-mode: vertical-rl;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.album-spine-left {
  left: 0;
  background:
    linear-gradient(to right, rgb(255 255 255 / 0.16), transparent 45%, rgb(0 0 0 / 0.16)),
    var(--album-spine-color, #dedbd5);
  transform: rotateY(-90deg);
  transform-origin: left center;
}

.album-spine-right {
  right: 0;
  background:
    linear-gradient(to right, rgb(0 0 0 / 0.24), transparent 55%, rgb(255 255 255 / 0.08)),
    var(--album-spine-color, #dedbd5);
  transform: rotateY(90deg);
  transform-origin: right center;
}

.album-contact-shadow {
  position: absolute;
  z-index: 0;
  top: calc(100% - 5px);
  right: 8%;
  left: 8%;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgb(var(--album-shadow-rgb) / 0.4) 0%,
    rgb(var(--album-shadow-rgb) / 0.18) 46%,
    transparent 84%
  );
  opacity: var(--album-shadow-opacity, 0.34);
  pointer-events: none;
  transform: translateZ(-1px)
    rotateY(calc(var(--album-direction, 0) * var(--album-angle, 0) * 1deg))
    rotateX(62deg)
    scaleX(var(--album-shadow-scale, 1));
  transform-origin: center;
  transition:
    transform var(--album-duration) cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity var(--album-duration) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.album-room[data-album-state="dragging"] .album-trigger,
.album-room[data-album-state="dragging"] .album-object,
.album-room[data-album-state="dragging"] .album-contact-shadow {
  transition: none;
}

@media (hover: hover) and (pointer: fine) {
  .album-trigger:not([data-active])[data-pointer-owned] .album-object {
    transform: translateX(calc(var(--album-direction, 0) * 2px)) translateY(-4px);
  }

  .album-trigger:not([data-active])[data-pointer-owned] .album-contact-shadow {
    opacity: calc(var(--album-shadow-opacity) * 0.55);
    transform: translateZ(-1px)
      rotateY(calc(var(--album-direction, 0) * var(--album-angle, 0) * 1deg))
      rotateX(62deg)
      scaleX(calc(var(--album-shadow-scale, 1) * 1.08));
  }
}

.album-caption {
  display: flex;
  width: max-content;
  max-width: calc(100% - 32px);
  min-height: 28px;
  margin: 10px auto 0;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
  transition: color 180ms ease;
}

.album-caption:hover,
.album-caption:focus-visible {
  color: var(--ink);
}

.album-caption-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact {
  position: relative;
  z-index: 2;
  padding-top: clamp(72px, 8vw, 104px);
  padding-bottom: clamp(72px, 8vw, 104px);
}

.contact-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  margin-top: 28px;
}

.contact-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

a.contact-link {
  text-decoration: none;
  transition: color 220ms ease;
}

a.contact-link > span:first-child {
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color 220ms ease;
}

a.contact-link:hover,
a.contact-link:focus-visible {
  color: var(--ink);
}

a.contact-link:hover > span:first-child,
a.contact-link:focus-visible > span:first-child {
  text-decoration-color: currentColor;
}

.contact-link.is-pending {
  color: var(--quiet);
}

:is(.contact-link, .album-caption) .contact-arrow {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  stroke-width: 1.25;
}

.social-preview {
  position: absolute;
  z-index: 10;
  bottom: calc(100% + 2px);
  left: 0;
  display: flex;
  flex-direction: column;
  width: 270px;
  padding: 14px 16px;
  box-sizing: border-box;
  align-items: flex-start;
  border: 1px solid var(--social-popover-border);
  border-radius: 10px;
  background: var(--social-popover-bg);
  box-shadow: var(--social-popover-shadow);
  color: var(--social-text-default);
  font-family: "Manrope", "PingFang SC", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transform-origin: bottom left;
  transition: opacity 160ms ease, transform 180ms cubic-bezier(0.2, 0, 0, 1), visibility 160ms;
}

.social-preview::before {
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  left: 18px;
  width: 16px;
  height: 6px;
  background: var(--social-popover-bg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 6'%3E%3Cpath d='M0 0H16L9.5 4.5Q8 6 6.5 4.5L0 0Z' fill='white'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 6'%3E%3Cpath d='M0 0H16L9.5 4.5Q8 6 6.5 4.5L0 0Z' fill='white'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.social-preview::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 18px;
  width: 16px;
  height: 6px;
  background: var(--social-popover-border);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 6'%3E%3Cpath d='M.5 .5L6.5 4.5Q8 6 9.5 4.5L15.5 .5' fill='none' stroke='white' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 6'%3E%3Cpath d='M.5 .5L6.5 4.5Q8 6 9.5 4.5L15.5 .5' fill='none' stroke='white' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  pointer-events: none;
}

.contact-link:hover .social-preview,
.contact-link:focus-visible .social-preview {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Hide hover cards on devices that cannot hover */
@media (hover: none) and (pointer: coarse) {
  .social-preview {
    display: none;
  }
}

.social-preview-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  width: 100%;
  height: 13px;
  color: var(--social-text-subtle);
  font-family: var(--font-latin);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

.social-preview-platform {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--social-text-subtle);
}

.social-preview-icon {
  display: block;
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  background: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 12px 12px;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 12px 12px;
}

.social-preview-icon--x {
  mask-image: url("./assets/social/icon-x.svg");
  -webkit-mask-image: url("./assets/social/icon-x.svg");
}

.social-preview-icon--telegram {
  mask-image: url("./assets/social/icon-telegram.svg");
  -webkit-mask-image: url("./assets/social/icon-telegram.svg");
}

.social-preview-icon--instagram {
  mask-image: url("./assets/social/icon-instagram.svg");
  -webkit-mask-image: url("./assets/social/icon-instagram.svg");
}

.social-preview-icon--email {
  mask-image: url("./assets/social/icon-email.svg");
  -webkit-mask-image: url("./assets/social/icon-email.svg");
}

.social-preview-divider {
  width: 100%;
  height: 1px;
  margin-bottom: 12px;
  background: var(--social-border-default);
}

.social-preview-body {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.social-preview-label {
  display: block;
  padding-bottom: 3px;
  color: var(--social-text-subtler);
  font-family: "PingFang SC", "MiSans VF", "Noto Sans SC", sans-serif;
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.social-preview strong {
  display: flex;
  min-height: 19px;
  flex-direction: column;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  line-height: 18.2px;
}

.social-preview-handle {
  display: flex;
  min-height: 17px;
  flex-direction: column;
  justify-content: center;
  color: var(--social-text-subtler);
  font-family: "Geist Mono", "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.social-preview-action {
  width: 100%;
  min-height: 25px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 0;
  background-image: repeating-linear-gradient(
    to right,
    var(--social-border-subtle) 0 1px,
    transparent 1px 2px
  );
  background-position: left top;
  background-repeat: repeat-x;
  background-size: auto 1px;
  color: var(--social-text-subtle);
  font-family: "PingFang SC", "MiSans VF", "Noto Sans SC", sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
}

.social-preview-avatar {
  position: relative;
  width: 42px;
  height: 42px;
  min-width: 42px;
  max-width: 42px;
  min-height: 42px;
  max-height: 42px;
  flex: 0 0 42px;
  overflow: hidden;
  border-radius: 9999px;
  background: var(--social-background-subtle);
}

.social-preview-avatar img {
  position: absolute;
  inset: 0;
  display: block;
  width: 42px;
  height: 42px;
  max-width: none;
  border-radius: 9999px;
  object-fit: cover;
}

.social-preview--x,
.social-preview--instagram {
  height: 145px;
}

.social-preview--telegram {
  height: 153px;
}

.social-preview--email {
  height: 158px;
}

.social-preview-identity,
.social-preview-message,
.social-preview-recipient {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.social-preview-identity {
  flex: 1 0 0;
  gap: 2px;
}

.social-preview-message,
.social-preview-recipient {
  flex: 1 0 0;
  gap: 1px;
}

.social-preview--x .social-preview-body {
  gap: 10px;
}

.social-preview--telegram .social-preview-label {
  color: var(--social-text-subtlest);
}

.social-preview--instagram .social-preview-action {
  color: #696e6c;
}

.social-preview--email .social-preview-top {
  height: 14px;
}

.social-preview--email .social-preview-label {
  color: #969c99;
}

.social-preview--telegram,
.social-preview--email {
  padding-block: 12px;
}

/* Email: letter object with recipient and stamp focal point */
.social-preview--email .social-preview-body {
  justify-content: space-between;
  align-items: start;
  gap: 16px;
}

.social-preview-stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 58px;
  gap: 4px;
  border: 0;
  border-radius: 2px;
  background-image:
    repeating-linear-gradient(to right, var(--social-border-subtle) 0 3px, transparent 3px 5px),
    repeating-linear-gradient(to right, var(--social-border-subtle) 0 3px, transparent 3px 5px),
    repeating-linear-gradient(to bottom, var(--social-border-subtle) 0 3px, transparent 3px 5px),
    repeating-linear-gradient(to bottom, var(--social-border-subtle) 0 3px, transparent 3px 5px);
  background-position: left top, left bottom, left top, right top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: auto 1px, auto 1px, 1px auto, 1px auto;
  color: var(--social-text-subtle);
  font-family: "PingFang SC", "MiSans VF", "Noto Sans SC", sans-serif;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.social-preview-stamp-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: currentColor;
  mask: url("./assets/social/icon-email-send.svg") center / 18px 18px no-repeat;
  -webkit-mask: url("./assets/social/icon-email-send.svg") center / 18px 18px no-repeat;
}

/* Telegram: direct message with a send bubble */
.social-preview--telegram .social-preview-body {
  min-height: 54px;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.social-preview-bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--social-background-subtle);
  color: var(--social-text-subtle);
}

.social-preview-bubble-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  background: currentColor;
  mask: url("./assets/social/icon-telegram-send.svg") center / 20px 20px no-repeat;
  -webkit-mask: url("./assets/social/icon-telegram-send.svg") center / 20px 20px no-repeat;
}

.dock-shell {
  position: fixed;
  z-index: 90;
  left: 50%;
  bottom: max(30px, env(safe-area-inset-bottom));
  width: 203px;
  translate: -50% 0;
}

.site-dock {
  position: relative;
  display: grid;
  grid-template-columns: 50px 50px 50px 1px 50px;
  align-items: center;
  width: 100%;
  height: 56px;
  padding: 2px 0;
  border: 1px solid var(--navigation-border);
  border-radius: 999px;
  box-shadow: none;
}

:root[data-theme="dark"] .site-dock {
  box-shadow: none;
}

.dock-item,
.dock-setting-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--navigation-icon);
  transition: opacity 180ms ease, scale 180ms cubic-bezier(0.2, 0, 0, 1);
}

.dock-item::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: transparent;
  transition: background-color 180ms ease;
}

.dock-item:not(.is-active) {
  opacity: 0.5;
}

.dock-item:hover,
.dock-item:focus-visible {
  opacity: 1;
}

.dock-item:hover::before,
.dock-item:focus-visible::before {
  background: var(--navigation-bg-hover);
}

.dock-item.dock-settings-toggle[aria-expanded="true"] {
  opacity: 0.5;
}

.dock-item.dock-settings-toggle[aria-expanded="true"]::before {
  background: transparent;
}

.dock-item.dock-settings-toggle[aria-expanded="true"]:hover {
  opacity: 1;
}

.dock-item.dock-settings-toggle[aria-expanded="true"]:hover::before {
  background: var(--navigation-bg-hover);
}

.dock-item:active,
.dock-setting-button:active {
  scale: 0.9;
  transition-duration: 90ms;
}

.dock-item.is-active {
  color: var(--navigation-icon);
  opacity: 1;
}

.lucide {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Dock navigation icons (home, projects, gallery, settings): 1.5px stroke only.
   Does not affect .contact-arrow or non-dock .lucide (e.g. theme toggles in menu). */
.site-dock .dock-item .lucide {
  stroke-width: 1.5;
}

.dock-indicator {
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  scale: 0.35;
  translate: -50% 0;
  transition: opacity 180ms ease, scale 220ms cubic-bezier(0.2, 0, 0, 1);
}

.dock-item.is-active .dock-indicator {
  opacity: 1;
  scale: 1;
}

.dock-divider {
  width: 1px;
  height: 12px;
  background: var(--navigation-line);
}

.theme-icon-moon {
  display: block;
}

.theme-icon-sun {
  display: none;
}

:root[data-theme="dark"] .theme-icon-moon {
  display: none;
}

:root[data-theme="dark"] .theme-icon-sun {
  display: block;
}

.dock-settings-menu {
  position: absolute;
  right: 4px;
  bottom: calc(100% + 10px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 238px;
  height: 156px;
  padding: 10px;
  border: 1px solid var(--navigation-border);
  border-radius: 10px;
  background: var(--navigation-popup-bg);
  box-shadow: none;
  opacity: 0;
  transform: translateY(7px) scale(0.94);
  transform-origin: bottom right;
  pointer-events: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: opacity 180ms ease, transform 240ms cubic-bezier(0.2, 0, 0, 1);
}

.dock-settings-menu.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.dock-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 216px;
  height: 40px;
}

.dock-setting-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}

.dock-setting-options {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 40px;
  padding: 4px;
  border-radius: 28px;
  background: var(--navigation-control-bg);
}

.dock-setting-options.is-language {
  width: 130px;
}

.dock-setting-options.is-theme {
  width: 114px;
  --navigation-control-slider-x: 0px;
}

.dock-setting-options.is-theme::before {
  position: absolute;
  z-index: 0;
  top: 4px;
  left: 4px;
  width: 32px;
  height: 32px;
  border-radius: 20px;
  background: var(--navigation-control-selected);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  content: "";
  pointer-events: none;
  transform: translateX(var(--navigation-control-slider-x));
  transition: transform 240ms cubic-bezier(0.2, 0, 0, 1);
}

.dock-setting-options.is-theme:has([data-theme-mode="light"][aria-pressed="true"]) {
  --navigation-control-slider-x: 37px;
}

.dock-setting-options.is-theme:has([data-theme-mode="dark"][aria-pressed="true"]) {
  --navigation-control-slider-x: 74px;
}

.dock-setting-options.is-sound {
  width: 80px;
}

.dock-setting-button {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  margin: 0;
  border-radius: 20px;
  color: var(--navigation-control-fg);
  opacity: 1;
}

.dock-setting-button.is-language-option {
  width: auto;
  flex-basis: auto;
  padding: 6px 12px;
  color: var(--navigation-control-fg);
  font-size: 13px;
  line-height: 18px;
}

.dock-setting-button[aria-pressed="false"]:hover,
.dock-setting-button[aria-pressed="false"]:focus-visible {
  background: var(--navigation-control-hover);
  color: var(--navigation-control-hover-fg);
  opacity: 1;
}

.dock-setting-button[aria-pressed="true"] {
  background: transparent;
  color: var(--navigation-control-selected-fg);
  opacity: 1;
}

.dock-setting-options:not(.is-theme) .dock-setting-button[aria-pressed="true"] {
  background: var(--navigation-control-selected);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.dock-setting-button .lucide {
  width: 18px;
  height: 18px;
  stroke-width: 1.25;
}

.site-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: min(calc(100% - (var(--page-padding-inline) * 2)), var(--content-width));
  min-height: 170px;
  margin: 0 0 0 var(--content-origin-x);
  padding: 48px 0;
  color: var(--muted);
  font-size: 13px;
}

.subpage-main {
  width: min(calc(100% - (var(--page-padding-inline) * 2)), var(--content-width));
  min-height: calc(100vh - 170px);
  margin: 0 0 0 var(--content-origin-x);
  padding: clamp(76px, 9vw, 112px) 0 72px;
}

.page-intro {
  display: block;
  padding-bottom: clamp(64px, 8vw, 96px);
}

.page-intro-copy .section-label,
.page-intro-copy h1,
.page-intro-copy > p:last-child {
  margin: 0;
}

.page-intro-copy h1 {
  margin-top: 20px;
  font-size: clamp(28px, 4vw, 38px);
  font-family: var(--font-latin);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.08;
}

.page-intro-copy > p:last-child {
  max-width: 510px;
  margin-top: 24px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.project-directory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 50px 15px;
}

.project-card {
  min-width: 0;
}

.has-js :is(.project-card, .project-slide).reveal.is-visible.is-pressed {
  opacity: 1;
  filter: none;
  transform: scale(0.985);
  transition-duration: 90ms;
  transition-delay: 0ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.project-card-visual {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1.42 / 1;
  overflow: hidden;
  background: var(--surface);
}

.project-card-placeholder {
  display: flex;
  align-items: flex-end;
  padding: 22px;
  color: var(--quiet);
  font-size: 10px;
  letter-spacing: 0.01em;
}

.placeholder-aeroplus {
  background: var(--surface-alt);
}

.placeholder-web3 {
  background: color-mix(in srgb, var(--surface) 82%, var(--paper-raised));
}

.placeholder-independent {
  background: color-mix(in srgb, var(--surface) 72%, var(--paper-raised));
}

.project-card-meta {
  min-height: 76px;
  padding: 14px 8px 0;
}

.project-card-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}

.project-card-title h3,
.project-card-title p {
  margin: 0;
  font-family: var(--font-latin);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.35px;
}

.project-card-title p {
  color: var(--quiet);
}

.project-card-title a {
  transition: color 180ms ease;
}

.project-card-title a:hover,
.project-card-title a:focus-visible {
  color: var(--accent);
}

.project-card-details {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  color: var(--quiet);
  font-family: var(--font-latin);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.gallery-wall {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 15px;
}

.gallery-column {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 15px;
  align-items: stretch;
}

.gallery-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--surface);
  cursor: zoom-in;
  height: auto;
}

.gallery-photo:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.gallery-photo img {
  display: block;
  width: 100%;
  height: auto;
  /* Original aspect ratio preserved; no object-fit cropping */
}

@media (hover: hover) and (pointer: fine) {
  .gallery-photo::after {
    --viewfinder-line: rgba(255, 255, 255, 0.92);
    content: "";
    position: absolute;
    inset: 14px;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.94);
    background:
      linear-gradient(var(--viewfinder-line), var(--viewfinder-line)) left top / 8px 1px no-repeat,
      linear-gradient(var(--viewfinder-line), var(--viewfinder-line)) left top / 1px 8px no-repeat,
      linear-gradient(var(--viewfinder-line), var(--viewfinder-line)) right top / 8px 1px no-repeat,
      linear-gradient(var(--viewfinder-line), var(--viewfinder-line)) right top / 1px 8px no-repeat,
      linear-gradient(var(--viewfinder-line), var(--viewfinder-line)) left bottom / 8px 1px no-repeat,
      linear-gradient(var(--viewfinder-line), var(--viewfinder-line)) left bottom / 1px 8px no-repeat,
      linear-gradient(var(--viewfinder-line), var(--viewfinder-line)) right bottom / 8px 1px no-repeat,
      linear-gradient(var(--viewfinder-line), var(--viewfinder-line)) right bottom / 1px 8px no-repeat;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.16));
    transition-property: opacity, transform;
    transition-duration: 260ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
  }

  .gallery-photo img {
    transition-property: transform, filter, opacity;
    transition-duration: 320ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
  }

  .gallery-photo:hover img {
    transform: scale(1.025);
    filter: brightness(1.04) contrast(1.025) saturate(1.04);
  }

  .gallery-photo:hover::after {
    opacity: 1;
    transform: scale(1);
  }

  @supports selector(.gallery-wall:has(.gallery-photo:hover)) {
    .gallery-wall:has(.gallery-photo:hover) .gallery-photo:not(:hover) img {
      opacity: 1;
      transform: scale(1.008);
      filter: blur(1.2px);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-photo img,
  .gallery-photo::after {
    transition-duration: 0.01ms;
  }

  .gallery-photo:hover img,
  .gallery-photo:hover::after {
    transform: none;
  }
}

.gallery-photo.photo-tall { aspect-ratio: 67 / 96; }
.gallery-photo.photo-landscape { aspect-ratio: 67 / 54; }
.gallery-photo.photo-short { aspect-ratio: 335 / 216; }
.gallery-photo.photo-strip { aspect-ratio: 134 / 81; }
.gallery-photo.photo-pine { aspect-ratio: 335 / 528; }

body.is-photo-viewer-open {
  overflow: hidden;
}

.viewer-motion-clone {
  position: fixed;
  z-index: 50;
  display: block;
  max-width: none !important;
  max-height: none !important;
  margin: 0;
  object-fit: cover;
  pointer-events: none;
  will-change: left, top, width, height, border-radius;
}

.photo-viewer {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
  outline: 0;
  transition: background-color 240ms ease;
}

.photo-viewer::backdrop {
  background: var(--paper);
  transition: background-color 240ms ease;
}

.photo-viewer.is-image-motion-transparent,
.photo-viewer.is-image-motion-transparent::backdrop {
  background-color: transparent;
}

.photo-viewer.is-image-motion-active .photo-viewer-image,
.photo-viewer.is-image-motion-active .photo-viewer-footer,
.photo-viewer.is-image-motion-active .photo-viewer-close {
  opacity: 0;
}

.photo-viewer.is-image-motion-active .photo-viewer-zone {
  pointer-events: none;
}

.photo-viewer-layout {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  padding: clamp(46px, 7vh, 72px) 24px 14px;
  pointer-events: none;
}

.photo-viewer-stage {
  display: grid;
  min-height: 0;
  place-items: center;
  padding: 0 48px 28px;
}

.photo-viewer-image {
  grid-area: 1 / 1;
  display: block;
  width: auto;
  max-width: min(58vw, 1040px);
  height: auto;
  max-height: calc(100dvh - 250px);
  object-fit: contain;
  opacity: 1;
  transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.photo-viewer-image-incoming {
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}

.photo-viewer-image-incoming.is-visible {
  opacity: 1;
}

.photo-viewer-image.is-crossfade-reset {
  opacity: 1;
  transition: none;
}

.photo-viewer-image.is-changing {
  opacity: 0;
}

/* Narrow, tall desktop windows need a width-led limit for landscape photos. */
@media (min-width: 721px) and (max-width: 1366px) and (max-aspect-ratio: 5 / 4) {
  .photo-viewer-image {
    max-width: min(calc(100vw - 144px), 1120px);
  }
}

.photo-viewer-footer {
  display: grid;
  justify-items: center;
  min-height: 104px;
  pointer-events: auto;
  opacity: 1;
  transition: opacity 160ms ease;
}

.photo-viewer-metadata {
  display: flex;
  justify-content: center;
  gap: clamp(18px, 2.2vw, 34px);
  max-width: min(920px, calc(100vw - 48px));
  margin: 0;
  font-family: var(--font-latin);
  font-variant-numeric: tabular-nums;
}

.photo-viewer-metadata > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.photo-viewer-metadata > div[hidden] {
  display: none;
}

.photo-viewer-metadata dt,
.photo-viewer-metadata dd {
  margin: 0;
  white-space: nowrap;
}

.photo-viewer-metadata dt {
  color: var(--quiet);
  font-size: 10px;
  line-height: 1.2;
}

.photo-viewer-metadata dd {
  color: var(--ink);
  font-size: 10px;
  line-height: 1.3;
}

.photo-viewer-dots {
  display: flex;
  min-height: 22px;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
}

.photo-viewer-dot {
  display: grid;
  width: 10px;
  height: 18px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 999px;
  color: inherit;
  background: transparent;
  cursor: pointer;
  transition: width 240ms cubic-bezier(0.2, 0, 0, 1), opacity 240ms ease;
}

.photo-viewer-dot::before {
  width: var(--dot-size, 6px);
  height: var(--dot-size, 6px);
  border-radius: inherit;
  background: color-mix(in srgb, var(--ink) 16%, transparent);
  content: "";
  transition: width 240ms cubic-bezier(0.2, 0, 0, 1), height 240ms cubic-bezier(0.2, 0, 0, 1), background-color 240ms ease;
}

.photo-viewer-dot.is-active::before {
  background: color-mix(in srgb, var(--ink) 92%, transparent);
}

.photo-viewer-dot.is-outside {
  width: 0;
  opacity: 0;
  pointer-events: none;
}

.photo-viewer-dot:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 1px;
}

.photo-viewer-zone {
  position: absolute;
  inset-block: 0;
  z-index: 10;
  width: 33.333%;
  padding: 0;
  border: 0;
  background: transparent;
  outline: 0;
}

.photo-viewer-zone:focus,
.photo-viewer-zone:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

.photo-viewer-zone-previous {
  left: 0;
  width: 37.5%;
  cursor: w-resize;
}

.photo-viewer-zone-close {
  left: 37.5%;
  width: 25%;
  cursor: zoom-out;
}

.photo-viewer-zone-next {
  right: 0;
  width: 37.5%;
  cursor: e-resize;
}

.photo-viewer-close {
  position: fixed;
  z-index: 30;
  top: 20px;
  right: 20px;
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  background: var(--paper);
  cursor: pointer;
  opacity: 1;
  transition: border-color 160ms ease, color 160ms ease, opacity 160ms ease, transform 120ms ease;
}

.photo-viewer-close:hover,
.photo-viewer-close:focus-visible {
  border-color: var(--border-subtler);
  color: var(--ink);
}

.photo-viewer-close:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ink) 18%, transparent);
  outline-offset: 3px;
}

.photo-viewer[data-input-mode="pointer"] .photo-viewer-close:focus-visible {
  border-color: var(--line);
  color: var(--muted);
  outline: 0 !important;
  outline-offset: 0 !important;
}

.photo-viewer-close:active {
  transform: scale(0.96);
}

.photo-viewer-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

@media (pointer: coarse), (max-width: 720px) {
  .photo-viewer {
    touch-action: none;
  }

  .photo-viewer-zone {
    display: none;
  }
}

@media (max-width: 720px) {
  .photo-viewer-layout {
    padding: 54px 16px 12px;
  }

  .photo-viewer-stage {
    padding: 0 0 20px;
  }

  .photo-viewer-image {
    max-width: calc(100vw - 32px);
    max-height: 100%;
  }

  .photo-viewer-footer {
    min-height: 160px;
  }

  .photo-viewer-metadata {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    max-width: 390px;
    gap: 12px 16px;
  }

  .photo-viewer-metadata > div {
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .photo-viewer-image,
  .photo-viewer-dot,
  .photo-viewer-dot::before,
  .photo-viewer-close {
    transition-duration: 0.01ms;
  }
}

.gallery-page .subpage-main {
  padding-top: 70px;
}

.gallery-page .gallery-intro {
  padding: 0 8px 50px;
}

.gallery-page .gallery-intro .page-intro-copy h1 {
  margin: 0;
  min-height: 50px;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
}

.gallery-page .gallery-intro .page-intro-copy > p:last-child {
  display: flex;
  align-items: center;
  max-width: none;
  min-height: 50px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.35px;
}

@media (max-width: 820px) {
  .intro {
    min-height: 440px;
    gap: 32px;
    padding-top: 118px;
  }

  .intro-copy {
    width: min(100%, 560px);
  }

  .intro-portrait {
    --portrait-size: clamp(112px, 22vw, 144px);
  }

  .intro-tools {
    width: 100%;
    margin-left: 0;
    padding: 0;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .carousel-controls {
    width: 100%;
    justify-content: space-between;
  }

  .project-canvas {
    aspect-ratio: 1.28 / 1;
  }

  .project-slide {
    flex-basis: 84%;
  }

  .canvas-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .canvas-title span {
    text-align: left;
  }

  .experience-item {
    grid-template-columns: 1fr;
    gap: 4px;
    min-height: 0;
    padding: 20px 0;
  }

  .site-footer {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 24px;
  }

  .page-intro {
    display: block;
  }

  .project-directory {
    grid-template-columns: 1fr;
    gap: 44px;
  }
}

@media (max-width: 520px) {
  :root {
    --page-pad: 20px;
  }

  body {
    font-size: 14px;
    padding-bottom: 88px;
  }

  .intro {
    min-height: 390px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px;
    align-items: start;
    gap: 28px 16px;
    padding-top: 82px;
    padding-bottom: 48px;
  }

  .intro-copy {
    min-width: 0;
  }

  .intro-portrait {
    --portrait-size: 104px;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .intro h1 {
    font-size: 25px;
  }

  .intro-heading {
    flex-wrap: wrap;
    gap: 10px;
  }

  .intro-trait {
    min-height: 30px;
    padding: 4px 11px;
    font-size: 12px;
  }

  .intro-description {
    grid-column: 1 / -1;
    margin-top: 22px;
    font-size: 15px;
  }

  .subpage-main {
    padding-top: 72px;
  }

  .page-intro-copy h1 {
    font-size: 30px;
  }

  .page-intro {
    padding-bottom: 50px;
  }

  .project-card-meta {
    min-height: 72px;
    padding-right: 4px;
    padding-left: 4px;
  }

  .project-card-placeholder {
    padding: 18px;
  }

  .gallery-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .gallery-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Mobile 2-col mode (controlled by JS): use only first two columns, hide the third entirely */
  .gallery-wall.is-2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gallery-wall.is-2col .gallery-column:last-child {
    display: none;
  }

  .gallery-page .subpage-main {
    padding-top: 52px;
  }

  .gallery-page .gallery-intro {
    padding-bottom: 36px;
  }

  .gallery-page .gallery-intro .page-intro-copy h1 {
    font-size: 18px;
  }

  .intro-copy {
    display: contents;
  }

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

  .contact-links {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
  }

  .social-preview {
    display: none;
  }

  .dock-shell {
    bottom: max(30px, env(safe-area-inset-bottom));
    width: 203px;
  }

  .site-dock {
    height: 56px;
    padding: 2px 0;
  }

  .dock-item {
    width: 50px;
    height: 50px;
  }

  .lucide {
    width: 24px;
    height: 24px;
  }

  .project-canvas {
    aspect-ratio: 1.12 / 1;
  }

  .canvas-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .canvas-title p {
    font-size: 15px;
  }

  .experience-item .experience-period {
    font-size: 12px;
  }

  .stack-list {
    gap: 14px;
  }

  .stack-item {
    width: 60px;
    height: 60px;
  }

}

@media (max-width: 480px) {
  .album-shelf {
    --album-spread: 40%;
  }
}

/* Figma home layout — node 32:2926 */
body:has(> #main:not(.subpage-main)) {
  min-height: 2206px;
}

#main:not(.subpage-main) {
  display: flex;
  flex-direction: column;
  gap: 100px;
  width: min(calc(100% - (var(--page-padding-inline) * 2)), var(--content-width));
  margin: 0 0 0 var(--content-origin-x);
  padding-top: 70px;
}

#main:not(.subpage-main) > .intro,
#main:not(.subpage-main) > .section {
  width: 100%;
  margin: 0;
  padding: 0;
}

#main:not(.subpage-main) .intro {
  display: flex;
  min-height: 300px;
  height: 300px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
}

#main:not(.subpage-main) .intro-portrait {
  --portrait-size: 76px;
  order: -1;
  flex: 0 0 var(--portrait-size);
  margin: 12px;
  align-self: flex-start;
}

#main:not(.subpage-main) .intro-copy {
  width: 100%;
  max-width: none;
}

#main:not(.subpage-main) .intro-heading {
  height: 50px;
  gap: 16px;
  padding: 0 8px;
}

#main:not(.subpage-main) .intro h1 {
  font-size: 22px;
  font-family: var(--font-latin);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.7px;
}

#main:not(.subpage-main) .intro-trait {
  align-items: flex-start;
  min-width: 0;
  width: auto;
  min-height: 30px;
  height: 30px;
  padding: 4px 0 0;
  border: 0;
  border-radius: 100px;
  color: #151716;
  background: transparent;
  box-shadow: none;
  font-family: "MiSans VF", "PingFang SC", "Noto Sans SC", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
}

#main:not(.subpage-main) .intro-trait-text {
  --trait-glass-surface: rgb(247 247 247 / 62%);
  --trait-glass-overlay-start: rgb(255 255 255 / 12%);
  --trait-glass-overlay-end: rgb(0 0 0 / 1%);
  --trait-glass-rim-strong: rgb(255 255 255 / 100%);
  --trait-glass-rim-mid: rgb(255 255 255 / 56%);
  --trait-glass-rim-soft: rgb(255 255 255 / 16%);
  --trait-glass-rim-fade: rgb(255 255 255 / 5%);
  --trait-glass-depth-light: rgb(255 255 255 / 70%);
  --trait-glass-depth-dark: rgb(70 70 72 / 5%);
  --trait-glass-right-edge: rgb(70 70 72 / 4%);
  --trait-glass-right-edge-soft: rgb(70 70 72 / 1.5%);
  --trait-glass-shadow: 0 2px 8px rgb(0 0 0 / 3%);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  min-height: 26px;
  padding: 0 8px;
  border-radius: 24px;
  color: inherit;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--trait-glass-shadow);
  will-change: auto;
}

#main:not(.subpage-main) .intro-trait-surface,
#main:not(.subpage-main) .intro-trait-effect {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

#main:not(.subpage-main) .intro-trait-label {
  position: relative;
  z-index: 5;
  will-change: opacity, transform, filter;
}

#main:not(.subpage-main) .intro-trait-surface-base {
  z-index: 0;
  background: var(--trait-glass-surface);
  mix-blend-mode: normal;
  -webkit-backdrop-filter: blur(6px) saturate(1.08);
  backdrop-filter: blur(6px) saturate(1.08);
}

#main:not(.subpage-main) .intro-trait-surface-overlay {
  display: block;
  z-index: 1;
  background: linear-gradient(
    135deg,
    var(--trait-glass-overlay-start),
    transparent 44%,
    var(--trait-glass-overlay-end)
  );
  mix-blend-mode: soft-light;
}

#main:not(.subpage-main) .intro-trait-effect {
  background: none;
  box-shadow: none;
}

#main:not(.subpage-main) .intro-trait-effect-burn {
  display: block;
  z-index: 2;
  padding: 1px;
  background: radial-gradient(
    140% 110% at 0% 0%,
    var(--trait-glass-rim-strong) 0%,
    var(--trait-glass-rim-mid) 28%,
    var(--trait-glass-rim-soft) 58%,
    var(--trait-glass-rim-fade) 78%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

#main:not(.subpage-main) .intro-trait-effect-overlay {
  display: block;
  z-index: 2;
  box-shadow:
    inset 2px 1px 5px var(--trait-glass-depth-light),
    inset -2px -1px 5px var(--trait-glass-depth-dark),
    inset 0 0 8px rgb(255 255 255 / 4%);
}

#main:not(.subpage-main) .intro-trait-effect-dodge {
  display: block;
  z-index: 3;
  padding: 1px;
  background: radial-gradient(
    78% 110% at 100% 100%,
    var(--trait-glass-right-edge) 0%,
    var(--trait-glass-right-edge-soft) 38%,
    transparent 74%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

:root[lang="en"] #main:not(.subpage-main) .intro-trait {
  font-family: var(--font-latin);
}

:root[data-theme="dark"] #main:not(.subpage-main) .intro-trait {
  color: #fff;
}

:root[data-theme="dark"] #main:not(.subpage-main) .intro-trait-text {
  --trait-glass-surface: rgb(35 35 35 / 64%);
  --trait-glass-overlay-start: rgb(255 255 255 / 5%);
  --trait-glass-overlay-end: rgb(0 0 0 / 8%);
  --trait-glass-rim-strong: rgb(255 255 255 / 80%);
  --trait-glass-rim-mid: rgb(255 255 255 / 42%);
  --trait-glass-rim-soft: rgb(255 255 255 / 14%);
  --trait-glass-rim-fade: rgb(255 255 255 / 3%);
  --trait-glass-depth-light: rgb(255 255 255 / 15%);
  --trait-glass-depth-dark: rgb(0 0 0 / 24%);
  --trait-glass-right-edge: rgb(255 255 255 / 8%);
  --trait-glass-right-edge-soft: rgb(255 255 255 / 3%);
  --trait-glass-shadow: 0 3px 10px rgb(0 0 0 / 12%);
}

:root[data-theme="dark"] #main:not(.subpage-main) .intro-trait-surface-base {
  opacity: 1;
}

/* Original tag treatment, available as a comparison through ?tag-style=original. */
:root[data-trait-style="original"] #main:not(.subpage-main) .intro-trait-text {
  box-shadow: none;
}

:root[data-trait-style="original"] #main:not(.subpage-main) .intro-trait-surface-base {
  background: #fcfcfc;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

:root[data-trait-style="original"] #main:not(.subpage-main) .intro-trait-surface-overlay,
:root[data-trait-style="original"] #main:not(.subpage-main) .intro-trait-effect-overlay,
:root[data-trait-style="original"] #main:not(.subpage-main) .intro-trait-effect-dodge {
  display: none;
}

:root[data-trait-style="original"] #main:not(.subpage-main) .intro-trait-effect-burn {
  padding: 0;
  background: none;
  box-shadow:
    inset 0 0 0 1px #fff,
    inset 1px 1px 1px rgb(255 255 255 / 35%),
    inset -1px -1px 1px rgb(255 255 255 / 20%);
  -webkit-mask: none;
  mask: none;
}

:root[data-theme="dark"][data-trait-style="original"] #main:not(.subpage-main) .intro-trait-surface-base {
  background: rgb(36 36 36 / 84%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

:root[data-theme="dark"][data-trait-style="original"] #main:not(.subpage-main) .intro-trait-effect-burn {
  padding: 1px;
  background: radial-gradient(
    120% 90% at 0% 0%,
    rgb(255 255 255 / 52%) 0%,
    rgb(255 255 255 / 30%) 22%,
    rgb(255 255 255 / 10%) 46%,
    transparent 70%
  );
  box-shadow: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

:root[data-theme="dark"][data-trait-style="original"] #main:not(.subpage-main) .intro-trait-effect-dodge {
  display: block;
  padding: 1px;
  background: radial-gradient(
    72% 105% at 100% 100%,
    rgb(255 255 255 / 11%) 0%,
    rgb(255 255 255 / 5%) 34%,
    transparent 72%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

#main:not(.subpage-main) .intro-description {
  display: flex;
  flex-direction: column;
  max-width: none;
  margin: 0;
  padding: 0 8px;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.35px;
}

#main:not(.subpage-main) .intro-description strong {
  font-weight: 400;
}

#main:not(.subpage-main) .intro-description > span {
  display: flex;
  min-height: 50px;
  align-items: center;
}

#main:not(.subpage-main) .section-heading,
#main:not(.subpage-main) .section > .section-label {
  height: 50px;
  margin: 0;
}

#main:not(.subpage-main) .section-heading {
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

#main:not(.subpage-main) .section-label {
  display: flex;
  align-items: center;
  width: max-content;
  padding: 8px;
  font-size: 13px;
  font-family: var(--font-latin);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
}

#main:not(.subpage-main) .selected {
  height: 350px;
}

#main:not(.subpage-main) .carousel-controls {
  display: flex;
  width: auto;
  justify-content: flex-start;
}

#main:not(.subpage-main) .carousel {
  gap: 15px;
  height: 300px;
}

#main:not(.subpage-main) .project-slide {
  flex: 0 0 355px;
}

#main:not(.subpage-main) .project-canvas {
  width: 355px;
  height: 250px;
  aspect-ratio: auto;
  padding: 0;
}

.project-cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 560ms cubic-bezier(0.2, 0, 0, 1), opacity 180ms ease;
}

.project-link,
.project-card-link {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.project-link .project-cover,
.project-card-link .project-cover {
  will-change: transform;
}

.project-link:hover .project-cover,
.project-link:focus-visible .project-cover,
.project-card-link:hover .project-cover,
.project-card-link:focus-visible .project-cover {
  transform: scale(1.015);
  opacity: 1;
}

#main:not(.subpage-main) .project-meta {
  height: 50px;
  align-items: center;
  padding: 0 8px;
}

#main:not(.subpage-main) .project-meta > div {
  display: flex;
  align-items: center;
  gap: 6px;
}

#main:not(.subpage-main) .project-meta h2,
#main:not(.subpage-main) .project-meta p {
  margin: 0;
  font-size: 13px;
  font-family: var(--font-latin);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.35px;
}

#main:not(.subpage-main) .project-meta p {
  color: var(--quiet);
}

#main:not(.subpage-main) .project-meta > span {
  display: none;
}

#main:not(.subpage-main) .experience {
  height: 250px;
}

#main:not(.subpage-main) .experience-list {
  margin: 0;
  border: 0;
}

#main:not(.subpage-main) .experience-item {
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 0;
  min-height: 50px;
  height: 50px;
  padding: 0;
  border: 0;
}

#main:not(.subpage-main) .experience-item p {
  display: flex;
  align-items: center;
  height: 50px;
  margin: 0;
  padding: 0 8px;
  font-family: var(--font-latin);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
}

#main:not(.subpage-main) .experience-item strong {
  font-weight: 500;
  letter-spacing: -0.3px;
}

#main:not(.subpage-main) .experience-item span {
  margin-left: 12px;
  color: var(--quiet);
}

#main:not(.subpage-main) .experience-item .experience-period {
  color: var(--muted);
  font-size: 15px;
}

#main:not(.subpage-main) .stack {
  height: 150px;
}

#main:not(.subpage-main) .stack-list {
  display: flex;
  width: 600px;
  height: 100px;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  overflow: visible;
}

#main:not(.subpage-main) .stack-item {
  flex: 0 0 100px;
  width: 100px;
  height: 100px;
  padding: 11px;
}

#main:not(.subpage-main) .stack-item img {
  width: 78px;
  height: 78px;
}

#main:not(.subpage-main) .albums {
  height: 200px;
}

#main:not(.subpage-main) .contact {
  height: 100px;
}

#main:not(.subpage-main) .contact-links {
  height: 50px;
  gap: 28px;
  margin: 0;
  padding: 0 8px;
}

#main:not(.subpage-main) .contact-link {
  min-height: 50px;
  padding: 0;
  gap: 6px;
  font-family: var(--font-latin);
  font-size: 15px;
  font-weight: 500;
}

body:has(> #main:not(.subpage-main)) > .site-footer {
  font-family: var(--font-latin);
  font-weight: 400;
}

body:has(> #main:not(.subpage-main)) > .site-footer {
  justify-content: center;
  width: min(calc(100% - (var(--page-padding-inline) * 2)), var(--content-width));
  margin: 100px 0 0 var(--content-origin-x);
}

body:has(> #main:not(.subpage-main)) .dock-shell {
  bottom: max(30px, env(safe-area-inset-bottom));
  width: 203px;
}

body:has(> #main:not(.subpage-main)) .site-dock {
  grid-template-columns: 50px 50px 50px 1px 50px;
  width: 203px;
  height: 56px;
  padding: 2px 0;
  border-color: var(--navigation-border);
  box-shadow: none;
}

body:has(> #main:not(.subpage-main)) .dock-item {
  width: 50px;
  height: 50px;
}

body:has(> #main:not(.subpage-main)) .dock-divider {
  height: 12px;
}

@media (max-width: 740px) {
  body:has(> #main:not(.subpage-main)) {
    min-height: 0;
  }

  #main:not(.subpage-main) {
    gap: 70px;
    padding-top: 0;
  }

  #main:not(.subpage-main) .intro {
    min-height: 0;
    height: auto;
  }

  #main:not(.subpage-main) .intro-copy {
    display: block;
  }

  #main:not(.subpage-main) .intro h1 {
    font-size: 20px;
  }

  #main:not(.subpage-main) .intro-description {
    height: auto;
    gap: 20px;
  }

  #main:not(.subpage-main) .intro-description > span {
    box-sizing: border-box;
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    padding: 0;
    align-items: flex-start;
  }

  #main:not(.subpage-main) .selected {
    height: auto;
    margin-top: -15.75px;
  }

  #main:not(.subpage-main) .carousel {
    height: auto;
    align-items: flex-start;
  }

  #main:not(.subpage-main) .project-slide,
  #main:not(.subpage-main) .project-canvas {
    width: calc((100vw - 35px) * 0.75);
  }

  #main:not(.subpage-main) .project-slide {
    flex-basis: calc((100vw - 35px) * 0.75);
  }

  #main:not(.subpage-main) .project-canvas {
    height: auto;
    aspect-ratio: 1.42 / 1;
  }

  #main:not(.subpage-main) .experience-item {
    grid-template-columns: 170px minmax(0, 1fr);
  }

  #main:not(.subpage-main) .experience-item p,
  #main:not(.subpage-main) .experience-item .experience-period {
    padding-inline: 0;
    font-size: 15px;
  }

  #main:not(.subpage-main) .experience-item span {
    margin-left: 6px;
  }

  #main:not(.subpage-main) .stack-list {
    max-width: calc(100vw - var(--content-origin-x));
    overflow-x: auto;
    scrollbar-width: none;
  }

  #main:not(.subpage-main) .stack-list::-webkit-scrollbar {
    display: none;
  }

  .dock-setting-button.is-language-option[data-language="zh"] {
    font-weight: 350;
  }

  #main:not(.subpage-main) .contact-links {
    width: calc(100vw - var(--content-origin-x));
    flex-flow: row nowrap;
    overflow: visible;
    scrollbar-width: none;
  }

  #main:not(.subpage-main) .contact-links::-webkit-scrollbar {
    display: none;
  }

  body:has(> #main:not(.subpage-main)) > .site-footer {
    margin-top: 70px;
  }

  body:has(> #main:not(.subpage-main)) .dock-shell {
    bottom: max(30px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 520px) {
  #main:not(.subpage-main) .contact-links {
    overflow-x: auto;
    overflow-y: hidden;
  }
}

@media (max-width: 760px) {
  body {
    background-image: none;
  }

  body::before {
    display: none;
  }

  .projects-page .subpage-main,
  .gallery-page .subpage-main {
    padding-top: 0;
  }
}

@media (max-width: 699px) {
  #main:not(.subpage-main) .carousel-controls {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .has-js .reveal {
    opacity: 1;
    filter: none;
    transform: none;
  }

  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(project-cover),
  ::view-transition-group(project-title),
  ::view-transition-group(project-navigation) {
    animation-duration: 0.01ms !important;
  }

  html.no-cross-document-transition body {
    animation: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .site-dock,
  .dock-settings-menu {
    background: var(--paper-raised);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  :root[data-theme="dark"] #main:not(.subpage-main) .intro-trait-surface-base {
    background: #1a1a1a;
    opacity: 1;
    mix-blend-mode: normal;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

}

@media (prefers-contrast: more) {
  .site-dock,
  .dock-settings-menu {
    border-color: var(--ink);
    background: var(--paper-raised);
  }

  :root[data-theme="dark"] #main:not(.subpage-main) .intro-trait-effect {
    background: none;
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 70%),
      inset 0 -1px 0 rgb(255 255 255 / 44%);
  }
}

/* Geist Mono is reserved for short metadata, numerals, dates, and parameters. */
.carousel-count,
.canvas-meta,
.canvas-title span,
.project-meta p,
.project-meta > span,
.experience-item .experience-period,
.project-card-title p,
.project-card-details,
.photo-viewer-metadata,
.project-group .project-card-meta p,
#main:not(.subpage-main) .project-meta p,
#main:not(.subpage-main) .project-meta > span,
#main:not(.subpage-main) .experience-item .experience-period {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-synthesis: none;
}

/* Projects page — Figma node 197:8506 */
.projects-page .projects-main {
  display: flex;
  flex-direction: column;
  gap: 50px;
  min-height: 0;
  padding-top: 70px;
  padding-bottom: 0;
}

.projects-intro {
  display: flex;
  flex-direction: column;
  padding: 0 8px;
}

.projects-intro h1,
.projects-intro p,
.project-group h2,
.project-group .project-card-meta h3,
.project-group .project-card-meta p {
  margin: 0;
}

.projects-intro h1 {
  display: flex;
  align-items: center;
  min-height: 50px;
  font-family: var(--font-latin);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.projects-intro p {
  display: flex;
  align-items: center;
  min-height: 50px;
  color: var(--muted);
  font-family: var(--font-cjk);
  font-size: 15px;
  line-height: 1.5;
}

.project-group {
  width: 100%;
}

.project-group h2 {
  display: flex;
  align-items: center;
  min-height: 50px;
  padding: 8px;
  color: var(--muted);
  font-family: var(--font-latin);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.project-group .project-directory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 15px;
}

.project-group .project-more-items {
  display: grid;
  grid-column: 1 / -1;
  grid-template-rows: 0fr;
  overflow: hidden;
  opacity: 0;
  transition:
    grid-template-rows 360ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 240ms ease;
}

.project-group .project-more-items[data-expanded="true"] {
  grid-template-rows: 1fr;
  opacity: 1;
}

.project-group .project-more-items-inner {
  display: grid;
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 15px;
  overflow: hidden;
  transform: translateY(-8px);
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.project-group .project-more-items[data-expanded="true"] .project-more-items-inner {
  transform: translateY(0);
}

.project-group .project-more-items[hidden] {
  display: none;
}

.project-group .project-card {
  min-width: 0;
}

.project-group .project-card-visual {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.42 / 1;
  overflow: hidden;
  background: var(--surface);
}

.project-group .project-card-meta {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  height: 50px;
  min-height: 50px;
  padding: 10px 8px 0;
  overflow: hidden;
  white-space: nowrap;
}

.project-group .project-card-meta h3,
.project-group .project-card-meta p {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.project-group .project-card-meta h3 {
  font-family: var(--font-latin);
}

.project-group .project-card-meta p {
  min-width: 0;
  overflow: hidden;
  color: var(--quiet);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-synthesis: none;
  text-overflow: ellipsis;
}

.project-group .project-card-meta p,
#main:not(.subpage-main) .project-meta p,
#main:not(.subpage-main) .experience-item .experience-period {
  font-family: var(--font-latin);
  font-variant-numeric: normal;
  font-feature-settings: normal;
}

.project-group .project-card-meta a {
  text-decoration: none;
}

.project-group .project-cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-more {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 50px;
  padding: 0;
  border: 0;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-latin);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.project-more:hover,
.project-more:focus-visible {
  color: var(--ink);
}

.project-more .lucide {
  width: 18px;
  height: 18px;
  stroke-width: 1.125;
  transition: transform 160ms ease;
}

.project-more[aria-expanded="true"] .lucide {
  transform: rotate(180deg);
}

.projects-page .subpage-footer {
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 600px) {
  .projects-page .projects-main {
    gap: 40px;
    padding-top: 56px;
  }

  .projects-intro p {
    align-items: flex-start;
    min-height: 0;
    padding-top: 4px;
  }

  .project-group .project-directory {
    grid-template-columns: 1fr;
  }

  .project-group .project-more-items-inner {
    grid-template-columns: 1fr;
  }

  .project-group .project-card-visual {
    height: auto;
    aspect-ratio: 1.42 / 1;
  }

  .project-group .project-card-meta {
    padding-right: 8px;
    padding-left: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-group .project-more-items,
  .project-group .project-more-items-inner,
  .project-more .lucide {
    transition: none;
  }

  .project-group .project-more-items-inner {
    transform: none;
  }
}

@media (max-width: 760px) {
  .projects-page .projects-main {
    padding-top: 0;
  }

  .project-group .project-directory,
  .project-group .project-more-items-inner {
    row-gap: 10px;
  }
}

@media (max-width: 740px) {
  .projects-page .projects-main {
    width: calc(100% - 16px);
    margin-left: 8px;
  }

  .projects-page .project-group .project-directory {
    box-sizing: border-box;
    padding-right: 8px;
    padding-left: 8px;
  }

  html[lang="en"] .projects-page .projects-intro p {
    font-family: var(--font-latin);
    font-weight: 400;
  }

  #main:not(.subpage-main) .carousel {
    padding-right: 24px;
    padding-left: 24px;
    scroll-padding-right: 24px;
    scroll-padding-left: 24px;
  }

  #main:not(.subpage-main) .experience {
    height: 305px;
    margin-top: -15.75px;
  }

  #main:not(.subpage-main) .experience-list {
    height: 255px;
    padding-top: 8px;
  }

  #main:not(.subpage-main) .experience-item {
    position: relative;
    grid-template-columns: 150px minmax(0, 1fr);
    min-height: 46px;
    height: 46px;
    margin-bottom: 20px;
    padding: 0;
    border-bottom: 0;
  }

  #main:not(.subpage-main) .experience-item:last-child {
    margin-bottom: 0;
  }

  #main:not(.subpage-main) .experience-item:not(:last-child)::after {
    position: absolute;
    right: 8px;
    bottom: -10px;
    left: 8px;
    height: 1px;
    background: var(--line);
    content: "";
  }

  #main:not(.subpage-main) .experience-item p,
  #main:not(.subpage-main) .experience-item .experience-period {
    height: 46px;
    padding: 0 8px;
  }

  #main:not(.subpage-main) .experience-item p:not(.experience-period) {
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
  }

  #main:not(.subpage-main) .experience-item .experience-period {
    align-items: flex-start;
  }

  #main:not(.subpage-main) .experience-item span {
    margin-left: 0;
    font-size: 13px;
    line-height: 1.4;
  }

  #main:not(.subpage-main) .stack-list {
    width: 100vw;
    max-width: none;
    margin-left: calc(-1 * var(--content-origin-x));
    padding-left: var(--content-origin-x);
    padding-right: 16px;
    scroll-padding-right: 16px;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
  }

  #main:not(.subpage-main) .stack {
    margin-top: -18.75px;
  }

  #main:not(.subpage-main) .stack-item {
    display: flex;
    width: 78px;
    height: 100px;
    flex: 0 0 78px;
    padding: 0;
    align-items: center;
  }

  #main:not(.subpage-main) .stack-link {
    width: 78px;
    height: 78px;
  }

  #main:not(.subpage-main) .album-room {
    width: 100vw;
    max-width: none;
    margin-left: calc(-1 * var(--content-origin-x));
  }

  #main:not(.subpage-main) .album-shelf {
    padding-top: 10px;
  }

  #main:not(.subpage-main) .albums {
    height: 236px;
    margin-top: -26.75px;
  }

  #main:not(.subpage-main) .contact-links {
    width: 100vw;
    margin-left: calc(-1 * var(--content-origin-x));
    height: auto;
    padding-right: 24px;
    padding-left: 24px;
    flex-flow: row wrap;
    row-gap: 0;
    column-gap: 28px;
    overflow: visible;
  }

  #main:not(.subpage-main) .contact {
    height: 150px;
    margin-top: -56.6px;
  }
}

@media (max-width: 720px) {
  .photo-viewer-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .photo-viewer-footer {
    align-content: end;
  }

  .photo-viewer-metadata {
    display: flex;
    width: 100vw;
    max-width: none;
    margin-left: -16px;
    justify-self: start;
    justify-content: flex-start;
    flex-wrap: wrap;
    column-gap: 30px;
    row-gap: 12px;
    padding-inline: 16px;
  }

  .photo-viewer-metadata > div {
    flex: 0 0 auto;
    text-align: left;
  }

  .photo-viewer-dots {
    align-items: flex-end;
    margin-top: 7px;
    padding-bottom: 2px;
  }
}

/* Release-only guard: late network images join the existing reveal instead of popping in. */
html.has-js img[data-preview-image-reveal]:not([data-preview-image-ready="true"]) {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  html.has-js img[data-preview-image-reveal] {
    opacity: 1 !important;
    transition: none !important;
  }
}