/* ============================================================
   BENOIT BULLDOGS — BASE
   Reset, typography, links, focus, layout primitives.
   ============================================================ */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }
ul[class], ol[class] { list-style: none; padding: 0; }

/* ---- Document ---- */
body {
	background: var(--color-background);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: var(--leading-body);
	-webkit-font-smoothing: antialiased;
}

/* ---- Headings ---- */
h1, h2, h3, .display {
	font-family: var(--font-display);
	font-weight: 500;
	line-height: var(--leading-heading);
	letter-spacing: -0.01em;
	text-wrap: balance;
}
h1 { font-size: var(--text-h1); line-height: var(--leading-tight); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); font-weight: 600; }
h4 { font-family: var(--font-body); font-size: var(--text-h4); font-weight: 700; line-height: 1.4; }
h5 { font-family: var(--font-body); font-size: var(--text-h5); font-weight: 600; line-height: 1.4; }
.display { font-size: var(--text-display); line-height: 1.08; }

.lead  { font-size: var(--text-lead); line-height: 1.6; }
.small { font-size: var(--text-small); }
.caption { font-size: var(--text-caption); color: var(--color-text-secondary); }

/* Eyebrow label — the system's only uppercase + tracked text */
.eyebrow {
	font-size: var(--text-label);
	font-weight: 600;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-accent-text);
}

/* Merienda accent — signatures, short human touches. Never paragraphs. */
.accent, .accent-label {
	font-family: var(--font-accent);
	font-size: var(--text-accent);
	font-weight: 400;
	line-height: 1.5;
}
.accent-label { color: var(--color-accent-text); }

/* ---- Links ---- */
a {
	color: var(--color-primary-hover);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--color-accent-text); }
a:active { color: var(--color-primary-active); }

/* Quiet links (nav, cards) — underline appears on hover instead */
.link-quiet, .site-nav a, .site-footer a,
.card-puppy a, .card-dog a, .card-article a {
	color: inherit;
	text-decoration: none;
}
.link-quiet:hover, .site-nav a:hover,
.card-puppy a:hover, .card-dog a:hover, .card-article a:hover {
	color: var(--color-primary-hover);
}

/* Arrow link */
.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	font-weight: 600;
	text-decoration: none;
	color: var(--color-primary-hover);
}
.link-arrow .icon { transition: translate var(--duration-fast) var(--ease-out); }
.link-arrow:hover .icon { translate: 3px 0; }
.link-arrow--light { color: var(--color-text-inverse); }
.link-arrow--light:hover { color: var(--color-accent); }

/* ---- Focus — one visible ring everywhere ---- */
:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

/* Skip link */
.skip-link {
	position: absolute;
	left: var(--space-md);
	top: -100%;
	z-index: 100;
	background: var(--color-text);
	color: var(--color-text-inverse);
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius-sm);
	text-decoration: none;
}
.skip-link:focus { top: var(--space-md); color: var(--color-text-inverse); }

/* ---- Layout primitives ---- */
.container {
	width: 100%;
	max-width: calc(var(--container-max) + 2 * var(--container-pad));
	margin-inline: auto;
	padding-inline: var(--container-pad);
}
.container--wide { max-width: calc(var(--container-wide) + 2 * var(--container-pad)); }
.container--text { max-width: calc(var(--container-text) + 2 * var(--container-pad)); }

.section { padding-block: var(--space-section); }
.section--sm { padding-block: var(--space-section-sm); }
.section--alt { background: var(--color-background-alt); }

/* Stack rhythm for prose */
.flow > * + * { margin-block-start: var(--space-md); }
.flow > h2 { margin-block-start: var(--space-xl); }
.flow > h3 { margin-block-start: var(--space-lg); }

/* Reading measure for long-form content */
.entry-content { max-width: 65ch; }
.entry-content img { border-radius: var(--radius-img); }

/* ---- Grid ---- */
.grid { display: grid; gap: var(--gap-grid); }
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
	.grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
	.grid--3 { grid-template-columns: repeat(3, 1fr); }
	.grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Editorial split — asymmetric two-column for photo + text rows */
.split { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 900px) {
	.split { grid-template-columns: 7fr 5fr; gap: var(--space-3xl); }
	.split--reverse { grid-template-columns: 5fr 7fr; }
	.split--reverse > :first-child { order: 2; }
}

/* ---- Media / image system ---- */
.media { display: block; overflow: hidden; background: var(--color-surface); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--portrait  { aspect-ratio: 4 / 5; border-radius: var(--radius-img); }
.media--landscape { aspect-ratio: 3 / 2; border-radius: var(--radius-img); }
.media--square    { aspect-ratio: 1; border-radius: var(--radius-img); }
.media--wide      { aspect-ratio: 16 / 9; border-radius: 0; }

/* Gentle settle on card imagery */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.media img { transition: scale var(--duration-base) var(--ease-out); }
	a.media:hover img, a:hover + * .media img { scale: 1.03; }
}

/* ---- Icons ---- */
.icon { width: 1.25em; height: 1.25em; flex: none; }

/* ---- Scroll reveal (reveal.js adds .is-visible) ---- */
@media (prefers-reduced-motion: no-preference) {
	.reveal {
		opacity: 0;
		translate: 0 16px;
		transition: opacity var(--duration-reveal) var(--ease-out),
			translate var(--duration-reveal) var(--ease-out);
	}
	.reveal.is-visible { opacity: 1; translate: 0 0; }
}

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

/* ---- Screen-reader-only utility ---- */
.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}