/* ============================================================
   あそびミックス Portfolio Site — Claude Design refresh
   Base styles + behaviors the dc-runtime handled dynamically.
   ============================================================ */

html { scroll-behavior: smooth; scroll-padding-top: 72px; }
    body { margin: 0; background: #FBF4E6; color: #2C2A23; font-family: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', sans-serif; line-height: 1.9; font-size: 16px; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
    h1, h2, h3, h4, h5, h6, p, figure, ul, ol { margin: 0; padding: 0; }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; }
    @keyframes pinFloat { 0%, 100% { transform: rotate(-45deg) translate(0, 0); } 50% { transform: rotate(-45deg) translate(-6px, -6px); } }
    @keyframes pinBounce { 0%, 100% { transform: rotate(-45deg) translate(0, 0); } 50% { transform: rotate(-45deg) translate(-5px, -5px); } }
    @keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 9px); } }
    @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(89, 168, 74, 0.45); } 70% { box-shadow: 0 0 0 9px rgba(89, 168, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(89, 168, 74, 0); } }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    }

/* nav scrollbar (webkit) */
nav::-webkit-scrollbar { display: none; }

/* hero decorations shown on desktop only (dc: sc-if desktop) */
.only-desktop { display: none; }
@media (min-width: 821px) { .only-desktop { display: block; } }

/* architecture flow responsive (dc: archDir / archNodeMax / archArrowT).
   Column below 1000px: between 821-999px a row layout wraps the last node
   onto its own line with a dangling arrow. */
.arch-flow { flex-direction: row; }
.arch-node { max-width: 210px; }
.arch-arrow { transform: none; }
@media (max-width: 999px) {
  .arch-flow { flex-direction: column; }
  .arch-node { max-width: none; }
  .arch-arrow { transform: rotate(90deg); align-self: center; }
}

/* stats grid: fixed column counts to avoid a lone orphan card
   (the auto-fit minmax layout strands the 6th card at mid widths) */
.stats-grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .stats-grid { grid-template-columns: repeat(6, 1fr); } }

/* hover states (dc: style-hover) */
.hov-1:hover { background:#F4E9D2;color:#2C2A23; }
.hov-2:hover { transform:translateY(-2px);box-shadow:0 12px 28px rgba(89,168,74,0.45); }
.hov-3:hover { transform:translateY(-2px);box-shadow:0 10px 24px rgba(60,50,20,0.14); }
.hov-4:hover { transform:translateY(-6px) rotate(0deg);box-shadow:0 18px 40px rgba(60,50,20,0.15); }