:root {
  --color-bg: #e8f0f1;
  --color-paper: #f4f7f6;
  --color-ink: #141414;
  --color-aqua: #3b9cff;
  --color-lilac: #b7a6d9;
  --color-rule: rgba(20, 20, 20, 0.22);
  --color-muted: #5a5a5a;
  --color-traffic-red: #ff5f57;
  --color-traffic-yellow: #febc2e;
  --color-traffic-green: #28c840;
  --font-display: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --font-body: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --font-ui: 'Lucida Grande', 'Lucida Sans Unicode', -apple-system, BlinkMacSystemFont, sans-serif;
  --measure: 38rem;
  --page-pad: clamp(1.25rem, 4vw, 3.5rem);
  --gap: clamp(1.5rem, 3vw, 2.75rem);
  --window-radius: 7px;
  --shadow-window: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 10px 30px rgba(20, 40, 60, 0.12),
    0 2px 6px rgba(20, 40, 60, 0.08);
  --shadow-window-lift: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 16px 40px rgba(20, 40, 60, 0.16),
    0 4px 10px rgba(20, 40, 60, 0.1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

::selection {
  background: color-mix(in srgb, var(--color-lilac) 45%, white);
  color: var(--color-ink);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(20, 40, 60, 0.026) 0,
      rgba(20, 40, 60, 0.026) 1px,
      transparent 1px,
      transparent 4px
    ),
    linear-gradient(180deg, #dcecf5 0%, var(--color-bg) 38%, var(--color-paper) 100%);
  background-attachment: fixed;
}

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

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}

a:hover {
  color: var(--color-aqua);
  text-decoration-color: var(--color-aqua);
  text-decoration-thickness: 2px;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-aqua);
  outline-offset: 3px;
}

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

.site {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1440px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: var(--page-pad);
  z-index: 1;
}

.site > main {
  flex: 1;
  padding-bottom: clamp(3rem, 7vw, 5rem);
}

.site-header {
  position: relative;
  z-index: 1;
  margin-bottom: clamp(3.5rem, 8vw, 6rem);
}

.site-header__row {
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
}

.site-name {
  display: inline-block;
  margin: 0 0 0.85rem;
  color: var(--color-ink);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.85rem, 3vw, 2.35rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-decoration: none;
}

.site-name:hover {
  color: var(--color-ink);
  text-decoration: none;
}

.site-name__dot {
  color: var(--color-aqua);
}

.site-rule {
  display: block;
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: linear-gradient(
    90deg,
    var(--color-ink) 0%,
    rgba(20, 20, 20, 0.35) 55%,
    transparent 100%
  );
}

.home-intro {
  max-width: 27rem;
  margin-top: clamp(2rem, 5vw, 4.5rem);
}

.home-intro h1 {
  margin: 0 0 1rem;
  font-size: 0.92rem;
  font-weight: 700;
}

.home-intro p {
  margin: 0 0 1rem;
  color: var(--color-muted);
  font-size: 0.78rem;
  line-height: 1.65;
}

.home-intro p:last-child {
  margin-bottom: 0;
}

.os-link {
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
  color: var(--color-ink);
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.os-link:hover {
  color: #1768a8;
  text-decoration: none;
}

.os-link__orb {
  width: 13px;
  height: 13px;
  border: 1px solid #2579bb;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 25%, #e8f8ff 0 12%, #70cbff 30%, #188ad9 68%, #075a9d 100%);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.9),
    inset 0 -2px 2px rgba(0, 48, 100, 0.25),
    0 1px 2px rgba(0, 50, 90, 0.3);
}

.project-index {
  position: relative;
  z-index: 1;
  padding-top: clamp(1rem, 3vw, 2.5rem);
}

.project-list {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-card {
  display: grid;
  grid-template-columns: minmax(12rem, 0.48fr) minmax(0, 1.52fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  color: inherit;
}

.project-card__media-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.project-card__media-link:hover {
  color: inherit;
  text-decoration: none;
}

.project-card__media-link:hover .window {
  animation: window-jiggle 500ms ease;
  box-shadow: var(--shadow-window-lift);
}

.gallery .window:hover {
  animation: window-jiggle 500ms ease;
  box-shadow: var(--shadow-window-lift);
}

@keyframes window-jiggle {
  0% {
    transform: translateY(0) rotate(0);
  }
  18% {
    transform: translateY(-2px) rotate(0.35deg);
  }
  40% {
    transform: translateY(-2px) rotate(-0.35deg);
  }
  62% {
    transform: translateY(-1px) rotate(0.2deg);
  }
  82% {
    transform: translateY(-1px) rotate(-0.15deg);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}

.project-card__media {
  margin: 0;
}

.project-card__info {
  max-width: 20rem;
}

.project-card__title {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  transition: color 180ms ease;
}

.project-card__summary {
  max-width: var(--measure);
  margin: 0 0 0.95rem;
  color: var(--color-muted);
  font-size: 0.78rem;
  line-height: 1.6;
}

.project-card__cta {
  display: inline-block;
  margin-top: 1.2rem;
  padding: 0.28rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #1768a8;
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
}

.project-card__cta:hover {
  border-color: rgba(32, 112, 168, 0.48);
  background: rgba(112, 203, 255, 0.18);
  color: #075a9d;
  text-decoration: none;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Aqua gel pills, same recipe as the OS site's .aqua-button-base:
   layered gradient, inset bevels, gloss cap on top, glow at the bottom. */
.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  min-height: 1.7rem;
  padding: 0.2rem 0.85rem;
  border: 1px solid;
  border-color: #9a9a9a #8a8a8a #7a7a7a #8a8a8a;
  border-radius: 999px;
  background-image: linear-gradient(
    to bottom,
    #f0f0f0 0%,
    #e4e4e4 15%,
    #d4d4d4 50%,
    #c4c4c4 85%,
    #b8b8b8 100%
  );
  box-shadow:
    rgba(0, 0, 0, 0.25) 0 1px 3px,
    rgba(0, 0, 0, 0.25) 0 0 0 0.5px inset,
    rgba(80, 80, 80, 0.5) 0 1px 2px inset,
    rgba(200, 200, 200, 0.6) 0 2px 3px 1px inset;
  color: var(--color-ink);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  line-height: 1;
  white-space: nowrap;
  transition:
    border-color 160ms ease,
    background-image 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease;
}

.pill::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: 1px;
  left: 4px;
  right: 4px;
  height: 45%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.75) 0%,
    rgba(255, 255, 255, 0.2) 100%
  );
  border-radius: 999px 999px 50% 50%;
  filter: blur(0.2px);
  pointer-events: none;
}

.pill::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 4px;
  right: 4px;
  height: 38%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.5) 100%
  );
  border-radius: 50% 50% 999px 999px;
  filter: blur(0.3px);
  pointer-events: none;
}

.pill:hover {
  border-color: #4a90c8 #3080b8 #2070a8 #3080b8;
  background-image: linear-gradient(to bottom, #a0dcff 0%, #58b8ec 50%, #68bdf0 100%);
  box-shadow:
    rgba(0, 0, 0, 0.3) 0 1px 3px,
    rgba(0, 0, 0, 0.3) 0 0 0 0.5px inset,
    rgba(20, 80, 140, 0.8) 0 1px 3px inset,
    rgba(100, 190, 250, 0.8) 0 2px 3px 1px inset;
  color: #073b69;
}

.window {
  overflow: hidden;
  border: 1px solid rgba(20, 40, 60, 0.22);
  border-radius: var(--window-radius);
  background: #fff;
  box-shadow: var(--shadow-window);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.window__titlebar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 25px;
  padding: 0 0.7rem;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.16) 0,
      rgba(255, 255, 255, 0.16) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(180deg, #f8fafc 0%, #e2e6eb 52%, #cdd3da 100%);
  border-bottom: 1px solid rgba(20, 40, 60, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.window__lights {
  display: flex;
  flex-shrink: 0;
  gap: 5px;
}

.window__light {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0.5px solid rgba(0, 0, 0, 0.22);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.75),
    inset 0 -1px 1px rgba(0, 0, 0, 0.15),
    0 0.5px 1px rgba(0, 0, 0, 0.2);
}

.window__light--close {
  background: radial-gradient(circle at 30% 30%, #ff8a84, var(--color-traffic-red));
}

.window__light--minimize {
  background: radial-gradient(circle at 30% 30%, #ffd56a, var(--color-traffic-yellow));
}

.window__light--zoom {
  background: radial-gradient(circle at 30% 30%, #6ae07a, var(--color-traffic-green));
}

.window__title {
  flex: 1;
  overflow: hidden;
  color: rgba(20, 20, 20, 0.62);
  font-family: var(--font-ui);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 1.65rem;
}

/* Matted like an image open in Preview, so shots read as framed
   screenshots rather than the app pretending to be the window. */
.window__body {
  padding: clamp(0.8rem, 1.8vw, 1.4rem);
  background:
    repeating-linear-gradient(
      0deg,
      rgba(59, 156, 255, 0.035) 0,
      rgba(59, 156, 255, 0.035) 1px,
      transparent 1px,
      transparent 4px
    ),
    linear-gradient(180deg, #f2f6fa 0%, #e9eff5 100%);
}

.window__body img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top left;
  border: 1px solid rgba(20, 40, 60, 0.18);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(20, 40, 60, 0.12);
}

.detail-header {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap) clamp(1.5rem, 4vw, 3rem);
  margin: 0;
  padding: clamp(1rem, 2.5vw, 1.75rem);
  background: rgba(251, 253, 253, 0.9);
}

.project-info-window {
  position: relative;
  z-index: 1;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.detail-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.detail-block h2 {
  margin: 0 0 0.85rem;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 700;
}

.detail-block p {
  max-width: 28rem;
  margin: 0 0 0.9rem;
  color: var(--color-muted);
  font-size: 0.78rem;
  line-height: 1.65;
}

.detail-block p:last-child {
  margin-bottom: 0;
}

.gallery {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(4.5rem, 10vw, 8rem);
  margin: 0 0 clamp(2rem, 5vw, 3.5rem);
}

.gallery__item {
  display: grid;
  grid-template-columns: minmax(11rem, 0.42fr) minmax(0, 1.58fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  margin: 0;
}

.gallery__item:nth-child(odd) > .window {
  grid-column: 2;
  grid-row: 1;
}

.gallery__item:nth-child(odd) > figcaption {
  grid-column: 1;
  grid-row: 1;
}

.gallery__item:nth-child(even) {
  grid-template-columns: minmax(0, 1.58fr) minmax(11rem, 0.42fr);
}

.gallery__item:nth-child(even) > .window {
  grid-column: 1;
  grid-row: 1;
}

.gallery__item:nth-child(even) > figcaption {
  grid-column: 2;
  grid-row: 1;
}

.gallery__item .window__body img {
  aspect-ratio: 16 / 10;
}

.gallery figcaption {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.6;
}

.gallery figcaption h2 {
  margin: 0 0 0.75rem;
  font-size: 0.86rem;
  font-weight: 700;
}

.gallery figcaption p {
  margin: 0;
  color: var(--color-muted);
}

.figure-index {
  flex-shrink: 0;
  color: var(--color-aqua);
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.closing-note {
  position: relative;
  z-index: 1;
  max-width: 42rem;
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-rule);
  color: var(--color-muted);
  font-size: 0.8rem;
  font-style: normal;
  line-height: 1.65;
}

.site-footer {
  position: relative;
  z-index: 1;
  margin-top: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--color-rule);
}

.site-footer p {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--color-muted);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  font-size: 0.72rem;
}

.site-footer p + .footer-links {
  margin-top: 1rem;
}

.footer-links a {
  color: var(--color-muted);
  text-decoration: none;
}

.footer-links a:hover {
  color: #1768a8;
  text-decoration: underline;
}

@media (min-width: 861px) {
  .site--home {
    display: grid;
    grid-template-columns: minmax(17rem, 0.72fr) minmax(0, 1.28fr);
    grid-template-rows: auto 1fr auto;
    column-gap: clamp(3rem, 7vw, 6rem);
    height: 100vh;
    min-height: 0;
    overflow: hidden;
  }

  .site--home .site-header {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }

  .site--home .site-header__row {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .site--home .site-name {
    margin-bottom: 0;
  }

  .site--home .site-rule {
    margin-top: 0.85rem;
  }

  .site--home > .project-scroll {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: stretch;
    height: auto;
    min-height: 0;
    margin: 0.75rem 0 1.25rem;
    padding: 0 clamp(1rem, 2vw, 1.75rem) 2rem 0;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-color: #5ebcf0 #e4e8eb;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
  }

  .site--home .project-index {
    padding-top: 0;
  }

  .site--home .project-list {
    gap: clamp(4rem, 8vw, 7rem);
  }

  .site--home .project-card {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .site--home .project-card__media-link {
    order: 1;
  }

  .site--home .project-card__info {
    order: 2;
    max-width: 34rem;
    padding-bottom: 1.5rem;
  }

  .site--home .window__body {
    padding: clamp(1rem, 2vw, 1.6rem);
  }

  .site--home .window__body img {
    aspect-ratio: 16 / 10.5;
  }

  .site--home .site-footer {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

/* Shared Aqua scrollbar — home project pane + detail page document scroll. */
.project-scroll::-webkit-scrollbar,
html::-webkit-scrollbar {
  width: 15px;
}

.project-scroll::-webkit-scrollbar-track,
html::-webkit-scrollbar-track {
  margin: 2px 0;
  border: 1px solid #b8c0c6;
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    #c9d0d5 0%,
    #f3f5f6 38%,
    #dfe4e7 100%
  );
  box-shadow:
    inset 2px 0 3px rgba(70, 85, 95, 0.28),
    inset -1px 0 1px rgba(255, 255, 255, 0.85);
}

.project-scroll::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb {
  min-height: 48px;
  border: 1px solid #2f7fb8;
  border-radius: 999px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='10' viewBox='0 0 9 10'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.75' stroke-width='1'%3E%3Cpath d='M1 2.5h7M1 5h7M1 7.5h7'/%3E%3C/g%3E%3Cg fill='none' stroke='%231a6fa8' stroke-opacity='0.45' stroke-width='1'%3E%3Cpath d='M1 3.5h7M1 6h7M1 8.5h7'/%3E%3C/g%3E%3C/svg%3E")
      center center / 9px 10px no-repeat,
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(255, 255, 255, 0.55) 12%,
      rgba(255, 255, 255, 0.12) 28%,
      transparent 48%
    ),
    linear-gradient(
      90deg,
      #1f86c8 0%,
      #5ebcf0 18%,
      #9fdfff 42%,
      #6ec8f4 68%,
      #248fd0 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 3px rgba(10, 70, 120, 0.35),
    0 1px 2px rgba(20, 60, 100, 0.25);
}

.project-scroll::-webkit-scrollbar-thumb:hover,
html::-webkit-scrollbar-thumb:hover {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='10' viewBox='0 0 9 10'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.85' stroke-width='1'%3E%3Cpath d='M1 2.5h7M1 5h7M1 7.5h7'/%3E%3C/g%3E%3Cg fill='none' stroke='%231a6fa8' stroke-opacity='0.4' stroke-width='1'%3E%3Cpath d='M1 3.5h7M1 6h7M1 8.5h7'/%3E%3C/g%3E%3C/svg%3E")
      center center / 9px 10px no-repeat,
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 255, 0.62) 12%,
      rgba(255, 255, 255, 0.16) 28%,
      transparent 48%
    ),
    linear-gradient(
      90deg,
      #2390d4 0%,
      #6ec8f8 18%,
      #b2ebff 42%,
      #7ad0f8 68%,
      #2a98da 100%
    );
}

.project-scroll::-webkit-scrollbar-thumb:active,
html::-webkit-scrollbar-thumb:active {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='10' viewBox='0 0 9 10'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.55' stroke-width='1'%3E%3Cpath d='M1 2.5h7M1 5h7M1 7.5h7'/%3E%3C/g%3E%3Cg fill='none' stroke='%231a6fa8' stroke-opacity='0.5' stroke-width='1'%3E%3Cpath d='M1 3.5h7M1 6h7M1 8.5h7'/%3E%3C/g%3E%3C/svg%3E")
      center center / 9px 10px no-repeat,
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.2) 18%,
      transparent 40%
    ),
    linear-gradient(
      90deg,
      #176faa 0%,
      #3fa0d4 22%,
      #6bb8e4 48%,
      #3f9ed0 72%,
      #1a78b4 100%
    );
}

.project-scroll::-webkit-scrollbar-button:vertical:start:increment,
.project-scroll::-webkit-scrollbar-button:vertical:end:decrement,
html::-webkit-scrollbar-button:vertical:start:increment,
html::-webkit-scrollbar-button:vertical:end:decrement {
  display: block;
}

.project-scroll::-webkit-scrollbar-button:vertical:start:decrement,
.project-scroll::-webkit-scrollbar-button:vertical:start:increment,
html::-webkit-scrollbar-button:vertical:start:decrement,
html::-webkit-scrollbar-button:vertical:start:increment {
  height: 0;
  display: block;
}

.project-scroll::-webkit-scrollbar-button:vertical:end:decrement,
.project-scroll::-webkit-scrollbar-button:vertical:end:increment,
html::-webkit-scrollbar-button:vertical:end:decrement,
html::-webkit-scrollbar-button:vertical:end:increment {
  display: block;
  height: 14px;
  width: 15px;
  border: 1px solid #9aa3a9;
  background-color: #f2f4f5;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 1px rgba(80, 95, 105, 0.22);
}

.project-scroll::-webkit-scrollbar-button:vertical:end:decrement,
html::-webkit-scrollbar-button:vertical:end:decrement {
  border-bottom: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath fill='%234a5560' d='M4 1.2 7.2 5H.8z'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #ffffff 0%, #e4e8eb 100%);
}

.project-scroll::-webkit-scrollbar-button:vertical:end:increment,
html::-webkit-scrollbar-button:vertical:end:increment {
  border-radius: 0 0 2px 2px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath fill='%234a5560' d='M4 4.8.8 1h6.4z'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #ffffff 0%, #e4e8eb 100%);
}

.project-scroll::-webkit-scrollbar-corner,
html::-webkit-scrollbar-corner {
  background: transparent;
}

html {
  scrollbar-color: #5ebcf0 #e4e8eb;
  scrollbar-gutter: stable;
}

.custom-scrollbar-active {
  scrollbar-width: none;
  scrollbar-gutter: auto;
}

.custom-scrollbar-active::-webkit-scrollbar {
  display: none;
}

.aqua-scrollbar {
  position: fixed;
  z-index: 1000;
  display: grid;
  grid-template-rows: 18px minmax(34px, 1fr) 18px;
  width: 19px;
  overflow: hidden;
  border: 1px solid #aeb7bd;
  border-radius: 3px;
  background: #e7ebed;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.65),
    0 1px 3px rgba(38, 54, 66, 0.18);
  user-select: none;
  touch-action: none;
}

.aqua-scrollbar[hidden] {
  display: none;
}

.aqua-scrollbar:focus-visible {
  outline: 2px solid var(--color-aqua);
  outline-offset: 2px;
}

.aqua-scrollbar__button {
  position: relative;
  width: 17px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  background: linear-gradient(90deg, #d6dce0 0%, #fff 48%, #cbd2d7 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 1px rgba(64, 78, 88, 0.2);
  cursor: default;
}

.aqua-scrollbar__button::before {
  content: '';
  position: absolute;
  left: 5px;
  width: 0;
  height: 0;
  border-right: 3px solid transparent;
  border-left: 3px solid transparent;
}

.aqua-scrollbar__button--up {
  border-bottom: 1px solid #aeb7bd;
}

.aqua-scrollbar__button--up::before {
  top: 6px;
  border-bottom: 5px solid #53616b;
}

.aqua-scrollbar__button--down {
  border-top: 1px solid #aeb7bd;
}

.aqua-scrollbar__button--down::before {
  top: 6px;
  border-top: 5px solid #53616b;
}

.aqua-scrollbar__button:active {
  background: linear-gradient(90deg, #b9c1c7 0%, #e1e5e8 48%, #adb7be 100%);
  box-shadow: inset 0 1px 2px rgba(45, 58, 68, 0.3);
}

.aqua-scrollbar__track {
  position: relative;
  min-height: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.88);
  border-left: 1px solid #aeb7bd;
  background: linear-gradient(90deg, #b9c3ca 0%, #edf1f3 36%, #fff 50%, #d2d9de 100%);
  box-shadow:
    inset 3px 0 4px rgba(50, 66, 78, 0.3),
    inset -2px 0 2px rgba(255, 255, 255, 0.95);
}

.aqua-scrollbar__thumb {
  position: absolute;
  top: 0;
  left: 1px;
  width: 13px;
  min-height: 46px;
  overflow: hidden;
  border: 1px solid #075b9a;
  border-radius: 999px;
  background:
    radial-gradient(
      ellipse at 50% 92%,
      rgba(133, 226, 255, 0.9) 0%,
      rgba(41, 163, 225, 0.42) 40%,
      transparent 66%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 255, 0.68) 9%,
      rgba(255, 255, 255, 0.14) 27%,
      transparent 43%
    ),
    linear-gradient(90deg, #0063a8 0%, #28a6e8 18%, #b9efff 45%, #6dd3ff 63%, #087ac1 86%, #005795 100%);
  box-shadow:
    inset 1px 0 1px rgba(255, 255, 255, 0.8),
    inset -1px 0 1px rgba(0, 49, 91, 0.55),
    inset 0 -3px 4px rgba(0, 68, 118, 0.42),
    0 1px 2px rgba(21, 67, 103, 0.5),
    0 0 3px rgba(48, 172, 234, 0.42);
  cursor: default;
}

.aqua-scrollbar__thumb::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 2px;
  right: 2px;
  left: 2px;
  height: 34%;
  border-radius: 999px 999px 55% 55%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(255, 255, 255, 0.56) 42%,
    rgba(255, 255, 255, 0.08) 100%
  );
  filter: blur(0.2px);
  pointer-events: none;
}

.aqua-scrollbar__thumb::after {
  content: '';
  position: absolute;
  top: 50%;
  z-index: 2;
  right: 2px;
  left: 2px;
  height: 9px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.82) 0,
    rgba(255, 255, 255, 0.82) 1px,
    rgba(15, 91, 145, 0.42) 1px,
    rgba(15, 91, 145, 0.42) 2px
  );
}

.aqua-scrollbar__thumb:hover {
  background:
    radial-gradient(
      ellipse at 50% 92%,
      rgba(164, 237, 255, 1) 0%,
      rgba(62, 181, 239, 0.5) 42%,
      transparent 68%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.74) 9%,
      rgba(255, 255, 255, 0.18) 27%,
      transparent 43%
    ),
    linear-gradient(90deg, #006bb4 0%, #35b5f3 18%, #d4f7ff 45%, #7bddff 63%, #0b88d0 86%, #005e9f 100%);
}

@media (max-width: 860px) {
  .detail-header {
    grid-template-columns: 1fr;
  }

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

  .project-card__info {
    max-width: 34rem;
  }

  .gallery__item,
  .gallery__item:nth-child(even) {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .gallery__item:nth-child(n) > .window {
    grid-column: 1;
    grid-row: 1;
  }

  .gallery__item:nth-child(n) > figcaption {
    grid-column: 1;
    grid-row: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .project-card__media-link:hover .window {
    transform: none;
  }
}

@media print {
  body {
    background: white;
  }

  .window {
    box-shadow: none;
  }
}