/**
 * DW Restaurant.
 *
 * Every colour comes from a custom property set in the Site Details screen,
 * so Pintxos and La Cantina share this file byte for byte.
 *
 * No framework, no reset library. About 400 lines replacing an Elementor
 * stylesheet stack.
 */

/* --------------------------------------------------------------------
 * Font. The @font-face rules are generated in PHP from whatever .woff2
 * files are sitting in assets/fonts, so dropping the download in is the
 * only step. See dwr_font_face_css() in functions.php.
 * ----------------------------------------------------------------- */

/* --------------------------------------------------------------------
 * Tokens
 * ----------------------------------------------------------------- */

:root {
	--bg: #0b1315;
	--surface: #101e22;
	--accent: #847151;
	--accent-ink: #ffffff;
	/* The brand colour used as TEXT. Defaults to the accent, which is right
	   for a light accent like Pintxos gold. A dark accent such as La Cantina's
	   purple is unreadable on a dark page, so that site overrides this with
	   its lilac. */
	--highlight: var(--accent);
	--heading: #ffffff;
	--body: #dadada;

	--font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--wrap: 1440px;
	--gap: clamp(1.5rem, 4vw, 3rem);
	--section-y: clamp(3rem, 6.5vw, 6rem);
	--radius: 4px;

	/* A third tone between the page and the panels, so alternating sections
	   read as separate without shouting. Falls back to the surface colour on
	   browsers without color-mix. */
	/* The panel tone is the same lift used by the header, so the difference
	   between one section and the next is actually visible. */
	--panel: var(--surface);
	--hairline: rgb(255 255 255 / 12%);
	--hairline: color-mix(in srgb, var(--heading) 18%, transparent);
}

/* --------------------------------------------------------------------
 * Base
 * ----------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--body);
	font-family: var(--font);
	font-weight: 400;
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
}

h1, h2, h3 {
	color: var(--heading);
	font-weight: 600;
	line-height: 1.08;
	/* Large type set at default tracking looks loose. Pulling it in is most
	   of the difference between "a heading" and "a restaurant's heading". */
	letter-spacing: -0.01em;
	margin: 0 0 0.6em;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.8rem, 1.6rem + 5vw, 6rem);
}

h2 {
	font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.75rem);
}

h3 {
	font-size: clamp(1.2rem, 1.1rem + 0.6vw, 1.5rem);
}

p {
	margin: 0 0 1.2em;
}

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

.wrap {
	width: min(100% - clamp(2rem, 5vw, 5rem), var(--wrap));
	margin-inline: auto;
}

.section {
	padding-block: var(--section-y);
	position: relative;
}

/* Alternating tone. Without this the page is one unbroken wash of colour,
   which is what made the first build feel flat. */
.section--panel {
	background: var(--panel);
}

/* --------------------------------------------------------------------
 * Reveal on scroll
 *
 * Opt-in per element and turned on by JavaScript, so with JS off or motion
 * reduced everything is simply visible.
 * ----------------------------------------------------------------- */

.js-reveal .reveal {
	opacity: 0;
	transform: translateY(1.75rem);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.js-reveal .reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Staggered so a section assembles rather than arriving in one lump. */
.js-reveal .reveal--delay-1 { transition-delay: 0.08s; }
.js-reveal .reveal--delay-2 { transition-delay: 0.16s; }

@media (prefers-reduced-motion: reduce) {
	.js-reveal .reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.section--center {
	text-align: center;
}

.prose--center {
	max-width: 46rem;
	margin-inline: auto;
}

/* The decorative label above a heading. A span, not an h-tag: the old build
   used headings for these, which put four "Our Story" headings on one page. */
.eyebrow {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	color: var(--highlight);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin-bottom: 1.25rem;
}

/* The short rule the old site drew as a "divider" widget, done in CSS. */
.eyebrow::before {
	content: "";
	width: 2.5rem;
	height: 1px;
	background: currentcolor;
	flex: none;
	opacity: 0.7;
}

.section--center .eyebrow,
.menus__head .eyebrow {
	justify-content: center;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--accent);
	color: var(--accent-ink);
	padding: 0.75rem 1.25rem;
	z-index: 100;
}

.skip-link:focus {
	left: 0;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------
 * Buttons
 * ----------------------------------------------------------------- */

.button {
	display: inline-block;
	background: var(--accent);
	color: var(--accent-ink);
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	text-decoration: none;
	padding: 0.85rem 1.75rem;
	border: 0;
	border-radius: var(--radius);
	cursor: pointer;
	/* 44px minimum target. */
	min-height: 2.75rem;
	line-height: 1.4;
	transition: filter 0.15s ease;
}

.button:hover {
	filter: brightness(1.15);
}

.button--lg {
	padding: 1.05rem 2.5rem;
	font-size: 1.05rem;
}

/* --------------------------------------------------------------------
 * Announcement banner
 *
 * Above the sticky header rather than inside it, so it scrolls away once
 * read instead of eating screen height for the whole visit.
 * ----------------------------------------------------------------- */

.banner {
	background: #8a1c1c;
	color: #fff;
	font-size: 0.95rem;
}

.banner__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem 1rem;
	flex-wrap: wrap;
	padding-block: 0.7rem;
	text-align: center;
}

.banner p {
	margin: 0;
	font-weight: 500;
}

.banner__link {
	color: inherit;
	font-weight: 700;
	text-underline-offset: 3px;
	white-space: nowrap;
}

/* --------------------------------------------------------------------
 * Header
 * ----------------------------------------------------------------- */

/* Solid over the top of the page, then semi-transparent with a blur once
   you scroll, so the photography carries on behind it. */
.site-header {
	background: var(--surface);
	position: sticky;
	top: 0;
	z-index: 50;
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

@supports (backdrop-filter: blur(1px)) and (background: color-mix(in srgb, red 50%, transparent)) {
	.site-header.is-scrolled {
		background-color: color-mix(in srgb, var(--surface) 78%, transparent);
		backdrop-filter: blur(14px) saturate(140%);
		box-shadow: 0 1px 0 var(--hairline);
	}
}

/* WordPress's admin bar would otherwise sit on top of a sticky header. */
.admin-bar .site-header {
	top: 32px;
}

/* Logo left, the reserve line centred in the middle of the screen, the
   button right. The centre column takes the free space so the message is
   centred on the viewport rather than between its neighbours. */
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap);
	padding-block: 0.9rem;
}

.site-header__logo {
	flex: 0 0 auto;
	text-decoration: none;
	color: var(--heading);
	font-weight: 600;
}

/* Scales with the viewport rather than sitting at one fixed size, so it
   holds its own on a wide screen without swamping a phone. */
.site-header__logo img {
	max-height: clamp(64px, 6vw, 92px);
	width: auto;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 2vw, 1.75rem);
	flex-wrap: wrap;
	justify-content: flex-end;
}

.site-nav > a {
	color: var(--heading);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
}

.site-nav > a:not(.button):hover {
	color: var(--highlight);
}

/* A real tel: link, so it is one tap on a phone rather than text to copy
   out, and big enough to actually be read. */
.site-header__message {
	flex: 1 1 auto;
	margin: 0;
	text-align: center;
	color: var(--heading);
	font-size: clamp(1rem, 0.85rem + 0.7vw, 1.5rem);
	font-weight: 700;
	line-height: 1.3;
	text-wrap: balance;
}

.site-header__message a {
	text-decoration: none;
}

.site-header__message a:hover {
	color: var(--highlight);
}

.site-header__cta {
	flex: 0 0 auto;
}

@media (max-width: 860px) {
	.site-header__inner {
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.75rem;
	}

	.site-nav {
		justify-content: center;
		width: 100%;
	}
}

@media (max-width: 420px) {
	.site-nav__phone span {
		display: none;
	}
}

/* --------------------------------------------------------------------
 * Hero
 * ----------------------------------------------------------------- */

.hero {
	position: relative;
	display: grid;
	align-items: end;
	min-height: clamp(30rem, 88vh, 54rem);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	isolation: isolate;
}

/* A slow drift on the background. Barely perceptible frame to frame, but it
   stops the top of the page feeling like a still photograph. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
	.hero {
		background-attachment: fixed;
	}
}

/* The img exists so the browser's preloader finds and prioritises it. The
   background is the visual; this is hidden but still fetched early. */
.hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Strongest behind the text, fading across so the photo still reads on
	   the right. Both stops move together from the one setting. */
	background:
		linear-gradient(to right, rgb(0 0 0 / var(--hero-shade, 45%)), rgb(0 0 0 / var(--hero-shade-soft, 15%))),
		linear-gradient(to top, rgb(0 0 0 / 55%) 0%, transparent 45%);
	z-index: -1;
}

/* No width limit on this element: it also carries .wrap, whose auto margins
   would centre a narrowed block. The measure goes on the heading. */
.hero__inner {
	padding-block: var(--section-y);
}

/* The one place on the page where the type is allowed to be enormous.
   Held to a short measure so it stacks a couple of words to a line and
   fills the frame, the way the old site's did. */
.hero__title {
	margin-bottom: 1.75rem;
	max-width: 14ch;
	font-size: clamp(3rem, 1.4rem + 7vw, 7.5rem);
	line-height: 0.95;
	text-shadow: 0 2px 30px rgb(0 0 0 / 35%);
	text-wrap: initial;
}

.hero--caps .hero__title {
	text-transform: uppercase;
	font-weight: 700;
	max-width: 11ch;
	letter-spacing: -0.02em;
}

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

.split__grid {
	display: grid;
	/* The picture gets the wider track. It is first in the source, so the
	   flipped variant swaps the tracks to keep it the wider one. */
	grid-template-columns: 1.15fr 1fr;
	gap: clamp(2rem, 4.5vw, 4rem);
	align-items: center;
}

/* This single rule replaces the duplicated-and-hidden section the old build
   used to get the image on the other side. */
.split--flip .split__media {
	order: 2;
}

.split--flip .split__grid {
	grid-template-columns: 1fr 1.15fr;
}

.split__media {
	position: relative;
	isolation: isolate;
}

.split__media img {
	width: 100%;
	/* A consistent portrait crop. Left to their natural sizes the pictures
	   were different heights and the page lost its rhythm. */
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radius);
}

/* Scale comes from a taller crop and a wider column, not from negative
   margins: pulling a grid item outside its track drags it over the text
   in the next column. */
@media (min-width: 1100px) {
	.split__media img {
		aspect-ratio: 4 / 5;
	}
}

/* A section with no picture. Left in the first column it read as a layout
   that had lost its image, so it becomes a centred statement instead. */
.split__body:only-child {
	grid-column: 1 / -1;
	max-width: 50rem;
	margin-inline: auto;
	text-align: center;
}

.split__body:only-child .eyebrow {
	justify-content: center;
}

.owner {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 2rem 0 0;
}

/* This is a signature graphic, not a head shot. Cropping it into an 84px
   circle threw away most of it, which is why it looked like it had failed
   to load. Ink signatures are dark, so they are flipped to white to be
   visible on a dark page. */
.owner img {
	width: auto;
	max-width: 170px;
	max-height: 4.5rem;
	height: auto;
	border-radius: 0;
	object-fit: contain;
	flex: 0 0 auto;
	filter: brightness(0) invert(1);
	opacity: 0.9;
}

.owner figcaption {
	display: flex;
	flex-direction: column;
}

.owner strong {
	color: var(--heading);
}

.owner span {
	color: var(--highlight);
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

@media (max-width: 782px) {
	/* Both selectors, because ".split--flip .split__grid" outranks a bare
	   ".split__grid" and would otherwise keep its two columns on a phone,
	   leaving a postage-stamp image beside the text. */
	.split__grid,
	.split--flip .split__grid {
		grid-template-columns: 1fr;
	}

	.split--flip .split__media {
		order: 0;
	}

	/* Full width, and a landscape crop, so the picture reads as a header
	   for the section rather than a tall column of photograph. */
	.split__media img {
		aspect-ratio: 3 / 2;
	}
}

/* --------------------------------------------------------------------
 * Menus
 *
 * These are a main reason the site exists, so they get real estate rather
 * than a row of small buttons.
 * ----------------------------------------------------------------- */

.menus__head {
	text-align: center;
	margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.menus__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
}

/* Four cards auto-fit into three across, leaving a lone card on the second
   row. Two by two is deliberate. */
.menus__grid[data-count="4"] {
	grid-template-columns: repeat(2, 1fr);
	max-width: 54rem;
	margin-inline: auto;
}

@media (max-width: 640px) {
	.menus__grid[data-count="4"] {
		grid-template-columns: 1fr;
	}
}

.menu-card__link {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	height: 100%;
	padding: clamp(2rem, 4vw, 3rem);
	/* --card is set inline per menu, so a Christmas card can be red among
	   the usual ones without a stylesheet edit. */
	background: var(--card, var(--surface));
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.menu-card__link:hover {
	border-color: var(--highlight);
	transform: translateY(-2px);
}

.menu-card__name {
	color: var(--heading);
	font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
	font-weight: 600;
	line-height: 1.25;
}

.menu-card__note {
	color: var(--body);
	font-size: 0.9rem;
	opacity: 0.8;
}

/* On a tinted card the brand highlight may clash with the card colour, so
   the label falls back to the card's own text colour. */
.menu-card--tinted .menu-card__name,
.menu-card--tinted .menu-card__note,
.menu-card--tinted .menu-card__cta {
	color: #fff;
}

.menu-card--tinted .menu-card__note,
.menu-card--tinted .menu-card__cta {
	opacity: 0.9;
}

.menu-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-top: auto;
	padding-top: 1rem;
	color: var(--highlight);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.menu-card__cta svg {
	width: 1.05rem;
	height: 1.05rem;
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------
 * Visit strip
 * ----------------------------------------------------------------- */

.visit {
	background: var(--surface);
	padding-block: clamp(2.5rem, 6vw, 4rem);
}

.visit__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--gap);
}

.visit h2 {
	font-size: 0.85rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--highlight);
	margin-bottom: 0.9rem;
}

.visit address {
	font-style: normal;
	display: grid;
	gap: 0.15rem;
}

.visit__phone {
	display: inline-block;
	color: var(--heading);
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
	font-weight: 600;
	text-decoration: none;
	letter-spacing: 0.01em;
}

.visit__phone:hover {
	color: var(--highlight);
}

/* --------------------------------------------------------------------
 * Booking
 * ----------------------------------------------------------------- */

.booking {
	position: relative;
	background-size: cover;
	background-position: center;
	isolation: isolate;
}

.booking::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 72%);
	z-index: -1;
}

.booking__grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: var(--gap);
	align-items: start;
}

@media (max-width: 900px) {
	.booking__grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------
 * Quote
 * ----------------------------------------------------------------- */

.quote blockquote {
	margin: 0;
	max-width: 48rem;
	margin-inline: auto;
}

.quote p {
	color: var(--heading);
	font-size: clamp(1.35rem, 1rem + 1.6vw, 2.1rem);
	line-height: 1.35;
	font-weight: 300;
	font-style: italic;
}

.quote cite {
	display: block;
	color: var(--highlight);
	font-style: normal;
	font-size: 0.85rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------
 * Gallery
 * ----------------------------------------------------------------- */

/* Edge to edge. The photography is the strongest thing on the page, so it
   is not asked to sit inside the text column. */
.gallery__bleed {
	width: 100%;
}

.gallery__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(220px, 45vw), 1fr));
	gap: 2px;
}

.gallery__grid img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery__grid li {
	overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
	.gallery__grid li:hover img {
		transform: scale(1.06);
	}
}

/* --------------------------------------------------------------------
 * Footer
 * ----------------------------------------------------------------- */

/* Deliberately shallow. It is contact details, not a section of the site. */
.site-footer {
	background: var(--surface);
	padding-top: 3rem;
	font-size: 0.95rem;
}

/* The logo is the first of four columns. Nudged up so its optical centre
   sits with the small-caps labels beside it rather than below them. */
.site-footer__col--brand {
	margin-top: -0.5rem;
}

/* The phone number is the single most useful thing down here. */
.site-footer__phone {
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
	font-weight: 600;
	color: var(--heading);
	margin-bottom: 0.75rem;
}

.site-footer__phone a {
	text-decoration: none;
}

.site-footer__col > :last-child {
	margin-bottom: 0;
}

/* Logo, then three columns each starting with a label, so every column's
   first line of text sits on the same line as its neighbours'. */
.site-footer__grid {
	display: grid;
	grid-template-columns: 0.9fr 1fr 1fr 1fr;
	gap: var(--gap);
	align-items: start;
}

@media (max-width: 980px) {
	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
	}

	.site-footer__col--brand {
		grid-column: 1 / -1;
		margin: 0 0 1rem;
	}
}

@media (max-width: 520px) {
	.site-footer__grid {
		grid-template-columns: 1fr;
	}
}

.site-footer h2 {
	font-size: 0.85rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--highlight);
	margin-bottom: 1rem;
}

.site-footer__col--brand img {
	max-width: 170px;
	height: auto;
}

.site-footer address {
	font-style: normal;
	display: grid;
	gap: 0.15rem;
	margin-bottom: 1rem;
}

.hours {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.35rem;
}

.social {
	list-style: none;
	display: flex;
	gap: 0.75rem;
	margin: 1.25rem 0 0;
	padding: 0;
}

.social a {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid currentColor;
	border-radius: 50%;
	color: var(--body);
	transition: color 0.15s ease, border-color 0.15s ease;
}

.social a:hover {
	color: var(--highlight);
}

.social svg {
	width: 1.1rem;
	height: 1.1rem;
	fill: currentColor;
}

.newsletter {
	display: flex;
	gap: 0.5rem;
	align-items: stretch;
	flex-wrap: wrap;
}

.newsletter input {
	flex: 1 1 9rem;
	min-width: 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--body);
	color: var(--heading);
	font: inherit;
	padding: 0.6rem 0.2rem;
	min-height: 2.75rem;
}

.newsletter input::placeholder {
	color: var(--body);
	opacity: 0.7;
}

.newsletter button {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--highlight);
	color: var(--heading);
	font: inherit;
	font-size: 0.85rem;
	letter-spacing: 0.19px;
	text-transform: uppercase;
	padding: 0.6rem 0.4rem;
	min-height: 2.75rem;
	cursor: pointer;
}

.newsletter button:hover {
	color: var(--highlight);
}

/* --------------------------------------------------------------------
 * Sister restaurant
 * ----------------------------------------------------------------- */

/* A pale band, deliberately. After a page of dark purple this is the one
   place that breaks it, which is what makes it read as a separate business
   rather than another section of this one. The tint is mixed from the brand
   colour, so Pintxos gets a warm cream and La Cantina a cool grey-lilac. */
.sister {
	background: #f4f2f6;
	background: var( --sister-bg, color-mix(in srgb, var(--highlight) 14%, #ffffff) );
	color: var( --sister-ink, #4a4a4a );
	padding-block: clamp(2.5rem, 6vw, 4rem);
}

.sister .eyebrow,
.sister__name {
	color: var( --sister-ink, #1c1c1c );
}

.sister .eyebrow {
	opacity: 0.75;
}

/* A pale band needs a dark button: both sites' accents are light tints and
   would vanish into the background. */
.sister .button {
	background: var( --sister-btn, #1c1c1c );
	color: var( --sister-btn-ink, #ffffff );
}

.sister__inner {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 4vw, 3rem);
	flex-wrap: wrap;
}

.sister__logo img {
	max-width: 150px;
	height: auto;
}

.sister__body {
	flex: 1 1 16rem;
}

.sister__body p {
	margin: 0.35rem 0 0;
	max-width: 44rem;
}

.sister__name {
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
	margin: 0;
}

.sister__link {
	flex: 0 0 auto;
}

@media (max-width: 640px) {
	.sister__inner {
		display: grid;
		justify-items: start;
	}
}

/* --------------------------------------------------------------------
 * Reviews
 * ----------------------------------------------------------------- */

/* A full-width band rather than a card. Boxing the carousel inside the
   text column made it look like an advert dropped into the page. */
.reviews {
	padding-block: 0;
}

.reviews__heading {
	text-align: center;
	padding-top: clamp(3rem, 7vw, 5rem);
	margin-bottom: 2rem;
}

/* Review plugins ship their own light-themed markup, so the band is pale:
   white text on white cards would be unreadable. */
.reviews__body {
	background: #fff;
	color: #1a1a1a;
	padding-block: clamp(1.5rem, 4vw, 3rem);
	padding-inline: clamp(1rem, 3vw, 2.5rem);
}

.reviews__body a {
	color: inherit;
}

/* Copyright on the left, social icons on the right, sharing the rule above
   them. Floating on their own they had nothing to sit against. */
.site-footer__legal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	flex-wrap: wrap-reverse;
	margin-top: 2.5rem;
	padding-block: 1.1rem;
	border-top: 1px solid var(--hairline);
	font-size: 0.85rem;
	opacity: 0.75;
}

.site-footer__legal p {
	margin: 0;
}

.site-footer__legal .social {
	margin: 0;
}

.site-footer__legal .social a {
	width: 2.25rem;
	height: 2.25rem;
}

@media (max-width: 560px) {
	.site-footer__grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------
 * Motion preferences
 * ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}