@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap");

:root { color-scheme: light; }

* { box-sizing: border-box; }

html,
body { min-height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: #fff;
  color: #151515;
  -webkit-font-smoothing: antialiased;
}

.holding-page {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.desktop-grid {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(72px, 11vw, 150px);
  transform: translateY(-3vh);
}

.desktop-folder {
  width: 108px;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: inherit;
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.2;
  text-decoration: none;
  transition: transform .28s ease, filter .28s ease;
  -webkit-tap-highlight-color: transparent;
}

.desktop-folder[href="work.html"] {
  order: -1;
  position: relative;
  top: -18px;
}

.desktop-folder[href="https://materiadois.com"] {
  position: relative;
  top: 26px;
}

.desktop-folder svg {
  display: block;
  width: 100%;
  filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .18));
}

.desktop-folder:hover {
  transform: translateY(-4px);
  filter: brightness(1.015);
}

.desktop-folder:active { transform: scale(.97); }

.desktop-folder:focus-visible {
  outline: 1px solid rgba(0, 0, 0, .5);
  outline-offset: 8px;
}

.desktop-folder span {
  padding: 2px 5px;
  border-radius: 3px;
}

.desktop-folder:focus span,
.desktop-folder:active span {
  background: #1677ed;
  color: #fff;
}

.desktop-file {
  position: absolute;
  left: 66%;
  top: 66%;
  width: 118px;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: transform .28s ease;
  -webkit-tap-highlight-color: transparent;
}

.desktop-file img {
  display: block;
  width: 104px;
  aspect-ratio: 4 / 3;
  border: 1px solid #d5d5d5;
  object-fit: cover;
  box-shadow: 0 3px 7px rgba(0, 0, 0, .14);
}

.desktop-file:hover { transform: translateY(-4px); }
.desktop-file:active { transform: scale(.97); }

.desktop-file:focus-visible {
  outline: 1px solid rgba(0, 0, 0, .5);
  outline-offset: 7px;
}

.image-viewer {
  width: min(1120px, calc(100vw - 48px));
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.image-viewer::backdrop {
  background: rgba(255, 255, 255, .94);
}

.image-viewer img {
  display: block;
  width: 100%;
  max-height: calc(100svh - 56px);
  object-fit: contain;
}

.image-viewer-close {
  position: fixed;
  top: 18px;
  right: 22px;
  padding: 4px;
  border: 0;
  background: transparent;
  color: #151515;
  font: 400 28px/1 Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  cursor: pointer;
}

@media (max-width: 700px) {
  .desktop-grid { gap: 52px; }
  .desktop-folder { width: 94px; font-size: 11px; }
  .desktop-folder[href="work.html"] { top: -12px; }
  .desktop-folder[href="https://materiadois.com"] { top: 18px; }
  .desktop-file {
    left: 54%;
    top: 69%;
    width: 104px;
    font-size: 10px;
  }
  .desktop-file img { width: 90px; }
}

@media (prefers-reduced-motion: reduce) {
  .desktop-folder,
  .desktop-file { transition: none; }
}