/* Shared by the home page and catalog; screenshots keep their original 8:5 ratio. */
.portfolio-section .portfolio-grid:not(.codex-carousel){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;overflow:visible;padding:0}
.portfolio-section .codex-model-card{position:relative;display:flex;flex-direction:column;width:auto;height:auto!important;min-width:0;border:1px solid var(--border-color,#343943);border-radius:20px;background:#11151d;overflow:hidden;opacity:1;isolation:isolate;contain:none;content-visibility:visible}
.portfolio-section .codex-model-card .project-preview{position:relative!important;inset:auto!important;flex:none;width:100%;height:auto!important;aspect-ratio:8/5;background:#161b23;overflow:hidden}
.portfolio-section .codex-thumbnail-link{display:block;width:100%;height:100%}
.portfolio-section .codex-model-card .codex-model-thumbnail{display:block;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center;transform:none!important;transition:none}
.portfolio-section .codex-model-card .project-overlay,.portfolio-section .codex-model-card:hover .project-overlay{position:relative!important;inset:auto!important;display:block;flex:1;opacity:1!important;padding:24px!important;background:#11151d;text-shadow:none;pointer-events:auto;transform:none}
.portfolio-section .codex-model-card .project-content{display:flex;flex-direction:column;width:100%;height:100%;text-shadow:none}
.portfolio-section .codex-model-card .project-content h3{margin:0 0 8px;font-size:clamp(23px,2vw,30px)!important;line-height:1.16;letter-spacing:-.03em;color:#fff;overflow-wrap:anywhere}
.portfolio-section .codex-model-card .project-content p{margin:0 0 14px;font-size:14px;line-height:1.6;color:#cbd0da;overflow-wrap:anywhere}
.codex-model-category{font-size:10px;color:#cbd0da;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px}
.codex-model-type{display:block;margin:0 0 14px;font-size:12px;line-height:1.5;color:#cbd0da}
.codex-template-price{font-size:16px;color:#fff;margin-bottom:14px}.codex-template-price small{display:block;font-weight:400;font-size:11px;color:#cbd0da;line-height:1.5;margin-top:3px}
.codex-template-details{margin-bottom:16px;color:#cbd0da;font-size:12px;line-height:1.6}.codex-template-details summary{min-height:36px;cursor:pointer;color:inherit;display:flex;align-items:center;text-decoration:underline;text-underline-offset:4px}.codex-template-details li{margin-left:18px}.codex-template-details strong{display:block;margin-top:10px}
.portfolio-section .codex-model-card .project-number{position:absolute;top:12px!important;left:12px!important;z-index:2;padding:7px 11px;border-radius:999px;background:#0c101de8;color:#fff;font:11px Inter,Arial,sans-serif;letter-spacing:1px;pointer-events:none}
.portfolio-section .codex-model-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}.portfolio-section .codex-model-actions :is(a,button){display:inline-flex;align-items:center;justify-content:center;flex:1;min-width:110px;min-height:44px;padding:9px 12px;border:1px solid #697180;border-radius:9px;background:#1a202b;color:#fff;font:600 12px/1.4 Inter,Arial,sans-serif;text-decoration:none;cursor:pointer}.portfolio-section .codex-model-actions .primary{flex-basis:100%;background:#fff;color:#11151d;border-color:#fff}
.portfolio-section .codex-model-card :is(a,button,summary):focus-visible{outline:3px solid currentColor;outline-offset:-3px}
.codex-coverflow{max-width:100%;width:100%;margin-top:18px}.codex-coverflow-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px;padding-inline:8px;color:var(--text-primary,#fff)}.codex-coverflow-heading small{font-size:10px;letter-spacing:2px;color:var(--text-secondary,#b9bfca)}.codex-coverflow-heading h3{font-size:clamp(23px,3vw,32px);letter-spacing:-.035em;margin:6px 0 0;line-height:1.2}.codex-coverflow-heading [data-carousel-position]{font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.portfolio-section .portfolio-grid.codex-carousel{position:relative;display:block;width:100%;max-width:100%;overflow:hidden;padding:10px 0 20px;perspective:1800px;scroll-snap-type:none;touch-action:pan-y;cursor:grab;isolation:isolate}
.portfolio-section .portfolio-grid.codex-carousel .codex-model-card{position:absolute;top:8px;left:50%;width:min(44%,460px);margin:0;flex:none;transform:translateX(calc(-50% + var(--card-offset)*60%)) rotateY(calc(var(--card-offset)*-12deg)) scale(.84)!important;transform-origin:center;transition:transform .38s cubic-bezier(.2,.7,.2,1),opacity .24s,border-color .2s;z-index:1;opacity:1}
.portfolio-section .portfolio-grid.codex-carousel .codex-model-card[data-distance="-2"],.portfolio-section .portfolio-grid.codex-carousel .codex-model-card[data-distance="2"]{transform:translateX(calc(-50% + var(--card-offset)*54%)) rotateY(calc(var(--card-offset)*-12deg)) scale(.7)!important;z-index:0;opacity:1}
.portfolio-section .portfolio-grid.codex-carousel .codex-model-card.is-current{transform:translateX(-50%)!important;z-index:3;opacity:1;border-color:#838b98;box-shadow:0 22px 44px #0003}
.portfolio-section .portfolio-grid.codex-carousel .codex-model-card:not([data-distance="0"]):not([data-distance="-1"]):not([data-distance="1"]):not([data-distance="-2"]):not([data-distance="2"]){display:none}
.portfolio-section .portfolio-grid.codex-carousel .codex-model-card:not(.is-current){cursor:pointer}.portfolio-section .portfolio-grid.codex-carousel .codex-model-card:not(.is-current) .project-content{pointer-events:none}
.codex-carousel-controls{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;margin:22px 0;color:var(--text-primary,#fff)}.codex-carousel-controls p{margin:0;text-align:center;max-width:460px;font-size:12px;line-height:1.5;color:var(--text-secondary,#b9bfca)}.codex-carousel-controls button{flex:none;min-height:44px;border:1px solid #697180;padding:10px 18px;border-radius:999px;background:transparent;color:inherit;font:600 12px/1.5 Inter,Arial,sans-serif;cursor:pointer}.codex-carousel-controls button:disabled{opacity:.4;cursor:default}.codex-carousel:focus-visible,.codex-carousel-controls button:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.codex-coverflow.is-empty .codex-carousel-controls{display:none}.codex-carousel .codex-showcase-empty{padding:24px!important}
.codex-coverflow .codex-carousel-controls{padding-inline:54px;box-sizing:border-box}
html[data-theme=light] .codex-model-type,html[data-theme=light] .codex-template-details,html[data-theme=light] .codex-template-price small{color:#d1d5dc}html[data-theme=light] .codex-template-price{color:#fff}
html[data-seasonal] :is(.codex-model-type,.codex-template-price,.codex-template-details,.codex-template-price small){color:var(--season-heroText)!important}
html[data-site-appearance]:not([data-seasonal]) .codex-model-card .project-overlay{background:var(--appearance-surface)!important;color:var(--appearance-ink)!important}html[data-site-appearance]:not([data-seasonal]) :is(.codex-model-type,.codex-template-price,.codex-template-details,.codex-template-price small){color:var(--appearance-ink)!important}
@media(max-width:900px){.portfolio-section .portfolio-grid.codex-carousel .codex-model-card{width:min(64%,460px)}}
@media(max-width:600px){.portfolio-section .portfolio-grid:not(.codex-carousel){grid-template-columns:1fr}.portfolio-section .portfolio-grid.codex-carousel .codex-model-card{width:calc(100% - 38px);max-width:420px}.portfolio-section .codex-model-card .project-overlay{padding:20px!important}.codex-carousel-controls{flex-wrap:wrap;gap:12px}.codex-carousel-controls p{order:3;flex-basis:100%;max-width:none}.codex-coverflow-heading{gap:10px}.codex-coverflow-heading small{font-size:9px}.codex-coverflow-heading h3{font-size:23px}}
@media(prefers-reduced-motion:reduce){.portfolio-section .portfolio-grid.codex-carousel .codex-model-card{transition:none!important;transform:translateX(calc(-50% + var(--card-offset)*60%)) scale(.84)!important}.portfolio-section .portfolio-grid.codex-carousel .codex-model-card.is-current{transform:translateX(-50%)!important}}
html[data-appearance-motion=reduced] .portfolio-section .portfolio-grid.codex-carousel .codex-model-card{transition:none!important}