/* === Projects Page Header === */
.projects-header{padding-top:120px;padding-bottom:32px;border-bottom:1px solid #e0e0e0}
.projects-header h1{font-size:28px;font-weight:700;letter-spacing:-0.8px;color:#0a0a0a;margin-bottom:12px;line-height:1.2}
.projects-intro{font-size:14px;color:#555;line-height:1.7;max-width:600px}
.projects-meta{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#888;display:flex;gap:16px;flex-wrap:wrap;margin-top:16px}
.projects-meta a{color:#0a0a0a;text-decoration:none;border-bottom:1px solid #ddd;padding-bottom:1px;transition:all 0.2s}
.projects-meta a:hover{border-color:#0a0a0a}

/* === Project Card === */
.project{border:2px solid #0a0a0a;padding:28px;margin-bottom:24px}
.project.school{border:1.5px solid #888}

.project-title{font-size:20px;font-weight:700;color:#0a0a0a;line-height:1.3;letter-spacing:-0.3px;margin-bottom:4px}

.project-org{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#888;margin-bottom:12px;letter-spacing:0.3px}
.project-org .role{color:#0a0a0a;font-weight:600}

/* === Summary & Details (Progressive Disclosure) === */
.project-summary{position:relative}
.project-summary .impact-row{margin-top:12px;padding-top:0;border-top:none}
.project-tagline{font-size:13px;color:#555;line-height:1.5;margin-bottom:8px}

.project-toggle{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#888;background:none;border:none;padding:0;margin-top:14px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:color 0.2s}
.project-toggle::after{content:"+";font-size:14px;font-weight:600;color:#0a0a0a}
.project-toggle:hover{color:#0a0a0a}
.project.expanded .project-toggle::after{content:"−"}

.project-details{display:none;margin-top:20px;padding-top:20px;border-top:1px solid #e0e0e0}
.project.expanded .project-details{display:block}

/* === Project Fields === */
.project-field{margin-bottom:14px}
.project-field-label{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#888;margin-bottom:5px}
.project-field-body{font-size:14px;line-height:1.65;color:#444}
.project-field-body strong{color:#0a0a0a;font-weight:600}

/* === Scope List === */
.scope-list{list-style:none;padding:0;margin-top:2px}
.scope-list li{font-size:14px;line-height:1.6;color:#444;padding-left:18px;position:relative;margin-bottom:7px}
.scope-list li::before{content:"→";position:absolute;left:0;color:#0a0a0a;font-family:'IBM Plex Mono',monospace;font-weight:600}
.scope-list li:last-child{margin-bottom:0}

/* === Impact Chips === */
.impact-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;padding-top:18px;border-top:1px solid #e0e0e0}
.impact-chip{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;color:#0a0a0a;background:#f0f0f0;padding:6px 12px;white-space:nowrap}
.impact-chip-label{display:block;font-size:9px;font-weight:400;color:#888;letter-spacing:0.8px;text-transform:uppercase;margin-top:2px}

/* === Confidential Note === */
.confidential-note{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#aaa;margin-top:18px;padding-top:14px;border-top:1px dashed #ddd;font-style:italic}

/* === Architecture Diagram === */
.project-arch{margin-top:20px;padding-top:20px;border-top:1px solid #e0e0e0}
.project-arch-label{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#888;margin-bottom:14px}
.project-arch svg{width:100%;height:auto;display:block}
.project-arch text{font-family:'IBM Plex Mono',monospace}

/* === Projects Footer === */
.projects-footer{margin-top:40px;padding-top:24px;border-top:1px solid #e0e0e0;font-size:13px;color:#555}
.projects-footer .name{font-weight:700;color:#0a0a0a;font-size:14px;margin-bottom:4px}
.projects-footer a{color:#555;text-decoration:none;border-bottom:1px solid #ddd;padding-bottom:1px;transition:all 0.2s}
.projects-footer a:hover{color:#0a0a0a;border-color:#0a0a0a}

/* === Mobile === */
@media(max-width:600px){
  .projects-header h1{font-size:24px}
  .project{padding:22px 18px}
  .project-title{font-size:18px}
  .impact-row{gap:8px}
}