/* Type landing pages */
.type-page { padding-bottom: 3rem; }
.type-hero {
  text-align: center;
  padding: clamp(2rem, 5vw, 3.5rem) 0 1.5rem;
}
.type-badge {
  display: inline-flex; padding: .3rem .8rem; margin-bottom: 1rem;
  background: var(--orange); color: #fff; border: 2px solid var(--line);
  border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
}
.type-hero h1 { margin-bottom: .75rem; line-height: 1.05; }
.type-hero .code {
  display: block; font-size: clamp(3rem, 10vw, 5rem); color: var(--orange);
  letter-spacing: -.04em;
}
.type-hero .name { font-size: clamp(1.2rem, 3vw, 1.6rem); color: var(--ink); }
.type-hero .lead {
  color: var(--muted); max-width: 34rem; margin: 0 auto 1.25rem; font-size: 1.05rem;
}
.type-art {
  width: min(320px, 75%); margin: 0 auto 1.4rem;
  border: 2.5px solid var(--line); border-radius: 1.4rem; overflow: hidden;
  background: var(--yellow); box-shadow: 6px 6px 0 var(--line); aspect-ratio: 1;
}
.type-art img { width: 100%; height: 100%; object-fit: cover; }
.type-actions { display: flex; flex-wrap: wrap; gap: .65rem; justify-content: center; }
.type-body { max-width: 720px; }
.type-body h2 { margin: 1.6rem 0 .6rem; font-size: 1.35rem; }
.type-body p { color: var(--muted); margin-bottom: .8rem; line-height: 1.7; }
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.chip {
  padding: .4rem .75rem; border: 2px solid var(--line); border-radius: 999px;
  background: var(--card); font-weight: 700; font-size: .85rem;
}
.chip:hover { background: #fff1e6; }
.type-grid {
  display: grid; gap: .85rem;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.type-card {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  padding: .9rem .6rem; background: var(--card); border: 2px solid var(--line);
  border-radius: 1rem; text-align: center; transition: transform .15s, box-shadow .15s;
}
.type-card:hover { transform: translate(-2px,-2px); box-shadow: 3px 3px 0 var(--line); }
.type-card img {
  width: 88px; height: 88px; object-fit: cover; border-radius: .8rem;
  border: 2px solid var(--line); background: var(--bg-deep);
}
.type-card span { color: var(--muted); font-size: .8rem; }

.result-challenge {
  margin-top: 1rem; padding: 1rem; border: 2px dashed var(--line);
  border-radius: 1rem; background: #fff8ee; text-align: center;
}
.result-challenge p { color: var(--muted); font-size: .92rem; margin-bottom: .75rem; }