@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root {
  /* fit the whole 1920x1080 canvas inside the viewport on BOTH axes (not
     just width), so the page itself never needs to scroll regardless of
     the window's aspect ratio -- only the panel scrolls internally */
  --px: min(calc(100vw / 1920), calc(100vh / 1080));
  --folder: #ece0c8;
  --panel: #e2d7bd;
  --ink: #321328;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body.project-page {
  background: var(--folder);
  color: var(--ink);
  font-family: 'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.stage {
  position: relative;
  width: calc(1920 * var(--px));
  height: calc(1080 * var(--px));
  overflow: hidden;
  flex: none;
}

.proj-left {
  position: absolute;
  left: calc(54 * var(--px));
  top: calc(84 * var(--px));
  width: calc(800 * var(--px));
}

.proj-title {
  font-size: calc(150 * var(--px));
  font-weight: 300;
  line-height: .92;
  letter-spacing: -0.02em;
}

.proj-desc {
  margin-top: calc(76 * var(--px));
  font-size: calc(27 * var(--px));
  line-height: 1.32;
  font-weight: 400;
  max-width: calc(800 * var(--px));
}
.proj-desc b { font-weight: 700; }

.proj-meta {
  margin-top: calc(55 * var(--px));
  font-size: calc(23 * var(--px));
  line-height: 1.55;
  font-weight: 400;
}
.proj-meta b { font-weight: 700; }

.proj-buttons {
  margin-top: calc(38 * var(--px));
  display: flex;
  gap: calc(20 * var(--px));
  position: relative;
}
.proj-pill {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--px));
  background: var(--panel);
  color: var(--ink);
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  font-size: calc(22 * var(--px));
  font-weight: 400;
  padding: calc(16 * var(--px)) calc(26 * var(--px));
  border-radius: calc(30 * var(--px));
  white-space: nowrap;
  transition: filter .15s ease;
}
.proj-pill:hover { filter: brightness(.96); }

.proj-other-wrap { position: relative; }
.proj-dropdown {
  position: absolute;
  top: calc(64 * var(--px));
  left: 0;
  min-width: calc(240 * var(--px));
  background: var(--panel);
  border-radius: calc(20 * var(--px));
  padding: calc(10 * var(--px)) 0;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 5;
  box-shadow: 0 calc(10 * var(--px)) calc(28 * var(--px)) rgba(0,0,0,.2);
}
.proj-other-wrap.open .proj-dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.proj-dropdown a {
  display: block;
  padding: calc(10 * var(--px)) calc(24 * var(--px));
  color: var(--ink);
  text-decoration: none;
  font-size: calc(20 * var(--px));
  transition: background .15s ease;
}
.proj-dropdown a:hover { background: rgba(50,19,40,.08); }
.proj-other-wrap.open .proj-pill .chev { transform: rotate(180deg); }
.proj-pill .chev { display: inline-block; transition: transform .2s ease; }

.proj-panel {
  position: absolute;
  left: calc(959 * var(--px));
  top: calc(80 * var(--px));
  width: calc(910 * var(--px));
  height: calc(950 * var(--px));
  border-radius: calc(32 * var(--px));
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--panel);
  scrollbar-width: none;
  /* establishes a containing block so .scroll-hint (position:fixed) pins
     itself to this panel's own box instead of the browser viewport */
  transform: translateZ(0);
}
.proj-panel::-webkit-scrollbar { display: none; }
.proj-panel img { display: block; width: 100%; height: auto; }

.scroll-hint {
  position: fixed;
  left: 50%;
  bottom: calc(24 * var(--px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: calc(8 * var(--px));
  background: rgba(50, 19, 40, .85);
  color: #fff;
  font-size: calc(15 * var(--px));
  font-weight: 500;
  padding: calc(10 * var(--px)) calc(18 * var(--px));
  border-radius: calc(30 * var(--px));
  pointer-events: none;
  opacity: 1;
  transition: opacity .4s ease;
  z-index: 10;
  white-space: nowrap;
}
.scroll-hint.is-hidden { opacity: 0; }
.scroll-hint svg {
  width: calc(13 * var(--px));
  height: calc(13 * var(--px));
  animation: scroll-hint-bounce 1.6s ease-in-out infinite;
}
@keyframes scroll-hint-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(4 * var(--px))); }
}

/* video patched into a specific spot of a scroll image (percentages are
   relative to the image's own natural size, not the panel viewport) */
.stack { position: relative; }
.stack .overlay {
  position: absolute;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  /* opaque cover to fully hide whatever the source image has at this spot
     (e.g. a static icon) before the video paints on top of it */
  background: #631808;
}
.stack .overlay video,
.stack .overlay img {
  position: absolute;
  width: 108%;
  height: 108%;
  left: -4%;
  top: -4%;
  object-fit: cover;
  display: block;
  /* the video's own background is very slightly darker than the page brown
     it sits on; a small brightness-only nudge (no saturation change, which
     overshot last time) closes that gap without new assets */
  filter: brightness(1.1);
}
/* stop Safari/WebKit from drawing its own tap-to-play affordance on the
   video so it truly behaves like a looping gif, never like a video player */
.gif-video::-webkit-media-controls,
.gif-video::-webkit-media-controls-start-playback-button,
.gif-video::-webkit-media-controls-play-button {
  display: none !important;
  -webkit-appearance: none;
}

@media (max-width: 760px) {
  :root { --px: calc(100vw / 420); }
  .stage { height: auto; min-height: 100vh; padding-bottom: calc(60 * var(--px)); }
  .proj-left { position: static; width: auto; padding: calc(40 * var(--px)) calc(24 * var(--px)) 0; }
  .proj-title { font-size: calc(64 * var(--px)); }
  .proj-desc, .proj-meta { max-width: none; }
  .proj-buttons { flex-wrap: wrap; }
  .proj-panel {
    position: static;
    margin: calc(32 * var(--px)) calc(24 * var(--px)) 0;
    width: auto;
    height: calc(500 * var(--px));
  }
}