.fan-creation-shell {
  padding-bottom: calc(3.5rem + var(--safe-bottom));
}

.fan-creation-hero {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.fan-creation-hero .archive-copy {
  max-width: 58rem;
}

.fan-creation-guide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 0.5rem 0 2rem;
}

.fan-creation-guide.reveal,
.fan-creation-resources.reveal {
  opacity: 1;
  transform: none;
}

.fan-creation-guide-item {
  display: grid;
  gap: 0.6rem;
  min-height: 10.5rem;
  padding: clamp(1.1rem, 2.2vw, 1.45rem);
  border-radius: 26px;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.fan-creation-guide-item:hover,
.fan-creation-guide-item:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(244, 241, 235, 0.16);
  background: rgba(255, 255, 255, 0.055);
}

.fan-creation-guide-item span {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.fan-creation-guide-item strong {
  font-family: var(--site-display-font, "Sora", "Noto Sans SC", "Noto Sans JP", sans-serif);
  font-size: clamp(1.35rem, 2.5vw, 2rem);
}

.fan-creation-guide-item p,
.fan-resource-summary,
.fan-resource-note {
  margin: 0;
  line-height: 1.68;
}

.fan-resource-summary,
.fan-resource-note {
  color: var(--muted);
}

.fan-creation-resources {
  padding-top: 0.75rem;
}

.fan-creation-resources .resource-center-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.fan-resource-card {
  align-content: start;
  padding: clamp(1.1rem, 2vw, 1.35rem);
}

.fan-resource-summary {
  font-size: 0.94rem;
}

.fan-resource-note {
  padding-top: 0.2rem;
  font-size: 0.86rem;
  white-space: pre-line;
}

.resource-pill em {
  color: rgba(244, 241, 235, 0.42);
  font-size: 0.72rem;
  font-style: normal;
}

@media (max-width: 1080px) {
  .fan-creation-hero,
  .fan-creation-resources .resource-center-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .fan-creation-guide {
    grid-template-columns: 1fr;
  }

  .fan-creation-guide-item {
    min-height: 0;
    border-radius: 1.5rem;
  }
}

@media (max-width: 560px) {
  .fan-resource-card {
    border-radius: 1.35rem;
  }
}