/*
	Soapdia — site additions on top of the HTML5 UP template.

	Loaded AFTER assets/css/main.css so it wins without editing the template.
	Palette: #4E5047 dark olive · #F4EADE cream · #A6A89A sage.
*/

/* =========================================================
   0. Images

   Images carry real width/height attributes so the browser can reserve
   the right space before they load (no layout shift). Those attributes
   are ALSO a presentational height, and main.css sizes images by width
   only (.image.fit img { width: 100% }), so without this rule a 2000px
   tall attribute stretches the photo to 2000px on screen.

   This is the weakest possible author rule (specificity 0,0,1), so
   anything more specific -- and any inline style, such as the cropped
   400px images on the About page -- still wins.
   ========================================================= */

img {
	height: auto;
}

/* ---------------------------------------------------------
   The `hidden` attribute is only a user-agent rule, so ANY
   author `display` declaration beats it. .sd-panel sets
   display:flex, which left the order panel open on every page
   load and made the close button look broken.

   Keep this rule above anything that sets display, and never
   rely on [hidden] alone for an element that has its own
   display declaration.
   --------------------------------------------------------- */

[hidden] {
	display: none !important;
}

/* =========================================================
   1. Headings
   The page title is now the <h1> and the wordmark is a <div>,
   so both need the styling the template gave them as <h1>/<h2>.
   ========================================================= */

#header #logo {
	height: inherit;
	left: 1.25em;
	line-height: inherit;
	margin: 0;
	position: absolute;
	top: 0;
	font-size: 1.5em;
	font-weight: 300;
}

header.major h1 {
	font-size: 2em;
	line-height: 1.5em;
	letter-spacing: -0.025em;
	margin: 0 0 1em 0;
	font-weight: 300;
}

.wrapper.style1 header.major h1 {
	color: #4E5047;
}

/* =========================================================
   2. Home banner — scales down on phones instead of
   overflowing at a hard-coded 56px.
   ========================================================= */

#banner .content h1.banner-title,
#banner .content p.banner-tagline {
	font-family: 'Quattrocento', Georgia, serif;
	font-weight: 400;
	color: #ffffff;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
	margin: 0 0 0.25em 0;
	line-height: 1.2;
}

#banner .content h1.banner-title {
	font-size: clamp(2rem, 8vw, 56px);
	letter-spacing: 0.02em;
}

#banner .content p.banner-tagline {
	font-size: clamp(1.15rem, 5vw, 36px);
}

/* =========================================================
   3. Product listings
   ========================================================= */

.product {
	padding-bottom: 1.5em;
}

/* Once the columns stack (<=980px) the products run together, so separate them. */
@media screen and (max-width: 980px) {

	.product {
		padding-bottom: 2.5em;
		margin-bottom: 2.5em;
		border-bottom: solid 1px rgba(78, 80, 71, 0.15);
	}

	.row > div:last-child .product {
		border-bottom: 0;
		margin-bottom: 0;
	}

}

.product-price {
	font-weight: 700;
	color: #4E5047;
	margin: 0.5em 0 0.25em 0;
}

.product-size {
	font-weight: 400;
	color: #5f6157;
}

/* Was #777 on cream — 3.8:1, below the 4.5:1 minimum. */
.product-ingredients {
	font-size: 0.9em;
	color: #5f6157;
}

/* =========================================================
   4. "Add" controls — deliberately quiet, sits under the price
   ========================================================= */

.add-to-basket {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 1.25em 0;
	flex-wrap: wrap;
}

.add-to-basket .sd-stepper {
	display: inline-flex;
	align-items: center;
	border: solid 1px rgba(78, 80, 71, 0.4);
	border-radius: 4px;
	overflow: hidden;
	background-color: rgba(255, 255, 255, 0.35);
}

.add-to-basket .sd-step {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: 0;
	box-shadow: none;
	color: #4E5047;
	cursor: pointer;
	font-size: 1.1em;
	line-height: 1;
	height: 2.6em;
	width: 2.4em;
	padding: 0;
	transition: background-color 0.15s ease-in-out;
}

.add-to-basket .sd-step:hover,
.add-to-basket .sd-step:focus {
	background-color: rgba(78, 80, 71, 0.1);
}

.add-to-basket .sd-add-qty {
	-moz-appearance: textfield;
	appearance: textfield;
	background: none;
	border: 0;
	border-left: solid 1px rgba(78, 80, 71, 0.2);
	border-right: solid 1px rgba(78, 80, 71, 0.2);
	border-radius: 0;
	box-shadow: none;
	color: #4E5047;
	font-size: 0.95em;
	height: 2.6em;
	line-height: 2.6em;
	padding: 0;
	text-align: center;
	width: 3em;
}

.add-to-basket .sd-add-qty::-webkit-outer-spin-button,
.add-to-basket .sd-add-qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.add-to-basket .sd-add {
	height: 2.6em;
	line-height: 2.6em;
	padding: 0 1.5em;
	font-size: 0.9em;
}

.add-to-basket .sd-add.sd-added {
	background-color: #4E5047;
	color: #F4EADE !important;
}

/* =========================================================
   5. Floating basket button
   ========================================================= */

.sd-toggle {
	display: none;
	position: fixed;
	right: 1.25em;
	bottom: 1.25em;
	z-index: 10000;
	align-items: center;
	gap: 0.6em;
	-webkit-appearance: none;
	appearance: none;
	background-color: #4E5047;
	border: 0;
	border-radius: 2em;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	color: #F4EADE !important;
	cursor: pointer;
	font-size: 0.95em;
	height: auto;
	line-height: 1;
	padding: 0.95em 1.35em;
	white-space: nowrap;
}

.sd-toggle.sd-has-items {
	display: flex;
}

.sd-toggle:hover,
.sd-toggle:focus {
	background-color: #3d3f38;
	color: #F4EADE !important;
}

.sd-toggle-count {
	background-color: #F4EADE;
	border-radius: 1em;
	color: #4E5047;
	font-weight: 700;
	min-width: 1.9em;
	padding: 0.25em 0.5em;
	text-align: center;
}

/* =========================================================
   6. Basket panel
   ========================================================= */

.sd-overlay {
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.45);
	z-index: 10001;
}

.sd-panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	max-width: 27em;
	z-index: 10002;
	display: flex;
	flex-direction: column;
	background-color: #F4EADE;
	color: #4E5047;
	box-shadow: -4px 0 24px rgba(0, 0, 0, 0.25);
}

body.sd-panel-open {
	overflow: hidden;
}

.sd-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25em 1.5em;
	border-bottom: solid 1px rgba(78, 80, 71, 0.15);
	flex-shrink: 0;
}

.sd-panel-head h2 {
	color: #4E5047;
	font-size: 1.35em;
	line-height: 1.2;
	margin: 0;
}

.sd-close {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: 0;
	box-shadow: none;
	color: #4E5047 !important;
	cursor: pointer;
	font-size: 1.75em;
	height: 1.5em;
	line-height: 1;
	padding: 0;
	width: 1.5em;
}

.sd-panel-body {
	padding: 1.5em;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	flex: 1;
}

.sd-items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sd-item {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"main sum"
		"qty  remove";
	gap: 0.5em 1em;
	align-items: center;
	padding: 0 0 1em 0;
	margin: 0 0 1em 0;
	border-bottom: solid 1px rgba(78, 80, 71, 0.12);
}

.sd-item-main   { grid-area: main; }
.sd-item-qty    { grid-area: qty; }
.sd-item-sum    { grid-area: sum; text-align: right; font-weight: 700; }
.sd-remove      { grid-area: remove; }

.sd-item-name {
	display: block;
	font-weight: 700;
	line-height: 1.3;
}

.sd-item-meta {
	display: block;
	font-size: 0.85em;
	color: #5f6157;
}

.sd-item-qty {
	display: inline-flex;
	align-items: center;
	border: solid 1px rgba(78, 80, 71, 0.4);
	border-radius: 4px;
	overflow: hidden;
	justify-self: start;
}

.sd-item-qty .sd-step {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: 0;
	box-shadow: none;
	color: #4E5047;
	cursor: pointer;
	font-size: 1.1em;
	height: 2.2em;
	line-height: 1;
	padding: 0;
	width: 2.2em;
}

.sd-item-qty .sd-step:hover,
.sd-item-qty .sd-step:focus {
	background-color: rgba(78, 80, 71, 0.1);
}

.sd-item-qty .sd-qty {
	min-width: 2.2em;
	text-align: center;
	font-weight: 700;
}

.sd-remove {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: 0;
	box-shadow: none;
	color: #5f6157 !important;
	cursor: pointer;
	font-size: 0.85em;
	height: auto;
	line-height: 1;
	padding: 0;
	text-decoration: underline;
	justify-self: end;
}

.sd-remove:hover {
	color: #4E5047 !important;
}

.sd-empty {
	color: #5f6157;
	margin: 0 0 1.5em 0;
}

.sd-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 0.75em 0 1.25em 0;
	border-top: solid 2px rgba(78, 80, 71, 0.25);
	font-size: 1.1em;
}

.sd-total-value {
	font-size: 1.15em;
}

.sd-fields p {
	margin: 0 0 1em 0;
}

.sd-fields label {
	display: block;
	font-size: 0.9em;
	font-weight: 700;
	margin: 0 0 0.35em 0;
}

.sd-fields label span {
	font-weight: 400;
	color: #5f6157;
}

.sd-fields input[type="text"],
.sd-fields select {
	-webkit-appearance: none;
	appearance: none;
	background-color: #ffffff;
	border: solid 1px rgba(78, 80, 71, 0.4);
	border-radius: 4px;
	box-shadow: none;
	color: #4E5047;
	display: block;
	height: 2.9em;
	line-height: 2.9em;
	padding: 0 0.75em;
	width: 100%;
}

.sd-fields select {
	background-image: url("images/arrow.svg");
	background-repeat: no-repeat;
	background-size: 1.25em;
	background-position: right 0.75em center;
	padding-right: 2.5em;
}

.sd-fields input[type="text"]:focus,
.sd-fields select:focus {
	border-color: #4E5047;
	box-shadow: 0 0 0 2px rgba(78, 80, 71, 0.2);
}

.sd-send {
	margin: 0.5em 0 0 0;
}

.sd-send.disabled {
	pointer-events: none;
}

.sd-note {
	font-size: 0.85em;
	color: #5f6157;
	margin: 1em 0 0 0;
	line-height: 1.5;
}

.sd-alt {
	font-size: 0.85em;
	color: #5f6157;
	margin: 1em 0 0 0;
	line-height: 1.5;
}

.sd-alt a {
	color: #4E5047;
}

/* Phones: a bottom sheet reads better than a side drawer. */
@media screen and (max-width: 736px) {

	.sd-panel {
		top: auto;
		left: 0;
		right: 0;
		max-width: none;
		max-height: 88vh;
		border-radius: 12px 12px 0 0;
		box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
	}

	.sd-toggle {
		right: 1em;
		bottom: 1em;
	}

}

/* =========================================================
   7. "How to order" block
   ========================================================= */

.how-to-order {
	margin: 4em 0 0 0;
	padding: 2em 0 0 0;
	border-top: solid 1px rgba(78, 80, 71, 0.2);
}

.how-to-order h2,
.how-to-order h3 {
	color: #4E5047;
}

.how-to-order ol,
.order-steps {
	list-style: none;
	counter-reset: step;
	margin: 0 0 1.5em 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5em;
}

.how-to-order ol li,
.order-steps li {
	counter-increment: step;
	flex: 1 1 12em;
	padding: 0 0 0 2.5em;
	position: relative;
	line-height: 1.5;
}

.how-to-order ol li:before,
.order-steps li:before {
	content: counter(step);
	position: absolute;
	left: 0;
	top: 0;
	width: 1.8em;
	height: 1.8em;
	border-radius: 50%;
	background-color: #4E5047;
	color: #F4EADE;
	font-weight: 700;
	font-size: 0.9em;
	line-height: 1.8em;
	text-align: center;
}

.how-to-order .how-to-order-alt {
	font-size: 0.9em;
	color: #5f6157;
	margin: 1.5em 0 0 0;
}

.how-to-order .how-to-order-alt a {
	color: #4E5047;
}


/* =========================================================
   8. Panel text colours

   The panel is appended to <body>, so it sits OUTSIDE .wrapper.style1
   and the template's base rules apply to it: main.css sets
   `label` and `strong, b` to #ffffff, and `.button.disabled` to white
   text on translucent white. On the cream panel that is invisible.

   Everything below is at least 4.5:1 against #F4EADE.
   ========================================================= */

.sd-panel,
.sd-panel p,
.sd-panel li,
.sd-panel span,
.sd-panel strong,
.sd-panel b,
.sd-panel h1,
.sd-panel h2,
.sd-panel h3,
.sd-panel label {
	color: #4E5047;
}

/* Quieter secondary text — still 5.3:1. */
.sd-panel .sd-item-meta,
.sd-panel .sd-empty,
.sd-panel .sd-note,
.sd-panel .sd-alt,
.sd-panel .sd-remove,
.sd-panel .sd-fields label span {
	color: #5f6157;
}

.sd-panel .sd-total-value,
.sd-panel .sd-item-sum,
.sd-panel .sd-item-name,
.sd-panel .sd-qty {
	color: #4E5047;
}

.sd-panel .sd-fields input[type="text"],
.sd-panel .sd-fields select {
	color: #4E5047;
}

/* Enabled send button: cream on olive. */
.sd-panel .sd-send {
	color: #F4EADE !important;
}

/* The template's disabled style is white-on-white here. */
.sd-panel .sd-send.disabled,
.sd-panel .sd-send.disabled:hover,
.sd-panel .sd-send.disabled:active {
	background-color: #d8cfc2 !important;
	box-shadow: inset 0 0 0 1px rgba(78, 80, 71, 0.35) !important;
	color: #4E5047 !important;
	opacity: 1;
}

/* =========================================================
   9. Home hero

   Shorter than the template's full-height banner so the
   featured products peek above the fold.
   ========================================================= */

#banner {
	min-height: 70vh;
}

/* Hero background.

   main.js runs $('#banner')._parallax(), which above 980px writes an inline
   `background-position: center 0px` and keeps rewriting it on scroll. That
   pins the photo's TOP to the hero, which is why wide screens showed the
   empty backdrop with the soaps sliced off at the bottom while mobile, where
   parallax is off, looked right. !important beats the inline style the
   script sets, so the image stays centred. main.js is unversioned and cached
   for a month, so it is better overridden here than edited.

   The source photo is a 1.50 portrait-ish composition with the soaps low in
   the frame; it cannot fill a 2.54 hero box without losing them. Above 980px
   a landscape crop of the same photo is used instead. At and below 980px the
   original is kept, which is what already looked right. */
#banner {
	background-image: url('../../images/feat-soapdia-products.webp');
	background-size: cover;
	background-position: center center !important;
	background-repeat: no-repeat;

	/* The template uses background-attachment: fixed here, which makes `cover`
	   size the photo against the VIEWPORT rather than the hero box. At
	   1920x1080 that scaled it to 2594px wide and threw away 26% of the image
	   sideways; at 1024x768, 44%. Touch devices already get `scroll` via
	   body.is-touch, which is the other reason mobile looked right. */
	background-attachment: scroll;
}

@media screen and (min-width: 981px) {

	#banner {
		background-image: url('../../images/hero-soaps-wide.jpg');
	}

}

/* The template centres the hero with an inline-block spacer. index.html
   lays the banner out with flex instead, where that spacer becomes a flex
   item 1% wide and pushes the content ~7px off centre. */
#banner:before {
	display: none;
}

/* The template right-aligns the hero content. That was invisible while the
   hero held only full-width lines; short ones expose it. */
#banner .content {
	text-align: center;
	margin-right: 0;
	padding: 4em 1.5em;
}

#banner .content header {
	display: block;
}

#banner .actions {
	margin: 1.75em 0 0 0;
	justify-content: center;
}

@media screen and (max-width: 736px) {

	#banner {
		min-height: 78vh;
	}

}

/* =========================================================
   10. Featured products on the home page
   ========================================================= */

.featured-item {
	text-align: center;
	margin: 0 0 1em 0;
}

.featured-item .featured-thumb {
	display: block;
	border-radius: 4px;
	overflow: hidden;
	border-bottom: 0;
	margin: 0 0 1em 0;
}

.featured-item .featured-thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 4px;
	transition: transform 0.25s ease-in-out;
}

.featured-item .featured-thumb:hover img {
	transform: scale(1.03);
}

.featured-item h3 {
	font-size: 1.1em;
	line-height: 1.4;
	margin: 0 0 0.25em 0;
}

.featured-item .featured-price {
	font-weight: 700;
	color: #4E5047;
	margin: 0;
}

.featured-item .featured-price .featured-size {
	font-weight: 400;
	color: #5f6157;
}

/* =========================================================
   11. Shop by category
   ========================================================= */

.category-links {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75em;
	margin: 0;
	padding: 0;
}

.category-links li {
	padding: 0;
}

/* =========================================================
   12. "Ready to order?" closing block
   ========================================================= */

.ready-to-order {
	text-align: center;
}

.ready-to-order .ready-lead {
	max-width: 34em;
	margin: 0 auto 1.75em auto;
}

.ready-to-order .ready-note {
	font-size: 0.9em;
	color: #5f6157;
	margin: 1.5em 0 0 0;
}

.wrapper.style2 .ready-to-order .ready-note,
.wrapper.style2 .ready-to-order .ready-note a {
	color: #2f3029;
}

/* The product-page variant folds the four steps in, so the
   page closes with one section instead of two. */
.how-to-order.ready-to-order {
	text-align: left;
}

.how-to-order.ready-to-order > h2,
.how-to-order.ready-to-order > .ready-lead {
	text-align: center;
}

/* =========================================================
   13. Site footer
   ========================================================= */

#footer {
	padding: 4em 0 2.5em 0;
	text-align: left;
}

#footer .container {
	max-width: 68em;
}

#footer h3 {
	color: #F4EADE;
	font-size: 1.05em;
	letter-spacing: 0.05em;
	margin: 0 0 0.9em 0;
}

#footer p {
	color: #F4EADE;
	margin: 0 0 0.75em 0;
	line-height: 1.6;
}

#footer .footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

#footer .footer-links li {
	padding: 0 0 0.55em 0;
	line-height: 1.5;
}

#footer .footer-links a {
	border-bottom: 0;
}

#footer .footer-links a:hover {
	border-bottom: dotted 1px rgba(244, 234, 222, 0.6);
}

#footer .footer-note {
	font-size: 0.9em;
	color: #d7cfc2;
}

#footer .copyright {
	border-top: solid 1px rgba(244, 234, 222, 0.25);
	margin: 2.5em 0 0 0;
	padding: 1.75em 0 0 0;
	text-align: center;
}

@media screen and (max-width: 980px) {

	#footer {
		text-align: center;
	}

	/* Stacked columns need the gap between them, not after the last one. */
	#footer .row > div + div {
		margin-top: 2.25em;
	}

	#footer .footer-links {
		margin-bottom: 0;
	}

}

/* =========================================================
   14. Common questions (contact page)
   ========================================================= */

.faq {
	margin: 0;
}

.faq .faq-item {
	padding: 0 0 1.5em 0;
	margin: 0 0 1.5em 0;
	border-bottom: solid 1px rgba(78, 80, 71, 0.15);
}

.faq .faq-item:last-child {
	border-bottom: 0;
	margin-bottom: 0;
}

.faq .faq-item h3 {
	font-size: 1.1em;
	line-height: 1.4;
	margin: 0 0 0.5em 0;
}

.faq .faq-item p {
	margin: 0;
}

/* =========================================================
   15. Contact page sections
   ========================================================= */

.contact-block {
	margin: 0 0 3.5em 0;
}

.contact-block:last-of-type {
	margin-bottom: 0;
}

.contact-block .contact-lead {
	max-width: 42em;
}

.short-about {
	border-top: solid 1px rgba(78, 80, 71, 0.2);
	padding: 2.5em 0 0 0;
	margin: 3.5em 0 0 0;
}

.short-about p {
	max-width: 42em;
}

/* =========================================================
   16. Section divider

   Two adjacent cream sections read as one block, so the
   second gets a hairline rule instead of a colour change.
   ========================================================= */

.section-divider > .container {
	border-top: solid 1px rgba(78, 80, 71, 0.18);
	padding-top: 4em;
}

/* =========================================================
   17. Text contrast on the sage band (.wrapper.style2)

   The template pairs #4E5047 text with the #A6A89A sage
   background, which is only 3.39:1. Near-black takes it to
   5.52:1. Buttons there already use .button.primary, which
   is olive on cream.
   ========================================================= */

.wrapper.style2,
.wrapper.style2 h1,
.wrapper.style2 h2,
.wrapper.style2 h3,
.wrapper.style2 h4,
.wrapper.style2 p,
.wrapper.style2 li,
.wrapper.style2 strong,
.wrapper.style2 .ready-to-order .ready-note,
.wrapper.style2 .ready-to-order .ready-note a {
	color: #2f3029;
}

.wrapper.style2 a {
	color: #2f3029;
}


/* =========================================================
   18. Home page on phones

   The featured cards go two-across rather than one-per-row,
   and the three lifestyle photos are capped, so the page
   does not become a very long scroll on a small screen.
   ========================================================= */

@media screen and (max-width: 736px) {

	#why .box.alt img {
		max-height: 180px;
		object-fit: cover;
		margin-bottom: 1em !important;
	}

	#featured .featured-item h3 {
		font-size: 1em;
	}

	#featured .featured-item .featured-price {
		font-size: 0.95em;
	}

	.section-divider > .container {
		padding-top: 2.5em;
	}

}

/* =========================================================
   19. Hero legibility and featured-section spacing
   ========================================================= */

/* The template ships a 95%-black scrim switched off. Turn it back on at a
   much lighter weight so the hero text stays readable wherever the photo
   happens to be light. The content sits at z-index 10, above this. */
#banner:after {
	display: block;
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.5));
	z-index: 1;
}

#banner .goto-next {
	z-index: 10;
}

/* Category buttons were sitting straight on top of the price row. */
.category-links {
	margin-top: 2.75em;
}

#featured footer.major {
	margin-top: 2.5em;
}

/* Let the category buttons wrap rather than shrink; at 390px four of them
   were squashing their own labels. */
.category-links li {
	flex: 0 0 auto;
}

@media screen and (max-width: 480px) {

	.category-links {
		gap: 0.5em;
	}

	.category-links .button.small {
		padding: 0 1.1em;
	}

}

/* =========================================================
   20. Accessibility

   Headings that were <h3> under an <h1> (a skipped level) are
   now <h2 class="h3">: correct outline, unchanged appearance.
   ========================================================= */

h2.h3 {
	font-size: 1.35em;
	line-height: 1.5em;
	letter-spacing: 0;
	font-weight: 300;
}

/* The template drops h3 to 1.2em on phones; match it or these headings
   render larger than the ones they replaced. */
@media screen and (max-width: 736px) {

	h2.h3 {
		font-size: 1.2em;
	}

}

/* The template's copyright row is rgba(255,255,255,0.5) over #4E5047,
   which composites to about 3.4:1. This is 5.31:1 and looks near-identical. */
#footer .copyright li,
#footer .copyright li a {
	color: #d7cfc2;
}

#footer .copyright li a:hover {
	color: #ffffff;
}

/* =========================================================
   21. Responsive images

   Photos are wrapped in <picture> so phones can take a 400px
   WebP and desktops an 800px one, with the original as the
   fallback. <picture> is inline by default, which would stop
   the img filling its slot.
   ========================================================= */

picture {
	display: block;
}