/* =========================================================================
   Be Kind Tattooing — base.css
   Foundational layer loaded on every page:
   self-hosted fonts · design tokens · reset · typography · buttons · layout
   ========================================================================= */

/* --- Self-hosted fonts ------------------------------------------------- */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter-400.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/inter-500.woff2") format("woff2");
}
@font-face {
	font-family: "Playfair Display";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/playfair-600.woff2") format("woff2");
}
@font-face {
	font-family: "Playfair Display";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/playfair-700.woff2") format("woff2");
}

/* --- Design tokens ----------------------------------------------------- */
:root {
	/* Brand palette (confirmed) */
	--bk-sage: #73978E;
	--bk-green: #5F8478;
	--bk-mustard: #DDA94F;
	--bk-charcoal: #1A160F;
	--bk-cream: #FFFFFF; /* was #FAF5ED — global page/header/footer background switched to white */
	--bk-mint: #EAEFEE;
	--bk-body: #535355;
	--bk-white: #FFFFFF;

	/* Tints / states derived from the palette */
	--bk-green-dark: #4e6d63;
	--bk-mustard-dark: #c9963f;
	--bk-line: rgba(26, 22, 15, 0.12);

	/* Type families */
	--bk-font-head: "Playfair Display", Georgia, "Times New Roman", serif;
	--bk-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Fluid type scale (min → max). Desktop targets: H1 68, H2 44, H3 28. */
	--bk-h1: clamp(2.5rem, 1.6rem + 3.8vw, 4.25rem);
	--bk-h2: clamp(1.9rem, 1.35rem + 2.3vw, 2.75rem);
	--bk-h3: clamp(1.35rem, 1.15rem + 0.85vw, 1.75rem);
	--bk-h4: clamp(1.15rem, 1.05rem + 0.45vw, 1.375rem);
	--bk-text: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	--bk-small: 0.875rem;
	--bk-label: 0.8125rem;

	--bk-leading: 1.6;

	/* Spacing scale */
	--bk-space-1: 0.5rem;
	--bk-space-2: 1rem;
	--bk-space-3: 1.5rem;
	--bk-space-4: 2rem;
	--bk-space-5: 3rem;
	--bk-space-6: 4.5rem;
	--bk-space-7: 6rem;

	/* Section rhythm (fluid) */
	--bk-section-y: clamp(3rem, 2rem + 5vw, 6rem);

	/* Radius / shadow */
	--bk-radius: 12px;
	--bk-radius-sm: 8px;
	--bk-radius-pill: 999px;
	--bk-shadow: 0 10px 30px rgba(26, 22, 15, 0.12);
	--bk-shadow-sm: 0 4px 14px rgba(26, 22, 15, 0.10);

	/* Layout */
	--bk-container: 1200px;
	--bk-gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);

	--bk-header-h: 76px;
}

/* Tighter vertical rhythm on phones (the hero already runs tall) */
@media (max-width: 767px) {
	:root {
		--bk-section-y: clamp(2rem, 1rem + 4vw, 2.75rem);
		--bk-space-6: 3rem;
		--bk-space-7: 3.5rem;
	}
}

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

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

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
	margin: 0;
	background: var(--bk-cream);
	color: var(--bk-body);
	font-family: var(--bk-font-body);
	font-size: var(--bk-text);
	line-height: var(--bk-leading);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

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

a { color: var(--bk-green); text-decoration: none; }
a:hover { text-decoration: underline; }

ul, ol { margin: 0; padding: 0; }

button { font: inherit; cursor: pointer; }

input, textarea, select, button { font-family: inherit; }

:target { scroll-margin-top: calc(var(--bk-header-h) + 1rem); }

/* --- Typography -------------------------------------------------------- */
h1, h2, h3, h4 {
	font-family: var(--bk-font-head);
	font-weight: 700;
	line-height: 1.1;
	color: var(--bk-charcoal);
}
h1 { font-size: var(--bk-h1); }
h2 { font-size: var(--bk-h2); }
h3 { font-size: var(--bk-h3); font-weight: 600; }
h4 { font-size: var(--bk-h4); font-weight: 600; }

p { margin: 0 0 var(--bk-space-2); }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 600; }

/* Small sage section label, e.g. "Reimagining art through tattooing" */
.bk-eyebrow {
	font-family: var(--bk-font-body);
	font-size: var(--bk-label);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bk-sage);
	margin: 0 0 var(--bk-space-2);
}

/* --- Buttons ----------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.62em 2.1em; /* longer + thinner pill, per the PDF */
	border: 1.5px solid transparent;
	border-radius: var(--bk-radius-pill);
	font-family: var(--bk-font-body);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }

.btn--mustard { background: var(--bk-mustard); color: var(--bk-charcoal); }
.btn--mustard:hover { background: var(--bk-mustard-dark); color: var(--bk-charcoal); }

.btn--green { background: var(--bk-green); color: var(--bk-white); }
.btn--green:hover { background: var(--bk-green-dark); color: var(--bk-white); }

.btn--outline { background: transparent; color: var(--bk-charcoal); border-color: currentColor; }
.btn--outline:hover { background: var(--bk-charcoal); color: var(--bk-cream); }

.btn--light { background: #ffffff; color: var(--bk-charcoal); }
.btn--light:hover { background: var(--bk-mustard); color: var(--bk-charcoal); }

.btn--on-dark.btn--outline { color: var(--bk-cream); }
.btn--on-dark.btn--outline:hover { background: var(--bk-cream); color: var(--bk-charcoal); }

/* --- Layout ------------------------------------------------------------ */
.container {
	width: 100%;
	max-width: var(--bk-container);
	margin-inline: auto;
	padding-inline: var(--bk-gutter);
}

.site-main { display: block; }

.page-shell { padding-block: var(--bk-section-y); }

.page-header { margin-bottom: var(--bk-space-4); }
.page-title { font-size: var(--bk-h1); }

/* A soft, full-width band helper */
.bk-band { padding-block: var(--bk-section-y); }
.bk-band--charcoal { background: var(--bk-charcoal); color: var(--bk-cream); }
.bk-band--sage { background: var(--bk-sage); color: var(--bk-white); }
.bk-band--mint { background: var(--bk-mint); }
.bk-band--cream { background: var(--bk-cream); }
.bk-band--charcoal h1, .bk-band--charcoal h2, .bk-band--charcoal h3,
.bk-band--sage h1, .bk-band--sage h2, .bk-band--sage h3 { color: var(--bk-white); }

/* --- Accessibility helpers -------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: 0; top: 0;
	z-index: 1000;
	padding: 0.75rem 1.25rem;
	background: var(--bk-charcoal);
	color: var(--bk-cream);
	border-radius: 0 0 var(--bk-radius-sm) 0;
}
.skip-link:focus {
	clip: auto;
	clip-path: none;
	width: auto; height: auto;
	margin: 0;
}

/* Visible focus everywhere, but only for keyboard users */
:focus-visible {
	outline: 3px solid var(--bk-green);
	outline-offset: 2px;
}
.bk-band--charcoal :focus-visible,
.bk-band--sage :focus-visible { outline-color: var(--bk-mustard); }

/* Inline SVG icon sizing */
.bk-icon { width: 1.5rem; height: 1.5rem; flex: none; }

/* Pagination */
.pagination { margin-top: var(--bk-space-5); display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pagination .page-numbers {
	display: inline-flex; min-width: 2.5rem; padding: 0.5rem 0.75rem;
	align-items: center; justify-content: center;
	border: 1px solid var(--bk-line); border-radius: var(--bk-radius-sm);
	color: var(--bk-charcoal);
}
.pagination .page-numbers.current { background: var(--bk-green); color: var(--bk-white); border-color: var(--bk-green); }