/* Karupp Studio front end. A theme can restyle everything by redefining these custom properties. */
.ks-gal, .ks-form, .ks-portfolio {
	--ks-fg: #17191a;
	--ks-bg: #ffffff;
	--ks-muted: #5d6266;
	--ks-line: #d9dcde;
	--ks-accent: #b8893b;
	--ks-solid-fg: #ffffff;
	--ks-solid-bg: #17191a;
	color: var(--ks-fg);
}
.ks-noscroll { overflow: hidden; }

.ks-btn {
	display: inline-flex; align-items: center; gap: .4em; cursor: pointer; text-decoration: none;
	font: inherit; font-size: .9rem; line-height: 1; padding: .75em 1.1em; min-height: 44px;
	border: 1px solid var(--ks-line); background: transparent; color: var(--ks-fg); border-radius: 2px;
}
.ks-btn:hover { border-color: var(--ks-fg); }
.ks-btn[aria-pressed="true"] { border-color: var(--ks-fg); box-shadow: inset 0 -2px 0 var(--ks-accent); }
.ks-btn-solid { background: var(--ks-solid-bg); color: var(--ks-solid-fg); border-color: var(--ks-solid-bg); }
.ks-btn-solid:hover { opacity: .88; }
.ks-btn:focus-visible, .ks-ph-open:focus-visible, .ks-heart:focus-visible, .ks-lightbox button:focus-visible, .ks-form :is(input,select,textarea):focus-visible {
	outline: 3px solid var(--ks-accent); outline-offset: 2px;
}

/* gallery header */
.ks-gal-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.ks-gal-meta { margin: 0 0 .4rem; color: var(--ks-muted); font-size: .9rem; }
.ks-gal-title { margin: 0; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.05; }
.ks-gal-client { margin: .5rem 0 0; color: var(--ks-muted); }
.ks-gal-tools { display: flex; gap: .5rem; flex-wrap: wrap; }
.ks-count { font-variant-numeric: tabular-nums; color: var(--ks-muted); }
.ks-status, .ks-lock-note { color: var(--ks-muted); padding: 2rem 0; }
.ks-lock-note { padding: .75rem 1rem; border-left: 3px solid var(--ks-accent); background: color-mix(in srgb, var(--ks-accent) 10%, transparent); margin: 0 0 1rem; }

/* PIN */
.ks-pin { max-width: 26rem; padding: 1.5rem 0; }
.ks-pin label { display: block; margin-bottom: .6rem; }
.ks-pin-row { display: flex; gap: .5rem; }
.ks-pin input, .ks-form input, .ks-form select, .ks-form textarea {
	font: inherit; color: inherit; background: transparent; border: 1px solid var(--ks-line); border-radius: 2px; padding: .7em .8em; min-height: 44px; width: 100%; box-sizing: border-box;
}
.ks-pin-row input { flex: 1; letter-spacing: .15em; }
.ks-error { color: #b3261e; min-height: 1.4em; margin: .5rem 0 0; }
.ks-error:empty { display: none; }

/* photo grid: columns keep each photo at its natural proportions */
.ks-masonry { columns: 3 280px; column-gap: 10px; }
.ks-ph { position: relative; break-inside: avoid; margin: 0 0 10px; }
.ks-ph-open { display: block; width: 100%; padding: 0; border: 0; background: var(--ks-line); cursor: zoom-in; }
.ks-ph-open img { display: block; width: 100%; height: auto; }
.ks-ph .ks-heart {
	position: absolute; right: 8px; bottom: 8px; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
	background: rgba(0,0,0,.55); color: #fff; font-size: 1.35rem; line-height: 1;
}
.ks-ph .ks-heart.is-on { color: #ff6b86; }
@media (hover: hover) { .ks-ph .ks-heart:not(.is-on) { opacity: 0; } .ks-ph:hover .ks-heart, .ks-ph .ks-heart:focus-visible { opacity: 1; } }

/* lightbox */
.ks-lightbox { position: fixed; inset: 0; z-index: 99999; background: rgba(8,8,9,.96); display: grid; place-items: center; }
.ks-lightbox[hidden], .ks-modal[hidden] { display: none; }
.ks-lightbox figure { margin: 0; max-width: 100vw; max-height: 100vh; display: grid; place-items: center; }
.ks-lightbox img { max-width: 100vw; max-height: calc(100vh - 72px); object-fit: contain; }
.ks-lb-close, .ks-lb-nav { position: absolute; border: 0; background: transparent; color: #fff; cursor: pointer; font-size: 2.2rem; width: 52px; height: 52px; line-height: 1; }
.ks-lb-close { top: 8px; right: 8px; }
.ks-lb-prev { left: 4px; top: 50%; transform: translateY(-50%); }
.ks-lb-next { right: 4px; top: 50%; transform: translateY(-50%); }
.ks-lb-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: .75rem; padding: 12px; }
.ks-lb-fav, .ks-lb-dl { color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); padding: .7em 1.1em; min-height: 44px; font: inherit; font-size: .9rem; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; border-radius: 2px; }
.ks-lb-dl[hidden] { display: none; }

/* share modal */
.ks-modal { position: fixed; inset: 0; z-index: 99999; background: rgba(8,8,9,.7); display: grid; place-items: center; padding: 1rem; }
.ks-modal-box { position: relative; background: var(--ks-bg); color: var(--ks-fg); padding: 1.5rem; max-width: 22rem; width: 100%; text-align: center; }
.ks-modal-box h3 { margin: 0 0 1rem; }
.ks-modal-close { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; font-size: 1.6rem; border: 0; background: transparent; color: inherit; cursor: pointer; }
.ks-qr-out img { width: 100%; max-width: 240px; height: auto; image-rendering: pixelated; background: #fff; padding: 8px; }
.ks-share-url { word-break: break-all; color: var(--ks-muted); font-size: .85rem; }

/* album form */
.ks-form { max-width: 44rem; }
.ks-form fieldset { border: 0; border-top: 1px solid var(--ks-line); margin: 0 0 1.5rem; padding: 1rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.ks-form legend { padding: 0 .5rem 0 0; font-weight: 600; }
.ks-form p { margin: 0 0 1rem; }
.ks-form label { display: block; margin-bottom: .35rem; font-size: .9rem; }
.ks-form label span { color: var(--ks-muted); }
.ks-form .ks-wide, .ks-form fieldset > p:first-of-type:last-of-type { grid-column: 1 / -1; }
.ks-form-note { padding: .75rem 1rem; border-left: 3px solid var(--ks-accent); background: color-mix(in srgb, var(--ks-accent) 10%, transparent); }
.ks-plan { padding: .75rem 1rem; border-left: 3px solid var(--ks-accent); background: color-mix(in srgb, var(--ks-accent) 10%, transparent); }
.ks-plan[hidden] { display: none; }
.ks-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ks-error-show { padding: .75rem 1rem; border-left: 3px solid #b3261e; }
@media (max-width: 560px) { .ks-form fieldset { grid-template-columns: 1fr; } }

/* portfolio grid used on the home page */
.ks-portfolio { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 380px)); gap: 12px; justify-content: start; }
.ks-pf-item { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ks-line); color: #fff; text-decoration: none; }
.ks-pf-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.ks-pf-item:hover img { transform: scale(1.03); }
.ks-pf-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1rem 1rem; background: linear-gradient(transparent, rgba(0,0,0,.72)); display: flex; flex-direction: column; gap: .15rem; }
.ks-pf-cap strong { font-weight: 600; }
.ks-pf-cap em { font-style: normal; font-size: .85rem; opacity: .85; }
.ks-pf-item:hover { text-decoration: none; }

@media (prefers-reduced-motion: reduce) { .ks-pf-item img { transition: none; } }