/* Klashify site base (direction B "Pearl"). Loads on every page, right after fonts.css.
   Part 1: tokens. Part 2: page defaults. Part 3: small building blocks (.k-btn, .k-card, .k-field) for new pages and templates.
   Rule: new CSS reads colours, radii and speeds from these tokens, never from raw values. */

/* ---------- 1. Tokens ---------- */
:root {
	/* colour */
	--k-ink: #14171a;          /* text, dark buttons */
	--k-mute: #566066;         /* secondary text */
	--k-soft: #8b949a;         /* hints, placeholders (large text only) */
	--k-pearl: #e9ebee;        /* page background */
	--k-surface: #ffffff;      /* cards, fields */
	--k-line: rgba(20, 23, 26, .1);
	--k-line-strong: rgba(20, 23, 26, .22);
	--k-ink-hover: #2b3137;
	/* type */
	--k-font-head: "Bricolage Grotesque", "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
	--k-font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
	/* shape */
	--k-r-sm: 12px;
	--k-r-md: 20px;
	--k-r-lg: 28px;
	--k-r-pill: 999px;
	/* depth: tinted, wide, soft */
	--k-shadow-card: 0 24px 50px -34px rgba(20, 23, 26, .35);
	--k-shadow-lift: 0 10px 22px -12px rgba(20, 23, 26, .6);
	/* motion */
	--k-ease: cubic-bezier(.32, .72, 0, 1);
	--k-fast: .25s;
	--k-slow: .5s;
	/* spacing scale (4 / 8 px steps) */
	--k-1: 4px; --k-2: 8px; --k-3: 12px; --k-4: 16px; --k-5: 24px; --k-6: 32px; --k-7: 48px; --k-8: 72px; --k-9: 120px;
	/* layout */
	--k-wrap: 1200px;
	--k-gutter: clamp(16px, 4vw, 40px);
}

/* ---------- 2. Page defaults ---------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html body[class] {
	background-color: var(--k-pearl);
	color: var(--k-ink);
	font-family: var(--k-font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
html body button,
html body input,
html body select,
html body textarea { font-family: var(--k-font-body); }

html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6 {
	font-family: var(--k-font-head);
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1.05;
	text-wrap: balance;
}
html body p, html body li { text-wrap: pretty; }

::selection { background: var(--k-ink); color: #fff; }

/* One visible keyboard focus everywhere (header, buttons, links, fields). */
:focus-visible { outline: 2px solid var(--k-ink); outline-offset: 3px; }

img { height: auto; }

/* ---------- 3. Building blocks ---------- */
/* Button: dark pill. Put an arrow circle inside with <i class="k-btn__icon">. */
.k-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--k-3);
	min-height: 48px;
	padding: 0 var(--k-5);
	border: 0;
	border-radius: var(--k-r-pill);
	background: var(--k-ink);
	color: #fff;
	font: 600 15px/1 var(--k-font-body);
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 0 0 rgba(20, 23, 26, 0);
	transition: transform var(--k-slow) var(--k-ease), background-color var(--k-fast) var(--k-ease), box-shadow var(--k-slow) var(--k-ease);
	-webkit-tap-highlight-color: transparent;
}
.k-btn:has(.k-btn__icon) { padding-right: 8px; }
.k-btn__icon {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	transition: background-color var(--k-fast) var(--k-ease);
}
.k-btn__icon svg { display: block; transition: transform var(--k-slow) var(--k-ease); }
@media (hover: hover) {
	.k-btn:hover { background: var(--k-ink-hover); transform: translateY(-1px); box-shadow: var(--k-shadow-lift); }
	.k-btn:hover .k-btn__icon { background: rgba(255, 255, 255, .22); }
	.k-btn:hover .k-btn__icon svg { transform: translate(1.5px, -1.5px); }
}
.k-btn:active { transform: scale(.98); box-shadow: none; }
.k-btn[disabled], .k-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.k-btn, .k-btn:hover, .k-btn:focus, .k-btn:active { color: #fff; }   /* theme a:hover colour must not leak in */

/* Quiet button: outline on the pearl background */
.k-btn--ghost { background: transparent; color: var(--k-ink); box-shadow: inset 0 0 0 1px var(--k-line-strong); }
.k-btn--ghost, .k-btn--ghost:hover, .k-btn--ghost:focus, .k-btn--ghost:active { color: var(--k-ink); }
@media (hover: hover) { .k-btn--ghost:hover { background: rgba(20, 23, 26, .05); box-shadow: inset 0 0 0 1px var(--k-ink); } }

/* Card: white surface, big soft corners, tinted shadow */
.k-card {
	background: var(--k-surface);
	border-radius: var(--k-r-lg);
	padding: var(--k-6);
	box-shadow: var(--k-shadow-card);
}

/* Field: label above, soft white box, dark outline on focus */
.k-field { display: grid; gap: var(--k-2); }
.k-field > label { font-size: 14px; font-weight: 600; }
.k-field input, .k-field select, .k-field textarea {
	width: 100%;
	min-height: 48px;
	padding: 0 var(--k-4);
	border: 1px solid var(--k-line-strong);
	border-radius: var(--k-r-sm);
	background: var(--k-surface);
	color: var(--k-ink);
	font-size: 16px;                    /* 16 px stops iOS zooming on focus */
	transition: border-color var(--k-fast) var(--k-ease), box-shadow var(--k-fast) var(--k-ease);
}
.k-field textarea { min-height: 120px; padding: var(--k-3) var(--k-4); }
.k-field input:hover, .k-field select:hover, .k-field textarea:hover { border-color: var(--k-ink); }
.k-field input:focus, .k-field select:focus, .k-field textarea:focus { outline: none; border-color: var(--k-ink); box-shadow: 0 0 0 3px rgba(20, 23, 26, .12); }
.k-field input::placeholder, .k-field textarea::placeholder { color: var(--k-soft); }
.k-field .k-help { font-size: 13px; color: var(--k-mute); }
.k-field .k-error { font-size: 13px; color: #a3302b; }

/* Tag, image tray, entrance motion (used on several pages) */
.k-tag {
	display: inline-block;
	padding: 7px 12px;
	border-radius: var(--k-r-pill);
	background: rgba(20, 23, 26, .07);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--k-ink);
}

/* double bezel: a tray around an image */
.k-bezel { padding: 8px; border-radius: 36px; background: rgba(20, 23, 26, .05); border: 1px solid rgba(20, 23, 26, .06); }
.k-bezel__core { border-radius: 28px; overflow: hidden; background: #171717; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .25); }
.k-bezel__core img { display: block; width: 100%; height: auto; }

/* entrance: hero rises on load (CSS only, safe without JS); the rest reveals on scroll (reveal.js) */
@keyframes k-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.k-rise { animation: k-rise .9s var(--k-ease) backwards; animation-delay: calc(var(--d, 0) * 90ms + 60ms); }
.k-js .k-reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--k-ease), transform .9s var(--k-ease); transition-delay: calc(var(--d, 0) * 90ms); }
.k-js .k-reveal.is-in { opacity: 1; transform: none; }

/* Content width helper for new templates */
.k-wrap { width: min(100% - 2 * var(--k-gutter), var(--k-wrap)); margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
	.k-rise { animation: none; }
	.k-js .k-reveal { opacity: 1; transform: none; transition: none; }
	.k-btn, .k-btn *, .k-field input, .k-field select, .k-field textarea { transition-duration: .01ms !important; }
}

/* Parent-theme search form (404 page): the submit button was 19 px tall. */
.search-form .search-submit, .search-form .ast-search-submit { min-height: 44px; min-width: 44px; }