/* Viewport clipping hotfix
   The deployed page can run inside browsers whose CSS vh/svh value is smaller
   than the actual visible canvas. Use --app-height, set by js/viewport-fix.js,
   so every scrapbook section keeps the real viewport height without shrinking
   backgrounds or changing the original layout proportions. */

:root {
  --app-height: 100vh;
}

@supports (height: 100dvh) {
  :root {
    --app-height: 100dvh;
  }
}

html,
body,
.site-wrapper,
.section {
  height: var(--app-height, 100vh);
}

body {
  min-height: var(--app-height, 100vh);
}

.section {
  min-height: var(--app-height, 100vh);
}

/* Neutralise the retired short-viewport shrink patch if an older cached build
   still loads this file. These values restore the intended art direction. */
@media (min-width: 769px) and (max-height: 860px) {
  .bg-homepage,
  .bg-about,
  .bg-edu {
    background-size: contain;
    background-position: center;
  }

  .bg-exp,
  .bg-contact-bg {
    background-size: cover;
    background-position: center;
  }

  .bg-skills {
    background-size: cover;
    background-position: center var(--skills-bg-y, 0%);
  }

  .about-text-area {
    top: 23.5%;
    width: 19%;
    transform: translateX(20px);
    transform-origin: 50% 0;
  }

  .about-text-area.visible {
    transform: translateX(0);
  }

  .about-title {
    font-size: clamp(2.1rem, 3.15vw, 3.2rem);
  }

  .about-name {
    font-size: clamp(1.16rem, 1.9vw, 1.52rem);
  }

  .about-body {
    font-size: clamp(0.84rem, 1.2vw, 1.08rem);
    line-height: 1.55;
  }

  .washi-keywords {
    padding: 8px 0 0;
    gap: clamp(4px, 0.55vw, 8px);
  }

  .washi-tape {
    min-height: 27px;
    font-size: clamp(0.84rem, 1.08vw, 1rem);
  }

  .pixel-nav {
    right: 28px;
    bottom: 28px;
  }

  .progress-bar {
    bottom: 16px;
  }
}