/* Desktop project browser: archive on the left, selected case study on the right. */
.project-browser{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);gap:24px;align-items:start}.project-browser .project-detail{margin-top:0;grid-template-columns:1fr;min-height:100%;position:sticky;top:92px}.project-browser .archive{min-width:0}
.project-browser>*{min-width:0}.project-browser .project-row{width:100%;min-width:0;overflow:hidden}.project-browser .project-row>div{min-width:0}.project-browser .project-row h3,.project-browser .project-row p{overflow-wrap:anywhere;word-break:break-word}.project-browser .project-side{min-width:0}.project-browser .project-side .project-stack{justify-content:flex-end;max-width:100%}.project-browser .project-side .tag{max-width:100%;overflow-wrap:anywhere;white-space:normal}.project-browser .project-detail{width:100%;box-shadow:0 10px 24px #00000014;max-height:calc(100vh - 120px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--accent) var(--surface-2)}.project-browser .project-detail::-webkit-scrollbar{width:7px}.project-browser .project-detail::-webkit-scrollbar-track{background:var(--surface-2)}.project-browser .project-detail::-webkit-scrollbar-thumb{background:var(--accent);border-radius:5px}.project-browser .detail-lead,.project-browser .detail-lead+div{min-width:0}.project-browser .detail-lead h3{font-size:clamp(27px,3.4vw,42px);line-height:1.05;overflow-wrap:anywhere;word-break:break-word}.project-browser .detail-copy{overflow-wrap:anywhere;word-break:break-word}.project-browser .architecture{grid-template-columns:repeat(auto-fit,minmax(105px,1fr));min-width:0}.project-browser .arch-node{width:100%;min-width:0;overflow-wrap:anywhere;white-space:normal}.project-browser .arch-arrow{display:none}.project-browser .workflow{row-gap:10px}.project-browser .workflow-step{min-width:0}.project-browser .workflow-step button{max-width:100%;overflow-wrap:anywhere;white-space:normal}.project-browser .tech-list{min-width:0}.project-browser .tech-list .tag{max-width:100%;overflow-wrap:anywhere;white-space:normal}
@media(max-width:800px){.project-browser{display:block}.project-browser .project-detail{position:static;margin-top:28px}}
@media(max-width:560px){.project-browser .project-row{grid-template-columns:30px minmax(0,1fr)}.project-browser .project-side{grid-column:2;text-align:left;margin-top:10px}.project-browser .project-side .project-stack{justify-content:flex-start}.project-browser .project-detail{max-height:none;padding:20px}.project-browser .architecture{grid-template-columns:1fr}.project-browser .workflow-step:not(:last-child):after{display:none}}

/* Keep the workflow inside the selected project instead of below the archive. */
.project-browser + .detail-block{display:none}
.project-browser{margin-bottom:0}
.project-browser .project-detail .detail-block{margin-top:18px;padding-top:12px}
.project-browser .project-detail .detail-block:first-child{margin-top:0}
.project-browser .project-workflow{padding-bottom:4px}
.project-browser .project-workflow .workflow{margin-top:14px}

/* Final project workspace pass: explicit proportions and a contained inspector. */
#projects .project-browser{display:grid!important;grid-template-columns:minmax(280px,34%) minmax(0,66%)!important;gap:18px!important;align-items:start!important;margin:0!important}
#projects .project-browser .archive{height:min(720px,calc(100vh - 150px));overflow-y:auto;border:1px solid var(--line);background:var(--surface);padding:0 16px;scrollbar-width:thin;scrollbar-color:var(--accent) var(--surface-2)}
#projects .project-browser .archive::-webkit-scrollbar{width:6px}#projects .project-browser .archive::-webkit-scrollbar-thumb{background:var(--accent)}
#projects .project-browser .project-row{display:block!important;padding:18px 4px!important;border-bottom:1px solid var(--line);background:transparent!important}
#projects .project-browser .project-row:hover,#projects .project-browser .project-row.selected{padding:18px 12px!important;background:var(--surface-2)!important;border-left:3px solid var(--accent)}
#projects .project-browser .project-number{display:block;margin-bottom:8px}#projects .project-browser .project-row h3{font-size:17px;margin-bottom:6px}#projects .project-browser .project-row p{font-size:12px}
#projects .project-browser .project-side{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:13px;text-align:left}#projects .project-browser .project-side .project-stack{margin:0;justify-content:flex-start}
#projects .project-browser .project-detail{height:min(720px,calc(100vh - 150px));max-height:none!important;overflow-y:auto!important;position:sticky;top:88px;margin:0!important;padding:30px!important;border:1px solid var(--accent)!important;background:var(--surface)!important;box-shadow:8px 8px 0 color-mix(in srgb,var(--accent) 22%,transparent)!important;scrollbar-width:thin;scrollbar-color:var(--accent) var(--surface-2)}
#projects .project-browser .project-detail:before{content:'SELECTED PROJECT / INSPECTOR';display:block;color:var(--accent);font:10px var(--mono);letter-spacing:.12em;border-bottom:1px solid var(--line);padding-bottom:13px;margin-bottom:22px}
#projects .project-browser + .detail-block{display:none!important}
@media(max-width:800px){#projects .project-browser{display:block!important}#projects .project-browser .archive,#projects .project-browser .project-detail{height:auto;max-height:none;position:static}#projects .project-browser .project-detail{margin-top:18px!important}}

/* Skills section: keep the heading direct and compact. */
#skills .section-intro{display:none}
#skills .section-header{margin-bottom:24px!important}
#skills .section-title{margin-top:3px}

/* Numbered section headings connect directly to their content. */
.section-header{margin-bottom:36px!important}
.section-header .section-intro{margin-bottom:0}
#projects .archive,#projects .project-browser{margin-top:0!important}

/* Project rows: compact rhythm without visible divider borders. */
#projects .project-browser .project-row{padding-top:20px!important;padding-bottom:20px!important;border-bottom:0!important;border-left:3px solid transparent}
#projects .project-browser .project-row:hover,#projects .project-browser .project-row.selected{padding-top:20px!important;padding-bottom:20px!important;border-left-color:var(--accent)!important}
#projects .project-browser .archive{border:0!important}