/* Minimal category cards for the home. The personal module is kept for reuse. */
.hero.hero-shop { padding: 0; background: #fffdf7; }
.hero-shop .hero-grid { display: block; min-height: 0; }
.hero-shop .hero-copy-block { width: 100%; max-width: none; margin: 0; padding: 36px 0 44px; text-align: left; }
.hero-shop-intro[hidden] { display: none !important; }
.hero-projects { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.hero-project { display: flex; flex-direction: column; min-width: 0; border: 1px solid #b6b8ab; background: #edf3e9; color: #171714; text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease; }
.hero-project-copy { display: flex; flex: 1; flex-direction: column; padding: 26px; }
.hero-project-category { margin: 0 0 16px; font-family: ui-monospace,monospace; font-size: 10px; font-weight: 650; letter-spacing: .055em; text-transform: uppercase; }
.hero-project h2 { margin: 0; font-family: inherit; font-size: clamp(25px,2.4vw,33px); line-height: 1.05; letter-spacing: -.045em; font-weight: 750; }
.hero-project-description { margin: 16px 0 24px; font-size: 13px; line-height: 1.7; color: #4d574a; }
.hero-project-link { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid #bcc7b7; font-size: 12px; font-weight: 750; }
.hero-project-link > span { font-size: 19px; line-height: 1; transition: transform .18s ease; }
.hero-project:hover { border-color: #171714; box-shadow: 0 4px 0 #f2b705; }
.hero-project:hover .hero-project-link > span { transform: translateX(3px); }
.hero-project:focus-visible { outline: 3px solid #171714; outline-offset: 4px; }
.hero-project-music { background: #121315; border-color: #55545c; color: #f7f6f2; }
.hero-project-music .hero-project-category { color: #c3b1ff; }
.hero-project-music .hero-project-description { color: #c6c5cc; }
.hero-project-music .hero-project-link { border-color: #45454e; color: #d8f779; }
/* Agents echo the white, ink-bordered product cards further down the home. */
.hero-project-agents { background: #fff; border-color: #0a0a0a; color: #0a0a0a; }
.hero-project-agents .hero-project-category { color: #956600; }
.hero-project-agents .hero-project-description { color: #626260; }
.hero-project-agents .hero-project-link { border-color: #deded8; color: #0a0a0a; }
.hero-project-agents:hover { background: #f0f0ec; border-color: #0a0a0a; box-shadow: none; }
/* Samplerboard keeps the blue identity of its section on this same page. */
.hero-project-sampler { background: linear-gradient(135deg,transparent 0 66%,rgba(47,87,255,.13) 66% 100%),#e8f1ff; border-color: #80a5dc; color: #0a1c43; }
.hero-project-sampler .hero-project-category { color: #174eac; }
.hero-project-sampler .hero-project-description { color: #48556d; }
.hero-project-sampler .hero-project-link { border-color: #b3c8e5; color: #1659c5; }
.hero-project-sampler:hover { border-color: #176bff; box-shadow: 0 4px 0 #80b6ff; }
.hero-project-sampler:focus-visible { outline-color: #176bff; }
@media (max-width: 1050px) {
  .hero-projects { gap: 14px; }
  .hero-project-copy { padding: 20px; }
  .hero-project h2 { font-size: 25px; }
}
@media (max-width: 760px) {
  .hero-shop .hero-copy-block { padding: 24px 0 32px; }
  .hero-projects { grid-template-columns: 1fr; }
  .hero-project-copy { padding: 22px; }
  .hero-project-category { margin-bottom: 12px; }
  .hero-project h2 { font-size: 26px; }
  .hero-project-description { margin: 13px 0 18px; }
  .hero-project-link { padding-top: 13px; }
}
@media (prefers-reduced-motion: reduce) { .hero-project, .hero-project-link > span { transition: none; } }

/* Personal signature, with the original portrait and three symbols. */
.hero-shop-intro { display: flex; justify-content: center; margin: 0 0 32px; padding: 0 20px; }
.hero.hero-shop .hero-identity { display: block; width: auto; max-width: none; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.hero-shop .hero-identity-copy[hidden] { display: none; }
.hero-shop .hero-portrait-cluster, .hero-shop .hero-portrait-cluster > img { width: 168px; height: 168px; }
.hero-shop .hero-signal { width: 46px; height: 46px; }
.hero-shop .hero-signal svg { width: 28px; height: 28px; }
.hero-shop .hero-signal-music { left: -15px; top: 14px; }
.hero-shop .hero-signal-code { right: -16px; top: 22px; font-size: 14px; }
.hero-shop .hero-signal-idea { right: -10px; bottom: 3px; }
@media (max-width: 760px) {
  .hero-shop-intro { margin-bottom: 27px; }
  .hero-shop .hero-portrait-cluster, .hero-shop .hero-portrait-cluster > img { width: 140px; height: 140px; }
  .hero-shop .hero-signal { width: 38px; height: 38px; }
  .hero-shop .hero-signal svg { width: 24px; height: 24px; }
  .hero-shop .hero-signal-code { font-size: 12px; }
}

/* Compact desktop hero: portrait to the left, three project cards to the right. */
@media (min-width: 981px) {
  .hero-shop .hero-copy-block { display: grid; grid-template-columns: 248px minmax(0,1fr); gap: 32px; align-items: center; padding-block: 36px; }
  .hero-shop-intro { margin: 0; padding: 0; }
  .hero-shop .hero-portrait-cluster, .hero-shop .hero-portrait-cluster > img { width: 224px; height: 224px; }
  .hero-projects { gap: 14px; }
  .hero-project-copy { padding: 22px; }
  .hero-project-category { font-size: 9px; margin-bottom: 14px; }
  .hero-project h2 { font-size: clamp(23px,2.2vw,30px); }
  .hero-project-description { font-size: 12px; margin: 14px 0 20px; }
}
@media (min-width: 981px) and (max-width: 1150px) {
  .hero-shop .hero-copy-block { grid-template-columns: 234px minmax(0,1fr); gap: 25px; }
  .hero-shop .hero-portrait-cluster, .hero-shop .hero-portrait-cluster > img { width: 210px; height: 210px; }
  .hero-shop .hero-signal { width: 46px; height: 46px; }
  .hero-shop .hero-signal svg { width: 28px; height: 28px; }
  .hero-shop .hero-signal-code { font-size: 12px; }
  .hero-project-copy { padding: 18px; }
}

/* These cards introduce the projects; exploration continues down the page. */
.hero-project { transition: none; }
.hero-project:hover { box-shadow: none; }
.hero-project-agents:hover { background: #fff; border-color: #0a0a0a; }
.hero-project-music:hover { border-color: #55545c; }
.hero-project-sampler:hover { border-color: #80a5dc; }
.hero-project-description { margin-bottom: 0; }
@media (min-width: 981px) { .hero-project-description { margin-bottom: 0; } }
@media (max-width: 760px) { .hero-project-description { margin-bottom: 0; } }

@media (min-width: 1151px) {
  .hero-shop .hero-signal { width: 52px; height: 52px; }
  .hero-shop .hero-signal svg { width: 32px; height: 32px; }
  .hero-shop .hero-signal-code { font-size: 18px; top: 32px; right: -18px; }
  .hero-shop .hero-signal-music { top: 22px; left: -18px; }
  .hero-shop .hero-signal-idea { bottom: 5px; right: -12px; }
}