/*
Theme Name:   SnoopyDogs Child
Theme URI:    https://snoopydogs.com/
Description:  GeneratePress child theme for SnoopyDogs. Presentation only: templates, one stylesheet and one small script. Features live in the SnoopyDogs Core plugin.
Author:       SnoopyDogs
Template:     generatepress
Version:      3.5.0
Requires at least: 6.5
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  snoopydogs
*/

/* ------------------------------------------------------------------
   1. Fonts and tokens
   Answer-card design: white cards on a cool grey ground; each verdict is a solid card in its colour.
   Fonts (SIL OFL 1.1, licences in assets/fonts/): Gabarito for headings, Atkinson Hyperlegible Next
   for reading. Contrast ratios are checked in tests/contrast.spec.mjs.
   Shapes: cards use --card, inner surfaces --tile, fields --control; buttons and chips are pills.
   ------------------------------------------------------------------ */

@font-face {
	font-family: "Gabarito";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("assets/fonts/gabarito-latin-wght.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Gabarito";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("assets/fonts/gabarito-latin-ext-wght.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Atkinson Hyperlegible Next";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("assets/fonts/atkinson-hyperlegible-next-latin-wght.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Atkinson Hyperlegible Next";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("assets/fonts/atkinson-hyperlegible-next-latin-ext-wght.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--ink: #1b2a4a;
	--ink-soft: #4a5568;
	--ground: #f5f6fa;
	--paper: #ffffff;
	--mist: #eef1f6;
	--line: #e3e7ef;
	--line-strong: #8a94a6;
	--sun: #f5b82e;
	--sun-deep: #e0a21b;
	--on-dark-soft: #c9d1de;

	--toxic: #b3261e;
	--toxic-deep: #8f1e18;
	--toxic-bg: #fcebea;
	--caution: #875700;
	--caution-fill: #f2b33d;
	--caution-bg: #fdf3df;
	--safe: #1b7a43;
	--safe-bg: #e8f5ed;
	--unknown: #4a5568;
	--unknown-bg: #eef1f5;

	--display: "Gabarito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--font: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--text: 1.0625rem;
	--h1: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
	--h2: clamp(1.625rem, 1.35rem + 1vw, 2.25rem);
	--h3: 1.3125rem;

	--card: 28px;
	--tile: 20px;
	--control: 16px;
	--pill: 999px;
	--lift: 0 1px 2px rgb(27 42 74 / 6%), 0 18px 40px -22px rgb(27 42 74 / 35%);
	--gutter: clamp(1rem, 0.5rem + 2.2vw, 2.5rem);
	--wrap: clamp(72rem, 86vw, 88rem);
	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2.5rem;
	--space-5: 4rem;
	--space-6: 6rem;
	--tap: 2.75rem;
	--ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------ */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: 5rem;
}

body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font-family: var(--font);
	font-size: var(--text);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

body.has-callbar {
	padding-bottom: 6rem;
}

[hidden] {
	display: none !important;
}

img,
svg {
	max-width: 100%;
}

h1,
h2,
h3,
h4 {
	margin: 0 0 var(--space-1);
	font-family: var(--display);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

h1 {
	font-size: var(--h1);
	font-weight: 900;
	letter-spacing: -0.035em;
}

h2 {
	margin-top: var(--space-5);
	font-size: var(--h2);
}

h3 {
	margin-top: var(--space-3);
	font-size: var(--h3);
	letter-spacing: -0.015em;
}

p,
ul,
ol,
dl {
	margin: 0 0 var(--space-2);
}

p {
	text-wrap: pretty;
}

ul,
ol {
	padding-left: 1.4rem;
}

li {
	margin-bottom: 0.35rem;
}

li::marker {
	color: var(--ink-soft);
}

strong,
b {
	font-weight: 700;
}

a {
	color: var(--ink);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover {
	text-decoration-thickness: 2px;
}

:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 3px;
	border-radius: 6px;
}

::selection {
	background: var(--sun);
	color: var(--ink);
}

.screen-reader-text,
.skip-link:not(:focus) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	z-index: 100;
	top: 0.5rem;
	left: 0.5rem;
	padding: 0.75rem 1rem;
	border-radius: var(--control);
	background: var(--ink);
	color: var(--paper);
}

.snoopy-wrap {
	width: min(100% - 2 * var(--gutter), var(--wrap));
	margin-inline: auto;
}

.snoopy-icon,
.snoopy-food-icon {
	flex: none;
}

/* ------------------------------------------------------------------
   3. Header, navigation, footer
   ------------------------------------------------------------------ */

.snoopy-header {
	position: relative;
	z-index: 30;
}

.snoopy-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0 0.5rem;
	width: min(100% - 2 * var(--gutter), var(--wrap));
	min-height: 4.25rem;
	margin-inline: auto;
	padding-block: 0.75rem;
}

.snoopy-logo {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	gap: 0.6rem;
	margin-right: auto;
	color: var(--ink);
	text-decoration: none;
}

.snoopy-logo__mark {
	width: 2.375rem;
	height: 2.375rem;
	flex: none;
}

.snoopy-logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.snoopy-logo__name {
	font-family: var(--display);
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.snoopy-logo__tagline {
	display: none;
	font-size: 0.8125rem;
	color: var(--ink-soft);
}

.snoopy-header__emergency {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	padding: 0 1.15rem;
	border-radius: var(--pill);
	background: var(--toxic);
	color: var(--paper);
	font-weight: 700;
	text-decoration: none;
	transition: background-color 150ms var(--ease);
}

.snoopy-header__emergency:hover {
	background: var(--toxic-deep);
}

.snoopy-nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: var(--tap);
	padding: 0 1rem;
	border: 0;
	border-radius: var(--pill);
	background: var(--paper);
	color: var(--ink);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 1px 2px rgb(27 42 74 / 8%);
}

.snoopy-nav {
	flex-basis: 100%;
}

/* Small phones: logo, Emergency and Menu share one row; the Menu word stays for screen readers. */
@media (max-width: 26rem) {
	.snoopy-logo__mark {
		width: 2rem;
		height: 2rem;
	}

	.snoopy-logo__name {
		font-size: 1.1875rem;
	}

	.snoopy-header__emergency {
		padding: 0 0.85rem;
	}

	.snoopy-nav__toggle {
		justify-content: center;
		width: var(--tap);
		padding: 0;
	}

	.snoopy-nav__toggle-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

.js-nav .snoopy-nav {
	display: none;
}

.js-nav.nav-open .snoopy-nav {
	display: block;
}

.snoopy-nav__list {
	margin: 0.75rem 0 0.25rem;
	padding: 0.5rem;
	border-radius: var(--tile);
	background: var(--paper);
	box-shadow: var(--lift);
	list-style: none;
}

.snoopy-nav__list li {
	margin: 0;
}

.snoopy-nav__list a {
	display: flex;
	align-items: center;
	min-height: 3.25rem;
	padding: 0.4rem 1rem;
	border-radius: var(--control);
	font-family: var(--display);
	font-size: 1.25rem;
	font-weight: 700;
	text-decoration: none;
}

.snoopy-nav__list a:hover,
.snoopy-nav__list .current-menu-item > a,
.snoopy-nav__list a[aria-current="page"] {
	background: var(--mist);
}

.snoopy-nav__list .is-emergency {
	display: none;
}

@media (min-width: 62rem) {
	.snoopy-header__inner {
		flex-wrap: nowrap;
		gap: var(--space-2);
		min-height: 5rem;
	}

	.snoopy-logo__tagline {
		display: block;
	}

	.snoopy-header__emergency {
		order: 3;
	}

	.snoopy-nav {
		flex-basis: auto;
		order: 2;
	}

	.js-nav .snoopy-nav {
		display: block;
	}

	.snoopy-nav__list {
		display: flex;
		gap: 0.25rem;
		margin: 0;
		padding: 0;
		background: none;
		box-shadow: none;
	}

	.snoopy-nav__list a {
		min-height: var(--tap);
		padding: 0 1rem;
		border-radius: var(--pill);
		font-family: var(--font);
		font-size: 1rem;
		font-weight: 600;
		transition: background-color 150ms var(--ease);
	}

	.snoopy-nav__list a:hover,
	.snoopy-nav__list .current-menu-item > a,
	.snoopy-nav__list a[aria-current="page"] {
		background: var(--paper);
	}
}

/* Footer: a white card on the ground, the three verdict colours along its top edge. */
.snoopy-footer {
	margin-top: var(--space-6);
	padding-bottom: var(--space-3);
	color: var(--ink-soft);
}

.snoopy-footer__card {
	width: min(100% - 2 * var(--gutter), var(--wrap));
	margin-inline: auto;
	overflow: hidden;
	border-radius: var(--card);
	background: var(--paper);
}

.snoopy-footer__stripe {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	height: 0.5rem;
}

.snoopy-footer__stripe span:nth-child(1) {
	background: var(--toxic);
}

.snoopy-footer__stripe span:nth-child(2) {
	background: var(--caution-fill);
}

.snoopy-footer__stripe span:nth-child(3) {
	background: var(--safe);
}

.snoopy-footer__body {
	display: grid;
	gap: var(--space-4) var(--space-5);
	padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}

.snoopy-footer__logo {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--ink);
	font-family: var(--display);
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	text-decoration: none;
}

.snoopy-footer__logo .snoopy-logo__mark {
	width: 2.25rem;
	height: 2.25rem;
}

.snoopy-footer__disclaimer {
	max-width: 32rem;
	margin: 0.75rem 0 var(--space-2);
	font-size: 0.9375rem;
}

.snoopy-footer__urgent {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	padding: 0 1.25rem;
	border-radius: var(--pill);
	background: var(--toxic);
	color: var(--paper);
	font-weight: 700;
	text-decoration: none;
	transition: background-color 150ms var(--ease);
}

.snoopy-footer__urgent:hover {
	background: var(--toxic-deep);
}

.snoopy-footer__menu {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, max-content));
	gap: 0 var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.snoopy-footer__menu li {
	margin: 0;
}

.snoopy-footer__menu a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
}

.snoopy-footer__menu a:hover {
	text-decoration: underline;
}

.snoopy-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.25rem var(--space-4);
	padding: 0.75rem clamp(1.5rem, 1rem + 2vw, 2.75rem);
	background: var(--mist);
	font-size: 0.875rem;
}

.snoopy-footer__copyright {
	margin: 0;
}

.snoopy-footer__credit {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	color: var(--ink);
	font-weight: 600;
}

@media (min-width: 56rem) {
	.snoopy-footer__body {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		align-items: start;
	}
}

/* ------------------------------------------------------------------
   4. Components
   ------------------------------------------------------------------ */

.snoopy-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 3.25rem;
	padding: 0 1.5rem;
	border: 0;
	border-radius: var(--pill);
	background: var(--sun);
	color: var(--ink);
	font-family: var(--display);
	font-size: 1.0625rem;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 150ms var(--ease), transform 150ms var(--ease);
}

.snoopy-button:hover {
	background: var(--sun-deep);
}

.snoopy-button:active {
	transform: scale(0.97);
}

.snoopy-button--quiet {
	background: var(--paper);
	box-shadow: inset 0 0 0 1px var(--line);
}

.snoopy-button--quiet:hover {
	background: var(--mist);
}

.snoopy-button--danger {
	background: var(--toxic);
	color: var(--paper);
}

.snoopy-button--danger:hover {
	background: var(--toxic-deep);
}

/* Verdict marks: icon shape + word + colour. */
.snoopy-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-family: var(--display);
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.3;
	white-space: nowrap;
}

.snoopy-chip svg {
	width: 1.1em;
	height: 1.1em;
}

.snoopy-chip--safe {
	color: var(--safe);
}

.snoopy-chip--caution {
	color: var(--caution);
}

.snoopy-chip--toxic {
	color: var(--toxic);
}

.snoopy-chip--unknown {
	color: var(--unknown);
}

/* Food pictures in lists: a tinted tile in the verdict's colour. */
.snoopy-thumb {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 14px;
	background: var(--unknown-bg);
	color: var(--unknown);
}

.snoopy-thumb svg {
	stroke-width: 1.75;
}

.snoopy-thumb--toxic {
	background: var(--toxic-bg);
	color: var(--toxic);
}

.snoopy-thumb--caution {
	background: var(--caution-bg);
	color: var(--caution);
}

.snoopy-thumb--safe {
	background: var(--safe-bg);
	color: var(--safe);
}

/* Form fields. */
.snoopy-field {
	margin-bottom: var(--space-3);
}

.snoopy-field label {
	display: block;
	margin-bottom: 0.4rem;
	font-weight: 700;
}

.snoopy-field input[type="text"],
.snoopy-field input[type="email"],
.snoopy-field input[type="search"],
.snoopy-field select,
.snoopy-field textarea,
.snoopy-index select {
	width: 100%;
	min-height: 3.25rem;
	padding: 0.65rem 1rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--control);
	background: var(--paper);
	color: var(--ink);
	font: inherit;
}

.snoopy-field input:hover,
.snoopy-field select:hover,
.snoopy-field textarea:hover,
.snoopy-index select:hover {
	border-color: var(--ink);
}

.snoopy-field textarea {
	min-height: 9rem;
}

.snoopy-field--check {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.2rem 0.7rem;
	align-items: start;
}

.snoopy-field--check label {
	margin: 0;
	font-weight: 400;
}

.snoopy-field--check input {
	width: 1.5rem;
	height: 1.5rem;
	margin: 0.15rem 0 0;
	accent-color: var(--ink);
}

.snoopy-field--check .snoopy-field__error {
	grid-column: 1 / -1;
}

.snoopy-field--error input,
.snoopy-field--error select,
.snoopy-field--error textarea {
	border-color: var(--toxic);
	box-shadow: 0 0 0 1px var(--toxic);
}

.snoopy-field__error {
	margin: 0.35rem 0 0;
	color: var(--toxic);
	font-weight: 700;
}

.snoopy-field--trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.snoopy-form {
	max-width: 36rem;
}

.snoopy-form-status {
	margin-bottom: var(--space-3);
	padding: 1rem 1.25rem;
	border-radius: var(--control);
	background: var(--safe-bg);
	color: var(--ink);
}

.snoopy-form-status--error {
	background: var(--toxic-bg);
	color: var(--toxic);
}

/* Search: a white bar that floats on the ground, with the yellow Check pill inside. */
.snoopy-search {
	position: relative;
	max-width: 40rem;
}

.snoopy-search__label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 1.125rem;
	font-weight: 700;
}

.snoopy-search__field {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.5rem 0.5rem 1.25rem;
	border-radius: var(--pill);
	background: var(--paper);
	box-shadow: var(--lift);
}

.snoopy-search__field:focus-within {
	outline: 3px solid var(--ink);
	outline-offset: 3px;
}

.snoopy-search__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 3.25rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ink);
	font: inherit;
	font-size: 1.1875rem;
	font-weight: 600;
	appearance: none;
}

.snoopy-search__input:focus-visible {
	outline: none;
}

.snoopy-search__input::placeholder {
	color: #5f6673;
	font-weight: 400;
}

.snoopy-search__submit {
	min-height: 3.25rem;
	padding-inline: 1.75rem;
}

@media (max-width: 26rem) {
	.snoopy-search__field {
		padding-left: 1rem;
	}

	.snoopy-search__input {
		font-size: 1.0625rem;
	}

	.snoopy-search__submit {
		padding-inline: 1.15rem;
	}
}

.snoopy-search__hint {
	min-height: 0;
	margin: 0.6rem 0 0 1.25rem;
	font-size: 0.9375rem;
	color: var(--ink-soft);
}

.snoopy-search__hint:empty {
	display: none;
}

.snoopy-search__error {
	margin: 0.6rem 0 0 1.25rem;
	color: var(--toxic);
	font-weight: 700;
}

.snoopy-search__field:has([aria-invalid="true"]) {
	box-shadow: var(--lift), inset 0 0 0 2px var(--toxic);
}

.snoopy-search__results {
	position: absolute;
	z-index: 20;
	right: 0;
	left: 0;
	margin: 0.6rem 0 0;
	padding: 0.5rem;
	border-radius: var(--tile);
	background: var(--paper);
	box-shadow: 0 24px 50px -18px rgb(27 42 74 / 40%);
	list-style: none;
}

.snoopy-search__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	min-height: 3rem;
	margin: 0;
	padding: 0.4rem 0.9rem;
	border-radius: var(--control);
	cursor: pointer;
}

.snoopy-search__option[aria-selected="true"],
.snoopy-search__option:hover {
	background: var(--mist);
}

.snoopy-search__name {
	font-weight: 700;
}

.snoopy-search__group {
	margin: 0;
	padding: 0.4rem 0.9rem;
	color: var(--ink-soft);
	font-size: 0.875rem;
	font-weight: 700;
}

.snoopy-search__unknown,
.snoopy-unknown {
	max-width: 42rem;
	margin-top: var(--space-2);
	padding: 1.25rem 1.5rem;
	border-radius: var(--tile);
	background: var(--paper);
	color: var(--ink);
}

.snoopy-search__unknown p:last-child,
.snoopy-unknown p:last-child {
	margin-bottom: 0;
}

.snoopy-search__actions,
.snoopy-unknown__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.snoopy-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: var(--space-3) 0 0;
}

.snoopy-chips__label {
	margin-right: 0.15rem;
	color: var(--ink-soft);
	font-weight: 600;
}

.snoopy-chips__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--tap);
	padding: 0 1.05rem 0 0.85rem;
	border-radius: var(--pill);
	background: var(--paper);
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 1px 2px rgb(27 42 74 / 6%);
	transition: box-shadow 150ms var(--ease);
}

.snoopy-chips__chip:hover {
	box-shadow: 0 0 0 2px var(--ink);
}

/* Helplines and tap-to-call. */
.snoopy-call {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	min-height: 4.5rem;
	margin: 0 0 var(--space-2);
	padding: 0.75rem 1.5rem;
	border-radius: var(--pill);
	background: var(--toxic);
	color: var(--paper);
	text-decoration: none;
	transition: background-color 150ms var(--ease);
}

.snoopy-call:hover {
	background: var(--toxic-deep);
}

.snoopy-call svg {
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
}

.snoopy-call__text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.snoopy-call__label {
	font-size: 0.875rem;
	font-weight: 600;
}

.snoopy-call__number {
	font-family: var(--display);
	font-size: 1.625rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.snoopy-helplines__picker {
	margin-bottom: var(--space-2);
}

.snoopy-helplines__picker label {
	display: block;
	margin-bottom: 0.4rem;
	font-weight: 700;
}

.snoopy-helplines__picker select {
	width: 100%;
	max-width: 24rem;
	min-height: 3.25rem;
	padding: 0 1rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--control);
	background: var(--paper);
	color: var(--ink);
	font: inherit;
}

.snoopy-helplines__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.snoopy-helpline {
	display: grid;
	gap: 0.15rem;
	margin: 0;
	padding: 1rem 0;
	border-top: 1px solid var(--line);
}

.snoopy-helpline__country {
	color: var(--ink-soft);
	font-size: 0.9375rem;
	font-weight: 700;
}

.snoopy-helpline__name {
	font-weight: 700;
}

.snoopy-helpline__phone {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	min-height: var(--tap);
	font-family: var(--display);
	font-size: 1.5rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.snoopy-helpline__fee,
.snoopy-helpline__meta {
	color: var(--ink-soft);
	font-size: 0.9375rem;
}

.snoopy-helpline__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 1rem;
}

.snoopy-helplines__fallback {
	padding: 1rem 1.25rem;
	border-radius: var(--control);
	background: var(--caution-bg);
	color: #5e3d00;
	font-weight: 600;
}

/* Helplines on a dark card: the home emergency band (slate) and the Emergency page (navy). */
.snoopy-emergency .snoopy-helpline,
.snoopy-page--emergency-help .snoopy-helpline {
	border-top-color: rgb(255 255 255 / 16%);
}

.snoopy-page--emergency-help .snoopy-helpline__country,
.snoopy-page--emergency-help .snoopy-helpline__fee,
.snoopy-page--emergency-help .snoopy-helpline__meta {
	color: var(--on-dark-soft);
}

/* On slate the softer text uses --line (6.07:1); --on-dark-soft would be 4.89:1. */
.snoopy-emergency .snoopy-helpline__country,
.snoopy-emergency .snoopy-helpline__fee,
.snoopy-emergency .snoopy-helpline__meta {
	color: var(--line);
}

.snoopy-emergency a,
.snoopy-page--emergency-help .snoopy-helplines a {
	color: var(--paper);
}

.snoopy-emergency .snoopy-helplines__picker select,
.snoopy-page--emergency-help .snoopy-helplines__picker select {
	border-color: transparent;
}

/* Floating call bar on phone food pages. */
.snoopy-callbar {
	position: fixed;
	z-index: 60;
	right: 0.75rem;
	bottom: calc(0.75rem + env(safe-area-inset-bottom));
	left: 0.75rem;
	display: flex;
	gap: 0.5rem;
	padding: 0.5rem;
	border-radius: var(--pill);
	background: var(--ink);
	box-shadow: 0 16px 36px -10px rgb(27 42 74 / 55%);
}

.snoopy-callbar__call,
.snoopy-callbar__help {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 3.25rem;
	border-radius: var(--pill);
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

.snoopy-callbar__call {
	flex: 1 1 auto;
	padding: 0 0.9rem;
	background: var(--toxic);
	color: var(--paper);
	white-space: nowrap;
}

.snoopy-callbar__help {
	flex: none;
	padding: 0 1rem;
	color: var(--paper);
	font-size: 0.9375rem;
}

@media (max-width: 26rem) {
	.snoopy-callbar {
		right: 0.5rem;
		left: 0.5rem;
		gap: 0.25rem;
	}

	.snoopy-callbar__call {
		gap: 0.4rem;
		padding: 0 0.7rem;
		font-size: 0.9375rem;
	}

	.snoopy-callbar__help {
		max-width: 6.5rem;
		padding: 0 0.6rem;
		font-size: 0.875rem;
		line-height: 1.15;
	}
}

@media (min-width: 62rem) {
	.snoopy-callbar {
		display: none;
	}

	body.has-callbar {
		padding-bottom: 0;
	}
}

/* Unit toggle (food pages that give amounts). */
.snoopy-units {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin: 0 0 var(--space-2);
}

.snoopy-units__label {
	color: var(--ink-soft);
	font-weight: 600;
}

.snoopy-units__buttons {
	display: inline-flex;
	padding: 0.25rem;
	border-radius: var(--pill);
	background: var(--paper);
	box-shadow: inset 0 0 0 1px var(--line);
}

.snoopy-units__buttons button {
	min-height: 2.75rem;
	padding: 0 1.1rem;
	border: 0;
	border-radius: var(--pill);
	background: transparent;
	color: var(--ink);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.snoopy-units__buttons button[aria-pressed="true"] {
	background: var(--ink);
	color: var(--paper);
}

/* ------------------------------------------------------------------
   5. Food pages
   The opening is one solid card in the verdict's colour: question, verdict word, answer, picture.
   ------------------------------------------------------------------ */

.snoopy-foodpage {
	padding-top: var(--space-1);
}

.snoopy-food {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: var(--space-4);
}

.snoopy-food > * {
	grid-column: 1;
	min-width: 0;
}

.snoopy-food__head {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
	padding: clamp(1.5rem, 1rem + 2.6vw, 3.25rem);
	overflow: hidden;
	border-radius: calc(var(--card) + 4px);
	background: var(--paper);
	color: var(--ink);
}

.snoopy-food__head--toxic {
	background: var(--toxic);
	color: var(--paper);
}

.snoopy-food__head--caution {
	background: var(--caution-fill);
	color: var(--ink);
}

.snoopy-food__head--safe {
	background: var(--safe);
	color: var(--paper);
}

.snoopy-food__head--none .snoopy-food__picture {
	color: var(--ink-soft);
}

.snoopy-food__picture {
	display: grid;
	place-items: center;
}

.snoopy-food__picture svg {
	width: clamp(9rem, 4rem + 11vw, 15rem);
	height: auto;
	stroke-width: 1.1;
	opacity: 0.92;
}

.snoopy-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 0.5rem;
	margin: 0 0 var(--space-3);
	padding: 0;
	font-size: 0.9375rem;
	list-style: none;
}

.snoopy-crumbs li {
	margin: 0;
}

.snoopy-crumbs li + li::before {
	content: "/";
	margin-right: 0.5rem;
}

.snoopy-crumbs a {
	display: inline-block;
	padding-block: 0.2rem;
	color: inherit;
}

.snoopy-food__title {
	margin-bottom: var(--space-3);
	font-size: clamp(2.125rem, 1.4rem + 2.8vw, 3.75rem);
	font-weight: 800;
	letter-spacing: -0.03em;
}

.snoopy-verdict {
	color: inherit;
}

.snoopy-verdict__badge {
	display: flex;
	align-items: center;
	gap: 0.12em;
	margin: 0 0 var(--space-3);
	font-family: var(--display);
	font-size: clamp(3.5rem, 2.3rem + 5vw, 7rem);
	font-weight: 900;
	line-height: 0.9;
	letter-spacing: -0.045em;
}

.snoopy-verdict__badge svg {
	width: 0.74em;
	height: 0.74em;
	margin-right: 0.1em;
	stroke-width: 2.5;
}

.snoopy-verdict__label {
	line-height: 0.9;
}

.snoopy-verdict__answer {
	max-width: 38rem;
	margin: 0;
	font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
	font-weight: 600;
	line-height: 1.4;
}

.snoopy-verdict__aka {
	margin: var(--space-2) 0 0;
	font-size: 0.9375rem;
}

.snoopy-alert {
	margin-bottom: var(--space-4);
	padding: var(--space-4) var(--space-3) var(--space-3);
	border-radius: var(--card);
	background: var(--paper);
}

.snoopy-alert__title {
	margin: 0 0 var(--space-1);
	color: var(--toxic);
	font-size: 1.625rem;
}

.snoopy-alert__lead {
	font-weight: 700;
}

.snoopy-alert__note {
	color: var(--ink-soft);
}

.snoopy-alert__more {
	margin: var(--space-1) 0 0;
	font-size: 0.9375rem;
}

.snoopy-alert__more a {
	display: inline-block;
	padding-block: 0.7rem;
	font-weight: 600;
}

.snoopy-note {
	margin-bottom: var(--space-4);
	padding: 1.25rem 1.5rem;
	border-radius: var(--tile);
	background: var(--caution-bg);
}

.snoopy-note > :last-child {
	margin-bottom: 0;
}

.snoopy-prose {
	max-width: 44rem;
	font-size: 1.125rem;
}

.snoopy-section {
	max-width: 46rem;
}

.snoopy-section h2 {
	margin-top: var(--space-4);
}

.snoopy-section:first-of-type h2 {
	margin-top: 0;
}

/* Symptoms read as a set of tags, not a long bulleted column. */
.snoopy-symptoms {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0;
	list-style: none;
}

.snoopy-symptoms li {
	margin: 0;
	padding: 0.55rem 1.05rem;
	border-radius: var(--pill);
	background: var(--paper);
	font-weight: 600;
	line-height: 1.35;
}

.snoopy-sources {
	max-width: 46rem;
	margin-top: var(--space-4);
	padding: var(--space-4);
	border-radius: var(--card);
	background: var(--paper);
}

.snoopy-sources h2 {
	margin-top: 0;
	font-size: 1.5rem;
}

.snoopy-sources__list {
	padding-left: 1.4rem;
}

.snoopy-sources__list li {
	margin-bottom: 1.1rem;
}

.snoopy-sources__list li::marker {
	font-weight: 700;
}

.snoopy-sources__list a {
	font-weight: 700;
}

.snoopy-sources__date {
	margin-left: 0.4rem;
	color: var(--ink-soft);
	font-size: 0.875rem;
}

.snoopy-sources__excerpt {
	display: block;
	margin-top: 0.4rem;
	color: var(--ink-soft);
	font-size: 0.9375rem;
}

.snoopy-sources__reviewed {
	margin-bottom: 0;
	font-weight: 600;
}

.snoopy-related {
	margin-top: var(--space-4);
}

.snoopy-related h2 {
	margin-top: 0;
	font-size: 1.5rem;
}

.snoopy-related__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.snoopy-related__list li {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	padding: 0.35rem 1.1rem 0.35rem 0.35rem;
	border-radius: var(--pill);
	background: var(--paper);
}

.snoopy-related__list .snoopy-thumb {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--pill);
}

.snoopy-related__list a {
	font-weight: 700;
	text-decoration: none;
}

.snoopy-related__list a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--pill);
}

.snoopy-related__list li:hover {
	box-shadow: 0 0 0 2px var(--ink);
}

.snoopy-disclaimer {
	max-width: 46rem;
	margin-top: var(--space-4);
	color: var(--ink-soft);
	font-size: 0.9375rem;
}

.snoopy-offer {
	max-width: 46rem;
	margin-top: var(--space-4);
	padding: var(--space-3);
	border-radius: var(--tile);
	background: var(--paper);
}

.snoopy-offer__eyebrow {
	margin: 0 0 0.25rem;
	color: var(--ink-soft);
	font-size: 0.875rem;
	font-weight: 600;
}

.snoopy-offer__heading {
	margin: 0 0 0.35rem;
	font-size: 1.25rem;
}

@media (max-width: 47.99rem) {
	.snoopy-food__head {
		grid-template-columns: minmax(0, 1fr);
	}

	.snoopy-food__picture {
		position: absolute;
		top: 0.75rem;
		right: -1.75rem;
		pointer-events: none;
	}

	.snoopy-food__picture svg {
		width: 9rem;
		opacity: 0.2;
	}

	.snoopy-sources {
		padding: var(--space-3);
	}
}

@media (min-width: 62rem) {
	.snoopy-food {
		grid-template-columns: minmax(0, 1fr) 25rem;
	}

	.snoopy-food > .snoopy-food__head {
		grid-column: 1 / -1;
	}

	.snoopy-food > .snoopy-alert {
		grid-column: 2;
		grid-row: 2 / span 8;
		align-self: start;
		position: sticky;
		top: 1.5rem;
	}

	/* Pages without the emergency box use the right column for the sources. */
	.snoopy-food:not(.snoopy-food--toxic) > .snoopy-sources {
		grid-column: 2;
		grid-row: 2 / span 8;
		align-self: start;
		position: sticky;
		top: 1.5rem;
		margin-top: 0;
		padding: var(--space-3);
	}
}

/* ------------------------------------------------------------------
   6. Pages
   ------------------------------------------------------------------ */

.snoopy-main {
	min-height: 50vh;
}

.snoopy-page__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-3) var(--space-5);
	padding-top: var(--space-4);
}

.snoopy-page--plain {
	padding-top: var(--space-4);
}

.snoopy-page__title {
	font-size: var(--h1);
}

.snoopy-lead {
	max-width: 36rem;
	color: var(--ink-soft);
	font-size: 1.25rem;
	line-height: 1.5;
}

.snoopy-page__body > :first-child {
	margin-top: 0;
}

.snoopy-page__body h2 {
	margin-top: var(--space-4);
}

/* Text pages: the reading column is a white card. */
.snoopy-page--text .snoopy-page__body {
	max-width: 50rem;
	padding: clamp(1.5rem, 1rem + 2.5vw, 3.25rem);
	border-radius: var(--card);
	background: var(--paper);
	font-size: 1.125rem;
	line-height: 1.7;
}

.snoopy-page__body ol,
.snoopy-page__body ul {
	max-width: 44rem;
}

/* Lists of links (sources, related reading): each link gets a full-height tap target. */
:where(.snoopy-page__body li > a:only-child) {
	display: inline-block;
	padding-block: 0.15rem;
}

.snoopy-page__body .snoopy-qlist,
.snoopy-page__body .snoopy-result-list,
.snoopy-page__body .snoopy-index__list,
.snoopy-page__body .snoopy-helplines__list,
.snoopy-page__body .snoopy-hand {
	max-width: none;
}

@media (min-width: 62rem) {
	.snoopy-page--text .snoopy-page__layout {
		grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
		align-items: start;
	}

	.snoopy-page--text .snoopy-page__intro {
		position: sticky;
		top: 1.5rem;
		padding-top: var(--space-3);
	}

	.snoopy-page--tool .snoopy-page__layout {
		grid-template-columns: minmax(0, 1fr);
	}
}

.snoopy-note-line {
	max-width: 46rem;
	padding: 1rem 1.25rem;
	border-radius: var(--control);
	background: var(--paper);
}

.snoopy-note-line--urgent {
	background: var(--toxic-bg);
}

/* Home: the sections are reordered so the emergency band follows the opening. */
.snoopy-page--front .snoopy-page__body {
	display: flex;
	flex-direction: column;
	width: min(100% - 2 * var(--gutter), var(--wrap));
	margin-inline: auto;
}

.snoopy-page--front .snoopy-page__body > * {
	order: 5;
	min-width: 0;
}

.snoopy-page--front .snoopy-page__body > .snoopy-hero {
	order: 1;
}

.snoopy-page--front .snoopy-page__body > .snoopy-note-line {
	order: 2;
	max-width: none;
	margin-bottom: var(--space-3);
}

.snoopy-page--front .snoopy-page__body > .snoopy-emergency {
	order: 3;
}

.snoopy-page--front .snoopy-page__body > .snoopy-band:not(.snoopy-band--legend, .snoopy-band--method) {
	order: 4;
}

/* Opening: question and search on the left, a fanned hand of three real answers on the right. */
.snoopy-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--space-4);
	padding: clamp(1.5rem, 4vw, 4rem) 0 var(--space-5);
}

.snoopy-hero__title {
	max-width: 11ch;
	margin-bottom: var(--space-2);
	font-size: clamp(3rem, 1.6rem + 5vw, 6.25rem);
	line-height: 0.92;
	letter-spacing: -0.04em;
}

.snoopy-hero__letter--1 {
	color: var(--toxic);
}

/* Yellow on the light ground is 1.72:1, so the letter carries a navy outline (13.17:1 against the ground). */
.snoopy-hero__letter--2 {
	color: var(--caution-fill);
	-webkit-text-stroke: 0.035em var(--ink);
	paint-order: stroke fill;
}

.snoopy-hero__letter--3 {
	color: var(--safe);
}

.snoopy-hero__lead {
	max-width: 30ch;
	margin-bottom: var(--space-4);
	color: var(--ink-soft);
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	line-height: 1.45;
}

.snoopy-hero .snoopy-search__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.snoopy-hero__urgent {
	margin: var(--space-3) 0 0;
}

.snoopy-hero__urgent a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	color: var(--toxic);
	font-weight: 700;
}

.snoopy-hero__urgent [aria-hidden="true"] {
	display: none;
}

.snoopy-hand {
	--show: 9.25rem;
	position: relative;
	height: 31rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Sized so the fan fits its column at 1280px (80rem) and each covered card still shows its verdict. */
.snoopy-hand__item {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14rem;
	height: 20rem;
	margin: 0;
}

.snoopy-hand__item--toxic {
	z-index: 1;
	transform: translate(-50%, -50%) translate(-10.5rem, 1.25rem) rotate(-7deg);
}

.snoopy-hand__item--caution {
	z-index: 2;
	transform: translate(-50%, -50%) translate(0, -1rem) rotate(-1deg);
}

.snoopy-hand__item--safe {
	z-index: 3;
	transform: translate(-50%, -50%) translate(10.5rem, 1.5rem) rotate(6deg);
}

@media (min-width: 90rem) {
	.snoopy-hand {
		--show: 10rem;
	}

	.snoopy-hand__item {
		width: 16rem;
		height: 22rem;
	}

	.snoopy-hand__item--toxic {
		transform: translate(-50%, -50%) translate(-12.5rem, 1.25rem) rotate(-8deg);
	}

	.snoopy-hand__item--safe {
		transform: translate(-50%, -50%) translate(12.5rem, 1.5rem) rotate(7deg);
	}
}

.snoopy-hand__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.25rem;
	border-radius: var(--card);
	color: var(--paper);
	text-decoration: none;
	box-shadow: 0 30px 50px -30px rgb(27 42 74 / 60%);
	transition: transform 250ms var(--ease);
}

.snoopy-hand__card:hover {
	transform: translateY(-0.6rem);
}

.snoopy-hand__item--toxic .snoopy-hand__card {
	background: var(--toxic);
}

.snoopy-hand__item--caution .snoopy-hand__card {
	background: var(--caution-fill);
	color: var(--ink);
}

.snoopy-hand__item--safe .snoopy-hand__card {
	background: var(--safe);
}

.snoopy-hand__picture {
	margin-bottom: auto;
}

.snoopy-hand__picture svg {
	width: 6rem;
	height: 6rem;
	stroke-width: 1.75;
}

.snoopy-hand__name {
	max-width: var(--show);
	font-family: var(--display);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.2;
}

.snoopy-hand__verdict {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	margin: 0.2rem 0 0.6rem;
	font-family: var(--display);
	font-size: 1.875rem;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.03em;
}

.snoopy-hand__verdict svg {
	width: 0.8em;
	height: 0.8em;
	stroke-width: 2.5;
}

.snoopy-hand__line {
	display: block;
	max-width: var(--show);
	font-size: 0.875rem;
	line-height: 1.35;
}

@media (max-width: 79.99rem) {
	.snoopy-hero {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding-bottom: var(--space-4);
	}

	/* On phones and tablets the cards sit between the search and the emergency link. */
	.snoopy-hero__text {
		display: contents;
	}

	.snoopy-hero__title {
		order: 1;
	}

	.snoopy-hero__lead {
		order: 2;
		margin-bottom: var(--space-3);
	}

	.snoopy-hero .snoopy-search {
		order: 3;
	}

	.snoopy-hand {
		--show: 5rem;
		order: 4;
		height: 14rem;
		margin-top: var(--space-2);
	}

	.snoopy-hero__urgent {
		order: 5;
	}

	.snoopy-hero .snoopy-chips {
		display: none;
	}

	.snoopy-hand__item {
		width: 8.25rem;
		height: 11rem;
	}

	.snoopy-hand__item--toxic {
		transform: translate(-50%, -50%) translate(-6rem, 0.5rem) rotate(-6deg);
	}

	.snoopy-hand__item--caution {
		transform: translate(-50%, -50%) translate(0, -0.5rem) rotate(-1deg);
	}

	.snoopy-hand__item--safe {
		transform: translate(-50%, -50%) translate(6rem, 0.75rem) rotate(5deg);
	}

	.snoopy-hand__card {
		padding: 0.85rem;
		border-radius: var(--tile);
	}

	.snoopy-hand__picture svg {
		width: 3rem;
		height: 3rem;
	}

	.snoopy-hand__name {
		font-size: 0.9375rem;
	}

	.snoopy-hand__verdict {
		margin-bottom: 0;
		font-size: 1.0625rem;
	}

}

/* Phones: the three cards stack as full-width rows so each meaning can be read in full. */
@media (max-width: 39.99rem) {
	.snoopy-hand {
		display: grid;
		gap: 0.6rem;
		height: auto;
		margin-top: var(--space-3);
	}

	.snoopy-hand__item,
	.snoopy-hand__item--toxic,
	.snoopy-hand__item--caution,
	.snoopy-hand__item--safe {
		position: static;
		width: auto;
		height: auto;
		transform: none;
	}

	.snoopy-hand__card {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 0 0.9rem;
		align-items: center;
		padding: 1rem 1.1rem;
		box-shadow: none;
	}

	.snoopy-hand__card:hover {
		transform: none;
	}

	.snoopy-hand__picture {
		grid-row: span 3;
		margin: 0;
	}

	.snoopy-hand__picture svg {
		width: 2.75rem;
		height: 2.75rem;
	}

	.snoopy-hand__name,
	.snoopy-hand__line {
		max-width: none;
	}

	.snoopy-hand__name {
		font-size: 0.875rem;
	}

	.snoopy-hand__verdict {
		margin: 0 0 0.25rem;
		font-size: 1.375rem;
	}
}

@media (min-width: 40rem) and (max-width: 79.99rem) {
	.snoopy-hand {
		--show: 8.5rem;
		height: 20rem;
	}

	.snoopy-hand__item {
		width: 12rem;
		height: 16rem;
	}

	.snoopy-hand__item--toxic {
		transform: translate(-50%, -50%) translate(-10rem, 0.75rem) rotate(-7deg);
	}

	.snoopy-hand__item--safe {
		transform: translate(-50%, -50%) translate(10rem, 1rem) rotate(6deg);
	}

	.snoopy-hand__picture svg {
		width: 4.5rem;
		height: 4.5rem;
	}

	.snoopy-hand__name {
		font-size: 1.125rem;
	}

	.snoopy-hand__verdict {
		font-size: 1.75rem;
	}
}

.snoopy-band {
	padding: var(--space-5) 0 0;
}

.snoopy-band__inner {
	width: 100%;
}

.snoopy-band h2 {
	margin-top: 0;
	margin-bottom: var(--space-3);
}

/* Emergency band: a navy card straight after the opening. */
.snoopy-emergency {
	display: grid;
	gap: 0 var(--space-4);
	padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
	border-radius: var(--card);
	background: var(--unknown);
	color: var(--paper);
}

.snoopy-emergency__title {
	margin-top: 0;
	font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.375rem);
}

.snoopy-emergency__text {
	max-width: 32rem;
	color: var(--line);
	font-size: 1.125rem;
}

.snoopy-emergency .snoopy-helplines__picker label {
	color: var(--paper);
}

.snoopy-emergency__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	font-weight: 700;
}

@media (min-width: 62rem) {
	.snoopy-emergency {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
	}

	.snoopy-emergency > :not(.snoopy-helplines) {
		grid-column: 1;
	}

	.snoopy-emergency .snoopy-helplines {
		grid-column: 2;
		grid-row: 1 / span 4;
	}
}

/* Common questions: white tiles with the food's picture. */
.snoopy-qlist {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.snoopy-qlist__item {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 0.35rem 0.9rem;
	min-height: 5rem;
	margin: 0;
	padding: 1rem 1.15rem;
	border-radius: var(--tile);
	background: var(--paper);
	transition: box-shadow 150ms var(--ease);
}

.snoopy-qlist__item .snoopy-thumb {
	grid-row: span 2;
	width: 3.25rem;
	height: 3.25rem;
}

.snoopy-qlist__item a {
	display: block;
	min-width: 0;
	padding-block: 0.15rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.snoopy-qlist__item a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--tile);
}

.snoopy-qlist__item:hover {
	box-shadow: 0 0 0 2px var(--ink);
}

.snoopy-qlist__item .snoopy-chip {
	font-size: 0.9375rem;
}

@media (min-width: 40rem) {
	.snoopy-qlist {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 72rem) {
	.snoopy-qlist {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Verdict legend: each verdict as a small solid card, the same language as the answers. */
.snoopy-legend {
	display: grid;
	gap: 0.75rem;
}

.snoopy-legend__item {
	margin: 0;
	padding: 1.5rem;
	border-radius: var(--tile);
	color: var(--paper);
}

.snoopy-legend__item--safe {
	background: var(--safe);
}

.snoopy-legend__item--caution {
	background: var(--caution-fill);
	color: var(--ink);
}

.snoopy-legend__item--toxic {
	background: var(--toxic);
}

.snoopy-legend__item--unknown {
	background: var(--unknown);
}

.snoopy-legend dt {
	margin-bottom: 0.6rem;
}

.snoopy-legend dt .snoopy-chip {
	color: inherit;
	font-size: clamp(1.75rem, 1.5rem + 0.8vw, 2.25rem);
	font-weight: 900;
	letter-spacing: -0.03em;
}

.snoopy-legend dd {
	margin: 0;
	color: inherit;
}

@media (min-width: 40rem) {
	.snoopy-legend {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 72rem) {
	.snoopy-legend {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* How we check: one white card, heading left and text right on wide screens. */
.snoopy-band--method .snoopy-band__inner {
	display: grid;
	gap: 0 var(--space-5);
	padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
	border-radius: var(--card);
	background: var(--paper);
}

.snoopy-band--method p {
	max-width: 40rem;
	font-size: 1.125rem;
}

.snoopy-band--method p:last-child {
	margin-bottom: 0;
}

.snoopy-band--method a {
	font-weight: 700;
}

@media (min-width: 62rem) {
	.snoopy-band--method .snoopy-band__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	}

	/* The heading spans every row, so bands of any length keep their text in the right column. */
	.snoopy-band--method .snoopy-band__inner > h2 {
		grid-row: 1 / span 12;
		margin-bottom: 0;
	}

	.snoopy-band--method .snoopy-band__inner > :not(h2) {
		grid-column: 2;
	}
}

/* Landing pages other than home (About): the home page's column, opening and bands. */
.snoopy-page--landing .snoopy-page__body {
	width: min(100% - 2 * var(--gutter), var(--wrap));
	margin-inline: auto;
	padding-bottom: var(--space-3);
}

.snoopy-page--landing .snoopy-band--method + .snoopy-band--method {
	padding-top: var(--space-2);
}

.snoopy-page--landing .snoopy-band[id] {
	scroll-margin-top: var(--space-2);
}

.snoopy-about-hero {
	padding: clamp(1.5rem, 4vw, 4rem) 0 var(--space-4);
}

.snoopy-about-hero__top {
	display: grid;
	gap: var(--space-3);
	align-items: end;
	margin-bottom: var(--space-4);
}

.snoopy-about-hero .snoopy-hero__title {
	max-width: 10ch;
}

.snoopy-about-hero .snoopy-hero__lead {
	margin-bottom: 0;
}

.snoopy-about-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-3);
	align-items: center;
}

.snoopy-about-hero__actions .snoopy-hero__urgent {
	margin: 0;
}

.snoopy-qlist__note {
	color: var(--ink-soft);
	font-size: 0.9375rem;
}

/* The short answer that opens an answer band. */
.snoopy-answer-short {
	font-family: var(--display);
	font-size: 1.3125rem;
	font-weight: 800;
	line-height: 1.35;
}

.snoopy-band .snoopy-orgs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	max-width: none;
	margin: 0 0 var(--space-2);
	padding: 0;
	list-style: none;
}

.snoopy-orgs li {
	padding: 0.35rem 0.85rem;
	border-radius: var(--pill);
	background: var(--mist);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.4;
}

@media (min-width: 62rem) {
	.snoopy-about-hero__top {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}

/* Food Checker. */
.snoopy-results {
	margin-top: var(--space-4);
}

.snoopy-results h2 {
	margin-top: 0;
}

.snoopy-result-list {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.snoopy-result {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.25rem 1rem;
	margin: 0;
	padding: 1.1rem 1.25rem;
	border-radius: var(--tile);
	background: var(--paper);
}

.snoopy-result .snoopy-thumb {
	grid-row: span 2;
	align-self: start;
	width: 3.25rem;
	height: 3.25rem;
}

.snoopy-result__link {
	min-width: 0;
	font-family: var(--display);
	font-size: 1.375rem;
	font-weight: 800;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.snoopy-result__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--tile);
}

.snoopy-result:hover {
	box-shadow: 0 0 0 2px var(--ink);
}

.snoopy-result .snoopy-chip {
	font-size: 1.0625rem;
}

.snoopy-result__text {
	grid-column: 2 / -1;
	max-width: 46rem;
	margin: 0;
	color: var(--ink-soft);
}

.snoopy-note-line + .snoopy-index,
.snoopy-index {
	margin-top: var(--space-5);
}

.snoopy-index__title {
	margin-top: 0;
}

.snoopy-index__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}

.snoopy-index__filter {
	flex: 1 1 12rem;
	max-width: 18rem;
}

.snoopy-index__filter label {
	display: block;
	margin-bottom: 0.4rem;
	font-weight: 700;
}

.snoopy-index__reset {
	display: inline-flex;
	align-items: center;
	min-height: 3.25rem;
	font-weight: 600;
}

.snoopy-index__count {
	color: var(--ink-soft);
	font-weight: 600;
}

.snoopy-index__none {
	padding: 1rem 1.25rem;
	border-radius: var(--control);
	background: var(--paper);
}

.snoopy-index__letters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: var(--space-3);
}

.snoopy-index__letters a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--tap);
	min-height: var(--tap);
	border-radius: var(--pill);
	background: var(--paper);
	font-family: var(--display);
	font-weight: 800;
	text-decoration: none;
	transition: background-color 150ms var(--ease), color 150ms var(--ease);
}

.snoopy-index__letters a:hover {
	background: var(--ink);
	color: var(--paper);
}

.snoopy-index__group {
	scroll-margin-top: 5rem;
}

.snoopy-index__letter {
	margin: var(--space-4) 0 var(--space-2);
	font-size: 2.25rem;
	font-weight: 900;
}

.snoopy-index__list {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.snoopy-index__list li {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	min-height: 4rem;
	margin: 0;
	padding: 0.6rem 1rem 0.6rem 0.6rem;
	border-radius: var(--control);
	background: var(--paper);
}

.snoopy-index__list a {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 700;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.snoopy-index__list a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--control);
}

.snoopy-index__list li:hover {
	box-shadow: 0 0 0 2px var(--ink);
}

.snoopy-index__list .snoopy-chip {
	flex: none;
	font-size: 0.9375rem;
}

@media (min-width: 40rem) {
	.snoopy-index__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 72rem) {
	.snoopy-index__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Emergency Help page: a navy numbers card on the left, numbered steps on the right. */
.snoopy-page--emergency-help .snoopy-helplines {
	margin-bottom: var(--space-4);
	padding: var(--space-4) var(--space-3) var(--space-3);
	border-radius: var(--card);
	background: var(--ink);
	color: var(--paper);
}

.snoopy-page--emergency-help .snoopy-helplines__picker label {
	color: var(--paper);
}

.snoopy-page--emergency-help ol {
	padding-left: 0;
	list-style: none;
	counter-reset: step;
}

.snoopy-page--emergency-help ol > li {
	position: relative;
	margin-bottom: 1rem;
	padding-left: 3.25rem;
	counter-increment: step;
}

.snoopy-page--emergency-help ol > li::before {
	content: counter(step);
	position: absolute;
	top: -0.15rem;
	left: 0;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--sun);
	color: var(--ink);
	font-family: var(--display);
	font-weight: 900;
}

@media (min-width: 62rem) {
	.snoopy-page--emergency-help .snoopy-page__body {
		display: grid;
		grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
		gap: 0 var(--space-4);
		align-items: start;
	}

	.snoopy-page--emergency-help .snoopy-page__body > * {
		grid-column: 2;
	}

	.snoopy-page--emergency-help .snoopy-helplines {
		grid-column: 1;
		grid-row: 1 / span 14;
		position: sticky;
		top: 1.5rem;
	}

	.snoopy-page--emergency-help .snoopy-page__body h2:first-of-type {
		margin-top: 0;
	}
}

.snoopy-corrections {
	max-width: 44rem;
}

/* ------------------------------------------------------------------
   Blog and guides
   Both read like a traditional blog: a white paper sheet beside a sidebar (emergency help
   first). Index: the newest guide under a wide picture, then dated entries. Guide: food chips,
   title, date line and stripe, "in short", numbered questions as plain prose, sources. The
   sign-up comes last, after the sheet, never beside emergency information.
   ------------------------------------------------------------------ */

.snoopy-blog {
	padding-block: var(--space-4) var(--space-5);
}

.snoopy-blog__intro {
	max-width: 46rem;
	margin-bottom: var(--space-3);
}

.snoopy-blog__intro .snoopy-page__title {
	margin: 0 0 var(--space-1);
}

.snoopy-blog__intro .snoopy-lead {
	margin: 0;
}

.snoopy-blog__layout,
.snoopy-guide__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-4);
}

.snoopy-blog__sheet,
.snoopy-guide__sheet {
	padding: var(--space-3) var(--space-2);
	border-radius: var(--card);
	background: var(--paper);
	box-shadow: var(--lift);
}

.snoopy-blog__side,
.snoopy-guide__side {
	display: grid;
	align-content: start;
	gap: var(--space-3);
}

/* Sidebar boxes. */
.snoopy-box {
	padding: var(--space-3);
	border-radius: var(--tile);
	background: var(--paper);
	box-shadow: inset 0 0 0 1px var(--line);
}

.snoopy-box p {
	margin: 0 0 var(--space-2);
}

.snoopy-box__title {
	margin: 0 0 var(--space-2);
	font-family: var(--display);
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.3;
}

.snoopy-box--help {
	box-shadow: inset 0 0 0 2px var(--toxic);
}

.snoopy-box--help .snoopy-box__title {
	color: var(--toxic);
}

.snoopy-box__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.snoopy-box__list li + li {
	border-top: 1px solid var(--line);
}

.snoopy-box__list a {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--space-2);
	align-items: center;
	padding-block: 0.65rem;
	color: inherit;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}

.snoopy-box__list strong {
	display: block;
	font-family: var(--display);
}

.snoopy-box__list a:hover span {
	text-decoration: underline;
}

/* Food chips: "Xylitol: Toxic". */
.snoopy-foodchips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.9rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.snoopy-foodchips .snoopy-chip {
	font-size: 0.9375rem;
	white-space: normal;
}

/* Red, yellow and green rule under the date line, as in the footer. */
.snoopy-stripe {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	height: 6px;
	border-radius: var(--pill);
	overflow: hidden;
}

.snoopy-stripe span:nth-child(1) {
	background: var(--toxic);
}

.snoopy-stripe span:nth-child(2) {
	background: var(--sun);
}

.snoopy-stripe span:nth-child(3) {
	background: var(--safe);
}

/* Index entries. */
.snoopy-blog__feature {
	padding-bottom: var(--space-4);
}

.snoopy-cover {
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 1;
	margin-bottom: var(--space-3);
	border-radius: var(--tile);
	background: var(--unknown-bg);
	color: var(--unknown);
}

.snoopy-cover svg {
	width: 18%;
	height: auto;
	stroke-width: 1.5;
}

.snoopy-cover--toxic {
	background: var(--toxic-bg);
	color: var(--toxic);
}

.snoopy-cover--caution {
	background: var(--caution-bg);
	color: var(--caution);
}

.snoopy-cover--safe {
	background: var(--safe-bg);
	color: var(--safe);
}

.snoopy-blog__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-2) var(--space-3);
	padding-top: var(--space-4);
	border-top: 1px solid var(--line);
}

.snoopy-blog__card + .snoopy-blog__card {
	margin-top: var(--space-4);
}

.snoopy-blog__card .snoopy-thumb {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: var(--control);
}

.snoopy-blog__meta {
	margin: 0;
	color: var(--ink-soft);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.snoopy-blog__title {
	margin: 0.35rem 0 0.5rem;
	font-family: var(--display);
	font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.snoopy-blog__feature .snoopy-blog__title {
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
}

.snoopy-blog__title a {
	color: inherit;
	text-decoration: none;
}

.snoopy-blog__title a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.snoopy-blog__summary {
	margin: 0 0 var(--space-2);
	color: var(--ink-soft);
	font-size: 1.125rem;
	line-height: 1.6;
}

.snoopy-blog__feature .snoopy-button {
	margin-top: var(--space-3);
}

.snoopy-blog__read {
	display: inline-block;
	margin-top: var(--space-2);
	padding-block: 0.5rem;
	color: var(--ink);
	font-family: var(--display);
	font-weight: 800;
	text-underline-offset: 4px;
}

.snoopy-blog__empty {
	max-width: 40rem;
	padding: var(--space-3);
	border-radius: var(--card);
	background: var(--paper);
}

/* Guide page. */
.snoopy-guidepage {
	padding-block: var(--space-3) var(--space-5);
}

.snoopy-guide .snoopy-crumbs {
	margin-bottom: var(--space-2);
}

.snoopy-guide__head {
	display: grid;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}

.snoopy-guide__title {
	margin: 0;
	font-size: clamp(2.125rem, 1.5rem + 2.6vw, 3.25rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
}

.snoopy-guide__lede {
	margin: 0;
	color: var(--ink-soft);
	font-size: 1.25rem;
	line-height: 1.55;
}

.snoopy-guide__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin: var(--space-1) 0;
	color: var(--ink-soft);
	font-size: 0.9375rem;
}

.snoopy-guide__updated {
	color: var(--ink);
	font-weight: 700;
}

.snoopy-guide__label {
	margin: 0 0 var(--space-1);
	font-family: var(--display);
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.3;
}

.snoopy-guide__short {
	padding: var(--space-3);
	border-radius: var(--tile);
	background: var(--paper);
	box-shadow: inset 0 0 0 2px var(--sun);
	font-size: 1.0625rem;
	line-height: 1.55;
}

.snoopy-guide__short ul {
	margin: 0;
	padding-left: 1.2rem;
}

.snoopy-guide__short li + li {
	margin-top: 0.5rem;
}

.snoopy-cite {
	display: inline-block;
	margin-left: 0.15rem;
	padding-block: 0.1rem;
	color: var(--ink-soft);
	font-size: 0.8125rem;
	font-weight: 700;
	white-space: nowrap;
	text-underline-offset: 3px;
}

/* Questions read as prose under numbered headings. The style guide's ".snoopy-guide section"
   and ".snoopy-guide h2" rules come later, so these selectors are one class stronger. */
.snoopy-guide .snoopy-guide__q {
	margin: var(--space-5) 0 0;
	font-size: 1.1875rem;
	line-height: 1.7;
}

.snoopy-guide .snoopy-guide__q h2 {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	align-items: baseline;
	margin: 0 0 var(--space-2);
	font-size: var(--h2);
	line-height: 1.15;
	letter-spacing: -0.01em;
	scroll-margin-top: var(--space-4);
}

.snoopy-guide__num {
	color: var(--sun-deep);
	font-size: 1.15em;
	font-weight: 900;
	line-height: 1;
}

.snoopy-guide__q > p,
.snoopy-guide__q > blockquote,
.snoopy-guide__q > div,
.snoopy-guide__q > ul {
	margin: var(--space-2) 0 0;
}

.snoopy-guide__q > .snoopy-guide__answer {
	margin-top: 0;
}

.snoopy-guide__quote {
	padding: 0 0 0 var(--space-3);
	border-left: 5px solid var(--toxic);
	font-family: var(--display);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.35;
}

.snoopy-guide__quote p {
	margin: 0;
}

.snoopy-guide__quote cite {
	display: block;
	margin-top: 0.5rem;
	color: var(--ink-soft);
	font-family: var(--font);
	font-size: 0.9375rem;
	font-style: normal;
	font-weight: 600;
}

.snoopy-guide__table {
	overflow-x: auto;
}

.snoopy-guide__table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1.0625rem;
	line-height: 1.45;
}

.snoopy-guide__table th,
.snoopy-guide__table td {
	padding: 0.7rem 0.75rem;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.snoopy-guide__table thead th {
	border-bottom: 2px solid var(--ink);
	font-family: var(--display);
	font-weight: 800;
}

.snoopy-guide__table tbody th {
	font-weight: 600;
}

.snoopy-guide__tablesrc {
	margin: 0.4rem 0 0;
	text-align: right;
}

.snoopy-guide__q .snoopy-guide__label {
	margin-top: var(--space-3);
}

.snoopy-guide__q .snoopy-symptoms {
	margin: 0;
}

.snoopy-guide__q .snoopy-symptoms li {
	padding: 0.35rem 0.85rem;
	background: var(--toxic-bg);
	color: var(--toxic-deep);
	font-size: 0.9375rem;
	font-weight: 700;
}

.snoopy-guide__help {
	display: grid;
	gap: var(--space-2);
	padding: var(--space-3);
	border-radius: var(--tile);
	background: var(--toxic);
	color: var(--paper);
	font-size: 1.0625rem;
	line-height: 1.5;
}

.snoopy-guide__help p {
	margin: 0;
	font-weight: 600;
}

.snoopy-guide__help .snoopy-button {
	justify-self: start;
	background: var(--paper);
	color: var(--toxic-deep);
}

.snoopy-guide__help .snoopy-button:hover {
	background: var(--mist);
}

.snoopy-guide__nudge {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-2);
	align-items: center;
	justify-content: space-between;
	margin-top: var(--space-3);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--tile);
	background: var(--mist);
}

.snoopy-guide__nudge p {
	margin: 0;
	font-weight: 600;
}

.snoopy-guide__nudge a {
	display: inline-block;
	padding-block: 0.5rem;
	color: var(--ink);
	font-family: var(--display);
	font-weight: 800;
}

.snoopy-guide__sources {
	margin-top: var(--space-5);
	padding-top: var(--space-2);
	border-top: 1px solid var(--line);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.snoopy-guide__sources summary {
	display: flex;
	align-items: center;
	min-height: var(--tap);
	font-family: var(--display);
	font-size: 1.0625rem;
	font-weight: 800;
	cursor: pointer;
}

.snoopy-guide__sources ol {
	margin: var(--space-2) 0 0;
	padding-left: 1.4rem;
}

.snoopy-guide__sources li {
	scroll-margin-top: var(--space-4);
}

.snoopy-guide__sources li + li {
	margin-top: var(--space-2);
}

.snoopy-guide__sources li:target {
	outline: 3px solid var(--sun);
	outline-offset: 6px;
	border-radius: 4px;
}

.snoopy-guide__sources a {
	font-weight: 700;
}

.snoopy-guide__sources q {
	display: block;
	margin-top: 0.25rem;
	color: var(--ink-soft);
}

.snoopy-guide__accessed {
	display: block;
	color: var(--ink-soft);
	font-size: 0.875rem;
}

.snoopy-guide__toc {
	margin: 0;
	padding-left: 1.3rem;
}

.snoopy-guide__toc li + li {
	margin-top: 0.5rem;
}

.snoopy-guide__toc a {
	display: block;
	padding-block: 0.15rem;
	color: inherit;
	font-weight: 600;
	line-height: 1.35;
}

.snoopy-guide > .snoopy-signup {
	margin-top: var(--space-4);
}

@media (min-width: 560px) {
	.snoopy-blog__card {
		grid-template-columns: auto minmax(0, 1fr);
	}
}

@media (min-width: 640px) {
	.snoopy-blog__sheet,
	.snoopy-guide__sheet {
		padding: var(--space-5) clamp(var(--space-3), 6vw, var(--space-6));
	}

	.snoopy-cover {
		aspect-ratio: 21 / 8;
	}

	.snoopy-cover svg {
		width: 16%;
	}

	.snoopy-guide__sheet > * {
		max-width: 42rem;
	}
}

/* Sidebar beside the sheet; it stays in view only where the screen is tall enough to hold it. */
@media (min-width: 1000px) {
	.snoopy-blog__layout,
	.snoopy-guide__layout {
		grid-template-columns: minmax(0, 1fr) 21rem;
		align-items: start;
	}
}

@media (min-width: 1000px) and (min-height: 800px) {
	.snoopy-blog__side,
	.snoopy-guide__side {
		position: sticky;
		top: var(--space-3);
	}
}

/* Newsletter sign-up: one per page, the last thing before the footer. */
.snoopy-signup {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-2);
	margin-top: var(--space-4);
	padding: var(--space-3);
	border-radius: var(--card);
	background: var(--paper);
	box-shadow: var(--lift);
}

.snoopy-signup__title {
	margin: 0;
	font-size: var(--h3);
}

.snoopy-signup__text p {
	margin: var(--space-1) 0 0;
	color: var(--ink-soft);
}

.snoopy-signup__form form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
}

.snoopy-signup__form input[type="email"] {
	flex: 1 1 14rem;
	min-height: 3.25rem;
	padding: 0 1.1rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--pill);
	background: var(--paper);
	color: var(--ink);
	font: inherit;
}

.snoopy-signup__form input[aria-invalid="true"] {
	border: 2px solid var(--toxic);
}

.snoopy-signup__form button:disabled {
	opacity: 0.6;
	cursor: wait;
}

.snoopy-signup__status {
	margin: var(--space-1) 0 0;
	font-weight: 600;
}

.snoopy-signup__status:empty {
	display: none;
}

.snoopy-signup__status.is-error {
	color: var(--toxic);
}

.snoopy-signup__status a {
	font-family: var(--display);
	font-weight: 800;
}

.snoopy-signup__small {
	margin: var(--space-1) 0 0;
	color: var(--ink-soft);
	font-size: 0.875rem;
}

.snoopy-signup-wrap {
	padding-bottom: var(--space-4);
}

.snoopy-signup-wrap .snoopy-signup {
	margin-top: 0;
}

@media (min-width: 900px) {
	.snoopy-signup {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		align-items: center;
		padding: var(--space-4);
	}
}

/* Printable dog-safe kitchen list. */
.snoopy-kitchen__group {
	margin-top: var(--space-4);
	padding-top: var(--space-2);
	border-top: 6px solid var(--unknown);
}

.snoopy-kitchen__group--toxic {
	border-top-color: var(--toxic);
}

.snoopy-kitchen__group--caution {
	border-top-color: var(--caution-fill);
}

.snoopy-kitchen__group--safe {
	border-top-color: var(--safe);
}

.snoopy-kitchen__group h2 {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin: 0 0 var(--space-2);
	font-size: var(--h3);
}

.snoopy-kitchen__group--toxic h2 svg {
	color: var(--toxic);
}

.snoopy-kitchen__group--caution h2 svg {
	color: var(--caution);
}

.snoopy-kitchen__group--safe h2 svg {
	color: var(--safe);
}

.snoopy-kitchen__group h2 span {
	color: var(--ink-soft);
	font-weight: 600;
}

.snoopy-kitchen__group ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.snoopy-kitchen__group li {
	padding-block: 0.5rem;
	border-top: 1px solid var(--line);
	line-height: 1.45;
	break-inside: avoid;
}

.snoopy-kitchen__group li a {
	font-weight: 800;
}

@media (min-width: 1024px) {
	.snoopy-kitchen__group ul {
		columns: 2;
		column-gap: var(--space-4);
	}
}

.snoopy-kitchen__help,
.snoopy-kitchen__date {
	margin-top: var(--space-3);
	color: var(--ink-soft);
	font-size: 0.9375rem;
}

.snoopy-kitchen__url {
	display: block;
	font-weight: 700;
}

/* Style guide. */
.snoopy-guide section {
	margin-bottom: var(--space-5);
}

.snoopy-guide h2 {
	margin-top: 0;
}

.snoopy-guide__swatches {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
	gap: var(--space-2);
	padding: 0;
	list-style: none;
}

.snoopy-guide__swatch {
	display: block;
	width: 100%;
	height: 3.5rem;
	margin-bottom: 0.4rem;
	border-radius: var(--control);
	box-shadow: inset 0 0 0 1px var(--line);
}

/* ------------------------------------------------------------------
   7. Motion and print
   ------------------------------------------------------------------ */

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

	.snoopy-hand__card:hover {
		transform: none;
	}
}

@media print {
	body {
		background: #ffffff;
		font-size: 12pt;
	}

	.snoopy-header,
	.snoopy-footer,
	.snoopy-callbar,
	.snoopy-search,
	.snoopy-print,
	.snoopy-helplines__picker,
	.skip-link {
		display: none !important;
	}

	body.has-callbar {
		padding-bottom: 0;
	}

	.snoopy-page--emergency-help .snoopy-page__body {
		display: block;
	}

	.snoopy-page--emergency-help .snoopy-helplines,
	.snoopy-food__head {
		position: static;
		border: 2px solid #000000;
		background: #ffffff;
		color: #000000;
	}

	.snoopy-call {
		border: 2px solid #000000;
		background: #ffffff;
		color: #000000;
	}

	a,
	.snoopy-emergency a,
	.snoopy-page--emergency-help .snoopy-helplines a {
		color: #000000;
		text-decoration: none;
	}

	.snoopy-helpline__meta a {
		display: none;
	}

	.snoopy-signup,
	.snoopy-signup-wrap,
	.snoopy-guide__nudge,
	.snoopy-guide__toc,
	.snoopy-crumbs {
		display: none !important;
	}

	.snoopy-page--dog-safe-kitchen .snoopy-page__layout {
		display: block;
		padding-top: 0;
	}

	.snoopy-page--dog-safe-kitchen .snoopy-page__body {
		padding: 0;
	}

	.snoopy-kitchen__group {
		margin-top: 12pt;
		padding-top: 4pt;
		border-top: 3pt solid #000000;
	}

	.snoopy-kitchen__group ul {
		columns: 2;
		column-gap: 18pt;
		font-size: 10pt;
	}

	.snoopy-kitchen__group li {
		padding-block: 3pt;
	}
}