/*
Theme Name:   KaruppStudio
Theme URI:    https://karuppstudio.example
Description:  Photography studio theme built to pair with the Karupp Studio plugin: contact-sheet home page, client galleries, album requests.
Author:       KaruppStudio
Version:      1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License:      GPL-2.0-or-later
Text Domain:  karupp
*/

/* ---------- fonts, self-hosted (SIL Open Font License, see assets/fonts) ---------- */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("assets/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("assets/fonts/source-serif-4-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 200 900; font-display: swap; src: url("assets/fonts/source-serif-4-latin-wght-italic.woff2") format("woff2"); }

/* ---------- tokens ---------- */
:root {
	--ink: #0f1011;
	--coal: #191b1c;
	--slate: #2a2d2f;
	--ash: #9aa0a3;
	--silver: #e7e9e8;
	--proof: #dfe3e2;
	--gold: #b8893b;
	--gold-deep: #8f6a2a;
	--pencil: #e0392d;

	--display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
	--text: "Source Serif 4", Georgia, "Times New Roman", serif;

	--gutter: clamp(1.25rem, 4vw, 3rem);
	--wrap: 76rem;
	--measure: 62ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0; background: var(--ink); color: var(--silver);
	font-family: var(--text); font-size: 1.125rem; line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: var(--gold); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; margin: 0 0 .6em; text-wrap: balance; }
p { margin: 0 0 1.1em; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link:focus { position: fixed; left: 1rem; top: 1rem; z-index: 100; background: var(--silver); color: var(--ink); padding: .75rem 1rem; clip: auto; width: auto; height: auto; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

/* plugin components on the dark site */
.ks-gal, .ks-form, .ks-portfolio, .ks-uploader {
	--ks-fg: var(--silver); --ks-bg: var(--coal); --ks-muted: var(--ash); --ks-line: #3a3e40;
	--ks-accent: var(--gold); --ks-solid-bg: var(--silver); --ks-solid-fg: var(--ink);
}
.ks-uploader { --ks-bg: var(--coal); --ks-keep: #4cc27a; --ks-review: #e0b341; --ks-reject: #ef7a6c; --ks-dup: #a995e8; --ks-solid-fg: var(--ink); --ks-solid-bg: var(--silver); }
.ks-up-card h2, .ks-up-card h3, .ks-up-stats dd { font-family: var(--display); }
.prose:has(.ks-uploader) { max-width: var(--wrap); }
.ks-gal-title { font-family: var(--display); letter-spacing: -.03em; }
.ks-form legend { font-family: var(--display); font-size: 1.1rem; }
.ks-form input, .ks-form select, .ks-form textarea, .ks-pin input { font-family: var(--text); }
.ks-form select option { color: #111; }

/* ---------- kasavu border: the woven gold edge of a Kerala sari, used once at the very top and once at the foot ---------- */
.kasavu {
	height: 10px;
	background:
		linear-gradient(var(--gold), var(--gold)) 0 0 / 100% 2px no-repeat,
		linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 2px no-repeat,
		repeating-linear-gradient(90deg, var(--gold) 0 10px, var(--gold-deep) 10px 12px, var(--gold) 12px 22px, transparent 22px 26px) 0 4px / 100% 2px no-repeat;
}

/* ---------- header ---------- */
.site-header { position: relative; z-index: 20; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.1rem; }
.brand { font-family: var(--display); font-weight: 800; font-size: 1.45rem; letter-spacing: -.04em; text-decoration: none; line-height: 1; }
.brand b { font-weight: 800; color: var(--silver); }
.brand span { font-weight: 300; color: var(--ash); }
.nav-toggle { display: none; }
.primary-nav ul { list-style: none; display: flex; gap: 1.75rem; margin: 0; padding: 0; align-items: center; }
.primary-nav a { font-family: var(--display); font-size: .95rem; text-decoration: none; padding: .5rem 0; display: inline-block; }
.primary-nav a:hover, .primary-nav .current-menu-item > a, .primary-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .4em; text-decoration-thickness: 2px; }
.primary-nav .nav-cta a { background: var(--silver); color: var(--ink); padding: .6rem 1rem; text-decoration: none; }
.primary-nav .nav-cta a:hover { background: #fff; }

@media (max-width: 760px) {
	.nav-toggle { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; background: transparent; color: inherit; border: 1px solid var(--slate); font: inherit; font-family: var(--display); font-size: .95rem; cursor: pointer; }
	.primary-nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--coal); border-bottom: 1px solid var(--slate); display: none; }
	.primary-nav.is-open { display: block; }
	.primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem var(--gutter) 1rem; }
	.primary-nav a { padding: .9rem 0; width: 100%; }
	.primary-nav .nav-cta a { text-align: center; margin-top: .5rem; }
}

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: .8rem 1.4rem; font-family: var(--display); font-size: 1rem; font-weight: 600; text-decoration: none; border: 1px solid var(--silver); background: transparent; color: var(--silver); cursor: pointer; }
.btn:hover { background: color-mix(in srgb, var(--silver) 12%, transparent); }
.btn-solid { background: var(--silver); color: var(--ink); }
.btn-solid:hover { background: #fff; }
.btn-row { display: flex; gap: .75rem; flex-wrap: wrap; }

/* ---------- hero: a contact sheet from a real shoot ---------- */
.hero { padding-block: clamp(2rem, 6vw, 5rem) clamp(3rem, 8vw, 6.5rem); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero h1 { font-size: clamp(2.75rem, 6.4vw, 5.6rem); line-height: .96; letter-spacing: -.045em; margin-bottom: .45em; }
.hero-lead { max-width: 34rem; font-size: 1.2rem; color: #c9cecd; }
.hero .btn-row { margin-top: 2rem; }

.sheet { position: relative; background: #060707; padding: 14px 14px 22px; border: 1px solid var(--slate); box-shadow: 0 30px 60px -30px #000; transform: rotate(1.2deg); }
.sheet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 8px; }
.frame { position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: linear-gradient(var(--tilt, 160deg), var(--a), var(--b)); }
.frame img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.15) contrast(1.02); }
.frame::after { content: attr(data-n); position: absolute; left: 4px; bottom: 2px; font: 600 9px/1 var(--display); color: rgba(255,255,255,.55); letter-spacing: .04em; }
.frame-slot:nth-child(1)  { --a:#5c6468; --b:#1d2123; --tilt:150deg; }
.frame-slot:nth-child(2)  { --a:#8a9296; --b:#32383b; --tilt:200deg; }
.frame-slot:nth-child(3)  { --a:#3a4043; --b:#0d0f10; --tilt:170deg; }
.frame-slot:nth-child(4)  { --a:#a4abae; --b:#4b5256; --tilt:120deg; }
.frame-slot:nth-child(5)  { --a:#2c3235; --b:#6e777b; --tilt:210deg; }
.frame-slot:nth-child(6)  { --a:#7c8589; --b:#262b2d; --tilt:160deg; }
.frame-slot:nth-child(7)  { --a:#bfc5c7; --b:#656d71; --tilt:140deg; }
.frame-slot:nth-child(8)  { --a:#444b4e; --b:#15181a; --tilt:190deg; }
.frame-slot:nth-child(9)  { --a:#6a7276; --b:#1a1d1f; --tilt:130deg; }
.frame-slot:nth-child(10) { --a:#959ca0; --b:#3a4144; --tilt:205deg; }
.frame-slot:nth-child(11) { --a:#2a2f31; --b:#7b8488; --tilt:165deg; }
.frame-slot:nth-child(12) { --a:#b0b6b9; --b:#586064; --tilt:145deg; }
.frame.is-out { opacity: .55; }
.sheet-edge { display: flex; justify-content: space-between; margin-top: 14px; font: 600 10px/1 var(--display); letter-spacing: .12em; color: #6c7377; }

/* grease-pencil marks: circles on the keepers, a cross through the rejects */
.mark { position: absolute; inset: -9% -7%; width: 114%; height: 118%; pointer-events: none; overflow: visible; }
.mark path { fill: none; stroke: var(--pencil); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; opacity: .95; }
.mark.is-cross { inset: 6%; width: 88%; height: 88%; }
.mark.is-cross path { stroke: rgba(224,57,45,.85); stroke-width: 2; }
.frame-slot { position: relative; }
@media (prefers-reduced-motion: no-preference) {
	.mark path { stroke-dashoffset: 1; animation: pencil .8s cubic-bezier(.5,.1,.2,1) forwards; animation-delay: calc(.5s + var(--i, 0) * .3s); }
	@keyframes pencil { to { stroke-dashoffset: 0; } }
}

@media (max-width: 900px) {
	.hero .wrap { grid-template-columns: 1fr; }
	.sheet { transform: none; }
}
@media (max-width: 520px) { .sheet-grid { grid-template-columns: repeat(3, 1fr); } .frame-slot:nth-child(n+10) { display: none; } }

/* ---------- sections ---------- */
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section-head { max-width: var(--measure); margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.section-head h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); letter-spacing: -.035em; }
.section-head p { color: #c3c8c7; }
.is-light { background: var(--proof); color: var(--ink); }
.is-light .section-head p { color: #3b4143; }
.is-light a { text-decoration-color: var(--gold-deep); }

/* what we shoot: a plain ruled list, no cards */
.shoots { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--slate); }
.shoots li { display: grid; grid-template-columns: minmax(10rem, 1fr) 2fr; gap: 1rem 2rem; padding: 1.35rem 0; border-bottom: 1px solid var(--slate); align-items: baseline; }
.shoots strong { font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.3rem); letter-spacing: -.03em; line-height: 1.05; }
.shoots span { color: #c3c8c7; max-width: 52ch; }
@media (max-width: 640px) { .shoots li { grid-template-columns: 1fr; gap: .25rem; } }

/* process: a true sequence, so it is numbered */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 1.5rem; counter-reset: step; position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 1.55rem; height: 2px; background: var(--gold-deep); }
.steps li { position: relative; padding-top: 4rem; counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; top: 0; left: 0; width: 3.1rem; height: 3.1rem; display: grid; place-items: center; background: var(--ink); color: var(--proof); font: 700 1.25rem/1 var(--display); border-radius: 50%; }
.steps h3 { font-size: 1.3rem; margin-bottom: .4em; }
.steps p { font-size: 1rem; color: #3b4143; margin: 0; }
@media (max-width: 900px) {
	.steps { grid-template-columns: 1fr; gap: 1.75rem; }
	.steps::before { top: 1.55rem; bottom: 1.55rem; left: 1.55rem; right: auto; width: 2px; height: auto; }
	.steps li { padding: 0 0 0 4.4rem; min-height: 3.1rem; }
}

/* albums */
.album-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.spec { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--slate); }
.spec li { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--slate); }
.spec li span:first-child { color: var(--ash); }
@media (max-width: 820px) { .album-split { grid-template-columns: 1fr; } }

/* portfolio empty state for the studio owner only */
.owner-note { border-left: 3px solid var(--gold); padding: .75rem 1rem; background: color-mix(in srgb, var(--gold) 10%, transparent); max-width: var(--measure); }

/* contact */
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: 1.15rem; }
.contact-list a { font-family: var(--display); font-weight: 600; }

/* ---------- inner pages ---------- */
.page-head { padding-block: clamp(2rem, 5vw, 4rem) 1rem; }
.page-head h1 { font-size: clamp(2.2rem, 5vw, 4rem); letter-spacing: -.04em; margin: 0; }
.page-body { padding-bottom: clamp(3rem, 8vw, 6rem); }
.prose { max-width: 46rem; }
.prose :is(h2, h3) { margin-top: 1.6em; }
.gallery-page .wrap { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 8vw, 6rem); }
.archive-grid .ks-portfolio { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ---------- footer ---------- */
.site-footer { margin-top: 2rem; }
.site-footer .wrap { padding-block: 2.5rem 3rem; display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; color: var(--ash); font-size: .95rem; }
.site-footer a { color: var(--silver); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; flex-wrap: wrap; }