/* New portfolio homepage: editorial interactive component system. */
.portfolio-redesign { background: var(--color-background); }
.portfolio-redesign .home-page { overflow: visible; }
.portfolio-redesign .site-header { z-index: 100; }
.portfolio-redesign .nav-resume-btn:hover { background: var(--color-accent-hover); color: var(--color-text-primary); }

.portfolio-hero { isolation: isolate; }
.portfolio-hero::after { z-index: -1; background: linear-gradient(90deg, rgba(0,0,0,.96), rgba(0,0,0,.62) 55%, rgba(0,0,0,.22)), linear-gradient(0deg, rgba(0,0,0,.9), transparent 52%); }
.portfolio-hero .hero-inner { z-index: 1; }

.toolkit-marquee { padding-block: var(--space-xl); overflow: hidden; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.toolkit-marquee-viewport { width: 100%; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 var(--space-xl), #000 calc(100% - var(--space-xl)), transparent); }
.toolkit-marquee-viewport:focus-visible { outline-offset: calc(var(--space-2xs) * -1); }
.toolkit-marquee-track { display: flex; width: max-content; animation: toolkit-loop 42s linear infinite; will-change: transform; }
.toolkit-marquee-viewport:hover .toolkit-marquee-track, .toolkit-marquee-viewport:focus .toolkit-marquee-track { animation-play-state: paused; }
.toolkit-marquee-group { display: flex; flex: none; gap: 0; margin: 0; padding: 0; list-style: none; }
.toolkit-marquee-group li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-sm); min-width: 14rem; min-height: 7rem; padding: var(--space-md); border-block: 1px solid var(--color-border); border-right: 1px solid var(--color-border); background: var(--color-background); }
.toolkit-marquee-group li:first-child { border-left: 1px solid var(--color-border); }
.toolkit-marquee-group img { width: 3.5rem; height: 3.5rem; object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter var(--transition-standard), opacity var(--transition-standard), transform var(--transition-standard); }
.toolkit-marquee-group span { color: var(--color-text-secondary); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.toolkit-marquee-group li:hover img { filter: grayscale(0); opacity: 1; transform: scale(1.08); }
.toolkit-marquee-group li:hover span { color: var(--color-text-primary); }
@keyframes toolkit-loop { to { transform: translateX(-50%); } }

.behind-designs { padding-block: var(--space-section); overflow: hidden; background: var(--color-background); }
.behind-designs-heading { display: grid; justify-items: center; text-align: center; }
.behind-designs-heading h2 { max-width: 14ch; font-size: clamp(2.5rem, 6vw, 5rem); }
.behind-designs-heading > p:not(.eyebrow) { max-width: 54ch; }
.behind-designs-heading .btn { margin-top: var(--space-sm); }
.behind-designs-gallery { width: 100%; margin-top: var(--space-xl); padding-block: var(--space-lg); overflow: hidden; perspective: 80rem; mask-image: linear-gradient(90deg, transparent, #000 var(--space-xl), #000 calc(100% - var(--space-xl)), transparent); }
.behind-designs-track { display: flex; width: max-content; animation: showcase-loop 46s linear infinite; will-change: transform; }
.behind-designs-gallery:hover .behind-designs-track, .behind-designs-gallery:focus-within .behind-designs-track { animation-play-state: paused; }
.behind-designs-group { display: grid; flex: none; grid-template-columns: repeat(7, minmax(9rem, 1fr)); align-items: center; gap: var(--space-xs); width: max(100vw, 78rem); padding-inline: var(--space-xs); }
.showcase-tile { position: relative; min-width: 0; padding: 0; border: 0; border-radius: var(--radius-medium); background: transparent; cursor: zoom-in; animation: showcase-float 8s ease-in-out infinite; animation-delay: var(--showcase-delay, 0s); }
.showcase-tile:nth-child(1), .showcase-tile:nth-child(7) { transform: translateY(var(--space-lg)) rotateY(8deg); }
.showcase-tile:nth-child(2), .showcase-tile:nth-child(6) { transform: translateY(var(--space-sm)) rotateY(5deg); }
.showcase-tile:nth-child(3), .showcase-tile:nth-child(5) { transform: translateY(calc(var(--space-2xs) * -1)); }
.showcase-tile:nth-child(4) { transform: translateY(calc(var(--space-md) * -1)); }
.showcase-tile-media { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-surface-raised); transition: transform var(--transition-standard), border-color var(--transition-standard), box-shadow var(--transition-standard); }
.showcase-tile-media::before { content: ""; position: absolute; inset: var(--space-sm); border: 1px solid var(--color-border); border-radius: var(--radius-small); }
.showcase-tile-media::after { content: ""; position: absolute; top: var(--space-sm); right: var(--space-sm); width: var(--space-2xs); height: var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-green); }
.showcase-tile img { width: 100%; height: 100%; object-fit: cover; }
.showcase-tile-label { position: relative; z-index: 1; max-width: 70%; color: var(--color-text-secondary); font: 700 var(--text-xs)/1.4 var(--font-body); letter-spacing: .08em; text-align: center; }
.showcase-tile:hover, .showcase-tile:focus-visible { z-index: 3; }
.showcase-tile:hover .showcase-tile-media, .showcase-tile:focus-visible .showcase-tile-media { transform: scale(1.1); border-color: var(--color-accent-light); box-shadow: var(--shadow-glow); }
@keyframes showcase-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(var(--space-xs) * -1); } }
@keyframes showcase-loop { to { transform: translateX(-50%); } }

@keyframes modal-enter { from { opacity: 0; transform: translateY(var(--space-sm)) scale(.98); } }

.websites-showcase { overflow: hidden; background: var(--color-background); }
.portfolio-category-label { margin-bottom: var(--space-xl); padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-border); border-radius: var(--radius-pill); color: var(--color-text-primary); }
.portfolio-category-label::before { width: var(--space-2xs); height: var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-accent); }
.websites-composition { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(24rem, 1fr); gap: var(--space-2xl); align-items: start; }
.website-stack { position: relative; min-height: 46rem; padding: var(--space-md) 0 var(--space-xl); }
.website-layer { position: relative; z-index: calc(10 - var(--layer-index)); margin-top: calc(var(--space-sm) * -1); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: rgba(26, 26, 26, .92); backdrop-filter: blur(12px); transition: transform 560ms cubic-bezier(.22, 1, .36, 1), opacity 560ms cubic-bezier(.22, 1, .36, 1), border-color 560ms cubic-bezier(.22, 1, .36, 1), box-shadow 560ms cubic-bezier(.22, 1, .36, 1); }
.website-layer:first-child { margin-top: 0; }
.website-stack.is-ready .website-layer { animation: website-layer-assemble 680ms cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--layer-index) * 70ms); }
@keyframes website-layer-assemble { from { opacity: 0; translate: 0 var(--space-md); } }
.website-layer:hover { transform: translateY(calc(var(--space-2xs) * -1)); border-color: var(--color-border-strong); }
.website-stack:has(.website-layer:hover) .website-layer:not(:hover):not(.is-selected) { opacity: .68; }
.website-layer.is-selected { z-index: 20; border-color: rgba(155, 92, 255, .58); box-shadow: 0 16px 48px rgba(96, 38, 236, .22); }
.website-layer-selector { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-sm); width: 100%; min-height: 4.75rem; padding: var(--space-sm) var(--space-md); border: 0; background: transparent; color: var(--color-text-primary); text-align: left; cursor: pointer; }
.website-window-dots { color: var(--color-text-secondary); font-size: .625rem; letter-spacing: .18em; white-space: nowrap; }
.website-layer-selector strong { overflow: hidden; font-family: var(--font-display); font-size: var(--text-base); text-overflow: ellipsis; white-space: nowrap; }
.website-layer-category { color: var(--color-accent-light); font-size: var(--text-sm); white-space: nowrap; }
.website-layer-status { padding: var(--space-3xs) var(--space-xs); border: 1px solid var(--color-border); border-radius: var(--radius-pill); color: var(--color-text-secondary); font-size: var(--text-xs); }
.website-layer.is-selected .website-layer-status { color: var(--color-text-primary); }
.website-layer.is-selected .website-layer-status::before { content: ""; display: inline-block; width: var(--space-2xs); height: var(--space-2xs); margin-right: var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-green); }
.website-layer-panel { max-height: 0; overflow: hidden; padding-inline: var(--space-md); opacity: 0; transition: max-height 620ms cubic-bezier(.22, 1, .36, 1), opacity 420ms ease, padding 620ms cubic-bezier(.22, 1, .36, 1); }
.website-layer.is-selected .website-layer-panel { max-height: 38rem; padding-bottom: var(--space-md); opacity: 1; }
.website-layer-description { max-width: 54ch; }
.website-layer-panel .project-media { margin-top: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-small); }
.website-layer-panel .project-media::before { inset: var(--space-sm); }
.website-visit { justify-content: center; width: min(18rem, 100%); margin: var(--space-md) auto 0; }
.website-visit.is-disabled { opacity: .48; cursor: not-allowed; pointer-events: none; }
.website-support { display: grid; gap: var(--space-xl); padding-top: var(--space-sm); }
.website-support-label { margin-bottom: var(--space-md); color: var(--color-text-secondary); font: 600 var(--text-sm)/1 var(--font-display); letter-spacing: .18em; text-transform: uppercase; }
.website-tools-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.website-tools-grid li { display: flex; align-items: center; gap: var(--space-xs); min-height: 6rem; padding: var(--space-sm); border: 1px solid var(--color-border); border-radius: var(--radius-small); background: var(--color-surface); transition: transform var(--transition-standard), border-color var(--transition-standard), background var(--transition-standard); }
.website-tools-grid li:hover { transform: translateY(calc(var(--space-3xs) * -1)) scale(1.02); border-color: var(--color-accent-light); background: var(--color-surface-raised); }
.website-tools-grid img, .website-tool-mark { flex: 0 0 auto; width: var(--space-lg); height: var(--space-lg); object-fit: contain; filter: grayscale(1); opacity: .86; }
.website-tool-mark { display: grid; place-items: center; color: var(--color-text-primary); font: 700 var(--text-xl)/1 var(--font-display); }
.website-tools-grid strong { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 500; }
.website-process { padding-top: var(--space-lg); border-top: 1px solid var(--color-border); }
.website-process-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.website-process-list li { position: relative; display: grid; justify-items: center; gap: var(--space-2xs); color: var(--color-text-secondary); text-align: center; }
.website-process-list li:not(:last-child)::after { content: "\F138"; position: absolute; top: var(--space-sm); left: calc(100% - var(--space-3xs)); color: var(--color-text-secondary); font-family: bootstrap-icons; }
.website-process-icon { display: grid; place-items: center; width: var(--space-lg); height: var(--space-lg); border: 1px solid rgba(155, 92, 255, .5); border-radius: var(--radius-pill); background: var(--color-accent-tint); color: var(--color-text-primary); font-size: var(--text-xs); }
.website-process-list strong { font-size: .625rem; font-weight: 500; }
.website-process-copy { margin: var(--space-lg) 0 0; padding-left: var(--space-sm); border-left: 2px solid var(--color-green); font-size: var(--text-sm); }

.design-systems-showcase { background: var(--color-surface); }
.design-systems-composition { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(23rem, .85fr); gap: var(--space-xl); align-items: center; }
.system-canvas-stage { position: relative; min-height: 32rem; perspective: 80rem; }
.system-canvas { position: absolute; top: var(--space-md); left: calc(var(--canvas-index) * 16%); z-index: calc(var(--canvas-index) + 1); display: grid; grid-template-rows: 1fr auto; width: 58%; height: 28rem; padding: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-surface-raised); color: var(--color-text-primary); text-align: left; cursor: pointer; transform: translateY(calc(var(--canvas-index) * var(--space-xs))); transition: transform 560ms cubic-bezier(.22, 1, .36, 1), opacity 560ms cubic-bezier(.22, 1, .36, 1), border-color 560ms cubic-bezier(.22, 1, .36, 1), box-shadow 560ms cubic-bezier(.22, 1, .36, 1); }
.system-canvas-stage.is-ready .system-canvas { animation: system-canvas-enter 680ms cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--canvas-index) * 90ms); }
@keyframes system-canvas-enter { from { opacity: 0; translate: var(--space-md) var(--space-sm); } }
.system-canvas:hover { z-index: 12; transform: translateY(calc((var(--canvas-index) * var(--space-xs)) - var(--space-2xs))) scale(1.015); }
.system-canvas-stage:has(.system-canvas:hover) .system-canvas:not(:hover):not(.is-selected) { opacity: .62; }
.system-canvas.is-selected { z-index: 14; border-color: var(--color-accent-light); box-shadow: 0 16px 48px rgba(96, 38, 236, .24); transform: translateY(calc((var(--canvas-index) * var(--space-xs)) - var(--space-xs))) scale(1.025); }
.system-canvas-visual { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--color-surface); }
.system-canvas-visual::before { content: ""; position: absolute; inset: var(--space-lg); border: 1px dashed var(--color-border); border-radius: var(--radius-small); }
.system-canvas-type { color: transparent; font: 500 clamp(4rem, 8vw, 7rem)/1 var(--font-display); -webkit-text-stroke: 1px var(--color-text-secondary); opacity: .45; }
.system-canvas-rings { display: none; width: 10rem; height: 10rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 var(--space-lg) var(--color-surface), inset 0 0 0 calc(var(--space-lg) + 1px) var(--color-border); }
.system-canvas-components { display: none; gap: var(--space-xs); width: 72%; }
.system-canvas-components b { display: block; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-border); border-radius: var(--radius-pill); color: var(--color-text-secondary); font-size: var(--text-xs); text-align: center; }
.system-canvas-components b:first-child { background: var(--color-accent); color: var(--color-text-primary); }
.system-canvas:nth-child(2) .system-canvas-type { display: none; }
.system-canvas:nth-child(2) .system-canvas-rings { display: block; }
.system-canvas:nth-child(3) .system-canvas-type, .system-canvas:nth-child(3) .system-canvas-rings { display: none; }
.system-canvas:nth-child(3) .system-canvas-components { display: grid; }
.system-canvas-caption { display: grid; gap: var(--space-3xs); padding: var(--space-md); border-top: 1px solid var(--color-border); }
.system-canvas-caption strong { font-family: var(--font-display); font-size: var(--text-base); overflow-wrap: anywhere; }
.system-canvas-caption > span { color: var(--color-text-secondary); font-size: var(--text-sm); }
.design-system-details { padding-left: var(--space-md); }
.design-system-accent { color: var(--color-accent-light); font-weight: 600; }
.design-system-details h3 { font-size: var(--text-2xl); }
.system-elements { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); margin: var(--space-lg) 0 0; padding: 0; list-style: none; }
.system-elements li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-xs); align-items: start; }
.system-element-icon { display: grid; place-items: center; width: var(--space-lg); height: var(--space-lg); border: 1px solid var(--color-border-strong); border-radius: var(--radius-small); color: var(--color-accent-light); font-size: var(--text-xs); }
.system-elements strong, .system-elements small { display: block; }
.system-elements strong { color: var(--color-text-primary); font-size: var(--text-sm); }
.system-elements small { margin-top: var(--space-3xs); color: var(--color-text-secondary); font-size: var(--text-xs); line-height: var(--leading-snug); }
.system-cta { margin-top: var(--space-lg); }
.is-disabled { opacity: .48; cursor: not-allowed; pointer-events: none; }

.email-showcase { background: var(--color-background); }
.email-showcase-intro { display: grid; grid-template-columns: 1fr minmax(18rem, .7fr); gap: var(--space-lg); align-items: end; }
.email-showcase-intro h3 { max-width: 14ch; margin: 0; font-size: clamp(2.25rem, 5vw, 4.5rem); }
.email-showcase-intro p { margin: 0; }
.email-deck-shell { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; margin-top: var(--space-lg); }
.email-deck { position: relative; min-height: 32rem; overflow: hidden; }
.email-deck-card { position: absolute; top: 50%; left: 50%; width: 19rem; padding: 0; border: 0; border-radius: var(--radius-medium); background: transparent; cursor: pointer; transform: translate(calc(-50% + var(--email-x)), -50%) scale(.86); opacity: .62; transition: transform 620ms cubic-bezier(.22, 1, .36, 1), opacity 620ms cubic-bezier(.22, 1, .36, 1), filter 620ms cubic-bezier(.22, 1, .36, 1); }
.email-deck.is-ready .email-deck-card { animation: email-card-enter 680ms cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc((var(--email-offset) + 3) * 60ms); }
@keyframes email-card-enter { from { opacity: 0; translate: 0 var(--space-md); } }
.email-deck-card[data-distance="1"] { transform: translate(calc(-50% + var(--email-x)), -50%) scale(.92); opacity: .78; }
.email-deck-card[data-distance="2"] { transform: translate(calc(-50% + var(--email-x)), -50%) scale(.78); opacity: .44; }
.email-deck-card.is-selected { z-index: 20; transform: translate(-50%, -50%) scale(1); opacity: 1; }
.email-deck-card:hover:not(.is-selected) { opacity: .94; filter: brightness(1.12); }
.email-card-frame { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 27rem; padding: var(--space-md); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-surface-raised); color: var(--color-text-primary); text-align: center; }
.email-deck-card.is-selected .email-card-frame { border-color: var(--color-accent-light); box-shadow: 0 16px 48px rgba(96, 38, 236, .28); }
.email-card-frame img { width: 100%; height: 100%; object-fit: cover; }
.email-card-brand { align-self: stretch; color: var(--color-text-secondary); font-size: var(--text-xs); letter-spacing: .08em; }
.email-card-headline { position: relative; z-index: 1; max-width: 10ch; margin-top: var(--space-xl); font: 600 var(--text-xl)/1.05 var(--font-display); }
.email-card-copy { position: relative; z-index: 1; margin-top: var(--space-sm); color: var(--color-text-secondary); font-size: var(--text-xs); }
.email-card-button { position: relative; z-index: 1; margin-top: var(--space-md); padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-text-primary); font-size: var(--text-xs); }
.email-card-art { position: absolute; width: 90%; aspect-ratio: 1; bottom: -48%; border-radius: 45% 55% 48% 52%; background: var(--color-surface); border: 1px solid var(--color-border-strong); transform: rotate(18deg); }
.email-deck-control { position: relative; z-index: 30; display: grid; place-items: center; width: var(--space-lg); height: var(--space-lg); padding: 0; border: 1px solid var(--color-accent-light); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-accent-light); font-size: var(--text-lg); cursor: pointer; transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast); }
.email-deck-control:hover { transform: scale(1.08); background: var(--color-accent); color: var(--color-text-primary); box-shadow: 0 8px 24px rgba(96, 38, 236, .28); }
.email-selected-details { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); max-width: 54rem; margin: 0 auto; padding-top: var(--space-md); border-top: 1px solid var(--color-border); }
.email-selected-details h3 { margin-bottom: var(--space-2xs); font-size: var(--text-lg); }
.email-selected-details p { max-width: 56ch; margin-bottom: var(--space-2xs); font-size: var(--text-sm); }
.email-disciplines { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-2xs); margin: var(--space-lg) 0 0; padding: 0; list-style: none; }
.email-disciplines li { padding: var(--space-3xs) var(--space-xs); border: 1px solid var(--color-border); border-radius: var(--radius-pill); color: var(--color-text-secondary); font-size: var(--text-xs); }

.portfolio-work-section { scroll-margin-top: var(--space-md); }
.portfolio-work-section:nth-child(even) { background: var(--color-surface); }
.portfolio-section-header { display: grid; grid-template-columns: 1fr 4fr; gap: var(--space-md); margin-bottom: var(--space-xl); padding-top: var(--space-sm); border-top: 1px solid var(--color-border-strong); }
.portfolio-section-number { color: var(--color-accent-light); font: 600 var(--text-sm)/1 var(--font-display); }
.portfolio-section-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, .7fr); column-gap: var(--space-lg); align-items: end; }
.portfolio-section-copy .eyebrow { grid-column: 1 / -1; }
.portfolio-section-copy h2 { max-width: 14ch; margin: 0; font-size: clamp(2.25rem, 5vw, 4.5rem); }
.portfolio-section-copy > p:last-child { margin: 0; max-width: 52ch; }
.portfolio-projects { display: grid; gap: var(--space-md); }
.portfolio-card { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-surface-raised); transition: transform var(--transition-standard), border-color var(--transition-standard); }
.portfolio-card:hover { transform: translateY(-4px); border-color: var(--color-border-strong); }
.project-media { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.project-media::before { content: ""; position: absolute; inset: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-small); }
.project-media img { width: 100%; height: 100%; object-fit: cover; }
.project-media--wide { aspect-ratio: 16 / 9; }
.project-media--landscape { aspect-ratio: 4 / 3; }
.project-media--square { aspect-ratio: 1; }
.project-media--portrait { aspect-ratio: 3 / 4; }
.project-media--video { aspect-ratio: 16 / 9; }
.project-media-label { position: relative; z-index: 1; max-width: 70%; color: var(--color-text-secondary); font-size: var(--text-xs); font-weight: 700; letter-spacing: .1em; text-align: center; }
.project-media-marker { position: absolute; top: var(--space-md); right: var(--space-md); width: var(--space-2xs); height: var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-green); }
.project-card-body { padding: var(--space-md); }
.project-card-body h3 { margin-bottom: var(--space-xs); font-size: var(--text-lg); overflow-wrap: anywhere; }
.project-card-body > p { max-width: 58ch; }
.project-meta, .project-tags { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: var(--space-sm) 0 0; padding: 0; list-style: none; }
.project-meta li { color: var(--color-text-secondary); font-size: var(--text-xs); }
.project-meta li + li::before { content: "·"; padding-right: var(--space-2xs); color: var(--color-green); }
.project-tags li { padding: var(--space-3xs) var(--space-xs); border: 1px solid var(--color-border); border-radius: var(--radius-pill); color: var(--color-text-primary); font-size: var(--text-xs); }
.project-link { display: inline-flex; margin-top: var(--space-md); color: var(--color-accent-light); font-weight: 700; }

.media-rails-showcase { background: var(--color-background); }
.media-rails--ads { background: var(--color-surface); }
.media-rails-showcase .portfolio-category-label, .multimedia-showcase .portfolio-category-label, .youtube-showcase .portfolio-category-label { display: flex; width: fit-content; margin-inline: auto; }
.media-rows { display: grid; gap: var(--space-md); }
.media-row { display: grid; grid-template-columns: var(--space-lg) minmax(0, 1fr) var(--space-lg) 5rem; gap: var(--space-sm); align-items: center; }
.media-row-viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.media-row-viewport::-webkit-scrollbar { display: none; }
.media-row-track { display: flex; gap: var(--space-sm); }
.media-rail-card { flex: 0 0 calc((100% - (var(--space-sm) * 3)) / 4); min-width: 14rem; scroll-snap-align: start; transition: transform var(--transition-standard), opacity var(--transition-standard); }
.media-rail-card:hover { z-index: 2; transform: translateY(calc(var(--space-2xs) * -1)) scale(1.025); }
.media-rail-card .project-media { border: 1px solid var(--color-border); border-radius: var(--radius-small); }
.media-rail-card video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.media-rail-card .project-media::before { inset: var(--space-sm); }
.media-rail-play { position: absolute; z-index: 2; left: var(--space-sm); bottom: var(--space-sm); padding: var(--space-3xs) var(--space-2xs); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); background: rgba(0, 0, 0, .72); color: var(--color-text-primary); font-size: var(--text-xs); }
.media-row-control { display: grid; place-items: center; width: var(--space-md); height: var(--space-md); justify-self: center; padding: 0; border: 1px solid var(--color-accent-light); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-text-primary); cursor: pointer; transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast); }
.media-row-control:hover { transform: scale(1.16); background: var(--color-accent-hover); box-shadow: 0 8px 24px rgba(96, 38, 236, .28); }
.media-row-format { margin: 0; color: var(--color-text-primary); font: 500 var(--text-sm)/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.media-row-divider { width: calc(100% - 10rem); margin: 0 auto; border: 0; border-top: 1px solid var(--color-border); }

.multimedia-showcase { background: var(--color-background); }
.multimedia-mosaic { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-sm); }
.multimedia-tile { position: relative; grid-column: span 2; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-small); background: var(--color-surface); transition: transform var(--transition-standard), border-color var(--transition-standard); }
.multimedia-tile:nth-child(-n+2) { grid-column: span 3; }
.multimedia-tile:hover { transform: translateY(calc(var(--space-2xs) * -1)); border-color: var(--color-accent-light); }
.multimedia-tile .project-media { aspect-ratio: 16 / 9; border: 0; }
.multimedia-tile .project-media::before { inset: var(--space-md); }
.multimedia-tile-copy { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-md); background: linear-gradient(transparent 42%, rgba(0, 0, 0, .88)); pointer-events: none; }
.multimedia-tile-copy h3 { margin-bottom: var(--space-2xs); font-size: var(--text-md); }
.multimedia-tile-copy p { max-width: 36ch; margin: 0; font-size: var(--text-xs); }

.youtube-showcase { background: var(--color-surface); }
.youtube-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(18rem, .75fr); gap: var(--space-md); align-items: stretch; }
.youtube-player-screen { position: relative; height: 100%; min-height: 31rem; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-small); background: var(--color-background); }
.youtube-player-screen > .project-media { position: absolute; inset: 0; aspect-ratio: auto; border: 0; }
.youtube-embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.youtube-player-copy { position: absolute; z-index: 2; top: var(--space-xl); left: var(--space-lg); max-width: 52%; }
.youtube-player-copy h3 { font-size: clamp(2rem, 4vw, 4rem); }
.youtube-player-copy p { font-size: var(--text-sm); }
.youtube-play-button { position: absolute; z-index: 3; top: 50%; left: 50%; display: grid; place-items: center; width: var(--space-xl); height: var(--space-xl); padding: 0; border: 0; border-radius: var(--radius-medium); background: rgba(13, 13, 13, .88); color: var(--color-text-primary); font-size: var(--text-xl); transform: translate(-50%, -50%); cursor: pointer; }
.youtube-play-button:hover { background: var(--color-accent); }
.youtube-player-controls { position: absolute; z-index: 3; right: var(--space-md); bottom: var(--space-md); left: var(--space-md); display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-sm); align-items: center; color: var(--color-text-primary); font-size: var(--text-xs); }
.youtube-player-controls i { height: var(--space-3xs); background: linear-gradient(90deg, var(--color-accent) 34%, var(--color-border-strong) 34%); }
.youtube-playlist { display: grid; grid-template-rows: 1fr auto; gap: var(--space-sm); }
.youtube-playlist-list { display: grid; gap: var(--space-2xs); }
.youtube-playlist-item { display: grid; grid-template-columns: 7rem 1fr; gap: var(--space-xs); align-items: center; width: 100%; min-height: 6rem; padding: var(--space-2xs); border: 1px solid var(--color-border); border-radius: var(--radius-small); background: var(--color-background); color: var(--color-text-primary); text-align: left; cursor: pointer; transition: border-color var(--transition-fast), transform var(--transition-fast), background var(--transition-fast); }
.youtube-playlist-item:hover, .youtube-playlist-item.is-selected { border-color: var(--color-accent-light); background: var(--color-surface-raised); transform: translateX(var(--space-3xs)); }
.youtube-playlist-thumb { display: grid; place-items: center; height: 4.5rem; border-radius: var(--radius-small); background: var(--color-surface-raised); color: var(--color-text-secondary); font-size: .625rem; text-align: center; }
.youtube-playlist-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.youtube-playlist-item strong, .youtube-playlist-item small { display: block; }
.youtube-playlist-item strong { font-size: var(--text-xs); line-height: var(--leading-snug); }
.youtube-playlist-item small { margin-top: var(--space-3xs); color: var(--color-text-secondary); }
.youtube-filters { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.youtube-filters button { padding: var(--space-2xs) var(--space-xs); border: 1px solid var(--color-border); border-radius: var(--radius-small); background: var(--color-background); color: var(--color-text-secondary); font-size: var(--text-xs); cursor: pointer; }
.youtube-filters button:hover, .youtube-filters button.is-active { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-text-primary); }

.compact-campaigns { padding-top: 0; background: var(--color-surface); }
.compact-campaigns h2 { position: relative; margin-bottom: var(--space-md); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border); font-size: var(--text-lg); }
.compact-campaigns h2::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 10rem; height: 2px; background: var(--color-accent); }
.compact-campaigns-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
.compact-campaign-card { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); min-height: 4rem; padding: var(--space-sm); border: 1px solid var(--color-border); border-radius: var(--radius-small); background: var(--color-surface-raised); transition: transform var(--transition-fast), border-color var(--transition-fast); }
.compact-campaign-card:hover { transform: translateY(calc(var(--space-3xs) * -1)); border-color: var(--color-accent-light); }
.compact-campaign-card h3 { margin: 0; font-size: var(--text-sm); font-weight: 500; }
.compact-campaign-card > span { color: var(--color-text-secondary); }


@media (max-width: 1024px) {
  .websites-composition { grid-template-columns: 1fr; }
  .website-stack { min-height: 44rem; }
  .website-support { grid-template-columns: 1fr; }
  .design-systems-composition { grid-template-columns: 1fr; }
  .system-canvas-stage { max-width: 48rem; }
  .design-system-details { padding-left: 0; }
  .email-deck-card { width: 17rem; }
  .media-rail-card { flex-basis: calc((100% - (var(--space-sm) * 2)) / 3); }
  .youtube-layout { grid-template-columns: 1fr; }
  .youtube-playlist-list { grid-template-columns: repeat(2, 1fr); }
  .portfolio-section-copy { grid-template-columns: 1fr; gap: var(--space-sm); }
}

@media (max-width: 768px) {
  .toolkit-marquee { padding-block: var(--space-lg); }
  .toolkit-marquee-group li { min-width: 11rem; min-height: 6rem; padding: var(--space-sm); }
  .toolkit-marquee-group img { width: 3rem; height: 3rem; }
  .behind-designs-gallery { perspective: none; mask-image: linear-gradient(90deg, transparent, #000 var(--space-md), #000 calc(100% - var(--space-md)), transparent); }
  .behind-designs-group { grid-template-columns: repeat(7, 10rem); width: auto; }
  .showcase-tile { transform: none !important; }
  .portfolio-section-header { grid-template-columns: 1fr; }
  .websites-showcase > .container > .eyebrow { margin-bottom: var(--space-lg); }
  .websites-composition { gap: var(--space-xl); }
  .website-stack { min-height: 40rem; }
  .website-layer-selector { grid-template-columns: auto minmax(0, 1fr) auto; }
  .website-layer-category { display: none; }
  .website-tools-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .website-process-list { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-md); }
  .website-process-list li:nth-child(3)::after { display: none; }
  .portfolio-category-label { margin-bottom: var(--space-lg); }
  .system-canvas-stage { min-height: 28rem; }
  .system-canvas { width: 64%; height: 24rem; }
  .system-elements { grid-template-columns: 1fr 1fr; }
  .email-showcase-intro { grid-template-columns: 1fr; gap: var(--space-sm); }
  .email-deck { min-height: 29rem; }
  .email-deck-card { width: 15rem; }
  .email-card-frame { min-height: 24rem; }
  .email-selected-details { align-items: flex-start; flex-direction: column; }
  .media-row { grid-template-columns: var(--space-lg) minmax(0, 1fr) var(--space-lg); }
  .media-row-format { grid-column: 2; grid-row: 2; text-align: center; }
  .media-rail-card { flex-basis: calc((100% - var(--space-sm)) / 2); min-width: 12rem; }
  .media-row-divider { width: calc(100% - (var(--space-xl) * 2)); }
  .multimedia-tile:nth-child(n) { grid-column: span 3; }
  .youtube-player-screen { min-height: 27rem; }
  .portfolio-section-number { margin-bottom: var(--space-xs); }
  .compact-campaigns-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .portfolio-hero .hero-inner { padding-top: 7rem; }
  .website-stack { min-height: 35rem; }
  .website-layer-selector { grid-template-columns: auto minmax(0, 1fr); min-height: 4rem; padding: var(--space-xs) var(--space-sm); }
  .website-layer-status { display: none; }
  .website-layer-selector strong { font-size: var(--text-sm); }
  .website-layer-panel { padding-inline: var(--space-sm); }
  .website-layer.is-selected .website-layer-panel { padding-bottom: var(--space-sm); }
  .website-tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .website-tools-grid li { min-height: 5rem; }
  .website-process-list { grid-template-columns: repeat(2, 1fr); }
  .website-process-list li:nth-child(2n)::after { display: none; }
  .website-process-list li:nth-child(3)::after { display: block; }
  .system-canvas-stage { display: grid; gap: var(--space-sm); min-height: 0; }
  .system-canvas { position: relative; top: auto; left: auto; width: 100%; height: 16rem; transform: none !important; }
  .system-canvas.is-selected { height: 22rem; }
  .system-canvas-visual::before { inset: var(--space-md); }
  .system-canvas-caption { padding: var(--space-sm); }
  .system-elements { grid-template-columns: 1fr; }
  .email-deck-shell { grid-template-columns: var(--space-lg) minmax(0, 1fr) var(--space-lg); }
  .email-deck { min-height: 27rem; }
  .email-deck-card { width: 14rem; }
  .email-card-frame { min-height: 22rem; }
  .email-deck-control { width: var(--space-lg); height: var(--space-lg); }
  .email-disciplines { justify-content: flex-start; }
  .media-row { grid-template-columns: var(--space-md) minmax(0, 1fr) var(--space-md); gap: var(--space-2xs); }
  .media-row-control { width: var(--space-md); height: var(--space-md); }
  .media-rail-card { flex-basis: 82%; min-width: 0; }
  .multimedia-mosaic { grid-template-columns: 1fr; }
  .multimedia-tile:nth-child(n) { grid-column: auto; }
  .youtube-player-screen { min-height: 24rem; }
  .youtube-player-copy { top: var(--space-md); left: var(--space-md); max-width: 72%; }
  .youtube-player-copy h3 { font-size: var(--text-xl); }
  .youtube-playlist-list { grid-template-columns: 1fr; }
  .compact-campaigns-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-card, .compact-campaign-card, .media-rail-card, .multimedia-tile { transform: none !important; }
  .showcase-tile, .media-viewer[open] { animation: none; }
  .behind-designs-gallery { overflow-x: auto; mask-image: none; }
  .behind-designs-track { animation: none; }
  .behind-designs-group[aria-hidden="true"] { display: none; }
  .website-stack.is-ready .website-layer { animation: none; }
  .system-canvas-stage.is-ready .system-canvas, .email-deck.is-ready .email-deck-card { animation: none; }
  .toolkit-marquee-viewport { overflow-x: auto; mask-image: none; }
  .toolkit-marquee-track { animation: none; }
  .toolkit-marquee-group[aria-hidden="true"] { display: none; }
}

/* Refinement pass: main-branch parity, responsive media interaction, and accessible controls. */
.portfolio-hero::after { background: radial-gradient(circle at 18% 24%, rgba(96,38,236,.3), transparent 34%), linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.12) 50%, rgba(0,0,0,.78) 100%), linear-gradient(0deg, rgba(0,0,0,.92) 0%, transparent 42%); }
.portfolio-hero h1 > span:first-child { font-family: 'Khand', var(--font-display); font-weight: 700; }
.portfolio-hero h1 .accent-italic { font-family: 'Array', var(--font-display); font-style: normal; font-weight: 400; letter-spacing: -.03em; }
.toolkit-marquee { margin-top: calc(-1 * clamp(1.5rem, 3vw, 3rem)); padding-block: 0; }
.toolkit-marquee-group li { min-width: clamp(10rem, 13vw, 13rem); min-height: 5.25rem; padding: var(--space-sm); }
.toolkit-marquee-group img { width: 2.5rem; height: 2.5rem; }
.behind-socials { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-xs); width: min(100% - (var(--space-md) * 2), 42rem); margin: var(--space-lg) auto 0; }
.behind-socials a { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 2.9rem; padding: var(--space-2xs) var(--space-sm); border: 1px solid var(--color-border); border-radius: var(--radius-pill); color: var(--color-text-secondary); }
.behind-socials a:hover, .behind-socials a:focus-visible { border-color: var(--color-accent-light); color: var(--color-text-primary); background: var(--color-surface-raised); }
.behind-socials i { color: var(--color-green); font-size: var(--text-md); }

.website-stack { min-height: 58rem; }
.website-layer-panel .project-tags { margin-top: var(--space-sm); }
.website-tools-grid li { min-height: 4.75rem; padding: var(--space-xs); }
.website-tools-grid img, .website-tool-mark { width: 2rem; height: 2rem; }
.website-tools-grid strong { font-size: .72rem; overflow-wrap: anywhere; }
.system-canvas { left: calc(var(--canvas-index) * 10%); width: 62%; }
.system-canvas-visual > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.system-canvas-visual:has(img)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(0,0,0,.55)); pointer-events: none; }
.email-deck-card { touch-action: manipulation; }
.email-deck-card::after { content: '\\F62C'; position: absolute; z-index: 3; right: var(--space-xs); bottom: var(--space-xs); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(0,0,0,.7); color: #fff; font-family: bootstrap-icons; }
.media-row { grid-template-columns: var(--space-lg) minmax(0, 1fr) var(--space-lg); }
.media-row-format { display: none; }
.media-rail-open { display: block; width: 100%; padding: 0; border: 0; border-radius: var(--radius-small); background: transparent; color: inherit; cursor: zoom-in; }
.media-rail-mute { position: absolute; z-index: 4; right: var(--space-xs); bottom: var(--space-xs); display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(0,0,0,.72); color: #fff; cursor: pointer; }
.media-rail-card { position: relative; }
.media-rail-card video { pointer-events: none; }
.compact-campaign-card { color: var(--color-text-primary); text-decoration: none; }

.media-viewer { width: min(92rem, calc(100% - clamp(1rem, 4vw, 4rem))); height: min(92dvh, 68rem); max-width: none; max-height: none; padding: 0; overflow: hidden; border: 1px solid var(--color-border-strong); border-radius: var(--radius-large); background: #080808; color: var(--color-text-primary); box-shadow: var(--shadow-modal); }
.media-viewer::backdrop { background: rgba(0,0,0,.9); backdrop-filter: blur(10px); }
.media-viewer-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; padding: clamp(var(--space-sm), 2vw, var(--space-lg)); }
.media-viewer-header { display: flex; justify-content: space-between; gap: var(--space-md); align-items: center; padding-bottom: var(--space-sm); }
.media-viewer-header .eyebrow, .media-viewer-header h2, .media-viewer-count { margin-bottom: 0; }
.media-viewer-header h2 { max-width: min(60vw, 36rem); overflow: hidden; font-size: clamp(1rem, 2.2vw, var(--text-xl)); text-overflow: ellipsis; white-space: nowrap; }
.media-viewer-count { color: var(--color-text-secondary); font-size: var(--text-xs); }
.media-viewer-tools { display: flex; gap: var(--space-2xs); }
.media-viewer-tools button, .media-viewer-nav { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--color-border-strong); border-radius: 50%; background: var(--color-surface); color: var(--color-text-primary); cursor: pointer; }
.media-viewer-tools button:hover, .media-viewer-nav:hover { border-color: var(--color-accent-light); background: var(--color-accent); }
.media-viewer-tools.is-video [data-viewer-action^='zoom'], .media-viewer-tools.is-video [data-viewer-action='reset'] { display: none; }
.media-viewer-body { min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-sm); align-items: center; }
.media-viewer-viewport { height: 100%; min-height: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: #000; touch-action: none; cursor: default; }
.media-viewer-viewport.is-zoomed { cursor: grab; }
.media-viewer-viewport.is-zoomed:active { cursor: grabbing; }
.media-viewer-stage { display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; }
.media-viewer-stage img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center; transition: transform 120ms ease-out; user-select: none; }
.media-viewer-stage video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.media-viewer[open] { animation: modal-enter 240ms ease-out; }

@media (max-width: 768px) {
  .toolkit-marquee { margin-top: calc(-1 * var(--space-sm)); }
  .toolkit-marquee-group li { min-width: 9rem; min-height: 4.75rem; }
  .website-stack { min-height: 64rem; }
  .system-canvas { left: calc(var(--canvas-index) * 8%); width: 68%; }
  .media-viewer { width: calc(100% - 1rem); height: calc(100dvh - 1rem); border-radius: var(--radius-medium); }
  .media-viewer-header { align-items: flex-start; }
  .media-viewer-header .eyebrow, .media-viewer-count { display: none; }
  .media-viewer-tools { flex-wrap: wrap; justify-content: flex-end; }
  .media-viewer-tools button { width: 2.5rem; height: 2.5rem; }
  .media-viewer-body { grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem; gap: var(--space-3xs); }
  .media-viewer-nav { width: 2.5rem; height: 2.5rem; }
}
@media (max-width: 520px) {
  .portfolio-hero h1 { font-size: clamp(3rem, 16vw, 5rem); }
  .behind-socials a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .behind-socials a { justify-content: center; width: 3rem; padding: 0; }
  .website-stack { min-height: 68rem; }
  .website-layer.is-selected .website-layer-panel { max-height: 30rem; }
  .website-layer-panel .project-media { aspect-ratio: 16 / 10; }
  .website-tools-grid li { min-height: 4.25rem; }
  .system-canvas { width: 100%; left: auto; }
  .media-viewer-panel { padding: var(--space-xs); }
  .media-viewer-header { gap: var(--space-xs); }
  .media-viewer-header h2 { max-width: 32vw; }
  .media-viewer-tools button { width: 2.35rem; height: 2.35rem; }
  .media-viewer-body { grid-template-columns: 2.25rem minmax(0, 1fr) 2.25rem; }
  .media-viewer-nav { width: 2.25rem; height: 2.25rem; }
}
@media (max-width: 360px) {
  .media-viewer-header h2 { display: none; }
  .media-viewer-tools { width: 100%; justify-content: space-between; }
  .website-window-dots { display: none; }
  .website-layer-selector { grid-template-columns: minmax(0, 1fr); }
}