a {
	color:#5c698a !important;
	text-decoration:none;
}
a:visited {
	color:#5c698a !important;
}
a:hover {
	text-decoration:underline;
}
.oldColor    { color:#5c698a; }
.darkBlue    { color:#315AFF; }
.darkPink    { color:#FFBA9E; }
.darkYellow  { color:#FFF1D1; }
.lightBlue   { color:#6D96FF; }
.lightPink   { color:#FFD9C8; }
.lightYellow { color:#FFF8E7; }
body {
	background-color:#FFF8E7;
	background-image:url('/img/background01.png');
	font-family:'Molengo',sans-serif;
}
.writtenText {
	font-family: georgia, serif; /* no Alegreya is shipped under font/, so the name only ever fell through to georgia */
}
.body,body > div {
	background-color:#FFF8E7;
}
.link {
	color:grey;
	font-style:italic;
}
.logo {
	height:123px;
	margin:70px calc(50% - 100px) 30px calc(50% - 100px); /* centred in any column: 200px each side of a 600px one */
	width:200px;
}
.product {
	border-bottom:thin solid black;
	float:left;
	margin:0 0 0 60px;
	padding:20px;
	text-align:left;
	width:340px;
}
/* Home (goal 3485): a row's description and sub-products sit under its name. */
.productLine {
	line-height:1.4;
	margin:8px 0 0 0;
}
.subProducts {
	line-height:1.4;
	list-style:none;
	margin:8px 0 0 0;
	padding:0 0 0 20px;
}
.title {
	font-size:30px;
	margin:50px 30px;
	max-width:540px;
	position:relative;
	text-align:center;
}
.website {
	font-size:24px;
}
/* The home (goal 4383, Ian 2026-10-27: "more structure, with some lines and whatnot"): the title just under the logo; the
   products a ruled list, the logo's brown above the first row and under the last (hr.productsStart, hr.productsEnd: lines of
   their own, so the list is no bordered card to the layout probe), a hairline of it between rows; a row's sub-products in two
   columns, name and line, behind a rule of their own. The title is as near the list as the logo (a heading binds to what it
   heads: layout_heading_unbound). Lab rows (.product too) keep theirs. */
.homeLogo {
	margin-bottom:8px;
}
.productsTitle {
	margin-bottom:12px;
	margin-top:0;
}
.productList .product {
	border-bottom:1px solid #dbcdb3;   /* that brown at 30% over cosmic latte */
	float:none;
	margin:0;
	padding:16px 0;
	width:auto;
}
.productList .product:last-child {
	border-bottom:none;
}
.productList .productLine {
	margin:4px 0 0 0;
}
.productList .subProducts {
	border-left:2px solid #dbcdb3;
	column-gap:16px;
	display:grid;
	grid-template-columns:fit-content(45%) 1fr;
	margin:12px 0 0 0;
	padding:0 0 0 16px;
	row-gap:4px;
}
.productList .subProducts > li {
	display:grid;
	grid-column:1 / -1;
	grid-template-columns:subgrid;
}
@supports not (grid-template-columns:subgrid) {
	.productList .subProducts, .productList .subProducts > li {
		display:block;
	}
	.productList .subLine::before {
		content:": ";
	}
}
hr.productsStart, hr.productsEnd {
	border:0;
	border-top:2px solid #86693a;   /* np04.png's brown */
	height:0;
}
/* The public comments under that line (npComments, js/np.js): all in one grid cell, so the strip is as tall as the longest and
   nothing below it moves as they take turns. Rotating, only .isShown is seen; it slides in from the right as it fades in, and
   out to the left as it fades out (a fade alone for reduced motion). A long one stops at five lines. */
.publicComments {
	display:grid;
	overflow:hidden;
	padding-top:24px;
}
.publicComment {
	grid-area:1 / 1;
	margin:0;
	text-align:center;
}
.publicComments.rotates .publicComment {
	opacity:0;
	visibility:hidden;
}
.publicComments.rotates .publicComment.isShown {
	opacity:1;
	visibility:visible;
}
.publicComment.isEntering {
	animation:npCommentIn 450ms ease-out both;
}
.publicComment.isLeaving {
	animation:npCommentOut 350ms ease-in both;
}
.publicComment blockquote {
	-webkit-box-orient:vertical;
	-webkit-line-clamp:5;
	display:-webkit-box;
	font-size:18px;
	font-style:italic;
	line-height:1.5;
	margin:0;
	overflow:hidden;
	overflow-wrap:anywhere;
}
.publicComment figcaption {
	color:#5c698a;
	font-size:14px;
	margin-top:8px;
}
@keyframes npCommentIn {
	from { opacity:0; transform:translateX(48px); }
	to { opacity:1; transform:none; }
}
@keyframes npCommentOut {
	from { opacity:1; transform:none; }
	to { opacity:0; transform:translateX(-48px); }
}
@keyframes npCommentFadeIn {
	from { opacity:0; }
	to { opacity:1; }
}
@keyframes npCommentFadeOut {
	from { opacity:1; }
	to { opacity:0; }
}
@media (prefers-reduced-motion: reduce) {
	.publicComment.isEntering {
		animation-name:npCommentFadeIn;
	}
	.publicComment.isLeaving {
		animation-name:npCommentFadeOut;
	}
}
/* Leave a comment (goal 4383, Ian 2026-10-27: "identical to how it's displayed in the other products (namely, the
   cheatsheet.life product) ... centered on the page"): their footer.pageFooter (www.css) in their ink, centred, with the
   family's arrow (.toProduct, css-lib/cheatsheet-life.css; Ian 2026-10-23: a link to another product wears it). */
.pageFooter {
	font-size:14px;
	margin:48px 0 12px 0;   /* the bottom 12px keeps the copyright line (absolute, at the column's foot) off it */
	text-align:center;
}
.pageFooter a, .pageFooter a:visited {
	color:#0a0a0a !important;
	text-decoration:underline;
	text-underline-offset:2px;
}
.pageFooter a:hover {
	color:#171717 !important;
}
.toProduct::before {
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3H4.5A1.5 1.5 0 0 0 3 4.5v7A1.5 1.5 0 0 0 4.5 13h7a1.5 1.5 0 0 0 1.5-1.5V9'/%3E%3Cpath d='M8 8l5-5M9.5 3H13v3.5'/%3E%3C/svg%3E");
	-webkit-mask-position:center;
	-webkit-mask-repeat:no-repeat;
	-webkit-mask-size:contain;
	background-color:currentColor;
	content:"";
	display:inline-block;
	height:1em;
	margin-right:6px;
	mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3H4.5A1.5 1.5 0 0 0 3 4.5v7A1.5 1.5 0 0 0 4.5 13h7a1.5 1.5 0 0 0 1.5-1.5V9'/%3E%3Cpath d='M8 8l5-5M9.5 3H13v3.5'/%3E%3C/svg%3E");
	mask-position:center;
	mask-repeat:no-repeat;
	mask-size:contain;
	vertical-align:-0.125em;
	width:1em;
}
/* Phone (goal 3486): a product row and the intro fill the column; the title keeps its size and wraps. */
@media (max-width: 600px) {
	.product {
		float:none;
		margin-left:0;
		width:auto;
	}
	.title {
		margin-left:20px;
		margin-right:20px;
	}
}