.portfolio-backbar { padding: 2rem 6vw; border-bottom: 1px solid #272727; background: #0a0a0a; }
.portfolio-backbar a { display: inline-flex; gap: .8rem; align-items: center; min-height: 4.4rem; }
.portfolio-backbar a:focus-visible { outline: 2px solid var(--neon-green); outline-offset: 4px; }
.portfolio-page { width: 100%; max-width: 100%; margin: 0 auto; padding: 4rem 6vw 6rem; color: var(--text-primary); font-size: 1.5rem; }
.portfolio-page a { text-decoration: none; }
.portfolio-page a:focus-visible, .portfolio-page button:focus-visible, .portfolio-page summary:focus-visible { outline: 3px solid var(--neon-green); outline-offset: 5px; }
.portfolio-eyebrow { display: block; color: var(--neon-green); font-size: 1.1rem; font-weight: 800; letter-spacing: .16em; margin-bottom: 1.6rem; }
.portfolio-hero { text-align: center; max-width: 85rem; margin: 0 auto 4rem; }
.portfolio-page h1 { font-size: clamp(3.4rem, 5vw, 6rem); font-weight: 900; letter-spacing: -.045em; line-height: 1.1; margin: 1.2rem 0 1.8rem; }
.portfolio-page h1 span { color: var(--neon-green); }
.portfolio-hero p, .portfolio-manage-heading p, .portfolio-project-heading p { color: var(--text-secondary); line-height: 1.7; font-size: 1.65rem; }
.portfolio-search { max-width: 70rem; margin: 0 auto 3rem; }
.portfolio-search label { display: block; margin-bottom: 1rem; color: var(--text-secondary); }
.portfolio-search > div { display: flex; gap: 1rem; }
.portfolio-search .btn { margin: 0; }
.portfolio-search input, .portfolio-form input, .portfolio-form textarea, .portfolio-form select, .portfolio-share input { width: 100%; min-width: 0; background: #161616; border: 1px solid #3c3c3c; border-radius: 1rem; padding: 1.4rem 1.6rem; color: #fff; font: inherit; }
.portfolio-page input:focus, .portfolio-page textarea:focus, .portfolio-page select:focus { outline: 2px solid var(--neon-green); outline-offset: 2px; }
.portfolio-page input::placeholder, .portfolio-page textarea::placeholder { color: #969696; }
.portfolio-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; padding-bottom: 3rem; border-bottom: 1px solid #272727; }
.portfolio-filters a { border: 1px solid #333; padding: 1rem 1.6rem; border-radius: 3rem; color: #ddd; font-size: 1.25rem; transition: background .2s; }
.portfolio-filters a:hover { border-color: var(--neon-green); }
.portfolio-filters .active { background: var(--neon-green); border-color: var(--neon-green); color: #050505; font-weight: 700; }
.portfolio-section-title { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin: 3.5rem 0 2rem; }
.portfolio-section-title h2 { font-size: 2.2rem; letter-spacing: -.03em; }
.portfolio-section-title > span { color: #aaa; font-size: 1.25rem; }
.portfolio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 2.2rem; }
.portfolio-card { min-width: 0; background: #101010; border: 1px solid #262626; border-radius: 1.6rem; overflow: hidden; }
.portfolio-cover { display: block; position: relative; overflow: hidden; aspect-ratio: 4/3; background: #202020; }
.portfolio-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.portfolio-cover:hover img { transform: scale(1.035); }
.portfolio-open { position: absolute; bottom: 1.2rem; right: 1.2rem; background: #050505e6; color: #fff; padding: .8rem 1.2rem; border-radius: 2rem; font-size: 1.1rem; }
.portfolio-open > span { color: var(--neon-green); margin-left: .5rem; }
.portfolio-card-copy { padding: 1.8rem; }
.portfolio-category { color: var(--neon-green); font-size: 1.1rem; font-weight: 700; }
.portfolio-card h2 { font-size: 1.8rem; margin: .8rem 0; overflow-wrap: anywhere; }
.portfolio-card h2 a { color: #fff; }
.portfolio-card h2 a:hover, .portfolio-author:hover { color: var(--neon-green); }
.portfolio-author { color: #bbb; font-size: 1.3rem; }
.portfolio-link { color: var(--neon-green); font-weight: 600; font-size: 1.4rem; }
.portfolio-link:hover { text-decoration: underline !important; }
.portfolio-empty { grid-column: 1/-1; padding: 7rem 2rem; text-align: center; border: 1px dashed #3b3b3b; border-radius: 1.6rem; }
.portfolio-empty > span { color: var(--neon-green); font-size: 3rem; }
.portfolio-empty h2 { margin: 1.4rem 0; font-size: 2.4rem; }
.portfolio-empty p, .portfolio-help { color: #b5b5b5; line-height: 1.7; }
.portfolio-pagination { display: flex; justify-content: center; align-items: center; gap: 2rem; margin-top: 4rem; color: #bbb; }
.portfolio-profile { display: flex; gap: 3rem; align-items: center; background: linear-gradient(120deg, #142315, #111 65%); border: 1px solid #2d3b2d; padding: 4rem; border-radius: 2rem; margin: 3rem 0; }
.portfolio-profile h1 { font-size: clamp(3rem, 4vw, 4.8rem); overflow-wrap: anywhere; }
.portfolio-monogram { width: 10rem; height: 10rem; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--neon-green); color: #050505; font-size: 4rem; font-weight: 900; }
.portfolio-headline { font-size: 1.8rem; margin-bottom: 1.5rem; color: var(--neon-green); }
.portfolio-prose { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.85; color: #ccc; }
.portfolio-manage-heading { display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-bottom: 3rem; }
.portfolio-settings { border: 1px solid #333; background: #101010; border-radius: 1.6rem; padding: 2.4rem; }
.portfolio-settings summary { cursor: pointer; font-size: 1.8rem; font-weight: 700; }
.portfolio-settings summary span { margin-left: 1rem; color: var(--neon-green); font-size: 1.2rem; }
.portfolio-form { display: grid; gap: 2rem; margin-top: 2.5rem; }
.portfolio-form label { display: grid; gap: .8rem; font-weight: 600; }
.portfolio-form small { color: #aaa; font-size: 1.2rem; font-weight: 400; line-height: 1.7; }
.portfolio-form textarea { resize: vertical; min-height: 12rem; }
.portfolio-form input[type=file] { font-size: 1.35rem; }
.portfolio-form input::file-selector-button { background: #333; color: #fff; border: none; padding: .8rem; margin-right: 1rem; border-radius: .5rem; cursor: pointer; }
.portfolio-share { margin-top: 2rem; display: flex; align-items: center; gap: 1.5rem; padding: 2rem; flex-wrap: wrap; background: #101810; border-radius: 1.2rem; }
.portfolio-share input { flex: 1; min-width: 22rem; }
.portfolio-status { color: #bbb; font-size: 1.2rem; margin: 1rem 0; }
.portfolio-actions { display: flex; align-items: center; gap: 2rem; }
.portfolio-actions .btn { margin-top: 0; }
.portfolio-delete { background: transparent; color: #ff9898; cursor: pointer; font: inherit; font-size: 1.3rem; }
.portfolio-project-heading { margin: 4rem 0 3rem; text-align: center; }
.portfolio-project-heading h1 { overflow-wrap: anywhere; }
.portfolio-project-heading .portfolio-link { display: inline-block; margin-top: 1.5rem; }
.portfolio-project-image { display: block; width: 100%; max-width: 100%; height: auto; margin-inline: auto; border-radius: 1.2rem; }
.portfolio-image-sizing { display: grid; gap: 1rem; margin-bottom: 2rem; }
.portfolio-size-controls { display: flex; align-items: center; gap: 1.5rem; }
.portfolio-size-controls input[type=range] { flex: 1; min-width: 0; padding: 0; accent-color: var(--neon-green); }
.portfolio-size-controls input[type=number] { width: 9rem; }
.portfolio-size-preview { background: #202020; padding: 1rem; border-radius: 1rem; }
.portfolio-size-preview[hidden] { display: none; }
.portfolio-size-preview img { display: block; max-width: 100%; height: auto; margin-inline: auto; }
.portfolio-project-description { max-width: 85rem; margin: 4rem auto; }
.portfolio-project-description h2 { font-size: 2.4rem; margin-bottom: 1.5rem; }
.portfolio-project-videos { display: grid; gap: 2rem; margin-top: 2rem; }
.portfolio-project-video { display: block; width: 100%; max-height: 85vh; background: #000; }
.portfolio-project-embed { display: block; width: 100%; aspect-ratio: 16/9; border: 0; background: #000; }
.portfolio-video-fields { display: grid; gap: 2rem; min-width: 0; padding: 2rem; border: 1px solid #333; border-radius: 1rem; }
.portfolio-video-fields legend { padding: 0 .8rem; font-size: 1.8rem; font-weight: 700; }
.portfolio-uploaded-videos { display: grid; gap: 1rem; }
.portfolio-uploaded-videos video { width: 100%; max-height: 25rem; background: #000; }
.portfolio-gallery { display: grid; gap: 2rem; }
.portfolio-viewer-controls { position: sticky; top: 1rem; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; padding: 1.2rem; margin-bottom: 1.5rem; background: #161616; border: 1px solid #3c3c3c; border-radius: 1rem; }
.portfolio-viewer-controls[hidden] { display: none; }
.portfolio-viewer-controls > span { color: #bbb; font-size: 1.25rem; }
.portfolio-viewer-controls button { min-width: 4.4rem; min-height: 4.4rem; padding: .8rem 1.2rem; border: 1px solid #555; border-radius: .6rem; background: #252525; color: #fff; font: inherit; cursor: pointer; }
.portfolio-viewer-controls button:hover { border-color: var(--neon-green); }
.portfolio-viewer-controls button:disabled { opacity: .4; cursor: default; }
.portfolio-viewer-range { display: flex; align-items: center; gap: .8rem; font-size: 1.25rem; }
.portfolio-viewer-range input { width: clamp(8rem, 16vw, 18rem); accent-color: var(--neon-green); }
.portfolio-viewer-controls output { min-width: 4.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.portfolio-viewer-viewport { overflow-x: auto; min-width: 0; }
.portfolio-viewer-viewport:focus-visible { outline: 2px solid var(--neon-green); outline-offset: 3px; }
.portfolio-viewer-viewport .portfolio-gallery { width: 100%; margin-inline: auto; }
.portfolio-project-footer { text-align: center; margin-top: 4rem; padding: 4rem 2rem; background: #111; border-radius: 1.2rem; }
.portfolio-project-footer h2 { font-size: 2.4rem; }
.portfolio-draft { background: #332b11; color: #ffe69b; padding: 1.5rem; border-radius: 1rem; margin-top: 2rem; }
.portfolio-editor { max-width: 85rem; margin: auto; background: #101010; padding: 3rem; border: 1px solid #333; border-radius: 1.6rem; }
.portfolio-existing-cover { max-width: 24rem; border-radius: 1rem; }
.portfolio-gallery-preview { display: flex; flex-wrap: wrap; gap: 1rem; }
.portfolio-gallery-preview img { width: 10rem; height: 8rem; object-fit: cover; border-radius: .6rem; }
.portfolio-page-project .portfolio-project-heading { margin: 2.5rem 0; text-align: left; }
.portfolio-page-project .portfolio-project-heading h1 { font-size: clamp(2.4rem, 3vw, 3.6rem); margin: .8rem 0; }
.portfolio-page-project .portfolio-gallery { gap: 0; }
.portfolio-page-project .portfolio-project-image { border-radius: 0; }
@media (max-width: 1000px) { .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .portfolio-backbar { padding-inline: 2rem; } .portfolio-page { padding: 3rem 2rem 5rem; } .portfolio-grid { grid-template-columns: 1fr; } .portfolio-section-title, .portfolio-manage-heading { align-items: flex-start; flex-direction: column; } .portfolio-profile { padding: 2.5rem; flex-direction: column; align-items: flex-start; gap: 2rem; } .portfolio-editor { padding: 2rem; } .portfolio-search > div { flex-direction: column; } .portfolio-filters { justify-content: flex-start; } }
@media (prefers-reduced-motion: reduce) { .portfolio-cover img { transition: none; } .portfolio-cover:hover img { transform: none; } }