/* ===========================================================================
   MSA MENTAL CINEMATIC · base
   Шрифти, reset, типографіка, кнопки, форми, утиліти.
   =========================================================================== */

/* --- Fonts (локальні, SIL OFL 1.1, підмножина Latin + Cyrillic) ---------- */
@font-face {
	font-family: Inter;
	src: url("../fonts/inter-var.woff2") format("woff2-variations");
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: Inter;
	src: url("../fonts/inter-italic-var.woff2") format("woff2-variations");
	font-weight: 300 800;
	font-style: italic;
	font-display: swap;
}

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: auto;              /* нативний scroll, без smooth-hijack */
	scroll-padding-top: 5.5rem;
}

body {
	margin: 0;
	background: var(--navy);
	color: var(--on-dark);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;                   /* страховка від горизонтального overflow */
}

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

ul, ol { padding: 0; list-style: none; }

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

img { height: auto; }

/*
 * Брендові знаки мають розмір і без homepage.css: він вантажиться лише
 * на головній, а хедер і футер є на всіх сторінках.
 * Точні розміри та брекпоінти — у homepage.css, вона йде після base.css.
 */
.brand__logo { block-size: 40px; inline-size: auto; object-fit: contain; }
.footer__logo { inline-size: min(380px, 100%); block-size: auto; }

button, input, select, textarea {
	font: inherit;
	color: inherit;
}

a {
	color: inherit;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
	text-underline-offset: .22em;
}

table { border-collapse: collapse; width: 100%; }

hr { border: 0; border-top: 1px solid var(--rule-dark); margin: 0; }

/* --- Focus --------------------------------------------------------------- */
:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
	border-radius: var(--r-xs);
}

.plate :focus-visible,
.is-light :focus-visible { outline-color: var(--clay-deep); }

/* --- Skip link ------------------------------------------------------------ */
.skip-link {
	position: fixed;
	top: .5rem;
	left: .5rem;
	z-index: var(--z-skip);
	padding: .7rem 1.1rem;
	background: var(--chalk);
	color: var(--ink);
	border-radius: var(--r-sm);
	font-size: var(--fs-small);
	font-weight: 600;
	transform: translateY(-160%);
	transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

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

.container--narrow { max-width: var(--container-narrow); }

.stack > * + * { margin-top: var(--sp-4); }
.stack-5 > * + * { margin-top: var(--sp-5); }
.stack-6 > * + * { margin-top: var(--sp-6); }

.measure { max-width: var(--measure); }

.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- Typography ----------------------------------------------------------- */
.eyebrow {
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: var(--tr-wide);
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 var(--sp-4);
	display: flex;
	align-items: center;
	gap: .7rem;
}

.eyebrow::before {
	content: "";
	inline-size: clamp(18px, 3vw, 40px);
	block-size: 1px;
	background: currentColor;
	opacity: .55;
	flex: none;
}

.plate .eyebrow { color: var(--clay); }

h1, .h1 {
	font-size: var(--fs-h1);
	line-height: var(--lh-head);
	letter-spacing: var(--tr-head);
	font-weight: 620;
	text-wrap: balance;
}

h2, .h2 {
	font-size: var(--fs-h2);
	line-height: var(--lh-head);
	letter-spacing: var(--tr-head);
	font-weight: 620;
	text-wrap: balance;
}

h3, .h3 {
	font-size: var(--fs-h3);
	line-height: var(--lh-snug);
	letter-spacing: -.014em;
	font-weight: 600;
}

h4, .h4 {
	font-size: var(--fs-h4);
	line-height: var(--lh-snug);
	font-weight: 640;
}

.lead {
	font-size: var(--fs-lead);
	line-height: 1.45;
	letter-spacing: -.008em;
	color: var(--on-dark-2);
}

.plate .lead { color: var(--ink-2); }

.small { font-size: var(--fs-small); }
.micro { font-size: var(--fs-micro); }

.rich p + p { margin-top: 1.05em; }
.rich strong { font-weight: 660; }
.rich em { font-style: italic; }

/* Ключовий рядок — сильне твердження всередині тексту */
.key-line {
	font-size: var(--fs-h4);
	line-height: 1.42;
	font-weight: 640;
	letter-spacing: -.012em;
	border-left: 2px solid var(--clay);
	padding-left: clamp(.9rem, 2vw, 1.5rem);
}

/* --- Buttons --------------------------------------------------------------- */
.btn {
	--btn-bg: var(--clay);
	--btn-fg: var(--accent-on);
	--btn-bd: var(--clay);
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: .82rem 1.4rem;
	min-height: 46px;
	border: 1px solid var(--btn-bd);
	border-radius: var(--r-pill);
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-size: var(--fs-small);
	font-weight: 620;
	line-height: 1.2;
	letter-spacing: -.005em;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease-out),
	            color var(--dur-fast) var(--ease-out),
	            border-color var(--dur-fast) var(--ease-out),
	            transform var(--dur-fast) var(--ease-out);
}

.btn:hover { background: var(--clay-deep); border-color: var(--clay-deep); }
.btn:active { transform: translateY(1px); }

.btn__arrow {
	inline-size: 1.05em;
	block-size: 1.05em;
	flex: none;
	transition: transform var(--dur-fast) var(--ease-out);
}
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Другорядна — на темному */
.btn--ghost {
	--btn-bg: transparent;
	--btn-fg: var(--on-dark);
	--btn-bd: var(--rule-dark);
}
.btn--ghost:hover {
	background: rgba(236, 231, 217, .09);
	border-color: rgba(236, 231, 217, .38);
}

/* Другорядна — на світлому */
.plate .btn--ghost {
	--btn-fg: var(--ink);
	--btn-bd: rgba(17, 23, 30, .22);
}
.plate .btn--ghost:hover {
	background: rgba(17, 23, 30, .05);
	border-color: rgba(17, 23, 30, .45);
}

/* Низький бар'єр — тонка, «чек-лист» */
.btn--quiet {
	--btn-bg: transparent;
	--btn-fg: var(--gold);
	--btn-bd: transparent;
	padding-inline: 0;
	min-height: 36px;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .3em;
}
.btn--quiet:hover { background: transparent; --btn-fg: var(--gold-soft); }
.plate .btn--quiet { --btn-fg: var(--clay-deep); }

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3) var(--sp-4);
	align-items: center;
}

/* --- Форми ---------------------------------------------------------------- */
.field { display: block; }

.field__label {
	display: block;
	font-size: var(--fs-micro);
	font-weight: 620;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: .38rem;
}

.dark-form .field__label { color: var(--on-dark-3); }

.field__input {
	width: 100%;
	padding: .78rem .95rem;
	min-height: 46px;
	border: 1px solid var(--rule-light);
	border-radius: var(--r-sm);
	background: #fff;
	color: var(--ink);
	transition: border-color var(--dur-fast) var(--ease-out);
}

.dark-form .field__input {
	background: rgba(236, 231, 217, .06);
	border-color: var(--rule-dark);
	color: var(--on-dark);
}

.field__input:hover { border-color: color-mix(in srgb, var(--clay) 45%, transparent); }
.field__input::placeholder { color: var(--ink-3); opacity: .8; }
.dark-form .field__input::placeholder { color: var(--on-dark-3); }

.field__hint { font-size: var(--fs-micro); color: var(--ink-3); margin-top: .35rem; }
.dark-form .field__hint { color: var(--on-dark-3); }

/* Honeypot */
.hp-field {
	position: absolute !important;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}

.form-note {
	font-size: var(--fs-micro);
	color: var(--ink-3);
	line-height: 1.5;
}
.dark-form .form-note { color: var(--on-dark-3); }

.form-status {
	margin-top: var(--sp-4);
	padding: .8rem 1rem;
	border-radius: var(--r-sm);
	font-size: var(--fs-small);
	border: 1px solid transparent;
}
.form-status[hidden] { display: none; }
.form-status--ok    { background: rgba(66, 122, 84, .12); border-color: rgba(66, 122, 84, .45); color: #2c5c3d; }
.form-status--err   { background: rgba(176, 90, 60, .12); border-color: rgba(176, 90, 60, .5);  color: #8b4229; }
.dark-form .form-status--ok  { color: #a8d8ba; }
.dark-form .form-status--err { color: #e8a48a; }

/* --- «приклад» — обов'язкова позначка вигаданих артефактів ----------------- */
.example-tag {
	display: inline-flex;
	align-items: center;
	gap: .38rem;
	padding: .2rem .55rem;
	border: 1px solid currentColor;
	border-radius: var(--r-pill);
	font-size: .66rem;
	font-weight: 660;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--clay);
	background: rgba(176, 90, 60, .07);
	white-space: nowrap;
}

.on-dark .example-tag { color: var(--gold); background: rgba(197, 160, 106, .1); }

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

/* --- Print ----------------------------------------------------------------- */
@media print {
	.story-canvas, .story-rail, .site-header { display: none !important; }
	body { background: #fff; color: #000; }
}