/* ==========================================================================
   Base: fonts, design tokens, reset, typography, layout primitives
   ========================================================================== */

/* Montserrat (Latin + Armenian in one file per weight) */
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/montserrat-Regular.woff2") format("woff2");
}
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/montserrat-Medium.woff2") format("woff2");
}
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/montserrat-SemiBold.woff2") format("woff2");
}
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/montserrat-Bold.woff2") format("woff2");
}
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("../fonts/montserrat-ExtraBold.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
	/* palette */
	--ink: #1c1b1f;
	--ink-2: #26252a;
	--ink-3: #2a292e;
	--ink-deep: #141317;
	--cream: #f2e8dd;
	--copper: #86aa5e;
	--green: #0a3b35;
	--green-2: #0d4841;
	--sage: #8fb3a9;
	--stone: #bfb3a6;
	--stone-dim: #8a8279;
	--mist: #c5d6d0;

	/* layout */
	--max: 1440px;
	--gutter: clamp(18px, 4vw, 56px);
	--section: clamp(56px, 8vw, 100px);
	--split-label: 260px;

	/* type */
	--font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Colour themes. Scoped to an element, so a green band can sit on a dark page. */
body,
.theme-dark {
	--bg: #242025;
	--fg: var(--cream);
	--muted: var(--stone);
	--dim: var(--stone-dim);
	--accent: var(--copper);
	--accent-line: var(--copper);
	--line: rgba(242, 232, 221, 0.15);
	--line-soft: rgba(242, 232, 221, 0.12);
	--line-strong: rgba(242, 232, 221, 0.35);
	--stripe-a: var(--ink-3);
	--stripe-b: var(--ink-2);
	--surface: #242025;
	--panel-fg: var(--ink);
}
.theme-green {
	--bg: #0a3934;
	--fg: var(--cream);
	--muted: var(--mist);
	--dim: var(--sage);
	--accent: var(--sage);
	--accent-line: var(--cream);
	--line: rgba(242, 232, 221, 0.15);
	--line-soft: rgba(242, 232, 221, 0.15);
	--line-strong: rgba(242, 232, 221, 0.4);
	--stripe-a: var(--green-2);
	--stripe-b: var(--green);
	--surface: var(--green-2);
	--panel-fg: var(--green);
}
/* Barbershop and School: warmer text colour on the green. */
body.route-barbershop,
body.route-school { --fg: rgb(255, 235, 228); }
body,
.theme-dark,
.theme-green {
	background-color: var(--bg);
	color: var(--fg);
}

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 1rem;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

body {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	font-family: var(--font);
	font-size: 1rem;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
.site-main { flex: 1 0 auto; }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--copper); color: var(--cream); }

/* ---------- Accessibility helpers ---------- */
.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.skip-link {
	position: absolute;
	left: 1rem; top: -4rem;
	z-index: 100;
	padding: 0.75rem 1rem;
	background: var(--cream);
	color: var(--ink);
	font-weight: 700;
}
.skip-link:focus { top: 1rem; color: var(--ink); }

/* ---------- Layout primitives ---------- */
.container {
	width: min(100% - 2 * var(--gutter), var(--max) - 2 * var(--gutter));
	margin-inline: auto;
}

.section { padding-block: var(--section); }
.section--tight { padding-block: 1rem var(--section); }
.section--flush-top { padding-top: 0; }
.section--hero { padding-block: clamp(40px, 8vw, 110px) clamp(32px, 4vw, 60px); }
.section--page-head { padding-block: clamp(40px, 6vw, 72px) clamp(24px, 3vw, 40px); }

/* Vertical rhythm: children separated by --gap */
.stack { display: flex; flex-direction: column; gap: var(--gap, 1.5rem); align-items: flex-start; }
.stack--sm { --gap: 0.75rem; }
.stack--xl { --gap: clamp(32px, 6vw, 72px); }
.stack > * { max-width: 100%; }

/* Left label + content (about, prices, programme…) */
.split {
	display: grid;
	grid-template-columns: minmax(0, var(--split-label)) minmax(0, 1fr);
	gap: clamp(20px, 5vw, 64px);
	align-items: start;
}
@media (max-width: 56.25em) {
	.split { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Typography ---------- */
.eyebrow {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--accent);
}
.split__label { padding-top: 0.5rem; }
.label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dim);
}
.label--accent { color: var(--accent); }
.label--strong { color: var(--fg); letter-spacing: 0.22em; }

.display,
.h1 {
	font-weight: 800;
	letter-spacing: -0.03em;
	text-wrap: balance;
}
.display { font-size: clamp(2.5rem, 1.1rem + 6vw, 4.5rem); line-height: 1; }
.h1 { font-size: clamp(2rem, 1rem + 3.8vw, 3.75rem); line-height: 1.08; }
.h1--xl { font-size: clamp(2.25rem, 1rem + 4.6vw, 4rem); line-height: 1; }
.h1--lg { font-size: clamp(2rem, 1rem + 3.2vw, 3.25rem); line-height: 1.02; }
.h1--md { font-size: clamp(1.875rem, 1rem + 2.6vw, 3rem); line-height: 1.05; }
.h2 { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; }
.statement {
	font-size: clamp(1.375rem, 0.9rem + 1.9vw, 2.375rem);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.02em;
	text-wrap: pretty;
}
.lead { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); line-height: 1.6; color: var(--muted); }
.prose { font-size: clamp(1.0625rem, 0.95rem + 0.55vw, 1.375rem); line-height: 1.6; color: #e6d9cb; max-width: 47.5rem; }
.prose > * + * { margin-top: 1.75rem; }
.note { font-size: 0.8125rem; color: var(--dim); line-height: 1.5; }
.muted { color: var(--muted); }
.accent { color: var(--accent); }
.link-underline {
	display: inline-block;
	padding-bottom: 4px;
	border-bottom: 1px solid currentColor;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.link-underline:hover { color: var(--accent); }