/* Preserve the source palette, composition and imagery; enlarge movement. */
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { overflow-x: clip; }
#top h1 { font-size: clamp(2.25rem, 4.2vw, 4.75rem); }
#top h1 > span { white-space: nowrap; }
main p { font-size: max(1rem, 1em); }
header nav a { font-size: .875rem; }
header > div { gap: 1rem; }
header nav { gap: 1rem; }
a[href^='https://lin.ee/'], a[href*='instagram.com'] { text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 3px solid #b18b50; outline-offset: 5px; }

@media (min-width: 1280px) and (max-width: 1450px) {
  header nav { gap: .65rem; }
  header nav a { font-size: .8125rem; }
}
@media (max-width: 640px) {
  #top h1 { font-size: clamp(2rem, 7.2vw, 3rem); letter-spacing: .035em; }
  html { scroll-padding-top: 92px; }
}

@media (prefers-reduced-motion: no-preference) {
  #top .reveal { animation: hero-rise 1.35s cubic-bezier(.16,1,.3,1) both; }
  #top .reveal-delay-1 { animation-delay: .12s; }
  #top .reveal-delay-2 { animation-delay: .25s; }
  #top .reveal-delay-3 { animation-delay: .38s; }
  #top img { animation: hero-zoom 2.1s cubic-bezier(.16,1,.3,1) both; }
  #top .reveal.relative > .absolute:last-child { animation: badge-rise 3.8s ease-in-out .9s both; }
  .motion-ready .motion-target {
    opacity: 0;
    transform: translate3d(var(--motion-x, 0px), 90px, 0) scale(.9);
    transition: opacity 1s ease, transform 1.35s cubic-bezier(.16,1,.3,1);
    transition-delay: var(--motion-delay, 0ms);
  }
  .motion-ready h2.motion-target { transform: translate3d(-55px, 35px, 0); }
  .motion-ready .motion-target.motion-visible,
  .motion-ready .motion-target:focus-within { opacity: 1; transform: none; }
  #classes article img { transition: transform .8s cubic-bezier(.16,1,.3,1); }
  @media (hover: hover) {
    #classes article:hover img { transform: scale(1.08); }
    a[href^='https://lin.ee/']:hover, a[href*='instagram.com']:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 26px #68283b26;
    }
  }
  @keyframes hero-rise {
    from { opacity: 0; transform: translate3d(0,85px,0) scale(.94); }
    to { opacity: 1; transform: none; }
  }
  @keyframes hero-zoom {
    from { transform: scale(1.28); }
    to { transform: scale(1); }
  }
  @keyframes badge-rise {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-28px); }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .motion-target { opacity: 1 !important; transform: none !important; }
}
@media print {
  .reveal, .motion-target { opacity: 1 !important; transform: none !important; }
}

/* Keep replacement lesson photos centered and retain the section's color treatment. */
#classes .lesson-photo--koto {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 0;
  aspect-ratio: 1420 / 1108;
  background: #f8f4eb;
}
#classes .lesson-photo--koto > img {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
  object-fit: contain;
  object-position: 50% 50%;
  transform-origin: 50% 50%;
  filter: saturate(.75);
}
#reasons .reasons-photo {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1420 / 1108;
}
#reasons .reasons-photo > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-position: 50% 50%;
  transform-origin: 50% 50%;
}
#reasons .reasons-photo--koto > img {
  object-fit: contain;
}

/* Show every beginner photo in full, centered in its card. */
#beginners article > .beginner-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  transform-origin: 50% 50%;
}
#beginners article:hover > .beginner-photo {
  transform: none;
}