:root {
  color-scheme: light;
  background: #c8b9a8;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-width: 1440px;
  min-height: 100%;
}

body {
  overflow: hidden;
  background: #c8b9a8;
}

.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;
}

.homepage {
  position: relative;
  width: 100vw;
  min-width: 1440px;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  isolation: isolate;
}

.homepage-artwork {
  display: contents;
}

.homepage__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.homepage__left-door,
.homepage__right-door {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mobile-index {
  display: none;
}

.mobile-index__project {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.mobile-index__project small {
  overflow-wrap: anywhere;
}

.overlay {
  position: absolute;
  display: block;
  height: auto;
  z-index: var(--overlay-layer, 2);
  user-select: none;
  transform:
    perspective(1000px)
    translate(var(--offset-x, 0), var(--offset-y, 0))
    rotate(var(--overlay-rotation, 0deg))
    rotateX(var(--overlay-tilt-x, 0deg))
    rotateY(var(--overlay-tilt-y, 0deg))
    scale(var(--overlay-scale, 1))
    scaleX(var(--overlay-compress-x, 1))
    scaleY(var(--overlay-compress-y, 1));
  transform-origin: center;
}

.overlay-link {
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
}

.overlay-preview-trigger {
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: zoom-in;
  font: inherit;
  pointer-events: auto;
}

.overlay-preview-trigger__visual {
  position: relative;
  display: block;
  width: 100%;
  transition:
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 180ms ease;
}

.overlay-link:focus-visible {
  outline: 3px solid rgb(255 255 255 / 90%);
  outline-offset: 8px;
}

.overlay-preview-trigger:focus-visible {
  outline: 3px solid rgb(255 255 255 / 90%);
  outline-offset: 8px;
}

.overlay__image {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  transition:
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 180ms ease;
}

.is-homepage-editing .overlay-link,
.is-homepage-editing .overlay-preview-trigger {
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  html:not(.is-homepage-editing) .overlay-link:hover .overlay__image {
    filter: brightness(1.015) drop-shadow(0 8px 7px rgb(37 30 22 / 22%));
    transform: translateY(-4px);
  }

  html:not(.is-homepage-editing) .overlay-preview-trigger:hover .overlay-preview-trigger__visual {
    filter: brightness(1.015) drop-shadow(0 8px 7px rgb(37 30 22 / 22%));
    transform: translateY(-4px);
  }

  html:not(.is-homepage-editing) .overlay--scenario-map:hover .overlay__image {
    transform: translateY(-8px);
  }
}

html:not(.is-homepage-editing) .overlay-link:focus-visible .overlay__image {
  filter: brightness(1.015) drop-shadow(0 8px 7px rgb(37 30 22 / 22%));
  transform: translateY(-4px);
}

html:not(.is-homepage-editing) .overlay-preview-trigger:focus-visible .overlay-preview-trigger__visual {
  filter: brightness(1.015) drop-shadow(0 8px 7px rgb(37 30 22 / 22%));
  transform: translateY(-4px);
}

html:not(.is-homepage-editing) .overlay--scenario-map:focus-visible .overlay__image {
  transform: translateY(-8px);
}

html:not(.is-homepage-editing) .overlay-link:active .overlay__image {
  filter: brightness(1.01) drop-shadow(0 3px 3px rgb(37 30 22 / 18%));
  transform: translateY(-1px);
  transition-duration: 80ms;
}

html:not(.is-homepage-editing) .overlay-preview-trigger:active .overlay-preview-trigger__visual {
  filter: brightness(1.01) drop-shadow(0 3px 3px rgb(37 30 22 / 18%));
  transform: translateY(-1px);
  transition-duration: 80ms;
}

.overlay--name {
  --overlay-layer: 2;
  --offset-x: 6px;
  --offset-y: -29px;
  --overlay-rotation: -8.7deg;
  --overlay-scale: 0.68;
  --overlay-tilt-x: 12.6deg;
  --overlay-tilt-y: -11.8deg;
  --overlay-compress-x: 1;
  --overlay-compress-y: 1;
  top: 5.5%;
  left: 35%;
  width: 14.2%;
}

.overlay--about {
  --overlay-layer: 9;
  --offset-x: -28px;
  --offset-y: 14px;
  --overlay-rotation: 3.2deg;
  --overlay-scale: 1.15;
  --overlay-tilt-x: 1.8deg;
  --overlay-tilt-y: -20.3deg;
  --overlay-compress-x: 1.08;
  --overlay-compress-y: 1.03;
  top: 10.5%;
  left: 45.8%;
  width: 6.2%;
}

.about-polaroid__photo {
  position: absolute;
  top: 14.55%;
  left: 14.55%;
  z-index: 0;
  display: block;
  width: 71.55%;
  height: 56.85%;
  object-fit: cover;
  object-position: 50% 57%;
}

.about-polaroid__frame {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

.object-preview {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: transparent;
}

.object-preview::backdrop {
  background: rgb(25 22 18 / 62%);
  backdrop-filter: blur(10px) saturate(0.85);
}

.object-preview__stage {
  display: grid;
  width: 100%;
  min-height: 100%;
  padding: clamp(48px, 8vh, 88px) clamp(32px, 8vw, 112px);
  place-items: center;
}

.object-preview__visual {
  position: relative;
  display: block;
  width: min(74vw, 760px);
  max-height: 76vh;
  filter: drop-shadow(0 26px 34px rgb(16 13 10 / 32%));
}

.object-preview__visual .overlay__image,
.object-preview__visual .about-polaroid__frame {
  display: block;
  width: 100%;
  height: auto;
  max-height: 76vh;
  object-fit: contain;
}

.object-preview[data-preview="about"] .object-preview__visual {
  width: min(36vw, 430px);
}

.object-preview[data-preview="statement"] .object-preview__visual {
  width: min(68vw, 700px);
}

.object-preview[data-preview="resume"] .object-preview__visual {
  width: min(28vw, 360px);
}

.object-preview__close {
  position: fixed;
  top: max(24px, env(safe-area-inset-top));
  right: max(24px, env(safe-area-inset-right));
  z-index: 2;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 38%);
  border-radius: 50%;
  color: #fffaf2;
  background: rgb(33 29 24 / 42%);
  cursor: pointer;
  font-size: 0;
  place-items: center;
}

.object-preview__close::before,
.object-preview__close::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

.object-preview__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.object-preview__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.object-preview__close:focus-visible {
  outline: 3px solid #fffaf2;
  outline-offset: 4px;
}

.overlay--statement {
  --overlay-layer: 1;
  --offset-x: -5px;
  --offset-y: -461px;
  --overlay-rotation: 2deg;
  --overlay-scale: 0.6;
  --overlay-tilt-x: -22.6deg;
  --overlay-tilt-y: -3.3deg;
  --overlay-compress-x: 1.05;
  --overlay-compress-y: 0.93;
  top: 67%;
  left: 35%;
  width: 13.2%;
}

.overlay--resume {
  --overlay-layer: 3;
  --offset-x: -144px;
  --offset-y: -394px;
  --overlay-rotation: 2.9deg;
  --overlay-scale: 1.09;
  --overlay-tilt-x: -4.7deg;
  --overlay-tilt-y: -5.8deg;
  --overlay-compress-x: 1;
  --overlay-compress-y: 1;
  top: 70%;
  left: 46.3%;
  width: 6.3%;
}

.overlay--bpm {
  --overlay-layer: 2;
  --offset-x: -23px;
  --offset-y: 54px;
  --overlay-rotation: -8deg;
  --overlay-scale: 0.64;
  --overlay-tilt-x: 5.3deg;
  --overlay-tilt-y: -14.9deg;
  --overlay-compress-x: 0.97;
  --overlay-compress-y: 0.95;
  top: 7.6%;
  left: 57.2%;
  width: 18%;
}

.overlay--jp-points {
  --overlay-layer: 3;
  --offset-x: -19px;
  --offset-y: 41px;
  --overlay-rotation: 9.7deg;
  --overlay-scale: 0.62;
  --overlay-tilt-x: 5.1deg;
  --overlay-tilt-y: -8.7deg;
  --overlay-compress-x: 1.1;
  --overlay-compress-y: 1.07;
  top: 8.5%;
  left: 73%;
  width: 14.2%;
}

.overlay--tax {
  --overlay-layer: 2;
  --offset-x: 6px;
  --offset-y: -84px;
  --overlay-rotation: -5.8deg;
  --overlay-scale: 0.86;
  --overlay-tilt-x: -6.3deg;
  --overlay-tilt-y: -9.5deg;
  --overlay-compress-x: 0.89;
  --overlay-compress-y: 1;
  top: 55.5%;
  left: 58.5%;
  width: 11.7%;
}

.overlay--scenario-map {
  --overlay-layer: 3;
  --offset-x: -32px;
  --offset-y: -103px;
  --overlay-rotation: 96.7deg;
  --overlay-scale: 0.79;
  --overlay-tilt-x: -3.8deg;
  --overlay-tilt-y: 12deg;
  --overlay-compress-x: 0.97;
  --overlay-compress-y: 1.1;
  top: 55.2%;
  left: 69.7%;
  width: 20%;
}

.tuner,
.tuner-launcher {
  position: fixed;
  z-index: 100;
  color: #f7f4ed;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.tuner {
  top: 16px;
  left: 16px;
  width: 304px;
  max-height: calc(100svh - 32px);
  padding: 16px;
  overflow-y: auto;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 16px;
  background: rgb(26 25 23 / 88%);
  box-shadow: 0 16px 48px rgb(0 0 0 / 28%);
  backdrop-filter: blur(18px);
}

.tuner__header,
.tuner__control,
.tuner__actions {
  display: flex;
  align-items: center;
}

.tuner__header {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.tuner__eyebrow,
.tuner__title,
.tuner__status {
  margin: 0;
}

.tuner__eyebrow {
  color: #b9b4aa;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tuner__title {
  margin-top: 3px;
  font-size: 18px;
  line-height: 1.2;
}

.tuner__icon-button,
.tuner__actions button,
.tuner-launcher {
  border: 1px solid rgb(255 255 255 / 18%);
  color: inherit;
  background: rgb(255 255 255 / 8%);
  cursor: pointer;
}

.tuner__icon-button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
}

.tuner__target {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
  color: #cbc6bc;
  font-size: 12px;
}

.tuner__target select,
.tuner__control input[type="number"] {
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 8px;
  color: #f7f4ed;
  background: #242321;
}

.tuner__target select {
  width: 100%;
  padding: 8px 10px;
  font: inherit;
}

.tuner__controls {
  display: grid;
  gap: 12px;
}

.tuner__control {
  display: grid;
  grid-template-columns: 72px 1fr 64px;
  gap: 8px;
  color: #ded9cf;
  font-size: 12px;
}

.tuner__control small {
  color: #99948b;
  font-size: 10px;
}

.tuner__control input[type="range"] {
  width: 100%;
  accent-color: #d66b5f;
}

.tuner__control input[type="number"] {
  width: 64px;
  padding: 5px 6px;
  font: 500 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.tuner__actions {
  gap: 8px;
  margin-top: 18px;
}

.tuner__actions button {
  flex: 1;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
}

.tuner__actions button:hover,
.tuner__icon-button:hover,
.tuner-launcher:hover {
  background: rgb(255 255 255 / 15%);
}

.tuner__status {
  min-height: 16px;
  margin-top: 10px;
  color: #aaa59b;
  font-size: 11px;
  line-height: 1.45;
}

.tuner-launcher {
  top: 16px;
  left: 16px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgb(26 25 23 / 88%);
  font-size: 12px;
  box-shadow: 0 10px 32px rgb(0 0 0 / 22%);
  backdrop-filter: blur(12px);
}

[hidden] {
  display: none !important;
}

/*
 * Wide desktop reuses the complete mobile homepage on the quiet wall beside
 * the refrigerator. The open index uses space instead of row rules, with the
 * name as the only display-scale type.
 */
@media (min-width: 900px) {
  .mobile-index {
    position: fixed;
    top: clamp(46vh, calc(62.2vh - 10.1vw), 54.5vh);
    left: clamp(32px, 3.5vw, 64px);
    z-index: 10;
    display: block;
    width: clamp(344px, 24.5vw, 384px);
    padding: 26px 26px 24px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    color: #f0ece4;
    background: rgb(42 38 32 / 50%);
    box-shadow: none;
    backdrop-filter: blur(24px) saturate(0.95);
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
    transform: translateY(calc(-50% + 88px));
  }

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

  .mobile-index::before {
    z-index: 0;
    background:
      radial-gradient(ellipse 105% 18% at 4% 14%, rgb(255 247 228 / 17%) 0%, rgb(255 244 220 / 7%) 42%, transparent 74%),
      linear-gradient(118deg, transparent 0%, rgb(255 244 220 / 9%) 12%, rgb(255 244 220 / 4%) 23%, transparent 38%),
      linear-gradient(105deg, transparent 58%, rgb(255 245 224 / 3.5%) 68%, transparent 79%);
  }

  .mobile-index::after {
    z-index: 1;
    opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
  }

  .mobile-index > * {
    position: relative;
    z-index: 2;
  }

  .mobile-index__header {
    display: block;
    max-width: none;
  }

  .mobile-index__role,
  .mobile-index__name,
  .mobile-index__statement {
    margin: 0;
  }

  .mobile-index__role {
    color: #d8d0c4;
    font-size: 10.5px;
    line-height: 1.4;
  }

  .mobile-index__name {
    margin-top: 5px;
    color: #fff8ec;
    font-size: 36px;
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 0.98;
  }

  .mobile-index__statement {
    max-width: 25ch;
    margin-top: 8px;
    color: #e4ded5;
    font-size: 12.5px;
    line-height: 1.4;
  }

  .mobile-index__utility {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    align-items: center;
    margin-top: 6px;
    font-size: 11.5px;
    line-height: 1.4;
  }

  .mobile-index__utility a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: #f0ece4;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }

  .mobile-index__utility a {
    transition:
      color 140ms ease,
      text-decoration-thickness 140ms ease;
  }

  .mobile-index__utility a:focus-visible {
    outline: 2px solid #f0ece4;
    outline-offset: 5px;
  }

  .mobile-index__nav {
    width: 100%;
    margin-top: 26px;
  }

  .mobile-index__nav h2 {
    margin: 0 0 12px;
    color: #d8d0c4;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.4;
    text-transform: uppercase;
  }

  .mobile-index__list {
    display: grid;
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .mobile-index__list a {
    min-height: 46px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 14px;
    gap: 10px;
    align-items: start;
    padding: 0;
    color: inherit;
    text-decoration: none;
    transition:
      color 140ms ease;
  }

  .mobile-index__list a:focus-visible {
    outline: 2px solid #f0ece4;
    outline-offset: 5px;
  }

  .mobile-index__number,
  .mobile-index__arrow {
    padding-top: 4px;
    color: #d8d0c4;
    font-size: 9.5px;
    line-height: 1;
  }

  .mobile-index__arrow {
    color: #ded7cc;
    font-size: 13px;
    text-align: right;
    transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .mobile-index__project {
    display: grid;
    gap: 2px;
  }

  .mobile-index__project strong {
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.15;
  }

  .mobile-index__project small {
    color: #d8d0c4;
    font-size: 11px;
    line-height: 1.35;
  }

  @media (hover: hover) and (pointer: fine) {
    .mobile-index__utility a:hover {
      color: #f0ece4;
      text-decoration-thickness: 2px;
    }

    .mobile-index__list a:hover .mobile-index__project strong {
      color: #fffaf2;
    }

    .mobile-index__list a:hover .mobile-index__arrow {
      transform: translate(2px, -2px);
    }
  }

  .mobile-index__list a:focus-visible .mobile-index__arrow {
    transform: translate(2px, -2px);
  }

  .mobile-index__utility a:active {
    color: #d8d0c4;
  }

  .mobile-index__list a:active {
    color: #d8d0c4;
  }

  .mobile-index__list a:active .mobile-index__arrow {
    transform: translate(0, 0);
  }
}

/*
 * Compact mode crops the approved 1440 px canvas from the left and bottom.
 * The phone layout switches to a separate editorial project directory.
 */
@media (max-width: 1439px) {
  html,
  body {
    width: 100%;
    min-width: 0;
    height: 100%;
  }

  .homepage {
    --desktop-canvas-width: 1440px;
    --desktop-canvas-height: 810.43px;
    --desktop-canvas-left: calc(100vw - var(--desktop-canvas-width));
    width: 100vw;
    min-width: 0;
    height: 100svh;
    min-height: 100%;
    aspect-ratio: auto;
  }

  .homepage__background {
    inset: auto;
    top: 0;
    left: var(--desktop-canvas-left);
    width: var(--desktop-canvas-width);
    height: var(--desktop-canvas-height);
    object-fit: contain;
  }

  .homepage__left-door,
  .homepage__right-door {
    inset: auto;
    top: 0;
    left: var(--desktop-canvas-left);
    width: var(--desktop-canvas-width);
    height: var(--desktop-canvas-height);
  }
}

@media (max-width: 899px) {
  .homepage__background,
  .homepage__left-door,
  .homepage__right-door {
    display: none;
  }

  body {
    overflow-y: auto;
    background: #f0ede6;
  }

  .homepage {
    height: auto;
    min-height: 100svh;
    overflow: visible;
    color: #24211d;
    background: #f0ede6;
  }

  .mobile-index {
    display: flex;
    min-height: 100svh;
    padding:
      max(28px, env(safe-area-inset-top))
      max(24px, env(safe-area-inset-right))
      max(24px, env(safe-area-inset-bottom))
      max(24px, env(safe-area-inset-left));
    flex-direction: column;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  .mobile-index__header {
    max-width: 320px;
  }

  .mobile-index__role,
  .mobile-index__name,
  .mobile-index__statement {
    margin: 0;
  }

  .mobile-index__role {
    color: #766f65;
    font-size: 13px;
    line-height: 1.4;
  }

  .mobile-index__name {
    margin-top: 10px;
    font-size: clamp(46px, 13vw, 64px);
    font-weight: 500;
    letter-spacing: -0.055em;
    line-height: 0.98;
  }

  .mobile-index__statement {
    max-width: 24ch;
    margin-top: 18px;
    color: #5f5951;
    font-size: 16px;
    line-height: 1.5;
  }

  .mobile-index__utility {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 22px;
    font-size: 14px;
    line-height: 1.4;
  }

  .mobile-index__utility a {
    color: #24211d;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }

  .mobile-index__utility a {
    transition:
      color 140ms ease,
      text-decoration-thickness 140ms ease;
  }

  .mobile-index__utility a:focus-visible {
    outline: 2px solid #24211d;
    outline-offset: 5px;
  }

  .mobile-index__nav {
    width: 100%;
    margin-top: auto;
    padding-top: 46px;
  }

  .mobile-index__nav h2 {
    margin: 0 0 12px;
    color: #766f65;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
  }

  .mobile-index__list {
    padding: 0;
    margin: 0;
    list-style: none;
    border-bottom: 1px solid rgb(36 33 29 / 22%);
  }

  .mobile-index__list a {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 18px;
    gap: 10px;
    align-items: start;
    padding: 15px 0 16px;
    border-top: 1px solid rgb(36 33 29 / 22%);
    color: inherit;
    text-decoration: none;
    transition:
      background-color 140ms ease,
      color 140ms ease;
  }

  .mobile-index__list a:focus-visible {
    outline: 2px solid #24211d;
    outline-offset: 5px;
  }

  .mobile-index__number,
  .mobile-index__arrow {
    padding-top: 4px;
    color: #8a8379;
    font-size: 12px;
    line-height: 1;
  }

  .mobile-index__arrow {
    color: #24211d;
    font-size: 16px;
    text-align: right;
    transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  @media (hover: hover) and (pointer: fine) {
    .mobile-index__utility a:hover {
      color: #615b53;
      text-decoration-thickness: 2px;
    }

    .mobile-index__list a:hover {
      background: rgb(36 33 29 / 5%);
    }

    .mobile-index__list a:hover .mobile-index__arrow {
      transform: translate(2px, -2px);
    }
  }

  .mobile-index__utility a:active {
    color: #8a8379;
  }

  .mobile-index__list a:focus-visible {
    background: rgb(36 33 29 / 5%);
  }

  .mobile-index__list a:focus-visible .mobile-index__arrow {
    transform: translate(2px, -2px);
  }

  .mobile-index__list a:active {
    background: rgb(36 33 29 / 9%);
  }

  .mobile-index__list a:active .mobile-index__arrow {
    transform: translate(0, 0);
  }

  .mobile-index__project {
    display: grid;
    gap: 4px;
  }

  .mobile-index__project strong {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.15;
  }

  .mobile-index__project small {
    color: #6b655c;
    font-size: 12px;
    line-height: 1.35;
  }

  .tuner,
  .tuner-launcher {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .overlay__image,
  .overlay-preview-trigger__visual,
  .mobile-index__utility a,
  .mobile-index__list a,
  .mobile-index__arrow {
    transition: none;
  }

  html:not(.is-homepage-editing) .overlay-link:hover .overlay__image,
  html:not(.is-homepage-editing) .overlay-link:focus-visible .overlay__image,
  html:not(.is-homepage-editing) .overlay-link:active .overlay__image,
  .mobile-index__list a:hover .mobile-index__arrow,
  .mobile-index__list a:focus-visible .mobile-index__arrow,
  .mobile-index__list a:active .mobile-index__arrow {
    transform: none;
  }
}