/* Compact portfolio index. Full case studies remain on their own pages. */
.portfolio { --portfolio-gap: clamp(76px, 10vw, 144px); }
.portfolio-intro { padding-top: clamp(140px, 18vw, 240px); padding-bottom: 88px; }
.portfolio-intro h1 { font: 400 clamp(3.3rem, 8vw, 7.5rem)/1.1 var(--f-disp); margin: 22px 0 28px; letter-spacing: -.04em; }
.portfolio h1 em, .portfolio h2 em { color: var(--gold); font-weight: 400; }
.portfolio h1 em { margin-left: .12em; }
.brand-logo:has(img[src*="proex.png"]) { background: #252525; }
.intro-line { max-width: 44ch; color: var(--dim); font-size: clamp(1rem, 1.7vw, 1.2rem); line-height: 1.75; margin-bottom: 30px; }
.text-link { display: inline-block; color: var(--gold); text-decoration: underline; text-underline-offset: 5px; font-size: .9rem; }
.brand-strip { padding-bottom: 18px; }
.brand-strip .section-kicker { margin-bottom: 22px; }
.brand-scroll { display: flex; gap: 22px; overflow-x: auto; padding: 4px 0 20px; scrollbar-width: thin; scrollbar-color: var(--gold) transparent; }
.brand-logo { width: 146px; height: 76px; flex: 0 0 146px; padding: 14px 18px; display: flex; align-items: center; justify-content: center; background: #f5f3ee; border-radius: 3px; }
.brand-logo img { width: 100%; height: 100%; object-fit: contain; }
.brand-dark { background: #252525; }
.brand-wordmark { flex: 0 0 130px; display: grid; place-content: center; font-family: var(--f-disp); font-size: 1.2rem; }
.work-collection, .recommendations, .portfolio .credentials { padding-top: var(--portfolio-gap); padding-bottom: 0; border: 0; }
.collection-heading { margin-bottom: 38px; }
.collection-heading h2 { font: 400 clamp(2rem, 4vw, 3.3rem)/1.15 var(--f-disp); margin: 20px 0 16px; }
.collection-heading p { color: var(--dim); }
.project { border-bottom: 1px solid var(--hair); scroll-margin-top: 100px; }
.project:first-of-type { border-top: 1px solid var(--hair); }
.project summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 30px 0; cursor: pointer; }
.project summary::-webkit-details-marker { display: none; }
.project summary:hover h3, .project summary:focus-visible h3 { color: var(--gold); }
.project summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
.project h3 { font: 400 clamp(1.2rem, 2vw, 1.6rem)/1.3 var(--f-disp); }
.project-subtitle { display: block; color: var(--dim); font-size: .85rem; margin-top: 8px; line-height: 1.65; }
.project-toggle { color: var(--gold); font-size: 1.7rem; flex: none; transition: transform .2s; }
.project[open] > summary .project-toggle { transform: rotate(45deg); }
.project-body { padding: 0 0 38px; display: grid; gap: 24px; }
.project-body > p { max-width: 66ch; color: var(--dim); line-height: 1.75; }
.project-preview { display: block; max-width: 850px; }
.project-preview img { width: 100%; max-height: 520px; object-fit: contain; object-position: left top; }
.evidence-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.evidence-grid img { width: 100%; height: auto; }
.workshop-videos { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px; }
.workshop-videos figure { margin: 0; min-width: 0; }
.workshop-videos video { display: block; width: 100%; max-height: 480px; background: #080808; object-fit: contain; }
.workshop-videos figcaption { margin-top: 12px; color: var(--dim); font-size: .8rem; }
.recommendations > .section-kicker { margin-bottom: 26px; }
.recommendations blockquote { font: 400 1.05rem/1.8 var(--f-disp); max-width: 72ch; color: var(--dim); }
.evidence-note { color: var(--faint); font-size: .8rem; }
.recommendation-video { width: 100%; max-width: 850px; }
.certificate-gallery { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 30px; }
.certificate-gallery a { display: grid; grid-template-rows: 180px auto; gap: 18px; align-items: center; }
.certificate-gallery img { width: 100%; height: 180px; object-fit: contain; }
.certificate-gallery span { font-size: .8rem; color: var(--dim); line-height: 1.6; }
.credential-extra { font-size: .85rem; }
.portfolio .stack-logos { max-width: 900px; }
.portfolio .stack-logos li { color: var(--dim); font-size: .8rem; }
.portfolio-contact { padding-top: var(--portfolio-gap); padding-bottom: 90px; }
.portfolio-contact h2 { font: 400 clamp(2.8rem,5vw,4.5rem)/1.2 var(--f-disp); margin: 24px 0 32px; }
.portfolio-contact > div { display: flex; flex-wrap: wrap; gap: 28px; color: var(--gold); }
@media(max-width:700px) {
  .portfolio-intro { padding-top: 130px; padding-bottom: 66px; }
  .portfolio-intro h1 { max-width: 8ch; }
  .portfolio h1 em { margin-left: 0; }
  .project summary { padding: 25px 0; }
  .certificate-gallery { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .certificate-gallery a { grid-template-rows: 130px auto; }
  .certificate-gallery img { height: 130px; }
  .evidence-grid, .workshop-videos { grid-template-columns: 1fr; }
  .nav-cmd { display: none; }
  .nav-links { gap: 14px; }
  .nav-links a { letter-spacing: .08em; }
}