.project-page { background: radial-gradient(ellipse at top right, rgba(247,156,53,.07), transparent 55%); }
.project-page__inner { width: min(1120px, calc(100% - 64px)); margin: 0 auto; padding: 48px 0 64px; }
.project-page__breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: 13px; }
.project-page__breadcrumb a { color: var(--orange); }
.project-page__header { padding: 48px 0 36px; }
.project-page h1 { max-width: 960px; margin: 14px 0; font-size: clamp(36px, 5vw, 72px); line-height: 1.04; text-transform: uppercase; overflow-wrap: anywhere; }
.project-page__summary { color: #c0c9d6; font-family: Inter,system-ui,sans-serif; font-size: 18px; line-height: 1.6; }
.project-page__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.project-page .modal__hero { height: auto; background: #08101a; }
.project-page .modal__hero img { max-height: 70vh; height: auto; object-fit: contain; }
.project-page .modal__grid { align-items: start; }
.project-page__adjacent { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin: 48px 0 28px; padding-top: 28px; border-top: 1px solid var(--line); }
.project-page__adjacent a { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.project-page__adjacent span { color: var(--muted); font-size: 13px; }
.project-page__adjacent strong { font-size: 20px; line-height: 1.3; }
.project-page a:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.project-page__adjacent a:hover { border-color: var(--orange); }
@media (max-width: 600px) {
  .project-page__inner { width: calc(100% - 36px); padding-top: 24px; }
  .project-page__header { padding: 32px 0 24px; }
  .project-page__adjacent { gap: 12px; }
  .project-page__adjacent a { padding: 12px; }
  .project-page__adjacent strong { font-size: 16px; }
}