/* ============================================================
   KUMA STUDIO — standalone, unlisted page (per Sami's brief: not
   linked from main nav, shareable one-off link only). Links to the
   main site's style.css for shared tokens (palette, fonts, base
   reset) so this stays visually part of the same world, but every
   layout rule lives here since nothing else on the site needs it.

   Sami's friend is making real logo/branding for Kuma Studio later —
   this reuses the main site's cream/ink/blue palette as a placeholder
   foundation until that exists, same as every other draft piece of
   this site. Swap colors here once real branding lands.
   ============================================================ */

.kuma-page {
  background: var(--cream);
}

.kuma-header {
  padding: 3rem var(--edge) 1.5rem;
  text-align: center;
}

/* icon + wordmark share one row instead of stacking */
.kuma-header-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.kuma-riceball {
  height: 7.5rem;
  width: auto;
}

.kuma-wordmark {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.25rem);
  letter-spacing: -0.01em;
}

.kuma-tagline {
  display: block;
  margin-top: 0.75rem;
  /* English text — Montserrat via --font-sans, not --font-display
     (that token is Japanese-only as of 2026-07-29). */
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 1.1rem;
  opacity: 0.65;
}

.kuma-subhead {
  display: block;
  max-width: none;
  white-space: nowrap;
  margin: 0.75rem auto 0;
  font-size: 0.95rem;
  line-height: 1.6;
  opacity: 0.75;
}

.kuma-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.5rem var(--edge) 3.5rem;
}

.kuma-social {
  display: flex;
  gap: 1.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.kuma-social a {
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.15em;
}

.kuma-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--edge);
  padding: 0 var(--edge) 5rem;
  max-width: 76rem;
  margin: 0 auto;
}

.kuma-piece {
  margin: 0;
}

.kuma-piece img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border-radius: 0.25rem;
}

.kuma-piece figcaption {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  opacity: 0.65;
}

.kuma-footer {
  padding: 3rem var(--edge) 4rem;
  text-align: center;
  font-size: 0.75rem;
  opacity: 0.6;
}

.kuma-footer a {
  text-decoration: underline;
}

@media (max-width: 860px) {
  .kuma-gallery { grid-template-columns: repeat(2, 1fr); }
  /* the one-line subhead needs real desktop width to fit without
     shrinking to unreadable size — let it wrap again below this point */
  .kuma-subhead { white-space: normal; max-width: 30rem; }
}

@media (max-width: 520px) {
  .kuma-gallery { grid-template-columns: 1fr; gap: 2rem; }
  .kuma-header { padding: 2.5rem 1.25rem 1.25rem; }
  .kuma-riceball { height: 5.5rem; }
  .kuma-header-row { gap: 0.5rem; }
}