/* Real project portfolio. Images are local captures; no third-party embeds. */
.portfolio-section { position: relative; background: #0b0b0b; color: #f1f0ea; padding: 110px 40px 70px; scroll-margin-top: 32px; }
.portfolio-inner { max-width: 1420px; margin: 0 auto; }
.portfolio-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 64px; padding-bottom: 56px; }
.portfolio-eyebrow { margin: 0 0 24px; font: 500 12px/1.5 Inter, sans-serif; text-transform: uppercase; letter-spacing: .12em; }
.portfolio-eyebrow span { color: #a2a29b; margin-left: 20px; }
.portfolio-heading h2 { margin: 0; font: 500 clamp(48px, 5.5vw, 84px)/1.02 Inter, sans-serif; letter-spacing: -.065em; }
.portfolio-heading h2 span { color: #93938d; }
.portfolio-intro { max-width: 335px; margin: 0 0 4px; color: #b9b9b2; font: 400 16px/1.65 Inter, sans-serif; }
.portfolio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; row-gap: 70px; }
.portfolio-card { min-width: 0; }
.portfolio-link { display: block; color: inherit; text-decoration: none; }
.portfolio-preview { padding: clamp(16px, 2.2vw, 32px); border: 1px solid #ffffff0e; background: var(--project-color, #252525); border-radius: 10px; overflow: hidden; transition: border-color .25s ease; }
.portfolio-browser { display: flex; justify-content: space-between; align-items: center; height: 28px; padding: 0 12px; border-radius: 5px 5px 0 0; background: #f1f0ed; color: #525450; font: 400 9px/1 Inter, sans-serif; letter-spacing: .025em; }
.portfolio-dots { display: flex; gap: 4px; width: 32px; }
.portfolio-dots i { display: block; width: 5px; height: 5px; background: #c4c4bf; border-radius: 50%; }
.portfolio-browser-mark { width: 32px; text-align: right; font-size: 13px; }
.portfolio-preview img { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 1000; object-fit: contain; border-radius: 0 0 4px 4px; box-shadow: 0 15px 35px #0003; }
.portfolio-meta { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 23px 0 13px; color: #acaca5; font: 500 11px/1.5 Inter, sans-serif; letter-spacing: .035em; text-transform: uppercase; }
.portfolio-visit { color: #e8e8e0; white-space: nowrap; }
.portfolio-visit span { display: inline-block; margin-left: 6px; font-size: 17px; transition: transform .25s ease; }
.portfolio-card h3 { margin: 0 0 12px; color: #f1f0ea; font: 500 clamp(24px, 2.5vw, 36px)/1.15 Inter, sans-serif; letter-spacing: -.045em; }
.portfolio-card p { max-width: 480px; margin: 0; color: #b0b0a9; font: 400 15px/1.6 Inter, sans-serif; }
.portfolio-link:focus-visible { outline: 2px solid #d7fa86; outline-offset: 8px; border-radius: 8px; }
@media (hover: hover) { .portfolio-link:hover .portfolio-preview { border-color: #ffffff65; } .portfolio-link:hover .portfolio-visit span { transform: translate(3px, -3px); } .portfolio-link:hover h3 { color: #fff; } }
.portfolio-outro { margin-top: 80px; padding: 30px 0 0; border-top: 1px solid #343431; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.portfolio-outro p { margin: 0; font: 400 20px/1.4 Inter, sans-serif; letter-spacing: -.025em; color: #d1d1ca; }
.portfolio-outro a { color: #f1f0ea; font: 500 16px/1.5 Inter, sans-serif; text-decoration: none; border-bottom: 1px solid #93938d; padding-bottom: 6px; white-space: nowrap; }
.portfolio-outro a span { margin-left: 25px; }
@media (max-width: 991px) { .portfolio-section { padding: 80px 28px 50px; } .portfolio-heading { gap: 32px; } .portfolio-intro { max-width: 270px; font-size: 14px; } .portfolio-grid { column-gap: 24px; row-gap: 48px; } .portfolio-meta { font-size: 10px; } .portfolio-card p { font-size: 14px; } }
@media (max-width: 767px) { .portfolio-section { padding: 64px 20px 40px; } .portfolio-heading { display: block; padding-bottom: 32px; } .portfolio-heading h2 { font-size: clamp(43px, 10vw, 65px); } .portfolio-intro { max-width: 360px; margin-top: 24px; font-size: 15px; } .portfolio-grid { grid-template-columns: minmax(0, 1fr); row-gap: 44px; } .portfolio-preview { padding: 18px; } .portfolio-meta { font-size: 10px; margin-top: 18px; } .portfolio-card h3 { font-size: 29px; } .portfolio-card p { font-size: 14px; } .portfolio-outro { align-items: flex-start; flex-direction: column; margin-top: 52px; } .portfolio-outro p { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) { .portfolio-preview, .portfolio-visit span { transition: none; } }