/*
 * pulltemp's own touches on the shared parts (D16, butcher paper): a paper header ruled in
 * ink and the name in the slab. The ticket is the core's layout, chosen in site.json.
 * Tokens only: the palette lives in design/acss-roles.json. Each rule starts with `html` so it
 * wins over the core's stylesheet whatever order they print in (oview-site's Site::boot).
 */

/* The page is the base role itself, a light-dark() pair, which follows the root's colour
   scheme: dark mode has to say so, or the kraft stays light behind a dark header. */
html[data-brx-theme="dark"] {
	color-scheme: dark;
}

html .ov-site-header {
	background: var(--base-light, #f8f2e7);
	border-block-end: 2px solid var(--neutral, #2a1d17);
}

html .ov-site-brand {
	font-family: var(--font-slab, Georgia, serif);
	font-weight: 700;
	letter-spacing: 0;
}

/* Cards without photos (site.json initials: false) as small tickets: the twine edge. */
html .ov-card--text a {
	border: 2px dashed var(--secondary, #b98b4e);
	background: var(--base-ultra-light, #fffcf6);
}

/* The cut photos are square: a square frame shows all of the meat, where the core's 4:3 cut it. */
html .ov-card__image {
	aspect-ratio: 1;
}

/* The home page's hero as a big ticket: the ticket's white, its dashed twine edge at the foot
   (drawn the width of the screen, as the band is). The page and the core's band are both the
   kraft here, and the header is paper, so the ticket's shade is the one that stands apart: in
   dark mode it turns the darkest, below both. The most-smoked card is paper on it. */
html .ov-home__hero {
	position: relative;
	background: var(--base-ultra-light, #fffcf6);
	box-shadow: 0 0 0 100vmax var(--base-ultra-light, #fffcf6);
}

html .ov-home__hero::after {
	content: "";
	position: absolute;
	inset-inline: -100vmax;
	inset-block-end: 0;
	border-block-end: 2px dashed var(--secondary, #b98b4e);
}

html .ov-home__hero .ov-home__quick {
	background: var(--base-light, #f8f2e7);
}

/* The footer on paper too, ruled in ink as the header is: the page between them is the kraft. */
html .ov-site-footer {
	background: var(--base-light, #f8f2e7);
	border-block-start: 2px solid var(--neutral, #2a1d17);
}