/* ChugCheck Home 1.0.0
 *
 * Colours come from the dark plugin when it is active (it sets --cc-* on the
 * body), so the homepage and the drink pages share one palette. The fallbacks
 * are only for a site without it.
 */

.cch {
	--cch-ground: var(--cc-ground, #12100D);
	--cch-raised: var(--cc-raised, #1C1915);
	--cch-ink: var(--cc-ink, #F2EDE4);
	--cch-dim: var(--cc-dim, #9A9183);
	--cch-accent: var(--cc-accent, #C9A96A);
	--cch-plate: var(--cc-plate, #FFFFFF);
	--cch-text: #C9BFB0;
	--cch-text: color-mix(in srgb, var(--cch-ink) 80%, var(--cch-ground));
	--cch-line: rgba(233, 231, 227, .10);
	--cch-line: color-mix(in srgb, var(--cch-ink) 11%, transparent);
	--cch-gutter: 16px;
	/* Category tiles are portrait, like a poster. */
	--cch-tile-ratio: 3 / 4;

	/* Full width whatever container the theme puts the page in. This is the
	 * fallback for before the script runs and for no-JS; it assumes the
	 * content column is centred. home.js then measures the real offset and
	 * overrides both, which is what survives a sidebar or one-sided padding. */
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: var(--cch-ground);
	color: var(--cch-text);
	font-size: 14px;
	line-height: 1.5;
}

.cch.is-fitted { max-width: none; }

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

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

/* Hidden but read aloud — in case the theme does not define it. */
.cch .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.cch h1, .cch h2, .cch p { margin: 0; }

/* The page around it: no theme title, no sideways scroll from the 100vw. */
body.chugcheck-home-page { overflow-x: clip; background: var(--cc-ground, #12100D); }
body.chugcheck-home-page .entry-header,
body.chugcheck-home-page .ast-single-post-order,
body.chugcheck-home-page .page-header { display: none; }
body.chugcheck-home-page .entry-content > .cch:first-child { margin-top: 0; }
body.chugcheck-home-page #primary,
body.chugcheck-home-page .ast-article-single,
body.chugcheck-home-page .site-content > .ast-container { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; }

.cch-wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--cch-gutter) 40px; }

/* ------------------------------------------------------------ top ----- */

.cch-top { position: relative; }

.cch-back {
	position: relative;
	height: clamp(260px, 44vh, 560px);
	overflow: hidden;
	background:
		radial-gradient(ellipse 45% 60% at 60% 60%, color-mix(in srgb, var(--cch-glow, #C9A96A) 45%, transparent), transparent 72%),
		linear-gradient(180deg, color-mix(in srgb, var(--cch-glow, #C9A96A) 14%, var(--cch-ground)), var(--cch-ground));
}

.cch-back__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center 40%;
}

/* The photo fades into the page at the bottom and softly at the sides. */
.cch-back::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--cch-ground) 45%, transparent) 0%, transparent 26%, transparent 42%, color-mix(in srgb, var(--cch-ground) 85%, transparent) 78%, var(--cch-ground) 100%),
		linear-gradient(90deg, color-mix(in srgb, var(--cch-ground) 55%, transparent), transparent 20%, transparent 80%, color-mix(in srgb, var(--cch-ground) 55%, transparent));
}

.cch-intro {
	position: relative;
	z-index: 2;
	max-width: 620px;
	margin: -96px auto 0;
	padding: 0 var(--cch-gutter) 22px;
	text-align: center;
}

.cch-slogan {
	color: var(--cch-ink);
	font-size: clamp(32px, 7.5vw, 60px);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -.01em;
	margin: 0 0 8px;
	text-wrap: balance;
}

.cch-subline { color: var(--cch-text); font-size: 14px; margin: 0 0 18px; }

.cch-search {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--cch-raised);
	border: 1px solid color-mix(in srgb, var(--cch-ink) 22%, transparent);
	border-radius: 6px;
	padding: 0 6px 0 12px;
	text-align: left;
}
.cch-search:focus-within { border-color: var(--cch-accent); }
.cch-search__icon { display: flex; color: var(--cch-dim); flex: 0 0 auto; }

/* Themes style every input on the page; these are three classes deep so the
   field keeps its own look. */
.cch .cch-search .cch-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 46px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	outline: 0;
	color: var(--cch-ink);
	font: inherit;
	font-size: 16px; /* under 16px, iPhones zoom the page on focus */
}
.cch .cch-search .cch-search__input::placeholder { color: var(--cch-dim); opacity: 1; }
.cch .cch-search .cch-search__input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }

.cch .cch-search .cch-search__go {
	flex: 0 0 auto;
	margin: 0;
	padding: 8px 12px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--cch-accent);
	font: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: none;
}
.cch .cch-search .cch-search__go:hover,
.cch .cch-search .cch-search__go:focus-visible { background: color-mix(in srgb, var(--cch-accent) 14%, transparent); }

.cch-credit { margin-top: 8px; text-align: right; font-size: 11px; color: var(--cch-dim); }
.cch-credit a { color: var(--cch-text); font-weight: 600; }
.cch-credit a:hover { color: var(--cch-ink); }

/* ------------------------------------------------------- categories ---- */

.cch-cats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; padding: 6px 0 4px; }

.cch-cat { display: block; text-align: center; color: var(--cch-text); font-size: 11px; font-weight: 700; line-height: 1.25; }
.cch-cat__tile {
	position: relative;
	display: block;
	aspect-ratio: var(--cch-tile-ratio);
	border-radius: 6px;
	margin-bottom: 6px;
	overflow: hidden;
	/* No coloured glow. The photographs carry the tiles; a wash of the type's
	   colour over them only made five good pictures look tinted. */
	background: linear-gradient(180deg, color-mix(in srgb, var(--cch-ink) 5%, var(--cch-raised)), var(--cch-raised));
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cch-ink) 10%, transparent);
	transition: box-shadow .15s ease;
}
.cch-cat__tile .cch-shape { position: absolute; left: 50%; bottom: 0; height: 66%; width: auto; transform: translateX(-50%); }
/* The drawn bottle only stands in for a missing photo, so it is quiet here. */
.cch-cat__tile .cch-shape { fill: #16130F; stroke: color-mix(in srgb, var(--cch-ink) 34%, transparent); filter: none; }
.cch-cat__photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* Only enough shade for the name under it to stay readable over any photo. */
.cch-cat__tile.has-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, color-mix(in srgb, var(--cch-ground) 12%, transparent), color-mix(in srgb, var(--cch-ground) 38%, transparent));
}
.cch-cat__name { display: block; }
.cch-cat__count { display: block; font-weight: 500; font-size: 10px; color: var(--cch-dim); font-variant-numeric: tabular-nums; }
a.cch-cat:hover .cch-cat__tile,
a.cch-cat:focus-visible .cch-cat__tile { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cch-ink) 45%, transparent); }

.cch-shape { display: block; fill: #0B0A09; stroke: color-mix(in srgb, var(--cch-c, #C9A96A) 55%, #fff); stroke-width: 1.3; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--cch-c, #C9A96A) 60%, transparent)); }

/* ---------------------------------------------------------- sections ---- */

.cch-sec { position: relative; margin-top: 22px; padding: 24px 0 4px; border-top: 1px solid var(--cch-line); }
.cch-sec + .cch-sec { margin-top: 0; }

.cch-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cch-head__text { min-width: 0; }
.cch-h { color: var(--cch-ink); font-size: 17px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; margin: 0 0 2px; }
.cch-sub { color: var(--cch-dim); font-size: 13px; font-style: italic; line-height: 1.4; margin: 0 0 12px; }
.cch-head__tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding-top: 2px; }
.cch-more { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cch-accent); white-space: nowrap; }
.cch-more:hover { color: var(--cch-ink); }

.cch .cch-arrow {
	display: none;
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--cch-ink) 20%, transparent);
	background: transparent;
	color: var(--cch-text);
	font: inherit;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	box-shadow: none;
}
.cch .cch-arrow:hover:not(:disabled) { border-color: var(--cch-accent); color: var(--cch-ink); }
.cch .cch-arrow:disabled { opacity: .35; cursor: default; }

.cch-meter { display: flex; align-items: center; gap: 8px; max-width: 360px; margin: 0 0 14px; font-size: 10.5px; color: var(--cch-dim); }
.cch-meter__bar { position: relative; flex: 1; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--cch-ink) 10%, transparent); }
.cch-meter__band { position: absolute; top: -2px; height: 8px; border-radius: 4px; background: var(--cch-accent); }

/* ------------------------------------------------------------- tracks --- */

.cch-track {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--cch-gutter);
	margin: 0 calc(var(--cch-gutter) * -1);
	padding: 0 var(--cch-gutter) 6px;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
.cch-track::-webkit-scrollbar { display: none; }
.cch-track:focus-visible { outline: 1px solid var(--cch-accent); outline-offset: 2px; }

.cch-card { flex: 0 0 116px; scroll-snap-align: start; color: var(--cch-text); }
.cch-card__img {
	position: relative;
	display: block;
	height: 146px;
	border-radius: 8px;
	overflow: hidden;
	background: radial-gradient(ellipse 80% 55% at 50% 100%, color-mix(in srgb, var(--cch-c) 60%, transparent), transparent 75%), #1A1714;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cch-ink) 10%, transparent);
}
/* A real photo sits on the same white plate as on the drink pages. */
.cch-card__img.has-photo { background: var(--cch-plate); box-shadow: none; }
.cch-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; padding: 8px; }
.cch-card__img .cch-shape { position: absolute; left: 50%; bottom: 7%; height: 76%; width: auto; transform: translateX(-50%); }
.cch-card__type { display: block; margin-top: 8px; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cch-accent); }
.cch-card__name { display: block; margin-top: 1px; font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--cch-ink); }
.cch-card__style { display: block; font-size: 11px; color: var(--cch-dim); line-height: 1.3; }
.cch-card__why { display: block; margin-top: 2px; font-size: 12px; font-style: italic; color: var(--cch-text); line-height: 1.3; }
.cch-card:hover .cch-card__name { color: var(--cch-accent); }

/* ----------------------------------------------------------- featured --- */

.cch-feat { background: var(--cch-raised); border-radius: 14px; overflow: hidden; }
.cch-feat__img {
	position: relative;
	display: block;
	height: 220px;
	background: radial-gradient(ellipse 80% 55% at 50% 100%, color-mix(in srgb, var(--cch-c) 55%, transparent), transparent 75%), #1A1714;
}
.cch-feat__img.has-photo { background: var(--cch-plate); }
.cch-feat__img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; padding: 14px; }
.cch-feat__img .cch-shape { position: absolute; left: 50%; bottom: 8%; height: 76%; width: auto; transform: translateX(-50%); }
.cch-feat__body { padding: 16px 16px 18px; }
.cch-kick { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cch-accent); margin: 0 0 2px; }
.cch-feat__name { color: var(--cch-ink); font-size: 24px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; margin: 0; }
.cch-feat__name a:hover { color: var(--cch-accent); }
.cch-feat__meta { font-size: 12px; color: var(--cch-dim); margin: 3px 0 12px; }
.cch .cch-verdict { margin: 0 0 12px; padding: 0; border: 0; background: none; }
.cch .cch-verdict p { color: var(--cch-ink); font-size: 17px; font-style: italic; line-height: 1.4; margin: 0; }
.cch .cch-verdict p::before { content: "“"; }
.cch .cch-verdict p::after { content: "”"; }
.cch-accords { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.cch-accords li { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 11px; border-radius: 999px; padding: 3px 9px; background: color-mix(in srgb, var(--cch-accent) 15%, transparent); color: var(--cch-ink); }
.cch-accords i { width: 7px; height: 7px; border-radius: 50%; }
.cch-read { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--cch-accent); }
.cch-read:hover { color: var(--cch-ink); }

/* -------------------------------------------------------------- notes --- */

.cch-note { flex: 0 0 70px; scroll-snap-align: start; text-align: center; color: var(--cch-text); font-size: 11px; line-height: 1.25; }
.cch-note__img {
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	margin: 0 auto 6px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--cch-ink) 14%, transparent);
}
.cch-note__img.is-letter { background: var(--cch-raised); color: var(--cch-dim); font-size: 20px; font-weight: 700; }
.cch-note:hover .cch-note__img { box-shadow: 0 0 0 1px var(--cch-accent); }
.cch-note:hover .cch-note__name { color: var(--cch-ink); }

/* ------------------------------------------------------------- shelf ---- */

/* A list drawn as bottles in lit niches. The shapes, glass gradients and clip
   paths are written once per page into this, which takes no room. */
.cch-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.cch-bar {
	border-radius: 6px;
	overflow: hidden;
	/* Stained wood, grain running down. Lighter than it was: against arches
	   this bright, near-black between them read as gaps rather than as wall. */
	background:
		repeating-linear-gradient(92deg, rgba(0, 0, 0, .14) 0 1px, transparent 1px 9px),
		linear-gradient(180deg, #3D2C1E 0%, #322418 55%, #251A11 100%);
	box-shadow: inset 0 1px 0 rgba(255, 222, 176, .1), 0 18px 40px -24px rgba(0, 0, 0, .9);
}

.cch-bar__scroll {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}
.cch-bar__scroll::-webkit-scrollbar { display: none; }
.cch-bar__scroll:focus-visible { outline: 1px solid var(--cch-accent); outline-offset: -3px; }

/* max-content with a floor of 100%: the niches share the width while they fit,
   and the shelf runs on past the edge once they do not. */
.cch-bar__row {
	display: flex;
	justify-content: center;
	gap: 10px;
	width: max-content;
	min-width: 100%;
	padding: 14px 14px 0;
}

/* Capped as well as floored: a shelf of three should not grow bottles the size
   of the ones on a shelf of eight. Short shelves centre instead. */
/* How long the lamp takes. Slower coming on than going off, the way a warm
   bulb behaves — and slow enough that sweeping along the shelf leaves a trail
   of niches still fading rather than a row of switches flicking.
   A custom property is not itself animated, so it is already the new value by
   the time the transition it feeds is read: hovering gets the long duration,
   leaving gets the short one. */
.cch .cch-slot {
	--cch-lamp: .5s;
	--cch-lamp-ease: cubic-bezier(.45, .05, .35, 1);
	flex: 1 1 108px;
	min-width: 108px;
	max-width: 136px;
	scroll-snap-align: center;
	color: var(--cch-text);
}
.cch .cch-slot:hover,
.cch .cch-slot:focus-visible,
.cch .cch-slot.is-lit { --cch-lamp: 1.1s; }

.cch .cch-slot:focus-visible { outline: 2px solid var(--cch-accent); outline-offset: 4px; border-radius: 4px; }

.cch-niche {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	aspect-ratio: 2 / 3;
	min-width: 0;
	border-radius: 999px 999px 3px 3px;
	overflow: hidden;
	/* Lit like the photograph: the whole niche is a warm lantern, brightest
	   low and centre but still clearly lit at the top of the arch. The bottle
	   is the dark thing in the picture, not the wall behind it. */
	background:
		radial-gradient(135% 100% at 50% 104%,
			rgba(255, 245, 224, .98) 0%,
			rgba(250, 227, 186, .95) 30%,
			rgba(238, 203, 152, .88) 54%,
			rgba(214, 172, 118, .78) 74%,
			rgba(168, 128, 80, .66) 92%,
			rgba(126, 92, 55, .6) 100%),
		#4A3623;
	box-shadow:
		inset 0 0 22px rgba(86, 56, 24, .35),
		inset 2px 0 5px rgba(50, 30, 12, .3),
		inset -2px 0 5px rgba(50, 30, 12, .3),
		0 1px 0 rgba(0, 0, 0, .7);
	transition: filter var(--cch-lamp, .5s) var(--cch-lamp-ease, ease);
}

/* Weight where the bottle meets the shelf. */
.cch-niche::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 10.5%;
	width: 44%;
	height: 11px;
	transform: translateX(-50%);
	background: radial-gradient(50% 50% at 50% 60%, rgba(40, 22, 6, .62), transparent 72%);
	z-index: 1;
	pointer-events: none;
}

/* The front edge of the shelf, standing in front of the bottle's foot. This is
   the piece that makes it a bar and not a lit hole in a wall. */
.cch-niche__lip {
	position: absolute;
	left: -2px;
	right: -2px;
	bottom: 0;
	height: 11%;
	z-index: 3;
	background: linear-gradient(180deg, #B08A55 0%, #74522F 24%, #452F1D 64%, #2A1D12 100%);
	box-shadow: 0 -1px 0 rgba(255, 242, 214, .85), 0 -9px 18px -4px rgba(0, 0, 0, .5);
	pointer-events: none;
}

/* Smaller than the niche by a good margin. A bottle that nearly fills its
   compartment reads as a drawing of a bottle; one with headroom above it
   reads as a bottle on a shelf. */
.cch-bottle {
	position: relative;
	z-index: 2;
	display: block;
	width: auto;
	height: 70%;
	margin-bottom: 7%;
	overflow: visible;
	transition: filter var(--cch-lamp, .5s) var(--cch-lamp-ease, ease);
}

/* The glass is off: a shadow over it, under the label, so the label still
   catches the light. Hovering switches the shadow off. */
/* Held level with the photographs beside them: a drawn bottle blacker than a
   photographed one makes the shelf look like two different shelves. */
.cch-bottle__off { fill: #06050A; opacity: .7; transition: opacity var(--cch-lamp, .5s) var(--cch-lamp-ease, ease); }
.cch-bottle__label { opacity: .66; transition: opacity var(--cch-lamp, .5s) var(--cch-lamp-ease, ease); }

/* A real bottle, cut out. A photo cannot be dimmed under its own label, so it
   is turned down as a whole instead — far enough for the niche to read as lit
   from behind, not so far that the label stops being a label. */
/* Taken out of the flow on purpose: in the flow, the photo's own pixel width
   would set the niche's width, and a shelf with photos would come out wider
   than one without. Out of the flow the niche keeps its 2:3 whatever stands
   in it. */
.cch-bottle--photo {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 7%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: auto;
	height: 70%;
	margin-bottom: 0;
	filter: brightness(.3) saturate(.7);
}
.cch-bottle__photo {
	display: block;
	width: auto;
	height: auto;
	max-width: 74%;
	max-height: 100%;
	object-fit: contain;
}

/* The lamp behind the bottle does not change. Brightening the niche as well
   made the whole compartment swell a little, which reads as a glow rather
   than as a bottle coming out of the dark — and since the niche's filter
   reaches everything inside it, the two brightnesses multiplied and a pale
   label blew out to white. Only the bottle changes now: dark, then lit. */

/* No lift: it is standing on a shelf. Only the light changes. */
.cch-slot:hover .cch-bottle,
.cch-slot:focus-visible .cch-bottle,
.cch-slot.is-lit .cch-bottle { filter: drop-shadow(0 0 18px rgba(255, 196, 118, .55)); }

.cch-slot:hover .cch-bottle--photo,
.cch-slot:focus-visible .cch-bottle--photo,
.cch-slot.is-lit .cch-bottle--photo { filter: brightness(1) saturate(1) drop-shadow(0 0 20px rgba(255, 196, 118, .5)); }

.cch-slot:hover .cch-bottle__off,
.cch-slot:focus-visible .cch-bottle__off,
.cch-slot.is-lit .cch-bottle__off { opacity: 0; }

.cch-slot:hover .cch-bottle__label,
.cch-slot:focus-visible .cch-bottle__label,
.cch-slot.is-lit .cch-bottle__label { opacity: 1; }

.cch-slot__text { display: block; margin-top: 9px; text-align: center; }
.cch-slot__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* Room for two lines whether or not the name needs them, so every style
	   line below sits on the same level. */
	min-height: 2.6em;
	font-size: 12px;
	line-height: 1.3;
	color: var(--cch-dim);
	transition: color var(--cch-lamp, .5s) var(--cch-lamp-ease, ease);
}
.cch-slot__type {
	display: block;
	margin-top: 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--cch-ink) 34%, transparent);
	transition: color var(--cch-lamp, .5s) var(--cch-lamp-ease, ease);
}
.cch-slot:hover .cch-slot__name,
.cch-slot:focus-visible .cch-slot__name,
.cch-slot.is-lit .cch-slot__name { color: var(--cch-ink); }
.cch-slot:hover .cch-slot__type,
.cch-slot:focus-visible .cch-slot__type,
.cch-slot.is-lit .cch-slot__type { color: var(--cch-accent); }

/* The board the whole row stands on. */
.cch-bar__board {
	height: 14px;
	margin-top: 10px;
	background: linear-gradient(180deg, #7A5630 0%, #4A3420 22%, #2A1D12 62%, #120C08 100%);
	box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 231, 190, .5);
}

/* ------------------------------------------------------------- serif ---- */

/* The words in a human voice are set in the serif. ChugCheck Type forces its
   sans on headings with !important at (0,2,2); this has to outrank it, and
   carries the same icon guards so both rules read alike. Only font-family is
   forced. */
html body .cch .cch-slogan:not([class*=icon]):not([class*=ico-]),
html body .cch .cch-sub:not([class*=icon]):not([class*=ico-]),
html body .cch .cch-card__why:not([class*=icon]):not([class*=ico-]),
html body .cch .cch-verdict p:not([class*=icon]):not([class*=ico-]) {
	font-family: "Source Serif 4", Georgia, "Times New Roman", serif !important;
}

/* ----------------------------------------------------------- desktop ---- */

@media (min-width: 761px) {
	.cch { --cch-gutter: 24px; font-size: 15px; }
	.cch-back { height: clamp(380px, 56vh, 600px); }
	.cch-intro { margin-top: -170px; padding-bottom: 30px; }
	.cch-subline { font-size: 18px; margin-bottom: 24px; }
	.cch-credit { font-size: 12px; }

	.cch-cats { gap: 14px; padding-top: 10px; }
	.cch-cat { font-size: 13px; }
	.cch-cat__tile { aspect-ratio: var(--cch-tile-ratio); border-radius: 8px; }
	.cch-cat__count { font-size: 11px; }

	.cch-sec { margin-top: 30px; padding: 40px 0 8px; }
	.cch-h { font-size: 26px; }
	.cch-sub { font-size: 17px; margin-bottom: 18px; }
	.cch-more { font-size: 13px; }
	.cch .cch-arrow:not([hidden]) { display: inline-grid; place-items: center; }

	.cch-track { gap: 18px; margin: 0; padding: 0 0 6px; scroll-padding-left: 0; }
	.cch-card { flex-basis: calc((100% - 5 * 18px) / 6); }
	.cch-card__img { height: auto; aspect-ratio: 3 / 4; border-radius: 10px; }
	.cch-card__type { font-size: 11px; margin-top: 10px; }
	.cch-card__name { font-size: 16px; }
	.cch-card__style { font-size: 13px; }
	.cch-card__why { font-size: 14px; }

	.cch-meter { font-size: 13px; margin: -4px 0 18px; }

	.cch-bar { border-radius: 8px; }
	.cch-bar__row { gap: 14px; padding: 18px 18px 0; }
	.cch .cch-slot { flex-basis: 124px; min-width: 124px; max-width: 152px; }
	.cch-slot__text { margin-top: 11px; }
	.cch-slot__name { font-size: 14px; }
	.cch-slot__type { font-size: 11px; }
	.cch-bar__board { height: 16px; margin-top: 12px; }

	.cch-feat { display: grid; grid-template-columns: 1fr 1.1fr; }
	.cch-feat__img { height: auto; min-height: 380px; }
	.cch-feat__body { padding: 48px 56px; display: flex; flex-direction: column; justify-content: center; }
	.cch-kick { font-size: 13px; }
	.cch-feat__name { font-size: 40px; }
	.cch-feat__meta { font-size: 15px; margin-bottom: 20px; }
	.cch .cch-verdict p { font-size: 24px; }
	.cch-accords li { font-size: 13px; padding: 5px 12px; }
	.cch-read { margin-top: 24px; font-size: 14px; }

	.cch-note { flex: 1 1 0; min-width: 84px; font-size: 14px; }
	.cch-note__img { width: 84px; height: 84px; }
}

/* Someone who has asked for less movement still gets the light, just without
   the long swell. */
@media (prefers-reduced-motion: reduce) {
	.cch .cch-slot,
	.cch .cch-slot:hover,
	.cch .cch-slot:focus-visible,
	.cch .cch-slot.is-lit { --cch-lamp: .15s; }
}

@media (prefers-reduced-motion: no-preference) {
	.cch-track { scroll-behavior: smooth; }
}