/* KENT BUILD / PORTFOLIO 2026 — scoped to Projects page only */
:root { --kbp-ink:#0b0c0d; --kbp-paper:#f2efe9; --kbp-gold:#d6ad5b; --kbp-muted:#bcb8b0; }
.kbp-portfolio { background:var(--kbp-ink); color:var(--kbp-paper); font-family:inherit; overflow:hidden; }
.kbp-portfolio * { box-sizing:border-box; }
.kbp-portfolio button { font:inherit; }
.kbp-portfolio h1,.kbp-portfolio h2 { font-family:Georgia,'Times New Roman',serif; font-weight:400; color:var(--kbp-paper); line-height:1.07; letter-spacing:-.045em; }
.kbp-portfolio h1 em,.kbp-portfolio h2 em { color:var(--kbp-gold); font-weight:400; }
.kbp-kicker { color:var(--kbp-gold); font:700 11px/1.4 Arial,sans-serif; letter-spacing:.24em; text-transform:uppercase; }
.kbp-intro { min-height:700px; max-width:1600px; margin:auto; display:grid; grid-template-columns:minmax(390px,.83fr) minmax(500px,1.17fr); align-items:center; gap:min(6vw,90px); padding:clamp(54px,6.3vw,110px) clamp(24px,6vw,100px) 102px; }
.kbp-breadcrumb { color:#aaa59c; font:600 12px Arial,sans-serif; margin-bottom:68px; }
.kbp-breadcrumb a { color:#aaa59c; text-decoration:none; }
.kbp-breadcrumb span { padding:0 11px; color:var(--kbp-gold); }
.kbp-kicker-line { display:inline-block; width:41px; height:1px; background:var(--kbp-gold); margin:0 0 4px 15px; opacity:.85; }
.kbp-intro h1 { font-size:clamp(56px,5.35vw,94px); margin:20px 0 26px; }
.kbp-intro-copy > p { color:#c8c5c0; max-width:480px; font:400 clamp(17px,1.35vw,20px)/1.75 Arial,sans-serif; margin:0 0 34px; }
.kbp-text-link { color:#eee7db; text-decoration:none; font:700 12px Arial,sans-serif; text-transform:uppercase; letter-spacing:.16em; display:inline-flex; gap:22px; align-items:center; border-bottom:1px solid #8d764d; padding-bottom:12px; }
.kbp-text-link span { color:var(--kbp-gold); font-size:18px; }
.kbp-intro-stats { display:flex; gap:clamp(19px,3vw,46px); padding-top:72px; }
.kbp-intro-stats span { display:flex; flex-direction:column; gap:6px; }
.kbp-intro-stats strong { color:var(--kbp-paper); font:400 39px Georgia,serif; }
.kbp-intro-stats small { color:#ada79b; font:600 10px Arial,sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.kbp-intro-art { min-height:600px; height:min(58vw,690px); max-height:690px; position:relative; }
.kbp-intro-art img { width:100%; height:100%; object-fit:cover; display:block; }
.kbp-intro-main { position:absolute; top:0; left:0; width:76%; height:76%; overflow:hidden; }
.kbp-intro-secondary { position:absolute; right:0; bottom:0; width:49%; height:50%; border:8px solid var(--kbp-ink); overflow:hidden; }
.kbp-intro-small { position:absolute; left:0; bottom:0; width:34%; height:25%; border-top:8px solid var(--kbp-ink); overflow:hidden; }
.kbp-intro-art > div:not(.kbp-art-line) img { filter:saturate(.88); transition:transform .8s ease; }
.kbp-intro-art > div:hover img { transform:scale(1.045); }
.kbp-art-label { position:absolute; bottom:0; left:0; right:0; padding:30px 16px 14px; color:white; background:linear-gradient(transparent,rgba(0,0,0,.76)); text-transform:uppercase; letter-spacing:.17em; font:700 10px Arial,sans-serif; }
.kbp-art-line { position:absolute; top:4%; right:3%; width:22%; height:31%; border-top:1px solid var(--kbp-gold); border-right:1px solid var(--kbp-gold); pointer-events:none; }
.kbp-ticker { background:#161615; border-block:1px solid rgba(214,173,91,.23); display:flex; justify-content:center; gap:clamp(25px,5vw,85px); align-items:center; padding:19px; color:#c9c4b9; letter-spacing:.23em; font:700 10px Arial,sans-serif; }
.kbp-ticker-mark { color:var(--kbp-gold); font-size:17px; }
.kbp-collections,.kbp-film-section { max-width:1540px; margin:0 auto; padding:clamp(85px,9vw,140px) clamp(24px,6vw,96px) 15px; }
.kbp-section-head { display:flex; justify-content:space-between; align-items:end; gap:35px; margin-bottom:46px; }
.kbp-section-head h2 { font-size:clamp(38px,4.4vw,72px); max-width:740px; margin:16px 0 0; }
.kbp-section-head p { max-width:305px; font:400 15px/1.75 Arial,sans-serif; color:#b6b3ad; margin:0 0 5px; }
.kbp-category-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:18px; }
.kbp-category { position:relative; grid-column:span 4; height:400px; overflow:hidden; border:0; background:#242322; display:block; color:#fff; cursor:pointer; padding:0; text-align:left; isolation:isolate; }
.kbp-category:nth-child(1),.kbp-category:nth-child(4) { grid-column:span 7; height:490px; }
.kbp-category:nth-child(2),.kbp-category:nth-child(3) { grid-column:span 5; height:490px; }
.kbp-category:nth-child(5),.kbp-category:nth-child(6) { grid-column:span 6; height:450px; }
.kbp-category-media,.kbp-category-media img,.kbp-category-shade { position:absolute; inset:0; width:100%; height:100%; display:block; }
.kbp-category-media img { object-fit:cover; transition:transform .85s cubic-bezier(.18,.6,.22,1); }
.kbp-category-shade { background:linear-gradient(180deg,rgba(0,0,0,.06) 24%,rgba(0,0,0,.79) 100%); z-index:1; }
.kbp-category:hover .kbp-category-media img,.kbp-category:focus-visible .kbp-category-media img { transform:scale(1.07); }
.kbp-category:focus-visible { outline:3px solid var(--kbp-gold); outline-offset:3px; }
.kbp-category-copy { position:absolute; inset:auto 0 0; display:flex; flex-direction:column; z-index:2; padding:clamp(22px,3vw,42px); }
.kbp-number { font:700 11px Arial,sans-serif; letter-spacing:.2em; color:var(--kbp-gold); margin-bottom:18px; }
.kbp-category-title { font:400 clamp(29px,2.75vw,46px)/1.07 Georgia,serif; max-width:390px; letter-spacing:-.035em; }
.kbp-category-tag { color:#ddd9d4; margin:11px 0 19px; font:400 13px/1.4 Arial,sans-serif; }
.kbp-category-link { display:flex; justify-content:space-between; align-items:center; border-top:1px solid rgba(255,255,255,.38); padding-top:17px; font:700 11px Arial,sans-serif; text-transform:uppercase; letter-spacing:.13em; }
.kbp-category-link span { color:var(--kbp-gold); font-size:20px; }
.kbp-film-section { padding-top:110px; padding-bottom:115px; }
.kbp-films-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.kbp-film-card { text-align:left; display:flex; flex-direction:column; width:100%; padding:0; border:0; background:#161717; color:#fff; cursor:pointer; }
.kbp-film-image { width:100%; display:block; height:320px; position:relative; overflow:hidden; background:linear-gradient(145deg,#262525,#101010); }
.kbp-film-image img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 46%; filter:brightness(.9); transition:transform .65s ease,filter .3s; }
.kbp-film-card:hover .kbp-film-image img,.kbp-film-card:focus-visible .kbp-film-image img { transform:scale(1.055); filter:brightness(1.06); }
.kbp-film-card:focus-visible { outline:2px solid var(--kbp-gold); outline-offset:3px; }
.kbp-film-image:after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.48)); pointer-events:none; }
.kbp-film-play { width:56px; height:56px; border:1px solid rgba(255,255,255,.82); border-radius:50%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; color:#fff; font-size:18px; padding-left:3px; z-index:1; background:rgba(0,0,0,.30); transition:background .2s; }
.kbp-film-card:hover .kbp-film-play { background:rgba(214,173,91,.46); }
.kbp-film-duration { position:absolute; bottom:14px; right:15px; z-index:2; background:rgba(0,0,0,.67); padding:4px 9px; color:white; font:700 11px Arial,sans-serif; }
.kbp-film-copy { display:flex; flex-direction:column; padding:19px 20px 22px; gap:7px; }
.kbp-film-copy strong { font:400 23px Georgia,serif; }
.kbp-film-copy small { color:#aaa6a0; font:400 13px/1.5 Arial,sans-serif; }
.kbp-films-more { margin-top:20px; }
.kbp-films-more[hidden] { display:none!important; }
.kbp-outline-button { display:inline-flex; align-items:center; justify-content:center; gap:23px; margin-top:34px; border:1px solid #a78a56; border-radius:0; padding:15px 26px; background:transparent; color:#e8dcc5; cursor:pointer; font:700 12px Arial,sans-serif; letter-spacing:.09em; text-transform:uppercase; transition:background .2s; }
.kbp-outline-button:hover { background:rgba(214,173,91,.11); }
.kbp-footnote { color:#8b8984; font:400 12px/1.5 Arial,sans-serif; margin:20px 0 0; }
.kbp-end-note { border-top:1px solid rgba(214,173,91,.25); background:#151616; padding:clamp(65px,7vw,120px) max(24px,calc((100vw - 1320px)/2)); display:grid; grid-template-columns:1fr 340px; gap:40px; }
.kbp-end-note h2 { font-size:clamp(43px,5vw,80px); margin:19px 0 0; }
.kbp-end-note p { color:#c4c0b8; font:400 16px/1.7 Arial,sans-serif; }
.kbp-primary-button { background:#e6b746; color:#0b0b0b; text-decoration:none; margin-top:18px; padding:16px 23px; font:800 13px Arial,sans-serif; display:inline-flex; gap:22px; align-items:center; justify-content:center; }
/* Collection overlay: a curated entrance with every archival image still available */
.kbp-collection-overlay { position:fixed; inset:0; z-index:10050; background:#0b0c0d; color:#eeeae4; display:none; }
.kbp-collection-overlay.is-open { display:block; }
.kbp-collection-shell { height:100%; display:flex; flex-direction:column; }
.kbp-collection-top { flex:none; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #31302d; padding:15px clamp(18px,5vw,70px); background:#111211; }
.kbp-collection-brand,.kbp-viewer-brand { font:700 11px Arial,sans-serif; letter-spacing:.18em; color:#d6ad5b; }
.kbp-close,.kbp-viewer-close { background:transparent; border:0; color:#eee9e1; cursor:pointer; font:700 13px Arial,sans-serif; padding:11px 0 11px 17px; }
.kbp-close span { margin-left:15px; font-size:26px; vertical-align:middle; font-weight:400; }
.kbp-collection-content { overflow-y:auto; flex:1; padding:clamp(25px,6vw,78px) clamp(18px,6vw,95px) 90px; scrollbar-color:#7e6950 #121212; }
.kbp-collection-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin:0 0 40px; }
.kbp-collection-heading h2 { margin:13px 0 10px; max-width:800px; font:400 clamp(37px,4.3vw,75px)/1.06 Georgia,serif; letter-spacing:-.04em; color:#fff; }
.kbp-collection-heading p { color:#b8b3aa; font:400 16px/1.6 Arial,sans-serif; margin:0; }
.kbp-collection-count { color:#d6ad5b; font:700 11px Arial,sans-serif; white-space:nowrap; letter-spacing:.11em; }
.kbp-collection-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:15px; max-width:1550px; }
.kbp-media-tile { grid-column:span 4; height:300px; position:relative; background:#252524; border:0; padding:0; cursor:pointer; display:block; overflow:hidden; text-align:left; }
.kbp-collection-grid:not(.kbp-archive-grid) .kbp-media-tile:nth-child(1) { grid-column:span 8; height:520px; }
.kbp-collection-grid:not(.kbp-archive-grid) .kbp-media-tile:nth-child(2) { grid-column:span 4; height:520px; }
.kbp-collection-grid:not(.kbp-archive-grid) .kbp-media-tile:nth-child(3),.kbp-collection-grid:not(.kbp-archive-grid) .kbp-media-tile:nth-child(4) { grid-column:span 6; height:390px; }
.kbp-media-tile img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .6s ease; }
.kbp-media-tile:hover img { transform:scale(1.045); }
.kbp-media-tile:focus-visible { outline:3px solid #d6ad5b; outline-offset:3px; }
.kbp-media-tile.is-film:after { content:'WATCH SITE FOOTAGE'; position:absolute; bottom:0; left:0; right:0; padding:55px 15px 15px; background:linear-gradient(transparent,rgba(0,0,0,.75)); color:white; font:700 11px Arial,sans-serif; letter-spacing:.12em; }
.kbp-media-tile.is-film:before { content:'▶'; position:absolute; top:50%; left:50%; z-index:1; transform:translate(-50%,-50%); border:1px solid #fff; border-radius:50%; width:55px; height:55px; display:grid; place-items:center; color:#fff; background:rgba(0,0,0,.3); }
.kbp-archive-actions { display:flex; align-items:center; flex-wrap:wrap; gap:24px; margin:10px 0 35px; }
.kbp-archive-actions span { font:400 13px Arial,sans-serif; color:#b5afa6; }
.kbp-archive-grid[hidden] { display:none!important; }
.kbp-archive-grid { border-top:1px solid rgba(214,173,91,.22); padding-top:25px; }
.kbp-archive-grid .kbp-media-tile { grid-column:span 3; height:245px; }
/* Full-size, contained lightbox: photographs never stretched or cropped. */
.kbp-viewer { display:none; position:fixed; inset:0; z-index:10100; background:rgba(6,7,8,.985); color:#fff; flex-direction:column; }
.kbp-viewer.is-open { display:flex; }
.kbp-viewer-top { padding:13px clamp(16px,3vw,45px); border-bottom:1px solid #252526; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.kbp-viewer-tools { display:flex; gap:25px; align-items:center; }
.kbp-viewer-tools #kbpViewerCount { color:#b7b0a3; font:700 12px Arial,sans-serif; }
.kbp-viewer-center { display:grid; grid-template-columns:64px minmax(0,1fr) 64px; flex:1; min-height:0; align-items:center; width:100%; }
.kbp-viewer-stage { width:100%; height:100%; display:flex; align-items:center; justify-content:center; min-width:0; min-height:0; padding:12px; overflow:hidden; }
.kbp-viewer-stage img,.kbp-viewer-stage video { display:block; max-width:100%; max-height:100%; object-fit:contain; box-shadow:0 10px 35px #0008; }
.kbp-viewer-stage video { max-height:min(76vh,800px); background:#000; }
.kbp-viewer-arrow { border:0; background:transparent; color:#eee; cursor:pointer; font:300 54px Georgia,serif; height:100%; max-height:200px; }
.kbp-viewer-arrow:hover { color:var(--kbp-gold); }
.kbp-viewer-bottom { border-top:1px solid #252526; text-align:center; padding:10px 14px 13px; }
#kbpViewerCaption { font:400 12px Arial,sans-serif; color:#c5bfb6; margin:0 0 9px; }
.kbp-viewer-thumbs { display:flex; justify-content:center; gap:7px; max-width:100%; overflow:hidden; }
.kbp-viewer-thumbs button { border:1px solid transparent; padding:0; background:#141414; width:57px; height:45px; flex:none; cursor:pointer; opacity:.55; }
.kbp-viewer-thumbs button.is-active { border-color:var(--kbp-gold); opacity:1; }
.kbp-viewer-thumbs img { width:100%; height:100%; object-fit:cover; }
html.kbp-modal-open { overflow:hidden; }
@media(max-width:1100px) {
.kbp-intro { grid-template-columns:1fr 1fr; gap:35px; }
.kbp-intro-art { min-height:490px; height:53vw; }
.kbp-breadcrumb { margin-bottom:40px; }
.kbp-category:nth-child(n) { height:430px; }
.kbp-collection-content { padding-inline:35px; }
}
@media(max-width:800px) {
.kbp-intro { grid-template-columns:1fr; padding-top:45px; gap:45px; }
.kbp-intro h1 { font-size:clamp(52px,10vw,76px); }
.kbp-intro-art { height:68vw; min-height:380px; max-height:580px; }
.kbp-intro-stats { padding-top:35px; }
.kbp-ticker { gap:14px; font-size:9px; letter-spacing:.13em; }
.kbp-section-head { align-items:start; flex-direction:column; gap:14px; }
.kbp-section-head p { max-width:540px; }
.kbp-category:nth-child(n) { grid-column:span 6; height:400px; }
.kbp-films-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.kbp-end-note { grid-template-columns:1fr; }
.kbp-archive-grid .kbp-media-tile { grid-column:span 4; }
}
@media(max-width:600px) {
.kbp-intro { padding-inline:21px; padding-bottom:64px; }
.kbp-breadcrumb { margin-bottom:30px; }
.kbp-intro-copy > p { font-size:16px; }
.kbp-intro-art { min-height:320px; height:86vw; }
.kbp-intro-main { width:82%; height:82%; }
.kbp-intro-secondary { width:49%; height:47%; border-width:5px; }
.kbp-intro-small { width:38%; height:20%; border-top-width:5px; }
.kbp-art-label { font-size:8px; padding:24px 9px 9px; }
.kbp-intro-stats strong { font-size:30px; }
.kbp-intro-stats small { font-size:9px; }
.kbp-ticker span:nth-child(n+4) { display:none; }
.kbp-collections,.kbp-film-section { padding-inline:19px; padding-top:75px; }
.kbp-category-grid { gap:13px; }
.kbp-category:nth-child(n) { grid-column:span 12; height:400px; }
.kbp-category-copy { padding:25px; }
.kbp-category-title { font-size:38px; }
.kbp-films-grid { gap:13px; }
.kbp-film-image { height:245px; }
.kbp-film-copy { padding:14px 13px 17px; }
.kbp-film-copy strong { font-size:20px; }
.kbp-film-copy small { font-size:12px; }
.kbp-film-play { width:43px; height:43px; }
.kbp-end-note { padding-inline:23px; }
.kbp-collection-top { padding-inline:18px; }
.kbp-collection-heading { flex-direction:column; align-items:start; }
.kbp-collection-content { padding:26px 15px 65px; }
.kbp-collection-grid { gap:10px; }
.kbp-collection-grid:not(.kbp-archive-grid) .kbp-media-tile:nth-child(n),.kbp-media-tile { grid-column:span 6; height:215px; }
.kbp-collection-grid:not(.kbp-archive-grid) .kbp-media-tile:nth-child(1) { grid-column:span 12; height:320px; }
.kbp-archive-grid .kbp-media-tile { grid-column:span 6; height:190px; }
.kbp-viewer-center { grid-template-columns:36px minmax(0,1fr) 36px; }
.kbp-viewer-arrow { font-size:40px; }
.kbp-viewer-brand,.kbp-collection-brand { font-size:9px; }
.kbp-viewer-tools { gap:9px; }
.kbp-viewer-tools #kbpViewerCount { font-size:10px; }
.kbp-viewer-thumbs button { width:38px; height:35px; }
}
@media(prefers-reduced-motion:reduce) {
.kbp-intro-art img,.kbp-category-media img,.kbp-film-image img,.kbp-media-tile img { transition:none!important; }
}
/* Respect the hidden attribute even when buttons use flex display. */
.kbp-portfolio [hidden], .kbp-collection-overlay [hidden] { display:none!important; }
