body.project-detail-page { background: #fff; }

.detail-shell { position: relative; width: 100%; min-height: 1800px; margin: 0; padding: 1px 0 360px; background: #fff; }
.detail-marquee { position: absolute; z-index: 1; top: 17px; left: 0; width: 100%; overflow: hidden; color: var(--ink); font-size: clamp(64px, 6.3vw, 100px); font-weight: 700; line-height: 1; letter-spacing: -0.045em; white-space: nowrap; pointer-events: none; }
.detail-marquee-track { display: flex; width: max-content; animation: detail-marquee-scroll 28s linear infinite; }
.detail-marquee-group { display: flex; flex: none; }
.detail-marquee-group span { display: block; flex: none; padding-right: 0.65em; }
@keyframes detail-marquee-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .detail-marquee-track { animation: none; } }
.detail-actions { display: flex; justify-content: flex-end; gap: 34px; margin: 148px 80px 0 0; font-size: 13px; font-weight: 700; }
.detail-actions button, .detail-actions a { border: 0; padding: 2px 4px; background: none; color: inherit; font: inherit; text-decoration: none; cursor: pointer; }
.detail-actions button:hover, .detail-actions a:hover, .detail-actions button:focus-visible, .detail-actions a:focus-visible { background: var(--ink); color: #fff; outline: none; }
.detail-summary { display: grid; grid-template-columns: 365px minmax(0, 390px); gap: 80px; width: 835px; margin: 80px auto 0; }
.detail-meta { display: grid; gap: 20px; margin: 0; font-size: 13px; line-height: 1.45; }
.detail-meta div { display: grid; grid-template-columns: 108px 1fr; }
.detail-meta dt, .detail-meta dd { margin: 0; }
.detail-meta .detail-tools { grid-column: 2; }
.detail-intro { padding-top: 39px; }
.detail-intro h1 { margin: 0 0 20px; font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -0.035em; }
.detail-intro p { margin: 0; font-size: 13px; line-height: 1.55; word-break: keep-all; }
.detail-image { display: block; width: 507px; height: 600px; margin: 230px auto 0; object-fit: cover; }
.detail-image--wide { width: min(700px, calc(100% - 48px)); object-fit: contain; }
.detail-image--personal { background-image: url('./assets/object-personal-reference.png'); background-repeat: no-repeat; background-size: 1300px auto; background-position: -400px -560px; }
.detail-contact { position: fixed; bottom: 0; left: 0; }

@media (max-width: 1000px) {
  .detail-shell { width: 100%; }
  .detail-summary { width: min(90%, 835px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 35px; }
  .detail-actions { margin-right: 35px; }
}

@media (max-width: 640px) {
  .detail-shell { width: 100%; min-height: 1200px; padding-bottom: 120px; }
  .detail-marquee { top: 26px; font-size: 54px; text-align: left; }
  .detail-actions { margin: 115px 24px 0 0; }
  .detail-summary { display: block; width: auto; margin: 90px 24px 0; }
  .detail-meta { gap: 15px; font-size: 12px; }
  .detail-meta div { grid-template-columns: 92px 1fr; }
  .detail-intro { padding-top: 65px; }
  .detail-intro h1 { font-size: 22px; }
  .detail-image { width: min(calc(100% - 48px), 507px); height: auto; aspect-ratio: 507 / 600; margin: 90px auto 110px; }
  .detail-image--wide { object-fit: contain; }
  .detail-image--personal { height: 600px; background-position: -400px -560px; }
  .detail-contact { position: static; }
}