body[data-overview] .layout-intro{padding-top:24px;padding-bottom:20px}
.overview-controls{max-width:1600px;margin:auto;padding:0 40px 24px;font-family:"Inter Display",Arial,sans-serif}
.overview-toolbar{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:16px 0;border-top:1px solid #e5e5e5}
.overview-toolbar>span{font-size:10px;letter-spacing:.1em;color:#777;white-space:nowrap}
.overview-tabs{display:flex;gap:6px;flex-wrap:wrap}
.overview-tabs button{font-family:inherit;font-size:12px!important;font-weight:400!important;padding:11px 15px;border:1px solid #dedede;border-radius:6px;background:#fff;color:#555;cursor:pointer;transition:background .2s,color .2s}
.overview-tabs button[aria-selected=true]{background:#191919;color:#fff;border-color:#191919}
.overview-tabs button:hover{border-color:#ff2b16}
.overview-tabs button:focus-visible,.overview-link:focus-visible{outline:2px solid #ff2b16;outline-offset:5px}
.overview-hint{font-size:12px!important;line-height:1.5!important;color:#777;margin:0}
body[data-overview] #portfolio-layout[hidden],body[data-overview] #project-overview[hidden]{display:none!important}
#project-overview{max-width:1600px;margin:auto;padding:0 40px 64px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 20px;font-family:"Inter Display",Arial,sans-serif}
.overview-card{min-width:0}
.overview-link{display:block;color:#191919;text-decoration:none}
.overview-images{display:grid;grid-template-columns:1fr;gap:6px;overflow:hidden;border-radius:12px}
.overview-main,.overview-bts{position:relative;aspect-ratio:16/9;background:#171717;overflow:hidden}
.overview-images img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.16,1,.3,1),filter .4s;filter:saturate(.85)}
.overview-film,.overview-bts>span{position:absolute;bottom:12px;left:12px;background:#111a;color:white;padding:6px 9px;border:1px solid #ffffff38;border-radius:4px;font-size:10px;backdrop-filter:blur(8px)}
.overview-bts{display:none}
.overview-caption{display:grid;grid-template-columns:20px minmax(0,1fr) 20px;gap:10px;align-items:start;padding:14px 0 0}
.overview-number{font-size:10px;color:#999;padding-top:5px}
#project-overview .overview-caption h2{font-size:17px!important;line-height:1.25!important;font-weight:500!important;letter-spacing:-.025em!important;margin:0;text-wrap:pretty}
#project-overview .overview-caption p{font-size:11px!important;line-height:1.5!important;color:#737373;margin:7px 0 0;font-weight:400!important}
.overview-arrow{color:#ff2b16;font-size:20px;line-height:1}
@media(hover:hover){.overview-link:hover img{transform:scale(1.035);filter:saturate(1)}.overview-link:hover h2{color:#e72b18}}
body[data-overview=dense] #project-overview{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 16px}
body[data-overview=dense] #project-overview h2{font-size:15px!important}
body[data-overview=pairs] #project-overview{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
body[data-overview=pairs] .overview-images{grid-template-columns:1.3fr 1fr}
body[data-overview=pairs] .overview-main,body[data-overview=pairs] .overview-bts{aspect-ratio:4/3}
body[data-overview=pairs] .overview-bts{display:block}
@media(max-width:1050px){.overview-toolbar{align-items:flex-start;flex-direction:column;gap:12px}body[data-overview=dense] #project-overview{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:750px){.overview-controls{padding:0 20px 20px}#project-overview,body[data-overview=dense] #project-overview{padding:0 20px 40px;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px}body[data-overview=pairs] #project-overview{grid-template-columns:1fr}.overview-tabs{display:grid;grid-template-columns:1fr 1fr;width:100%}.overview-tabs button{text-align:left;padding:12px 10px;font-size:11px!important}.overview-caption{grid-template-columns:minmax(0,1fr) 16px;gap:7px}.overview-number{display:none}#project-overview .overview-caption h2{font-size:14px!important}#project-overview .overview-caption p{font-size:10px!important}.overview-film{font-size:9px;left:7px;bottom:7px;padding:4px 6px}.overview-images{border-radius:8px}}
@media(prefers-reduced-motion:reduce){.overview-images img{transition:none}}
body[data-overview=pairs] .overview-bts{aspect-ratio:auto;height:100%}

/* Selected layout: clean image pairs and one clear project action. */
body[data-overview=pairs] .overview-caption{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:16px}
body[data-overview=pairs] #project-overview .overview-caption h2{font-size:18px!important;min-width:0}
.overview-project-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;flex:none;min-height:42px;padding:0 15px;border:1px solid #d8d8d8;border-radius:999px;font-size:12px;color:#191919;background:#fff;text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.overview-project-button span{color:#ff2b16;font-size:17px}
.overview-project-button:hover{background:#191919;border-color:#191919;color:#fff}
.overview-project-button:focus-visible{outline:2px solid #ff2b16;outline-offset:4px}
@media(max-width:750px){body[data-overview=pairs] .overview-caption{gap:12px}body[data-overview=pairs] #project-overview .overview-caption h2{font-size:16px!important}.overview-project-button{font-size:11px;padding:0 12px;gap:8px;min-height:40px}}
@media(max-width:360px){body[data-overview=pairs] .overview-caption{align-items:flex-start;flex-direction:column}}
/* Project color story: a photographic tint, matching palette, and accessible CTA. */
body[data-overview=pairs] .overview-bts{isolation:isolate;background:var(--project-dark)}
body[data-overview=pairs] .overview-bts img{filter:grayscale(.75) contrast(1.05);opacity:.92}
body[data-overview=pairs] .overview-bts::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,var(--project-highlight) 0%,var(--project-accent) 48%,var(--project-dark) 100%);mix-blend-mode:color;opacity:.72}
body[data-overview=pairs] .overview-bts::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(150deg,transparent 20%,var(--project-accent) 100%);opacity:.18}
.overview-palette{display:flex;gap:18px;align-items:center;padding:13px 0 0;flex-wrap:wrap}
.overview-color{display:inline-flex;align-items:center;gap:6px}
.overview-color i{display:block;width:11px;height:11px;border-radius:2px;border:1px solid #0000000d}
.overview-color code{font:400 9px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.025em;color:#737373}
body[data-overview=pairs] .overview-project-button{background:var(--project-accent);border-color:var(--project-accent);color:var(--project-ink)}
body[data-overview=pairs] .overview-project-button span{color:inherit}
@media(hover:hover){body[data-overview=pairs] .overview-project-button:hover{filter:brightness(1.1);box-shadow:0 3px 12px #00000016}body[data-overview=pairs] .overview-link:hover .overview-bts img{filter:grayscale(.75) contrast(1.05)}}
@media(max-width:750px){.overview-palette{gap:8px 13px;padding-top:11px}.overview-color{gap:5px}.overview-color code{font-size:8px}.overview-color i{width:9px;height:9px}}
body[data-overview=pairs] .overview-bts img{filter:grayscale(1) contrast(.85) brightness(1.08);opacity:.9}
body[data-overview=pairs] .overview-bts::after{background:linear-gradient(135deg,var(--project-accent) 10%,var(--project-dark) 100%);opacity:1}
body[data-overview=pairs] .overview-bts::before{background:var(--project-accent);opacity:.28}
#project-overview .overview-role{font:inherit!important;color:#777;font-weight:400!important}
@media(hover:hover){body[data-overview=pairs] .overview-link:hover .overview-bts img{filter:grayscale(1) contrast(.85) brightness(1.08)}}
/* Favor the prominent bright thumbnail color over its shadows. */
body[data-overview=pairs] .overview-bts::after{background:var(--project-accent);opacity:1}
body[data-overview=pairs] .overview-bts::before{background:var(--project-accent);opacity:.45}
body[data-overview=pairs] .overview-bts img{filter:grayscale(1) contrast(.8) brightness(1.2);opacity:1}
@media(hover:hover){body[data-overview=pairs] .overview-link:hover .overview-bts img{filter:grayscale(1) contrast(.8) brightness(1.2)}}

body[data-overview=pairs] .overview-images{aspect-ratio:2.35;grid-template-rows:minmax(0,1fr)}body[data-overview=pairs] .overview-main,body[data-overview=pairs] .overview-bts{height:100%;min-height:0;aspect-ratio:auto!important}body[data-overview=pairs] .overview-images img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}