@charset "UTF-8";
.arrival-card__thumb {
 width: 54px;
 height: 54px;
 overflow: hidden;
 border: 1px solid var(--color-line-strong);
 border-radius: 8px;
 background: var(--color-panel);
}

.arrival-card__thumb img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
}
/* ==================================================
Home Hero
================================================== */
.home-main {
 background: var(--color-bg);
}

.home-hero {
 display: grid;
 grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
 min-height: calc(100vh - var(--header-height));
 border-bottom: 1px solid var(--color-line);
}

.home-hero__body {
 display: flex;
 flex-direction: column;
 justify-content: center;
 padding: clamp(62px, 8vw, 108px) clamp(24px, 5vw, 70px);
 background:
  radial-gradient(
   circle at 18% 22%,
   rgba(224, 163, 112, 0.08),
   transparent 46%
  ),
  var(--color-bg);
}

.home-hero__eyebrow {
 margin-bottom: 18px;
 color: var(--color-dim);
 font-family: var(--font-en);
 font-size: 12px;
 letter-spacing: 0.16em;
 text-transform: uppercase;
}

.home-hero__title {
 margin-bottom: 22px;
 font-family: var(--font-serif);
 font-size: clamp(54px, 7vw, 86px);
 font-weight: 700;
 line-height: 1.02;
 letter-spacing: 0.01em;
}

.home-hero__title span {
 display: block;
 color: var(--color-accent);
}

.home-hero__lead {
 max-width: 520px;
 color: var(--color-muted);
 font-size: 15px;
 line-height: 2;
}

.home-hero__actions {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 margin-top: 32px;
}

.tag-list {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 margin-top: 26px;
}

.tag-list li {
 padding: 6px 13px;
 border: 1px solid var(--color-line-strong);
 border-radius: 999px;
 color: var(--color-muted);
 font-family: var(--font-en);
 font-size: 11px;
 letter-spacing: 0.04em;
}

.tag-list li:first-child {
 border-color: rgba(224, 163, 112, 0.5);
 color: var(--color-accent);
}

.home-hero__visual {
 position: relative;
 min-height: 520px;
 overflow: hidden;
 background: var(--color-bg-deep);
}

.home-hero__caption {
 position: absolute;
 top: 20px;
 right: 22px;
 padding: 6px 12px;
 border: 1px solid var(--color-line-strong);
 background: rgba(0, 0, 0, 0.36);
 color: rgba(255, 255, 255, 0.72);
 font-family: var(--font-en);
 font-size: 10px;
 letter-spacing: 0.14em;
 text-transform: uppercase;
}

/* ==================================================
Archive Summary
================================================== */
.archive-summary {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 border-bottom: 1px solid var(--color-line);
}

.archive-summary__item {
 padding: 28px clamp(24px, 4vw, 56px);
 border-right: 1px solid var(--color-line);
}

.archive-summary__item:last-child {
 border-right: 0;
}

.archive-summary__num {
 display: block;
 margin-bottom: 8px;
 color: var(--color-accent);
 font-family: var(--font-en);
 font-size: 32px;
 font-weight: 600;
 line-height: 1;
}

.archive-summary__label {
 display: block;
 margin-bottom: 8px;
 color: var(--color-text);
 font-family: var(--font-en);
 font-size: 11px;
 letter-spacing: 0.14em;
 text-transform: uppercase;
}

.archive-summary__item p {
 color: var(--color-muted);
 font-size: 13px;
 line-height: 1.8;
}

/* ==================================================
Section Common
================================================== */
.home-section {
 padding: clamp(66px, 8vw, 112px) 0;
}

.home-section > * {
 width: min(calc(100% - 40px), 1180px);
 margin-inline: auto;
}

.home-section__head {
 margin-bottom: 34px;
}

.home-section__head--center {
 text-align: center;
}

.home-section__head--center .section-kicker,
.home-section__head--center .section-lead {
 margin-inline: auto;
}

.home-section--split {
 display: grid;
 grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
 gap: clamp(34px, 5vw, 70px);
 align-items: start;
 width: min(calc(100% - 40px), 1180px);
 margin-inline: auto;
}

.home-section--split > * {
 width: auto;
 margin: 0;
}

.home-section--dark {
 border-block: 1px solid var(--color-line);
 background:
  radial-gradient(
   circle at 80% 20%,
   rgba(224, 163, 112, 0.08),
   transparent 28%
  ),
  var(--color-bg-deep);
}

.home-section--links {
 background:
  radial-gradient(circle at 50% 0%, rgba(224, 163, 112, 0.1), transparent 35%),
  var(--color-bg);
}

/* ==================================================
New Arrivals
================================================== */
.arrival-list {
 border-top: 1px solid var(--color-line);
}

.arrival-card {
 display: grid;
 grid-template-columns: 54px minmax(0, 1fr) auto;
 align-items: center;
 gap: 16px;
 padding: 18px 0;
 border-bottom: 1px solid var(--color-line);
 transition:
  background 0.2s ease,
  padding-inline 0.2s ease;
}

.arrival-card:hover {
 padding-inline: 12px;
 background: rgba(255, 255, 255, 0.025);
}

.arrival-card__icon {
 width: 54px;
 height: 54px;
 display: grid;
 place-items: center;
 border: 1px solid var(--color-line-strong);
 border-radius: 8px;
 background: var(--color-panel);
 font-size: 22px;
}

.arrival-card__body {
 min-width: 0;
}

.arrival-card__body strong {
 display: block;
 margin-bottom: 4px;
 overflow: hidden;
 font-size: 14px;
 font-weight: 600;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.arrival-card__body small {
 color: var(--color-dim);
 font-family: var(--font-en);
 font-size: 11px;
 letter-spacing: 0.06em;
}

.arrival-card__arrow {
 color: var(--color-accent);
 font-family: var(--font-en);
}

/* ==================================================
Gallery
================================================== */
.filter-list {
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
 gap: 10px;
 margin-bottom: 30px;
}

.filter-button {
 min-width: 84px;
 padding: 8px 14px;
 border: 1px solid var(--color-line-strong);
 border-radius: 999px;
 color: var(--color-muted);
 font-family: var(--font-en);
 font-size: 11px;
 letter-spacing: 0.1em;
 transition:
  background 0.2s ease,
  color 0.2s ease,
  border-color 0.2s ease;
}

.filter-button.is-active,
.filter-button:hover {
 border-color: rgba(224, 163, 112, 0.66);
 background: var(--color-accent-soft);
 color: var(--color-accent);
}

.gallery-grid {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 18px;
}

.gallery-card {
 overflow: hidden;
 border: 1px solid var(--color-line);
 border-radius: 12px;
 background: rgba(255, 255, 255, 0.025);
}

.gallery-card.is-hidden {
 display: none;
}

.gallery-card__image {
 display: block;
}

.gallery-card__image .image-placeholder {
 min-height: 220px;
 border: 0;
 border-bottom: 1px solid var(--color-line);
}

.gallery-card__body {
 padding: 18px;
}

.gallery-card__body h3 {
 margin-bottom: 10px;
 font-size: 17px;
 line-height: 1.5;
}

.gallery-card__body p:not(.card-label) {
 margin-bottom: 16px;
 color: var(--color-muted);
 font-size: 13px;
 line-height: 1.85;
}

/* ==================================================
Screenshot Archive
================================================== */
.screenshot-grid {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 16px;
}

.screenshot-card {
 display: block;
 overflow: hidden;
 border: 1px solid var(--color-line);
 border-radius: 10px;
 background: rgba(255, 255, 255, 0.025);
 transition:
  transform 0.2s ease,
  border-color 0.2s ease;
}

.screenshot-card:hover {
 transform: translateY(-3px);
 border-color: rgba(224, 163, 112, 0.45);
}

.screenshot-card .image-placeholder {
 min-height: 170px;
 border: 0;
 border-bottom: 1px solid var(--color-line);
}

.screenshot-card span:last-child {
 display: block;
 padding: 14px 15px;
 color: var(--color-text);
 font-size: 13px;
}

/* ==================================================
Character Shelf
================================================== */
.shelf-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 18px;
}

.shelf-card {
 min-height: 230px;
 padding: 28px;
 border: 1px solid var(--color-line);
 border-radius: 14px;
 background:
  linear-gradient(
   145deg,
   rgba(255, 255, 255, 0.04),
   rgba(255, 255, 255, 0.015)
  ),
  var(--color-panel);
}

.shelf-card__icon {
 width: 58px;
 height: 58px;
 display: grid;
 place-items: center;
 margin-bottom: 22px;
 border: 1px solid var(--color-line-strong);
 border-radius: 50%;
 background: rgba(0, 0, 0, 0.14);
 font-size: 26px;
}

.shelf-card h3 {
 margin-bottom: 10px;
 font-family: var(--font-serif);
 font-size: 22px;
}

.shelf-card p {
 color: var(--color-muted);
 font-size: 13.5px;
 line-height: 1.9;
}

/* ==================================================
Links
================================================== */
.link-grid {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 16px;
}

.link-card {
 min-height: 160px;
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
 padding: 22px;
 border: 1px solid var(--color-line);
 border-radius: 12px;
 background:
  radial-gradient(
   circle at 80% 20%,
   rgba(224, 163, 112, 0.12),
   transparent 34%
  ),
  rgba(255, 255, 255, 0.025);
 transition:
  transform 0.2s ease,
  border-color 0.2s ease;
}

.link-card:hover {
 transform: translateY(-3px);
 border-color: rgba(224, 163, 112, 0.5);
}

.link-card span {
 width: 42px;
 height: 42px;
 display: grid;
 place-items: center;
 margin-bottom: 26px;
 border: 1px solid rgba(224, 163, 112, 0.5);
 border-radius: 50%;
 color: var(--color-accent);
 font-family: var(--font-en);
 font-weight: 700;
}

.link-card strong {
 display: block;
 margin-bottom: 4px;
 font-size: 15px;
}

.link-card small {
 color: var(--color-muted);
 font-size: 12px;
}

/* ==================================================
Responsive
================================================== */
@media screen and (max-width: 1024px) {
 .home-hero {
  grid-template-columns: 1fr;
  min-height: auto;
 }

 .home-hero__visual {
  min-height: 360px;
  border-top: 1px solid var(--color-line);
 }

 .archive-summary,
 .gallery-grid,
 .screenshot-grid,
 .link-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }

 .home-section--split,
 .shelf-grid {
  grid-template-columns: 1fr;
 }
}

@media screen and (max-width: 767px) {
 .home-hero__body {
  padding: 48px 24px 42px;
 }

 .home-hero__visual {
  min-height: 300px;
 }

 .archive-summary,
 .gallery-grid,
 .screenshot-grid,
 .shelf-grid,
 .link-grid {
  grid-template-columns: 1fr;
 }

 .archive-summary__item {
  border-right: 0;
  border-bottom: 1px solid var(--color-line);
 }

 .archive-summary__item:last-child {
  border-bottom: 0;
 }

 .home-section > *,
 .home-section--split {
  width: min(calc(100% - 40px), 1180px);
 }

 .arrival-card {
  grid-template-columns: 48px minmax(0, 1fr) auto;
 }

 .arrival-card__icon {
  width: 48px;
  height: 48px;
 }
}

/* ==================================================
ACF image fitting
================================================== */
.home-hero__visual > img {
 width: 100%;
 height: 100%;
 min-height: 100%;
 object-fit: cover;
}

.gallery-card__image > img {
 width: 100%;
 aspect-ratio: 4 / 3;
 object-fit: cover;
 border-bottom: 1px solid var(--color-line);
}

.screenshot-card > img {
 width: 100%;
 aspect-ratio: 4 / 3;
 object-fit: cover;
 border-bottom: 1px solid var(--color-line);
}