/* Home page portfolio sections (1.17): photo index, film screen + list, Instagram grid. */

/* ---------- photography: category index ---------- */
.bk-index{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(40px,6vw,104px);align-items:start;margin-top:8px}
.bk-index-list{list-style:none;margin:0;padding:0;border-top:1px solid #242426}
.bk-index-list li{margin:0}
.bk-index-row{position:relative;display:grid;grid-template-columns:60px minmax(0,1fr) auto 26px;align-items:center;gap:20px;padding:30px 0 28px;border-bottom:1px solid #242426;color:#ece8e1;text-decoration:none;transition:color .4s ease}
.bk-index-row:after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:#bda884;transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.bk-index-no{align-self:start;padding-top:.9em;font:500 10px/1 'DM Sans',sans-serif;letter-spacing:.22em;color:#8b857a}
.bk-index-name{font:400 clamp(30px,3.6vw,56px)/1.02 Manrope,sans-serif;letter-spacing:-.05em;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.bk-index-meta{font:500 10px/1 'DM Sans',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#8b857a;white-space:nowrap}
.bk-index-arrow{display:flex;color:#d6bd93;opacity:0;transform:translateX(-10px);transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.bk-index-thumb{display:none}
.bk-index-list:hover .bk-index-row,.bk-index-list:focus-within .bk-index-row{color:#5f5c57}
.bk-index-list .bk-index-row:hover,.bk-index-list .bk-index-row:focus-visible{color:#f1ece4;outline:none}
.bk-index-row:hover:after,.bk-index-row:focus-visible:after{transform:scaleX(1)}
.bk-index-row:hover .bk-index-name,.bk-index-row:focus-visible .bk-index-name{transform:translateX(16px)}
.bk-index-row:hover .bk-index-arrow,.bk-index-row:focus-visible .bk-index-arrow{opacity:1;transform:none}
.bk-index-preview{position:sticky;top:120px;aspect-ratio:4/5;overflow:hidden;background:#131314}
.bk-index-cover{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.06);transition:opacity .7s ease,transform 1.6s cubic-bezier(.2,.7,.2,1)}
.bk-index-cover.is-on{opacity:1;transform:none}
.bk-index-cover img{display:block;width:100%;height:100%;object-fit:cover}
.bk-index-cover figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;gap:14px;align-items:baseline;padding:60px 22px 20px;background:linear-gradient(transparent,rgba(8,8,9,.72));font:500 10px/1 'DM Sans',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#efeae2}
.bk-index-cover figcaption span{color:#cdb48a}

/* ---------- film: screen + list ---------- */
.bk-reel{margin-top:8px}
.bk-reel-screen{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.bk-reel-screen>video,.bk-reel-screen>iframe,.bk-reel-screen>.bk-video-cover,.bk-reel-screen>.video-stage{position:absolute;inset:0;width:100%;height:100%;border:0;margin:0;padding:0;background:#000;object-fit:contain}
.bk-reel-screen>.video-stage iframe{width:100%;height:100%;border:0}
.bk-reel-screen .bk-video-cover{cursor:pointer}
.bk-reel-screen .bk-video-cover img{width:100%;height:100%;object-fit:cover;opacity:.88;transition:opacity .4s}
.bk-reel-screen .bk-video-cover:after{content:"";position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border:1px solid rgba(239,234,226,.7);border-radius:50%;background:rgba(10,10,11,.25) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='%23efeae2'/%3E%3C/svg%3E") center/30px no-repeat;backdrop-filter:blur(4px)}
.bk-reel-screen .bk-video-cover:hover img{opacity:1}
.bk-reel-screen.is-switching>*{animation:bk-reel-in .6s ease both}
@keyframes bk-reel-in{from{opacity:0}to{opacity:1}}
.bk-reel-now{display:flex;align-items:baseline;gap:22px;padding:24px 0 0}
.bk-reel-now-no{font:500 10px/1 'DM Sans',sans-serif;letter-spacing:.22em;color:#cdb48a}
.bk-reel-now-title{flex:1;min-width:0;margin:0;font:400 clamp(20px,2.1vw,30px)/1.2 Manrope,sans-serif;letter-spacing:-.035em}
.bk-reel-now-title a{color:#f1ece4;text-decoration:none}
.bk-reel-now-title a:hover{color:#e3c99c}
.bk-reel-count{font:500 10px/1 'DM Sans',sans-serif;letter-spacing:.22em;color:#8b857a;white-space:nowrap}
.bk-reel-list{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,5vw,72px);border-top:1px solid #2a2a2c}
.bk-reel-list li{margin:0;border-bottom:1px solid #2a2a2c}
.bk-reel-row{display:grid;grid-template-columns:46px minmax(0,1fr) 30px;align-items:center;gap:14px;width:100%;margin:0;padding:19px 0;border:0;background:none;color:#a9a49b;font:400 15px/1.35 'DM Sans',sans-serif;text-align:left;cursor:pointer;transition:color .3s ease}
.bk-reel-row:hover,.bk-reel-row:focus-visible{color:#f1ece4;outline:none}
.bk-reel-row[aria-current]{color:#e3c99c}
.bk-reel-no{font:500 10px/1 'DM Sans',sans-serif;letter-spacing:.22em;color:#77726a}
.bk-reel-row[aria-current] .bk-reel-no{color:#cdb48a}
.bk-reel-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.bk-reel-row:hover .bk-reel-title{transform:translateX(6px)}
.bk-reel-play{position:relative;justify-self:end;width:28px;height:28px;border:1px solid currentColor;border-radius:50%;opacity:.55;transition:opacity .3s,background .3s}
.bk-reel-play:after{content:"";position:absolute;left:11px;top:9px;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor}
.bk-reel-row:hover .bk-reel-play,.bk-reel-row[aria-current] .bk-reel-play{opacity:1}
.bk-reel-row[aria-current] .bk-reel-play{background:rgba(227,201,156,.12)}
.bk-reel-row.is-playing .bk-reel-play:after{left:9px;top:8px;width:3px;height:10px;border-style:solid;border-width:0 3px;border-color:currentColor;box-sizing:content-box}

/* ---------- instagram: cover grid ---------- */
.bk-ig{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:48px}
.bk-ig-tile{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:#131314;color:#f1ece4;text-decoration:none}
.bk-ig-tile:first-child{grid-column:span 2;grid-row:span 2}
/* The large first tile only when the rest fills whole rows (5 or 9 posts); otherwise an even grid. */
.bk-ig:not([data-count="5"]):not([data-count="9"]) .bk-ig-tile:first-child{grid-column:auto;grid-row:auto}
.bk-ig[data-count="1"]{grid-template-columns:minmax(0,1fr);max-width:640px}.bk-ig[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}.bk-ig[data-count="3"],.bk-ig[data-count="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.bk-ig-tile img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.001);transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter .6s ease}
.bk-ig-over{position:absolute;inset:auto 0 0 0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:4px 12px;padding:48px 18px 16px;background:linear-gradient(transparent,rgba(8,8,9,.78));opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.bk-ig-kind{grid-column:1;font:500 9px/1 'DM Sans',sans-serif;letter-spacing:.22em;color:#cdb48a}
.bk-ig-title{grid-column:1;font:400 14px/1.3 'DM Sans',sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-ig-tile:first-child .bk-ig-title{font:400 clamp(18px,1.8vw,24px)/1.2 Manrope,sans-serif;letter-spacing:-.03em}
.bk-ig-open{grid-column:2;grid-row:1/span 2;display:flex;color:#e3c99c}
.bk-ig-tile:hover img,.bk-ig-tile:focus-visible img{transform:scale(1.045)}
.bk-ig-tile:hover .bk-ig-over,.bk-ig-tile:focus-visible .bk-ig-over{opacity:1;transform:none}
.bk-ig-tile.bk-ig-embed{aspect-ratio:auto;grid-column:auto;grid-row:auto;background:none}
.bk-ig-embed .instagram-media{min-width:0!important;width:100%!important;max-width:100%!important;margin:0!important}
@media(hover:none){.bk-ig-over{opacity:1;transform:none}}
.bk-ig.has-embeds{display:flex;align-items:flex-start;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;scrollbar-width:thin;scrollbar-color:#75664d transparent}
.bk-ig.has-embeds .bk-ig-tile{flex:0 0 min(340px,82vw);scroll-snap-align:start}
.bk-ig.has-embeds .bk-ig-tile:not(.bk-ig-embed){aspect-ratio:4/5}

/* ---------- small screens ---------- */
@media(max-width:900px){
 .bk-index{display:block}
 .bk-index-preview{display:none}
 .bk-index-row{grid-template-columns:72px minmax(0,1fr) 22px;grid-template-areas:"thumb name arrow" "thumb meta arrow";gap:6px 18px;padding:16px 0}
 .bk-index-no{display:none}
 .bk-index-thumb{grid-area:thumb;display:block;width:72px;aspect-ratio:4/5;overflow:hidden;background:#131314}
 .bk-index-thumb img{display:block;width:100%;height:100%;object-fit:cover}
 .bk-index-name{grid-area:name;align-self:end;font-size:clamp(24px,6.6vw,34px)}
 .bk-index-meta{grid-area:meta;align-self:start}
 .bk-index-arrow{grid-area:arrow;opacity:1;transform:none}
 .bk-index-list:hover .bk-index-row{color:#ece8e1}
 .bk-index-row:hover .bk-index-name{transform:none}
 .bk-reel-screen.is-portrait{aspect-ratio:4/5}
 .bk-reel-now{flex-wrap:wrap;gap:10px 16px}
 .bk-reel-now-title{flex-basis:100%;order:3}
 .bk-reel-list{grid-template-columns:1fr;margin-top:28px}
 .bk-reel-row{grid-template-columns:34px minmax(0,1fr) 30px;padding:16px 0;font-size:14px}
 .bk-reel-title{white-space:normal}
 .bk-ig{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:32px}
 .bk-ig[data-count]{grid-template-columns:repeat(2,minmax(0,1fr))}
 .bk-ig.has-embeds{gap:10px}
 .bk-ig .bk-ig-tile:first-child{grid-column:auto;grid-row:auto}
 .bk-ig[data-count="1"] .bk-ig-tile:first-child,.bk-ig[data-count="3"] .bk-ig-tile:first-child,.bk-ig[data-count="5"] .bk-ig-tile:first-child,.bk-ig[data-count="7"] .bk-ig-tile:first-child,.bk-ig[data-count="9"] .bk-ig-tile:first-child{grid-column:span 2}
}
@media(prefers-reduced-motion:reduce){.bk-index-cover,.bk-index-name,.bk-ig-tile img,.bk-reel-title{transition:none}}
