/* ============================================================
   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-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.25rem);
  letter-spacing: -0.01em;
}

.kuma-tagline {
  display: block;
  margin-top: 0.75rem;
  /* English body-scale text — --font-copy (ITC Avant Garde Gothic Pro,
     weight 300/700 only — italic works, both weights ship an italic cut) */
  font-family: var(--font-copy);
  font-weight: 300;
  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; }
}