.kp-spot:not(.kp-ok),.kp-spot:not(.kp-ok)+.tao1-photo-credit,[data-kp-box]:not(.kp-on),.kp-pool{display:none!important}
.kp-has{overflow:hidden}
.kp-cover,.kp-has>img.kp-cover{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;object-fit:cover;z-index:1;border-radius:inherit;transform:none}
.kp-has>.tao1-photo-credit{display:none}
.kp-credits{margin:10px 0 0;font:12px/1.4 system-ui,sans-serif;opacity:.75}
.kp-credits a,.kp-hcr a{color:inherit}
.kp-hcr{position:relative;z-index:3;margin:14px 0 0;font:12px/1.4 system-ui,sans-serif;opacity:.8}
.kp-heroimg .kp-cover{opacity:.42}
.kp-heroimg>:not(.kp-cover){opacity:.35}
/* behind a drawn panel (the app phone stage, a hero art box) */
.kp-fill.kp-ok,.kp-stage.kp-ok{position:absolute!important;inset:0;width:100%;height:100%;object-fit:cover;z-index:0!important;margin:0!important;border-radius:inherit}
:has(>.kp-fill.kp-ok),:has(>.kp-stage.kp-ok){overflow:hidden}
:has(>.kp-fill.kp-ok)::after,:has(>.kp-fill.kp-ok)>i,:has(>.kp-stage.kp-ok)>i,:has(>.kp-stage.kp-ok)::before,:has(>.kp-stage.kp-ok)::after{display:none!important}
:has(>.kp-stage.kp-ok)>:not(.kp-stage):not(.tao1-photo-credit){position:relative;z-index:1}
.kp-fill.kp-ok+.tao1-photo-credit,.kp-stage.kp-ok+.tao1-photo-credit{position:absolute!important;left:8px;bottom:8px;z-index:2;margin:0!important;padding:2px 7px;border-radius:5px;background:rgba(0,0,0,.62);color:#fff!important;opacity:1!important}
/* a lifestyle band (app landing) */
.kp-band{margin-block:8px 0}
.kp-band .kp-spot{display:block;width:100%;aspect-ratio:21/8;object-fit:cover;border-radius:var(--r-card,16px)}
@media (max-width:600px){.kp-band .kp-spot{aspect-ratio:4/3}}
/* project covers above a table (developer portfolio) */
.kp-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px;margin:0 0 18px}
.kp-tile{margin:0}
.kp-tile .kp-spot{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-card,10px)}
/* an owner's portrait (never a stock face): shown in place of the monogram only when the page owner adds one */
.kp-portrait.kp-ok{width:132px;height:132px;border-radius:50%;object-fit:cover}
.kp-portrait.kp-ok+.avatar{display:none}
@media (max-width:480px){.kp-portrait.kp-ok{width:96px;height:96px}}
/* a drawn hero / tile that a photo REPLACES (data-kp-solo): once the photo loads, the box shows only the photo (in flow, 16:13 unless a layout sets its own ratio; an in-place kp-fill keeps the box size), never the art beside it */
[data-kp-solo]:has(>.kp-fill.kp-ok)>:not(.kp-fill):not(.tao1-photo-credit){visibility:hidden}
[data-kp-solo].kp-has>:not(.kp-cover){display:none!important}
[data-kp-solo].kp-has>img.kp-cover{position:relative;display:block;inset:auto;height:auto}
:where([data-kp-solo].kp-has)>img{aspect-ratio:16/13}
[data-kp-solo].kp-has{border-radius:var(--r-card,16px)}
/* a caption that sits on a covered card stays readable above the photo */
.kp-has>.meta{z-index:2;padding:2px 7px;border-radius:5px;background:rgba(0,0,0,.62);color:#fff}
/* a collection tile's drawn icon grows into a photo band when its photo loads (kp-art: the store kits' tile art wrapper) */
.kp-art{display:block;position:relative}
.kp-art.kp-has{width:100%;aspect-ratio:4/3;border-radius:var(--r,10px)}
.kp-art.kp-has>svg{visibility:hidden}
@media (max-width:600px){.kp-art.kp-has{aspect-ratio:16/10}}
/* a portfolio project card's cover band (kp-proj): the title's initials on a tinted block until its photo loads */
.kp-proj{display:grid;place-items:center;aspect-ratio:16/9;margin:-2px 0 6px;border-radius:var(--r,10px);background:linear-gradient(135deg,var(--sunk,#ece8e1),var(--line,#d9d3c7));color:var(--ink-2,#555);font:700 clamp(1.4rem,3vw,2.2rem)/1 var(--serif,Georgia,serif);letter-spacing:.06em;overflow:hidden}
.kp-proj.kp-has{color:transparent}
/* a tile BUTTON whose drawing became a photo spans its grid cell (the pet tiles sized to their label: photos of uneven widths) */
button:has(>.kp-art.kp-has){width:100%;justify-self:stretch}

/* project cover bands without a photo are DESIGNED, not placeholders (canary k13 10-12: six identical grey initials boxes read as unfinished): six variants by card position, tinted from the accent, each with its own pattern */
#project-grid > :nth-child(6n+1) .kp-proj{background:radial-gradient(circle at 18% 22%,color-mix(in srgb,var(--accent,#2b6777) 26%,transparent),transparent 55%),linear-gradient(135deg,var(--sunk,#ece8e1),var(--line,#d9d3c7))}
#project-grid > :nth-child(6n+2) .kp-proj{background:repeating-linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--accent,#2b6777) 12%,transparent) 14px 15px),linear-gradient(200deg,var(--sunk,#ece8e1),color-mix(in srgb,var(--accent,#2b6777) 16%,var(--line,#d9d3c7)))}
#project-grid > :nth-child(6n+3) .kp-proj{background:radial-gradient(circle,color-mix(in srgb,var(--accent,#2b6777) 22%,transparent) 1.5px,transparent 2px) 0 0/16px 16px,linear-gradient(160deg,var(--sunk,#ece8e1),var(--line,#d9d3c7))}
#project-grid > :nth-child(6n+4) .kp-proj{background:linear-gradient(90deg,color-mix(in srgb,var(--accent,#2b6777) 20%,transparent) 0 28%,transparent 28%),linear-gradient(135deg,var(--sunk,#ece8e1),var(--line,#d9d3c7))}
#project-grid > :nth-child(6n+5) .kp-proj{background:conic-gradient(from 210deg at 80% 110%,color-mix(in srgb,var(--accent,#2b6777) 30%,transparent),transparent 40%),linear-gradient(120deg,var(--sunk,#ece8e1),var(--line,#d9d3c7))}
#project-grid > :nth-child(6n) .kp-proj{background:linear-gradient(transparent 0 calc(100% - 3px),color-mix(in srgb,var(--accent,#2b6777) 55%,transparent) 0),linear-gradient(315deg,var(--sunk,#ece8e1),color-mix(in srgb,var(--accent,#2b6777) 12%,var(--line,#d9d3c7)))}
#project-grid .kp-proj.kp-has{background:none}

/* a portfolio with no project photos shows no cover box at all (canary k13 / TP2 10-12: initials bands in any palette are judged placeholders): the card keeps an accent rule and its own typography */
.kp-proj.kp-bare{display:none}
#project-grid > :has(> .kp-proj.kp-bare){border-top:3px solid var(--accent,#2b6777)}

/* a pruned gallery left with one to three photos: centred and larger, not a left-hand corner of a masonry */
.kp-few{columns:auto!important;display:flex!important;flex-wrap:wrap;justify-content:center;gap:16px}.kp-few>*{flex:0 1 min(46%,520px);margin:0!important}@media (max-width:600px){.kp-few>*{flex-basis:100%}}