/*
Theme Name: LowKei 2026
Theme URI: https://lkshot.com/
Author: LowKei Photography
Author URI: https://lkshot.com/
Description: A classic, dependency-free WordPress theme for LowKei Photography. Built around a Customizer-managed hero carousel with server-rendered first frame, contact-sheet navigation, and structured data for local photography SEO.
Version: 1.1.7
Requires at least: 5.9
Tested up to: 6.8
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lowkei-2026
Tags: photography, portfolio, one-column, custom-colors, custom-logo, custom-menu, featured-images, translation-ready, block-styles, wide-blocks
*/

/* ==========================================================================
   1. Design tokens
   Colour values are overridden at runtime by inc/dynamic-css.php, which
   prints Customizer values into this same :root block. Keep the names stable.
   ========================================================================== */

:root {
	--lk-ground: #101114;          /* page background */
	--lk-ground-2: #17191e;        /* raised surfaces, footer */
	--lk-paper: #f2efe9;           /* primary text on dark */
	--lk-dim: #a2a2ab;             /* secondary text on dark */
	--lk-gold: #c9a227;            /* brand accent */
	--lk-gold-lift: #e3c463;       /* accent on hover / focus */
	--lk-line: rgba(233, 228, 216, 0.14);

	/* Type */
	--lk-display: "Fraunces", "Iowan Old Style", Georgia, serif;
	--lk-body: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* Space the fixed header occupies. Every element that sits beneath it
	   reserves this, so nothing can slide underneath at any viewport size. */
	/* WordPress pushes the document down for the admin bar but fixed elements
	   keep measuring from the top of the viewport, so the header has to step
	   down by the same amount or it sits underneath it. Zero for visitors. */
	--lk-adminbar-h: 0px;

	--lk-header-h: 6rem;

	/* Gap between the bottom of the header and the top of the hero headline.
	   Sized to leave a clear band for the site tagline. */
	--lk-hero-gap: clamp(0.4rem, 1.2vh, 0.85rem);

	/* Measure and rhythm */
	--lk-measure: 68ch;
	--lk-gutter: clamp(1.25rem, 5vw, 4.5rem);
	--lk-wide: 1440px;
	--lk-section: clamp(4.5rem, 11vh, 9rem);

	/* Motion */
	--lk-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Light mode follows the OS/browser preference. No manual toggle.
   The palette inverts; the gold darkens so it still clears AA on paper. */
@media (prefers-color-scheme: light) {
	:root {
		--lk-ground: #f1efea;
		--lk-ground-2: #e7e3db;
		--lk-paper: #17181c;       /* body text: near-ink, never grey */
		--lk-dim: #3d3e44;         /* secondary text: AA on light ground */
		--lk-gold: #8a6c12;
		--lk-gold-lift: #6f560a;
		--lk-line: rgba(23, 24, 28, 0.16);
	}
}

/* ==========================================================================
   2. Reset and base
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--lk-ground);
	color: var(--lk-paper);
	font-family: var(--lk-body);
	font-size: clamp(1rem, 0.97rem + 0.18vw, 1.0625rem);
	line-height: 1.65;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img,
picture,
video { max-width: 100%; height: auto; display: block; }

a {
	color: inherit;
	text-decoration-color: var(--lk-gold);
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
	transition: color 0.2s var(--lk-ease);
}

a:hover { color: var(--lk-gold-lift); }

:focus-visible {
	outline: 2px solid var(--lk-gold-lift);
	outline-offset: 3px;
}

h1, h2, h3, h4 {
	font-family: var(--lk-display);
	font-weight: 500;
	font-variation-settings: "SOFT" 12, "WONK" 1, "opsz" 40;
	line-height: 1.08;
	letter-spacing: -0.012em;
	margin: 0 0 0.5em;
	text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 1.6rem + 4.2vw, 5.25rem); }
h2 { font-size: clamp(1.9rem, 1.35rem + 2.4vw, 3.25rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem); line-height: 1.2; }

p { margin: 0 0 1.1em; max-width: var(--lk-measure); }

.lk-lede {
	font-size: clamp(1.1rem, 1rem + 0.55vw, 1.375rem);
	line-height: 1.5;
	color: var(--lk-paper);
}

.lk-muted { color: var(--lk-dim); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute;
	left: 1rem; top: -4rem;
	z-index: 999;
	background: var(--lk-gold);
	color: #101114;
	padding: 0.75rem 1.25rem;
	font-weight: 600;
	transition: top 0.2s var(--lk-ease);
}

.skip-link:focus { top: 1rem; color: #101114; }

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */

.lk-wrap {
	width: 100%;
	max-width: var(--lk-wide);
	margin-inline: auto;
	padding-inline: var(--lk-gutter);
}

.lk-section { padding-block: var(--lk-section); }

.lk-rule {
	border: 0;
	border-top: 1px solid var(--lk-line);
	margin: 0;
}

/* ==========================================================================
   4. Site header — transparent over the hero, solid once scrolled past it
   ========================================================================== */

/* The wordmark and tagline need 5.3rem; a custom logo at its 42px maximum
   plus the tagline needs 5.78rem. The reserve follows whichever is in use. */
body.lk-has-logo { --lk-header-h: 6.75rem; }

body.admin-bar { --lk-adminbar-h: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar { --lk-adminbar-h: 46px; }
}

.lk-header {
	position: fixed;
	top: var(--lk-adminbar-h);
	left: 0;
	right: 0;
	bottom: auto;
	z-index: 60;
	padding-block: 1rem;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background 0.3s var(--lk-ease), border-color 0.3s var(--lk-ease);
}

.lk-header.is-solid {
	background: color-mix(in srgb, var(--lk-ground) 92%, transparent);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom-color: var(--lk-line);
}

/* Inner pages start below the header rather than under it. */
body:not(.home) { padding-top: calc(var(--lk-adminbar-h) + var(--lk-header-h)); }
body:not(.home) .lk-header { position: sticky; background: var(--lk-ground); border-bottom-color: var(--lk-line); }

.lk-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.lk-brand {
	display: inline-flex;
	align-items: baseline;
	gap: 0.55rem;
	font-family: var(--lk-display);
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
}

.lk-brand img { max-height: 42px; width: auto; }
.lk-brand__mark { color: var(--lk-gold); }

.lk-brandblock {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.lk-brand__tagline {
	display: block;
	font-size: 0.78rem;
	line-height: 1.35;
	letter-spacing: 0.035em;
	color: var(--lk-dim);
	max-width: 46ch;
}

/*
 * Over the hero the header sits on a photograph, so its text has to be light
 * regardless of the visitor's colour scheme — in light mode the inherited ink
 * would otherwise be near-invisible against a dark image.
 */
body.lk-has-hero .lk-header:not(.is-solid) {
	color: #f2efe9;
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}

body.lk-has-hero .lk-header:not(.is-solid) .lk-brand__tagline {
	color: rgba(242, 239, 233, 0.85);
}

.lk-nav ul {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.2vw, 2.25rem);
	margin: 0; padding: 0;
	list-style: none;
}

.lk-nav a {
	text-decoration: none;
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	padding-block: 0.35rem;
	border-bottom: 1px solid transparent;
}

.lk-nav .current-menu-item > a,
.lk-nav a:hover { border-bottom-color: var(--lk-gold); }

.lk-nav__toggle {
	display: none;
	background: none;
	border: 1px solid var(--lk-line);
	color: inherit;
	font: inherit;
	font-size: 0.9rem;
	padding: 0.5rem 0.9rem;
	cursor: pointer;
}

@media (max-width: 600px) {
	:root { --lk-header-h: 5.25rem; }

	/* The tagline wraps to three lines on a phone and pushes the header
	   out of proportion; the footer still carries it. */
	.lk-brand__tagline { display: none; }
}

@media (max-width: 860px) {
	.lk-nav__toggle { display: block; }

	.lk-nav {
		position: absolute;
		inset: 100% 0 auto 0;
		background: var(--lk-ground);
		border-bottom: 1px solid var(--lk-line);
		display: none;
	}

	.lk-nav.is-open { display: block; }

	.lk-nav ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		padding: var(--lk-gutter);
	}

	.lk-nav li { width: 100%; }
	.lk-nav a { display: block; padding-block: 0.85rem; width: 100%; }
}

/* ==========================================================================
   5. Hero carousel — the front page's one bold element
   Structure: full-bleed frame, caption anchored bottom-left, contact-sheet
   frame counter and tick navigation across the bottom edge.
   ========================================================================== */

.lk-hero {
	position: relative;
	background: var(--lk-ground-2);
}

.lk-hero__viewport {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Height is locked before images load, so the carousel never shifts layout. */
	height: 100svh;
	min-height: 540px;
	max-height: 980px;
}

.lk-hero__viewport::-webkit-scrollbar { display: none; }

.lk-hero__slide {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

.lk-hero__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*
 * A frame taller than it is wide is shown whole rather than cropped to the
 * landscape shape of the carousel. The letterbox either side is the page
 * ground, so it reads as a deliberate mat rather than a mistake.
 */
.lk-hero__slide--portrait { background: var(--lk-ground); }

.lk-hero__slide--portrait img {
	object-fit: contain;
	object-position: center;
}

/* On wide screens the portrait frame sits right of centre, which keeps the
   headline on ground rather than on the photograph. */
@media (min-width: 1000px) {
	.lk-hero__slide--portrait img { object-position: 72% center; }
}

/* Legibility scrim. Kept to the lower third so the photograph stays the subject. */
.lk-hero__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		/* Left column, where the headline and buttons live. */
		linear-gradient(to right, rgba(8, 9, 11, 0.72) 0%, rgba(8, 9, 11, 0.34) 46%, rgba(8, 9, 11, 0) 72%),
		/* Top band for the header, and the lower band for the control strip. */
		linear-gradient(to bottom, rgba(8, 9, 11, 0.58) 0%, rgba(8, 9, 11, 0) 26%, rgba(8, 9, 11, 0) 58%, rgba(8, 9, 11, 0.8) 100%);
	pointer-events: none;
}

.lk-hero__caption {
	position: absolute;
	left: var(--lk-gutter);
	/* Bounded top and bottom, not bottom alone. The block still sits low in
	   the frame, but it can never grow up past the header no matter how tall
	   the headline wraps or how short the viewport is. */
	top: calc(var(--lk-adminbar-h) + var(--lk-header-h) + var(--lk-hero-gap));
	bottom: clamp(6.5rem, 12vh, 9rem);
	z-index: 2;
	display: flex;
	flex-direction: column;
	/* Anchored to the top of its box, so the headline sits a fixed distance
	   below the site title at every viewport height instead of drifting up
	   and down with the bottom edge. */
	justify-content: flex-start;
	width: min(46ch, 78vw);
	max-width: min(46ch, 78vw);
	color: #f2efe9;
	text-shadow: 0 1px 24px rgba(0, 0, 0, 0.5);
}

/* Short viewports: laptops, landscape phones, split screens. The headline
   steps down rather than eating the space reserved for the header. */
@media (max-height: 760px) {
	.lk-hero__caption h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); }
	.lk-hero__caption p {
		font-size: 1rem;
		margin-bottom: 1.1rem;
	}
}

@media (max-height: 560px) {
	.lk-hero__caption p { display: none; }
}

.lk-hero__caption h1,
.lk-hero__caption p { color: #f2efe9; }

.lk-hero__caption p {
	font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
	margin-bottom: 1.6rem;
}

.lk-hero__frame-caption {
	position: absolute;
	right: var(--lk-gutter);
	bottom: clamp(6.5rem, 12vh, 9rem);
	z-index: 2;
	max-width: 26ch;
	text-align: right;
	font-size: 0.85rem;
	line-height: 1.45;
	color: rgba(242, 239, 233, 0.82);
	text-shadow: 0 1px 20px rgba(0, 0, 0, 0.6);
}

@media (max-width: 720px) {
	.lk-hero__frame-caption { display: none; }
	.lk-hero__caption { bottom: clamp(5.5rem, 14vh, 8rem); }
}

/* Contact-sheet control strip */
.lk-hero__strip {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.9rem var(--lk-gutter) 1.4rem;
}

.lk-hero__counter {
	font-family: var(--lk-body);
	font-variant-numeric: tabular-nums;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	color: rgba(242, 239, 233, 0.9);
	min-width: 5.5ch;
}

.lk-hero__counter b { color: var(--lk-gold-lift); font-weight: 600; }

.lk-hero__ticks {
	display: flex;
	flex: 1 1 auto;
	gap: 6px;
	margin: 0; padding: 0;
	list-style: none;
}

.lk-hero__tick {
	flex: 1 1 0;
	background: none;
	border: 0;
	padding: 0;
	height: 22px;
	cursor: pointer;
	display: block;
}

.lk-hero__tick::before {
	content: "";
	display: block;
	height: 2px;
	margin-top: 10px;
	background: rgba(242, 239, 233, 0.32);
	transition: background 0.25s var(--lk-ease);
}

.lk-hero__tick:hover::before { background: rgba(242, 239, 233, 0.7); }

.lk-hero__tick[aria-current="true"]::before {
	background: var(--lk-gold);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.lk-hero__btn {
	background: none;
	border: 1px solid rgba(242, 239, 233, 0.4);
	color: #f2efe9;
	width: 38px; height: 38px;
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: border-color 0.2s var(--lk-ease), background 0.2s var(--lk-ease);
}

.lk-hero__btn:hover {
	border-color: var(--lk-gold);
	background: rgba(201, 162, 39, 0.16);
}

.lk-hero__btn svg { width: 14px; height: 14px; fill: currentColor; }

/* Empty state shown in the editor/admin preview when no slides are set yet. */
.lk-hero--empty {
	display: grid;
	place-items: center;
	text-align: center;
	min-height: 70svh;
	/* The header is fixed and overlays this section, so its height is added
	   to the top padding rather than left to chance. */
	padding: calc(var(--lk-adminbar-h) + var(--lk-header-h) + var(--lk-gutter)) var(--lk-gutter) var(--lk-gutter);
	border-bottom: 1px solid var(--lk-line);
}

.lk-hero--empty p { margin-inline: auto; }

/* ==========================================================================
   6. Buttons
   ========================================================================== */

.lk-btn {
	display: inline-block;
	font-family: var(--lk-body);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 0.85rem 1.6rem;
	border: 1px solid var(--lk-gold);
	background: var(--lk-gold);
	color: #101114;
	text-decoration: none;
	transition: background 0.2s var(--lk-ease), color 0.2s var(--lk-ease), border-color 0.2s var(--lk-ease);
}

.lk-btn:hover {
	background: var(--lk-gold-lift);
	border-color: var(--lk-gold-lift);
	color: #101114;
}

.lk-btn--ghost {
	background: transparent;
	color: #f2efe9;
	border-color: rgba(242, 239, 233, 0.55);
}

.lk-btn--ghost:hover {
	background: rgba(242, 239, 233, 0.12);
	color: #f2efe9;
	border-color: #f2efe9;
}

.lk-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* ==========================================================================
   7. Homepage sections
   ========================================================================== */

/* Statement */
.lk-statement .lk-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
}

@media (min-width: 900px) {
	.lk-statement .lk-wrap {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: clamp(2rem, 6vw, 6rem);
		align-items: start;
	}
}

/* Services: rows, not cards. The hairline rule carries the structure. */
.lk-services__list { border-top: 1px solid var(--lk-line); }

.lk-service {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.5rem 2rem;
	padding-block: clamp(1.75rem, 4vw, 2.75rem);
	border-bottom: 1px solid var(--lk-line);
}

@media (min-width: 860px) {
	.lk-service {
		grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 2fr);
		align-items: baseline;
	}
}

.lk-service h3 { margin: 0; }
.lk-service p { margin: 0; color: var(--lk-dim); }

.lk-service__meta {
	font-size: 0.85rem;
	color: var(--lk-gold);
	letter-spacing: 0.02em;
}

@media (min-width: 860px) {
	.lk-service__meta { text-align: right; }
}

/* Process: a genuine sequence, so the frames are numbered. */
.lk-steps {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	margin-top: 2.5rem;
}

.lk-step { border-top: 2px solid var(--lk-gold); padding-top: 1rem; }

.lk-step__n {
	font-family: var(--lk-body);
	font-variant-numeric: tabular-nums;
	font-size: 0.8rem;
	color: var(--lk-gold);
	letter-spacing: 0.08em;
	display: block;
	margin-bottom: 0.4rem;
}

.lk-step h3 { margin-bottom: 0.35rem; }
.lk-step p { color: var(--lk-dim); margin: 0; }

/* Call to action band */
.lk-cta {
	background: var(--lk-ground-2);
	border-top: 1px solid var(--lk-line);
	border-bottom: 1px solid var(--lk-line);
}

.lk-cta .lk-wrap {
	display: grid;
	gap: 1.75rem;
	align-items: center;
}

@media (min-width: 900px) {
	.lk-cta .lk-wrap {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 3rem;
	}
}

.lk-cta h2 { margin-bottom: 0.35rem; }
.lk-cta p { margin: 0; color: var(--lk-dim); }

/* ==========================================================================
   8. Generic page / post content
   ========================================================================== */

.lk-page-head { padding-block: clamp(2.5rem, 6vw, 5rem) 1.5rem; }
.lk-entry { padding-bottom: var(--lk-section); }
.lk-entry > * { max-width: var(--lk-measure); }
.lk-entry > .alignwide { max-width: 1100px; }
.lk-entry > .alignfull { max-width: none; }
.lk-entry img { margin-block: 2rem; }

.lk-entry blockquote {
	border-left: 2px solid var(--lk-gold);
	margin-inline: 0;
	padding-left: 1.25rem;
	font-family: var(--lk-display);
	font-size: 1.2rem;
}

/* ==========================================================================
   9. Footer
   ========================================================================== */

.lk-footer {
	background: var(--lk-ground-2);
	border-top: 1px solid var(--lk-line);
	padding-block: clamp(3rem, 7vw, 5rem) 2rem;
	font-size: 0.95rem;
}

.lk-footer__grid {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	padding-bottom: 2.5rem;
}

.lk-footer h4 {
	font-family: var(--lk-body);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--lk-gold);
	margin-bottom: 0.9rem;
}

.lk-footer ul { list-style: none; margin: 0; padding: 0; }
.lk-footer li { margin-bottom: 0.5rem; }
.lk-footer a { text-decoration: none; }
.lk-footer a:hover { text-decoration: underline; }

.lk-footer__base {
	border-top: 1px solid var(--lk-line);
	padding-top: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	color: var(--lk-dim);
	font-size: 0.85rem;
}

.lk-social {
	display: flex;
	gap: 0.9rem;
	list-style: none;
	margin: 0; padding: 0;
}

.lk-social a {
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	border: 1px solid var(--lk-line);
}

.lk-social a:hover { border-color: var(--lk-gold); }
.lk-social svg { width: 17px; height: 17px; fill: currentColor; }

/* ==========================================================================
   10. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}