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

:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #f6f6f7;
  --text: #1b2228;
  --border: #d8dce0;
  --muted: #646b70;
  --focus: #1668e3;
  --image-outline: oklch(0 0 0 / .1);
  --home-width: 550px;
  --case-width: 550px;
  --cover-ratio: 16 / 9;
  --radius-card: 16px;
  --radius-media: 8px;
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-synthesis: none;
  font-optical-sizing: auto;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121619;
  --surface: #20262a;
  --text: #f4f5f5;
  --border: #4b545a;
  --muted: #aeb5ba;
  --focus: #7fb0ff;
  --image-outline: oklch(1 0 0 / .1);
}

* { box-sizing: border-box; }
html {
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 400 .875rem/normal "Inter", Arial, Helvetica, sans-serif;
  letter-spacing: -.01em;
  text-rendering: optimizeLegibility;
}

button, input, textarea, select { font: inherit; letter-spacing: inherit; }
a { color: inherit; text-underline-position: from-font; text-decoration-thickness: from-font; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }

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

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

.skip-link {
  position: fixed;
  z-index: 100;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  transform: translateY(-160%);
  transition: transform 160ms ease;
}
.skip-link:focus { transform: translateY(0); }

.page {
  width: min(calc(100% - 48px), var(--home-width));
  min-height: 100vh;
  margin-inline: auto;
  padding-block: 80px 64px;
}

body[data-page="case"] .page {
  width: min(calc(100% - 48px), var(--case-width));
  padding-block-end: 0;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

body[data-page="case"] .sidebar { display: none; }

.sidebar__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.sidebar__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
}

.avatar-link {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: visible;
}
.avatar {
  display: block;
  width: 48px;
  height: 48px;
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.avatar__img { display: block; }
.avatar__core,
.avatar__petal { transition: r .5s cubic-bezier(.34,1.3,.5,1); }
.avatar-link:active .avatar { transform: scale(.92); }

.identity { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 12px; min-width: 0; }
.identity__name,
.identity__role { line-height: normal; white-space: nowrap; }
.identity__name { font-weight: 500; }
.identity__role { color: var(--text); opacity: .4; }

.bio {
  width: 100%;
  margin: 0;
  line-height: normal;
  text-wrap: pretty;
}

.sidebar__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.sidebar__settings,
.contact-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.contact-row { gap: 32px; }
.sidebar__separator { color: var(--text); opacity: .4; line-height: 1; }

.control {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  padding: 8px;
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  line-height: normal;
  text-decoration: none;
  cursor: pointer;
  transition-property: transform, background-color, color, border-radius, opacity;
  transition-duration: .3s, .15s, .15s, 0s, .15s;
  transition-timing-function: cubic-bezier(.22,1,.36,1), ease, ease, cubic-bezier(.22,1,.36,1), ease;
}
.control:active { transform: scale(.96); }
.control--theme { width: 34px; justify-content: center; }
.control--language { width: 42px; justify-content: center; }
.language-toggle__text { display: inline-block; min-width: 2ch; text-align: center; }
.control__icon { width: 16px; height: 16px; filter: none; }
:root[data-theme="dark"] .control__icon { filter: invert(1); }

.header-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  letter-spacing: inherit;
  line-height: normal;
  text-decoration: none;
  opacity: .4;
  cursor: pointer;
  transition: opacity .15s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.header-action::before { content: ""; position: absolute; inset: -4px; }
.header-action:hover,
.header-action:focus-visible { opacity: 1; }
.header-action:active { transform: scale(.96); }
.header-action--icon { width: 24px; justify-content: center; margin-inline: -4px; }
.header-action--language { min-width: 40px; }
.header-action .control__icon { flex: 0 0 auto; }

.theme-toggle__icons {
  display: grid;
  width: 16px;
  height: 16px;
  pointer-events: none;
}
.theme-toggle__icon {
  grid-area: 1 / 1;
  transform-box: fill-box;
  transform-origin: center;
}
.theme-toggle__moon { opacity: 1; transform: none; }
.theme-toggle__sun { opacity: 0; transform: scale(.5) rotate(-90deg); }
:root[data-theme="dark"] .theme-toggle__moon { opacity: 0; transform: scale(.5) rotate(90deg); }
:root[data-theme="dark"] .theme-toggle__sun { opacity: 1; transform: none; }
#themeToggle:active { transform: scale(.98); }

.copy-email__icons {
  display: grid;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}
.myna-icon {
  grid-area: 1 / 1;
  width: 16px;
  height: 16px;
  transition: opacity .3s cubic-bezier(.2,0,0,1), transform .3s cubic-bezier(.2,0,0,1), filter .3s cubic-bezier(.2,0,0,1);
}
.copy-email__check { opacity: 0; transform: scale(.25); filter: blur(4px); }
.copy-email__check path { stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset .26s cubic-bezier(.23,1,.32,1); }
.copy-email[data-copy-status="copied"] .copy-email__clipboard { opacity: 0; transform: scale(.25); filter: blur(4px); }
.copy-email[data-copy-status="copied"] .copy-email__check { opacity: 1; transform: scale(1); filter: blur(0); }
.copy-email[data-copy-status="copied"] .copy-email__check path { stroke-dashoffset: 0; }

.main-col { min-width: 0; }
.work {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-block-start: 58px;
}

.project-card {
  margin: 0;
  border-radius: var(--radius-card);
  background: transparent;
  transition: background-color 180ms ease;
}
.project-card__link {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 8px;
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
}
.project-card__media {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-media);
  contain: paint;
  outline: 1px solid var(--image-outline);
  outline-offset: -1px;
}
.project-card__media picture { display: block; width: 100%; height: 100%; }
.project-card__image { width: 100%; height: 100%; object-fit: cover; }
.project-card__copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding-block-end: 8px;
}
.project-card__title,
.project-card__description {
  width: 100%;
  max-width: 68ch;
  margin: 0;
  font-size: .875rem;
  line-height: normal;
  overflow-wrap: break-word;
}
.project-card__title { font-weight: 600; }
.project-card__description { font-weight: 400; text-wrap: pretty; }
.project-card:focus-within { background: var(--surface); }
.project-card:focus-within .project-card__media { border-radius: var(--radius-media); }

.empty { margin: 8px 0; color: var(--muted); }

/* case */
.case-page { padding: 0; }
.back-link {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 6px;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  opacity: .45;
  text-decoration: none;
  font-size: 0;
  transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .15s ease;
}
.back-link::after { content: ""; position: absolute; inset: -6px; }
.back-link img { width: 20px; height: 20px; transform: translateX(-1px); }
:root[data-theme="dark"] .back-link img { filter: invert(1); }
.back-link:active { transform: scale(.96); }

.case-article {
  display: flex;
  flex-direction: column;
  gap: 64px;
  margin-block-start: 64px;
}
.case-intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.case-hero {
  width: 100%;
  height: auto;
  aspect-ratio: var(--cover-ratio);
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--surface);
  contain: paint;
  outline: 1px solid var(--image-outline);
  outline-offset: -1px;
}
.case-hero picture { display: block; width: 100%; height: 100%; }
.case-hero__image { width: 100%; height: 100%; object-fit: cover; }
.case-header,
.case-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
}
.case-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
.case-header h1,
.case-header p,
.case-section__title,
.case-section__text {
  width: 100%;
  margin: 0;
  font-size: .875rem;
}
.case-header h1,
.case-section__title { font-weight: 600; line-height: normal; }
.case-header__top h1 { width: auto; min-width: 0; }
.case-header p,
.case-section__text { font-weight: 400; line-height: 1.46; }
.case-site-link {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-weight: 400;
  line-height: 1.46;
  text-decoration: none;
}
.case-site-link img { width: 20px; height: 20px; object-fit: contain; }
.case-facts { display: flex; flex-direction: column; gap: 8px; width: 100%; margin: 0; }
.case-fact { display: grid; grid-template-columns: 27% minmax(0, 1fr); gap: 14%; width: 100%; }
.case-fact dt { color: var(--muted); }
.case-fact dd { min-width: 0; margin: 0; line-height: 1.46; }
.case-inline-link {
  display: inline-flex;
  align-items: center;
  gap: .25em;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.case-inline-link img { width: 1em; height: 1em; object-fit: contain; }
.case-site-link:hover,
.case-inline-link:hover { text-decoration: underline; }
.case-figma-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding-block: 4px;
  font-weight: 500;
  line-height: 1.46;
}
.case-figma-link span { font-size: 1rem; }
.case-section__text + .case-section__text { margin-block-start: 0; }
.case-disclosure {
  width: 100%;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.case-disclosure summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-block: 16px;
  cursor: pointer;
  list-style: none;
}
.case-disclosure summary::-webkit-details-marker { display: none; }
.case-disclosure__title,
.case-disclosure__notice,
.case-disclosure__lead,
.case-disclosure__action { display: block; width: 100%; }
.case-disclosure__title { font-weight: 600; }
.case-disclosure__notice { font-weight: 600; }
.case-disclosure__lead { line-height: 1.46; }
.case-disclosure__action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-start: 8px;
  color: var(--muted);
}
.case-disclosure__action span { transition: transform .2s ease; }
.case-disclosure[open] .case-disclosure__action span { transform: rotate(90deg); }
.case-disclosure__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-block: 0 20px;
}
.case-disclosure__body .case-section__text { margin: 0; }
.case-table-wrap { width: 100%; overflow-x: auto; }
.case-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.case-table th,
.case-table td { padding: 10px 0; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; font-size: .875rem; line-height: 1.46; }
.case-table th { font-weight: 600; }
.case-table th:not(:first-child),
.case-table td:not(:first-child) { padding-left: 16px; }
.case-media {
  width: 100%;
  height: auto;
  aspect-ratio: var(--cover-ratio);
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-media);
  outline: 1px solid var(--image-outline);
  outline-offset: -1px;
}

/* PCH uses the same narrow case column and editorial rhythm as other portfolio cases. */
body[data-page="case"] .page:has(.pch-case) {
  width: min(calc(100% - 48px), var(--case-width));
  max-width: var(--case-width);
  margin-inline: auto;
  padding-block: 80px 0;
  background: var(--bg);
  color: var(--text);
}
.page:has(.pch-case),
body:has(.pch-case),
html:has(.pch-case) { background: var(--bg); }
.page:has(.pch-case) .main-col { width: 100%; }
.pch-case { width: 100%; padding: 0; background: var(--bg); color: var(--text); }
.pch-article {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 77.19px;
  margin: 64px 0 0;
  color: var(--text);
  font: 400 14.47px/normal "Inter", Arial, Helvetica, sans-serif;
  letter-spacing: -.434px;
  overflow-wrap: break-word;
}
.pch-article > * { flex: 0 0 auto; width: 100%; margin: 0; }
.pch-copy { display: flex; flex-direction: column; gap: 12.06px; }
.pch-copy h2,
.pch-copy h1,
.pch-copy p,
.pch-role p,
.pch-role span,
.pch-bench-table p { margin: 0; font: inherit; }
.pch-copy h1, .pch-copy h2 { font-weight: 500; }
.pch-copy p { line-height: normal; }
.pch-intro, .pch-role, .pch-copy--2, .pch-copy--3, .pch-copy--4, .pch-copy--5,
.pch-copy--6, .pch-copy--7, .pch-copy--8, .pch-copy--18, .pch-copy--19 { height: auto; min-height: 0; }
.pch-intro .pch-copy { gap: 12.06px; }
.pch-copy__heading-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; }
.pch-copy__heading-row h1,
.pch-copy__heading-row h2 { width: auto; min-width: 0; }
.pch-copy__heading-row .case-site-link { font-size: inherit; }
.pch-role { display: flex; flex-direction: column; gap: 7.24px; }
.pch-role > div { display: grid; grid-template-columns: minmax(108px, 27%) minmax(0, 1fr); column-gap: 16px; }
.pch-role span { color: var(--muted); }
.pch-benchmark .pch-realtime {
  gap: 24.12px;
  font-size: 14.47px;
  line-height: normal;
  letter-spacing: -.434px;
}
.pch-realtime__intro,
.pch-realtime__footnotes { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.pch-realtime__intro { gap: 12.06px; }
.pch-realtime__intro h2 { font-weight: 500; }
.pch-realtime__intro p,
.pch-realtime__load,
.pch-realtime__footnotes p { margin: 0; font: inherit; line-height: normal; }
.pch-realtime__metrics { grid-template-columns: minmax(0, 1fr) max-content; column-gap: 19.3px; row-gap: 14.47px; }
.pch-realtime__metrics > span:nth-child(odd) { opacity: .4; }
.pch-realtime__metrics strong { font-weight: 400; }
.pch-realtime__footnotes { gap: 12.06px; }
.pch-realtime__footnotes p { opacity: .4; }
.pch-process-code {
  display: inline-block;
  padding-inline: 2.41px;
  border-radius: 4.82px;
  background: rgb(0 0 0 / .04);
  font: 400 1em/normal "Geist Mono", ui-monospace, monospace;
  letter-spacing: inherit;
  white-space: nowrap;
  opacity: .8;
}
:root[data-theme="dark"] .pch-process-code { background: rgb(255 255 255 / .04); }
.pch-visual {
  display: block;
  height: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--surface);
  outline: 1px solid var(--image-outline);
  outline-offset: -1px;
}
.pch-visual img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.pch-hero-visual, .pch-screen { margin: 0; }
.pch-benchmark { display: flex; flex-direction: column; gap: 77.19px; height: auto; overflow: visible; }
.pch-benchmark-disclosure { display: block; width: 100%; }
.pch-benchmark-disclosure__summary {
  display: flex;
  flex-direction: column;
  gap: 12.06px;
  width: 100%;
  cursor: pointer;
  list-style: none;
}
.pch-benchmark-disclosure__summary::-webkit-details-marker { display: none; }
.pch-benchmark-disclosure__title,
.pch-benchmark-disclosure__notice,
.pch-benchmark-disclosure__lead { display: block; width: 100%; }
.pch-benchmark-disclosure__title { font-weight: 500; }
.pch-benchmark-disclosure__notice strong { font-weight: 500; }
.pch-benchmark-disclosure__lead { line-height: normal; }
.pch-benchmark-disclosure__action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-block-start: 12.06px;
  color: var(--text);
  opacity: .4;
}
.pch-benchmark-disclosure__action > span { white-space: nowrap; }
.pch-benchmark-disclosure__action img {
  flex: 0 0 auto;
  width: 14.47px;
  height: 14.47px;
  transition: transform .2s ease;
}
:root[data-theme="dark"] .pch-benchmark-disclosure__action img { filter: invert(1); }
.pch-benchmark-disclosure[open] .pch-benchmark-disclosure__action img { transform: rotate(90deg); }
.pch-benchmark-disclosure__content {
  display: flex;
  flex-direction: column;
  gap: 77.19px;
  margin-block-start: 77.19px;
}
.pch-benchmark > .pch-copy,
.pch-benchmark > .pch-bench-table,
.pch-benchmark > .pch-bench-note { flex: 0 0 auto; height: auto; margin: 0; }
.pch-benchmark .pch-copy { gap: 12.06px; }
.pch-bench-table { width: 100%; overflow-x: auto; font: inherit; }
.pch-bench-table table { width: 100%; border-collapse: collapse; table-layout: fixed; font: inherit; }
.pch-bench-table th:nth-child(1), .pch-bench-table td:nth-child(1) { width: 42.7%; }
.pch-bench-table th:nth-child(2), .pch-bench-table td:nth-child(2) { width: 28.6%; }
.pch-bench-table th:nth-child(3), .pch-bench-table td:nth-child(3) { width: 14.6%; }
.pch-bench-table th:nth-child(4), .pch-bench-table td:nth-child(4) { width: 14.1%; }
.pch-bench-table th,
.pch-bench-table td { padding: 7.24px 0; border-bottom: 1px solid var(--border); text-align: left; font: inherit; }
.pch-bench-table th { font-weight: 500; }
.pch-bench-table thead { opacity: .4; }
.pch-bench-table p { margin-top: 24.12px; }
.pch-footnote { color: var(--text); font: inherit; line-height: normal; opacity: .4; }
.pch-bench-backends { margin: 0; padding-inline-start: 20px; color: var(--muted); }
.pch-term-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 19.3px; row-gap: 14.47px; }
.pch-term-grid > span:nth-child(odd) { opacity: .4; }
.pch-metrics strong { justify-self: end; font-weight: 400; }
.pch-benchmark .pch-copy.pch-realtime { gap: 24.12px; }
.pch-benchmark .pch-realtime .pch-realtime__metrics { grid-template-columns: minmax(0, 1fr) max-content; column-gap: 19.3px; row-gap: 14.47px; }
.pch-benchmark .pch-realtime .pch-realtime__metrics strong { font-weight: 400; }
.pch-copy--11 > p.pch-footnote:nth-last-child(2) { margin-block-start: 12.06px; }
.pch-copy--12 > .pch-term-grid,
.pch-copy--13 > .pch-term-grid,
.pch-copy--14 > .pch-term-grid { margin-block: 12.06px; }
.pch-ending { height: auto; }

@media (max-width: 760px) {
  body[data-page="case"] .page:has(.pch-case) { width: calc(100% - 32px); padding-block-start: 24px; }
  .pch-article { gap: 48px; margin: 40px 0 0; }
  .pch-role > div { grid-template-columns: minmax(96px, 32%) minmax(0, 1fr); column-gap: 12px; }
  .pch-term-grid { column-gap: 12px; row-gap: 9px; }
  .pch-role { gap: 4.5px; }
  .pch-benchmark { gap: 48px; }
  .pch-bench-table table { min-width: 420px; }
}
.case-media picture { display: block; width: 100%; height: 100%; }
.case-media__image { width: 100%; height: 100%; object-fit: cover; }
.case-media.case-media--full { aspect-ratio: auto; overflow: visible; outline: none; }
.case-media--full picture { height: auto; }
.case-media--full .case-media__image { height: auto; object-fit: contain; border-radius: var(--radius-media); outline: 1px solid var(--image-outline); outline-offset: -1px; }
.case-media__link { display: block; border-radius: var(--radius-media); }
.case-media__caption { margin-block-start: 8px; color: var(--muted); font-size: .8125rem; line-height: 1.4; }
.case-empty { margin: 0; color: var(--muted); }

.project-card[data-slug="adaptius"] .project-card__media { aspect-ratio: 1824 / 1080; }

.gallery {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin: 0;
}
.gallery__track {
  display: flex;
  gap: 16px;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__item {
  flex: 0 0 100%;
  width: 100%;
  height: auto;
  aspect-ratio: var(--cover-ratio);
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-media);
  scroll-snap-align: center;
  scroll-snap-stop: always;
  background: var(--surface);
  outline: 1px solid var(--image-outline);
  outline-offset: -1px;
}
.gallery__item picture { display: block; width: 100%; height: 100%; }
.gallery__image { width: 100%; height: 100%; object-fit: cover; }
.gallery__controls { display: flex; align-items: center; gap: 16px; }
.gallery__controls button {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  opacity: .45;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .15s ease;
}
.gallery__controls button::after { content: ""; position: absolute; inset: -6px; }
.gallery__controls button img { width: 20px; height: 20px; }
:root[data-theme="dark"] .gallery__controls button img { filter: invert(1); }
.gallery__controls button:disabled { opacity: .16; cursor: default; }
.gallery__controls button:active:not(:disabled) { transform: scale(.96); }

.next-case {
  display: flex;
  flex-direction: column;
  gap: 64px;
  color: inherit;
  text-decoration: none;
}
.next-case__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
.next-case strong { font-weight: 600; line-height: normal; text-align: start; }
.next-link {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1.46;
}
.next-link__base { flex: 0 0 auto; }
.next-link__clones { display: inline-flex; align-items: center; }
.next-link__clone {
  flex: 0 0 auto;
  padding-inline-start: .4em;
  opacity: 0;
  transform: translateX(-8px);
}
.next-link__clone.is-out { animation: nextOut .22s ease forwards; }
.next-case__media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--cover-ratio);
  overflow: hidden;
  border-radius: var(--radius-media);
  contain: paint;
  outline: 1px solid var(--image-outline);
  outline-offset: -1px;
}
.next-case__peek {
  display: block;
  width: 100%;
  aspect-ratio: 32 / 9;
  overflow: hidden;
  border-radius: var(--radius-media) var(--radius-media) 0 0;
}
.next-case__media picture { display: block; width: 100%; height: 100%; }
.next-case__image { width: 100%; height: 100%; object-fit: cover; }

body.is-index-entering:not(.is-ready) .main-col { opacity: 0; transform: translateY(10px); }
.main-col {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1);
}

@media (hover: hover) {
  .avatar-link:hover .avatar__core { r: 40px; }
  .avatar-link:hover .avatar__petal { r: 15px; }
  .control:hover {
    border-radius: 8px;
    background: var(--text);
    color: var(--bg);
  }
  .control:hover { transform: none; }
  .control:hover:active { transform: scale(.96); }
  .control:hover .control__icon { filter: invert(1); }
  :root[data-theme="dark"] .control:hover .control__icon { filter: none; }
  .back-link:hover,
  .gallery__controls button:hover:not(:disabled) { opacity: 1; }
  .header-action:hover { color: var(--text); }
  .header-action:hover .control__icon { filter: none; }
  :root[data-theme="dark"] .header-action:hover .control__icon { filter: invert(1); }
  .project-card:hover { background: var(--surface); }
  .next-case:hover .next-link__base { text-decoration: underline; }
}

html.is-page-leaving .project-card { background: transparent !important; }

.avatar-link:focus-visible .avatar__core { r: 40px; }
.avatar-link:focus-visible .avatar__petal { r: 15px; }

@view-transition { navigation: auto; }

::view-transition {
  background: var(--bg);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  body.is-index-entering .page { animation: pageIn .6s cubic-bezier(.22,1,.36,1) both; }
  .avatar__mask-shape {
    transform-box: fill-box;
    transform-origin: center;
    animation: avatarSpin 8s linear infinite;
  }
  .next-link__clone { animation: nextIn .25s cubic-bezier(.22,1,.36,1) forwards; }

  html:active-view-transition .page { animation: none !important; }
  ::view-transition-group(root) {
    animation: none;
    box-shadow: none;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    mix-blend-mode: normal;
    opacity: 1;
    filter: none;
    box-shadow: none;
    will-change: transform;
    backface-visibility: hidden;
    animation-duration: .38s;
    animation-timing-function: cubic-bezier(.22,.8,.2,1);
    animation-fill-mode: both;
  }
  html[data-nav-direction="forward"]::view-transition-old(root) { animation-name: pageSlideOutLeft; }
  html[data-nav-direction="forward"]::view-transition-new(root) { animation-name: pageSlideInRight; }
  html[data-nav-direction="back"]::view-transition-old(root) { animation-name: pageSlideOutRight; }
  html[data-nav-direction="back"]::view-transition-new(root) { animation-name: pageSlideInLeft; }
}

@keyframes pageIn {
  from { opacity: 0; filter: blur(16px); transform: translateY(-40px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes avatarSpin { to { transform: rotate(360deg); } }
@keyframes nextIn { to { opacity: 1; transform: translateX(0); } }
@keyframes nextOut { to { opacity: 0; transform: translateX(-8px); } }
@keyframes pageSlideOutLeft { to { transform: translate3d(-100%, 0, 0); } }
@keyframes pageSlideInRight { from { transform: translate3d(100%, 0, 0); } }
@keyframes pageSlideOutRight { to { transform: translate3d(100%, 0, 0); } }
@keyframes pageSlideInLeft { from { transform: translate3d(-100%, 0, 0); } }

@keyframes themeMoonOut {
  from { opacity: 1; transform: scale(1) rotate(0); }
  to { opacity: 0; transform: scale(.5) rotate(90deg); }
}
@keyframes themeMoonIn {
  0% { opacity: 0; transform: scale(.5) rotate(90deg); }
  58% { opacity: 1; transform: scale(1.04) rotate(-7deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes themeSunOut {
  from { opacity: 1; transform: scale(1) rotate(0); }
  to { opacity: 0; transform: scale(.5) rotate(-90deg); }
}
@keyframes themeSunIn {
  0% { opacity: 0; transform: scale(.5) rotate(-90deg); }
  58% { opacity: 1; transform: scale(1.04) rotate(7deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@media (prefers-reduced-motion: no-preference) {
  :root[data-theme="dark"] #themeToggle.is-theme-animating .theme-toggle__moon { animation: themeMoonOut .28s cubic-bezier(.2,.8,.2,1) both; }
  :root[data-theme="dark"] #themeToggle.is-theme-animating .theme-toggle__sun { animation: themeSunIn .28s cubic-bezier(.2,.8,.2,1) both; }
  :root[data-theme="light"] #themeToggle.is-theme-animating .theme-toggle__sun { animation: themeSunOut .28s cubic-bezier(.2,.8,.2,1) both; }
  :root[data-theme="light"] #themeToggle.is-theme-animating .theme-toggle__moon { animation: themeMoonIn .28s cubic-bezier(.2,.8,.2,1) both; }
}

@media (max-width: 1020px) {
  .page { width: min(calc(100% - 48px), var(--home-width)); padding-block-start: 64px; }
  body[data-page="case"] .page { width: min(calc(100% - 48px), var(--case-width)); }
  .gallery { width: calc(100vw - 24px); }
}

@media (max-width: 760px) {
  .page,
  body[data-page="case"] .page {
    width: calc(100% - 32px);
    padding-block: 24px 0;
  }
  .sidebar__bottom { align-items: center; flex-wrap: wrap; }
  .sidebar__settings { margin-inline-start: auto; }
  .control { min-height: 44px; }
  .control--theme { width: 44px; }
  .control--language { width: 44px; }
  .header-action { min-height: 32px; }
  .header-action::before { inset: -6px; }
  .header-action--icon { width: 32px; margin-inline: -8px; }
  .header-action--language { min-width: 44px; }
  .contact-row { gap: 24px; }
  .work { margin-block-start: 56px; }
  .project-card__link { padding: 8px; }
  .project-card__media { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-media); }
  .project-card__copy { padding-block-end: 8px; }
  .case-article { gap: 48px; margin-block-start: 40px; }
  .case-hero { height: auto; aspect-ratio: 16 / 9; }
  .case-header p,
  .case-section__text { max-width: none; }
  .case-media { height: auto; aspect-ratio: var(--cover-ratio); }
  .gallery { width: 100%; gap: 12px; }
  .gallery__track { gap: 12px; }
  .gallery__item { flex-basis: 100%; width: 100%; height: auto; aspect-ratio: var(--cover-ratio); }
  .next-case { gap: 48px; }
  .next-case__media { height: auto; aspect-ratio: var(--cover-ratio); }
}

@media (max-width: 600px) {
  .case-fact { grid-template-columns: 1fr; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  [style*="view-transition-name"] { view-transition-name: none !important; }
  .myna-icon,
  .copy-email__check path { transition-duration: .01ms !important; }
  .theme-toggle__icon { animation: none !important; }
}

.is-theme-switching *,
.is-theme-switching *::before,
.is-theme-switching *::after {
  transition: none !important;
}