/* By JTT — shared project detail system.
   One editorial layout and token set for every project; content remains data-driven. */
.project-article { max-width: 1040px; margin-inline: auto; }
.project-head { max-width: 760px; margin-bottom: 28px; }
.project-head h1 { font-size: clamp(2.25rem, 6vw, 3.75rem); line-height: 1.04; letter-spacing: -0.045em; }
.project-head-desc { max-width: 58ch; font-size: 16px; line-height: 1.65; }
.project-status { display: inline-flex; align-items: center; gap: 6px; color: var(--signal-text); }
.project-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
.project-hero { max-width: none; margin: 0 0 24px; border-radius: var(--radius-md); border-color: var(--line); box-shadow: none; }
.project-hero img { width: 100%; height: auto; }
.project-lead { max-width: 72ch; margin: 0 0 24px; }
.project-mission { font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.55; letter-spacing: -0.015em; }
.project-section-nav { margin: 0 0 28px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.project-section-nav-list { gap: 10px 22px; }
.project-section-nav a { min-height: 32px; }
.project-body { grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 900px) {
  .project-body { grid-template-columns: minmax(0, 1fr) 230px; gap: 56px; }
  .project-side { position: sticky; top: calc(var(--masthead-height) + 20px); max-height: calc(100vh - var(--masthead-height) - 40px); overflow-y: auto; scrollbar-width: thin; }
}
.project-section { margin-bottom: 36px; }
.project-section h2 { display: flex; width: 100%; font-size: 18px; font-weight: 600; padding-bottom: 10px; border-bottom-color: var(--line); }
.project-section h2 svg { width: 16px; height: 16px; }
.project-side { gap: 24px; }
.side-card, .side-card:hover { padding: 16px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.side-card-title { font-size: 11px; font-weight: 600; color: var(--ink); border: 0; padding: 0; margin-bottom: 8px; }
.side-row-compact { padding: 7px 0; }
.side-links-grid { gap: 4px; }
.side-cta, .side-cta--primary { justify-content: flex-start; padding: 8px 0; border: 0; border-radius: 0; background: transparent; color: var(--muted); font-size: 11px; }
.side-cta--primary { color: var(--signal-text); }
.side-cta:hover, .side-cta--primary:hover { border: 0; background: transparent; color: var(--ink); }
.tech-stack { gap: 6px 8px; }
.tech-stack .tech-chip { padding: 4px 7px; border-radius: 3px; background: var(--chip); border: 1px solid var(--line); }
.tech-sep { display: none; }
.project-archive-note { border-radius: var(--radius-sm); }
@media (max-width: 640px) {
  .project-head { margin-bottom: 22px; }
  .project-hero { margin-bottom: 20px; }
  .project-section-nav-list { gap: 6px 16px; }
  .project-body { gap: 28px; }
  .project-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .side-card--links { grid-column: 1 / -1; }
}