/*
 * RaptClub showcase (1.19.0): Discover, the home page below its hero, and
 * pages on the Showcase template — built in the block editor from core
 * blocks and the theme's block styles (inc/showcase.php).
 *
 * Layout rules are scoped to .rc-showcase (and .rc-page-body, so a slideshow
 * also works on an ordinary page); this file is also the editor stylesheet,
 * where the editor prefixes every selector, so there the galleries keep
 * their editable grid and only the type styles apply.
 *
 * Palette as the rest of the theme: white, greys, black. No red here.
 */

.rc-showcase {
	--rc-showcase-space: clamp(4.5rem, 10vw, 10rem);
	/* The distance between a heading and the pictures beside it (1.20.5),
	   the same value home.css gives the home page, so other pages match. */
	--rc-home-step: clamp(2.5rem, 6vw, 6.5rem);
	/*
	 * The margin that puts a block on the site's frame (.rc-frame): half of
	 * what is left beside the frame's column (1920px), and never less than the frame's
	 * own gutter. A percentage, so it is worked out against whatever the
	 * block sits in — the page, or a full-width section.
	 */
	--rc-showcase-side: max(calc((100% - var(--rc-frame)) / 2), calc(clamp(1.25rem, 5vw, 5rem) / 2));
	overflow-x: clip;
}

/* ---------------------------------------------------------------------------
 * Flow: framed blocks with generous space; full-bleed blocks edge to edge,
 * and butted together when they follow one another.
 * ------------------------------------------------------------------------ */

.rc-showcase > * {
	width: auto;
	max-width: none;
	margin-block: 0;
	margin-inline: var(--rc-showcase-side);
}

.rc-showcase > * + * {
	margin-top: var(--rc-showcase-space);
}

.rc-showcase > .alignfull {
	width: auto;
	margin-inline: 0;
}

/* Picture-to-picture: a full-bleed image, spread, gallery or dark section
   followed by another sits flush against it. A plain full-width group (a
   heading over a filmstrip) keeps its space. */
/* The live blocks are ruled sections with their own padding (.rc-section),
   so they need no margin; a picture after one sits on its rule. */
.rc-showcase > :is(.wp-block-cover, .wp-block-media-text, .wp-block-gallery, .wp-block-image, .wp-block-group.has-background).alignfull + :is(.wp-block-cover, .wp-block-media-text, .wp-block-gallery, .wp-block-image, .wp-block-group.has-background).alignfull,
.rc-showcase > .rc-section,
.rc-showcase > .rc-section + :is(.wp-block-cover, .wp-block-media-text, .wp-block-gallery, .wp-block-image, .wp-block-group.has-background).alignfull {
	margin-top: 0;
}

.rc-showcase > :last-child:not(:is(.wp-block-cover, .wp-block-media-text, .wp-block-gallery, .wp-block-image, .wp-block-group.has-background).alignfull):not(.rc-section) {
	margin-bottom: var(--rc-showcase-space);
}

/* A full-bleed section with its own ground: space inside, content framed. */
.rc-showcase > .wp-block-group.alignfull.has-background {
	padding-block: var(--rc-showcase-space);
}

.rc-showcase > .wp-block-group.alignfull > * {
	width: auto;
	margin-inline: var(--rc-showcase-side);
}

.rc-showcase > .wp-block-group.alignfull > .alignfull {
	margin-inline: 0;
}

.rc-showcase .wp-block-group > * + * {
	margin-top: clamp(1.25rem, 2.4vw, 2.25rem);
}

.rc-showcase .wp-block-group > .alignfull,
.rc-showcase .wp-block-group > .wp-block-gallery,
.rc-showcase .wp-block-group > .wp-block-columns {
	margin-top: clamp(2.5rem, 5vw, 5rem);
}

/* The home page: its first block sits against the hero's rule. */
.rc-showcase--home > :first-child {
	margin-top: 0;
}

/* ---------------------------------------------------------------------------
 * Type
 * ------------------------------------------------------------------------ */

/* Headings written in the editor (core Heading blocks). The live blocks draw
   their own section headers and keep the site's .rc-section__header sizes,
   including the home page's wide headlines. */
.rc-showcase .wp-block-heading {
	margin-block: 0;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
	text-wrap: balance;
}

.rc-showcase h2.wp-block-heading {
	max-width: 22ch;
	font-size: clamp(2rem, 4vw, 2.65rem);
	line-height: 0.98;
}

.rc-showcase h3.wp-block-heading {
	font-size: clamp(1.25rem, 2vw, 1.6rem);
	line-height: 1.02;
}

:where(.rc-showcase) p {
	margin-block: 0;
}

.rc-showcase .wp-block-group > p:not([class*="is-style-"]),
.rc-showcase .wp-block-media-text__content > p:not([class*="is-style-"]) {
	max-width: 36rem;
	color: var(--rc-graphite);
	font-size: 1.05rem;
	line-height: 1.58;
}

/* Body copy across a full-width section runs wider, closer to the lede or
   heading above it, instead of breaking after a few words (1.19.2). */
.rc-showcase .wp-block-group > p:not([class*="is-style-"]) {
	max-width: min(48rem, 100%);
}

/* Where a section sets its own text colour (any swatch, light or dark) or
   the words sit on a picture, body copy, labels and captions follow that
   colour, a little quieter, instead of the page's greys. */
.rc-showcase .has-text-color p:not([class*="is-style-"]),
.rc-showcase .wp-block-cover:not(.is-light) p:not([class*="is-style-"]) {
	color: inherit;
	color: color-mix(in srgb, currentColor 82%, transparent);
}

/* Display: the page-sized line. Long words may break rather than run off a
   phone's edge, where .rc-showcase clips. */
.is-style-rc-display {
	max-width: none;
	margin: 0;
	font-size: clamp(2.5rem, 10.4vw, 11.5rem);
	overflow-wrap: break-word;
	hyphens: auto;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 0.86;
	text-transform: uppercase;
	text-wrap: balance;
}

.rc-showcase h2.wp-block-heading.is-style-rc-display,
.rc-showcase h1.wp-block-heading.is-style-rc-display {
	max-width: none;
	font-size: clamp(2.5rem, 10.4vw, 11.5rem);
	line-height: 0.86;
}

/* Slogans, one sentence to a line (1.19.4). The owner sets each sentence on
   a line of its own (a line break in the editor, e.g. "Second skin." /
   "First impression.", "Color," / "riveted to the surface"). The character
   caps these styles had (12 for display, 22 for headings, 26 for the lede)
   broke a sentence to stack words into a block, so on showcase pages the
   column alone limits a line, and assets/js/showcase.js eases the size down
   until every sentence fits on one line. */
.rc-showcase h2.wp-block-heading,
.rc-showcase .is-style-rc-lede {
	max-width: none;
}

/* Label: the site's kicker. */
.is-style-rc-kicker {
	margin: 0;
	color: var(--rc-muted);
	font-size: 0.73rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
}

.has-text-color .is-style-rc-kicker,
.wp-block-cover:not(.is-light) .is-style-rc-kicker {
	color: inherit;
	color: color-mix(in srgb, currentColor 66%, transparent);
}

/* Lede: a statement set large. */
.is-style-rc-lede {
	max-width: 26ch;
	margin: 0;
	font-size: clamp(1.55rem, 3.4vw, 3.25rem);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.1;
	text-wrap: balance;
}

/* Arrow link: a paragraph whose link reads as the site's text link. */
.is-style-rc-arrow a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.78rem 0;
	border-bottom: 1px solid currentColor;
	color: inherit;
	font-size: 0.77rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
}

.is-style-rc-arrow a::after {
	margin-left: 2rem;
	content: "\2192";
	content: "\2192" / "";
	font-size: 0.9rem;
	transition: transform 260ms var(--rc-ease);
}

.is-style-rc-arrow a:hover::after {
	transform: translateX(0.35rem);
}

/* Several links in one arrow paragraph (a section's "shop the pieces" line):
   spaced apart, and wrapping onto new lines on a narrow screen (1.19.1). */
.is-style-rc-arrow a:not(:last-child) {
	margin-right: clamp(1.5rem, 3vw, 2.75rem);
}

/* Columns of small print under a statement. */
.rc-showcase .wp-block-columns {
	gap: var(--rc-gutter);
	margin-bottom: 0;
}

.rc-showcase .wp-block-column > * + * {
	margin-top: 0.7rem;
}

/* ---------------------------------------------------------------------------
 * Cover: the opening image
 * ------------------------------------------------------------------------ */

.rc-showcase .wp-block-cover {
	padding: 0;
	color: var(--rc-inverse-text);
}

/* Core sets the inner container to width: auto; margin: 0 on a cover with a
   content position, with a doubled class; this matches it and puts the
   words back on the frame. */
.rc-showcase .wp-block-cover.wp-block-cover .wp-block-cover__inner-container {
	width: auto;
	margin: 0 var(--rc-showcase-side);
	padding-block: clamp(2.5rem, 6vw, 6rem);
}

.rc-showcase .wp-block-cover.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container {
	width: auto;
	margin: 0 var(--rc-showcase-side);
}

.rc-showcase .wp-block-cover__inner-container > * + * {
	margin-top: clamp(1rem, 2vw, 1.75rem);
}

.rc-showcase .wp-block-cover__image-background {
	animation: rc-showcase-settle 2.6s var(--rc-ease) both;
}

@keyframes rc-showcase-settle {
	from {
		transform: scale(1.08);
	}

	to {
		transform: scale(1);
	}
}

/* ---------------------------------------------------------------------------
 * Media & text: the editorial spread
 * ------------------------------------------------------------------------ */

.rc-showcase .wp-block-media-text {
	gap: 0;
}

.rc-showcase .wp-block-media-text .wp-block-media-text__content {
	padding: clamp(2.5rem, 7vw, 8rem) clamp(1.25rem, 5vw, 6rem);
}

.rc-showcase .wp-block-media-text__content > * + * {
	margin-top: clamp(1.1rem, 2vw, 1.75rem);
}

.rc-showcase .wp-block-media-text .wp-block-media-text__media {
	min-height: clamp(26rem, 82svh, 60rem);
	margin: 0;
	overflow: hidden;
}

.rc-showcase .wp-block-media-text .wp-block-media-text__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rc-showcase .wp-block-media-text:not(.is-image-fill):not(.is-image-fill-element) .wp-block-media-text__media img {
	position: absolute;
	inset: 0;
}

.rc-showcase .wp-block-media-text:not(.is-image-fill):not(.is-image-fill-element) .wp-block-media-text__media {
	position: relative;
}

/* ---------------------------------------------------------------------------
 * Plain images and galleries in a showcase
 * ------------------------------------------------------------------------ */

.rc-showcase .wp-block-image {
	margin-bottom: 0;
}

.rc-showcase .wp-block-image.alignfull img {
	width: 100%;
	max-height: 100svh;
	object-fit: cover;
}

.rc-showcase .wp-block-image figcaption,
.rc-showcase .wp-block-gallery > figcaption {
	width: auto;
	margin: 0.9rem var(--rc-showcase-side) 0;
	color: var(--rc-muted);
	font-size: 0.78rem;
	line-height: 1.45;
	text-align: left;
}

.rc-showcase .has-text-color .wp-block-image figcaption,
.rc-showcase .has-text-color .wp-block-gallery > figcaption {
	color: inherit;
	color: color-mix(in srgb, currentColor 66%, transparent);
}

/* A slideshow always paints its own dark ground, whatever it sits in. */
.wp-block-gallery.is-style-rc-slideshow > figcaption {
	margin: 0;
	padding: 0 clamp(1.25rem, 4vw, 4rem) 1.2rem;
	color: rgba(245, 245, 247, 0.66);
}

.rc-showcase .wp-block-gallery.alignfull:not([class*="is-style-rc-"]) figure.wp-block-image img {
	max-height: 100svh;
}

/* ---------------------------------------------------------------------------
 * Gallery: slideshow
 * ------------------------------------------------------------------------ */

/* Before (or without) the script: a strip that scrolls sideways. */
:where(.rc-showcase, .rc-page-body) .wp-block-gallery.is-style-rc-slideshow:not(.rc-slideshow) {
	display: flex;
	flex-wrap: nowrap;
	gap: 2px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	background: var(--rc-inverse);
}

:where(.rc-showcase, .rc-page-body) .wp-block-gallery.is-style-rc-slideshow:not(.rc-slideshow) > figure.wp-block-image {
	flex: 0 0 auto !important;
	width: auto !important;
	height: clamp(22rem, 78svh, 56rem);
	margin: 0 !important;
	scroll-snap-align: center;
}

:where(.rc-showcase, .rc-page-body) .wp-block-gallery.is-style-rc-slideshow:not(.rc-slideshow) > figure.wp-block-image img {
	width: auto !important;
	height: 100% !important;
}

.wp-block-gallery.rc-slideshow {
	position: relative;
	display: block;
	gap: 0;
	background: var(--rc-inverse);
	color: var(--rc-inverse-text);
}

.rc-slideshow__stage {
	position: relative;
	/* The stage and its controls fit one screen under the header. */
	height: clamp(24rem, calc(100svh - var(--rc-header-height) - 4.5rem), 64rem);
	overflow: hidden;
	touch-action: pan-y;
	user-select: none;
}

/* Core sizes gallery images with :not(#individual-image), an ID's weight,
   so the sizes here that must win over it are marked !important. */
.wp-block-gallery.rc-slideshow figure.wp-block-image.rc-slideshow__slide {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1.1s var(--rc-ease), visibility 0s linear 1.1s;
}

.wp-block-gallery.rc-slideshow figure.wp-block-image.rc-slideshow__slide.is-active {
	z-index: 1;
	opacity: 1;
	visibility: visible;
	transition: opacity 1.1s var(--rc-ease);
}

/* Core draws a blurred band under a gallery caption; not on a stage. */
.wp-block-gallery.rc-slideshow figure.wp-block-image.rc-slideshow__slide::before {
	content: none;
}

.rc-slideshow__backdrop {
	position: absolute;
	inset: -6%;
	z-index: 0;
	background-position: center;
	background-size: cover;
	filter: blur(56px) brightness(0.5) saturate(0.85);
	opacity: 0.75;
	pointer-events: none;
}

.wp-block-gallery.rc-slideshow figure.wp-block-image.rc-slideshow__slide img {
	position: relative;
	z-index: 1;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: contain !important;
	transform: scale(1.035);
	transition: transform 7s linear;
}

.wp-block-gallery.rc-slideshow.is-cropped figure.wp-block-image.rc-slideshow__slide img {
	object-fit: cover !important;
}

.wp-block-gallery.rc-slideshow figure.wp-block-image.rc-slideshow__slide.is-active img {
	transform: scale(1);
}

.wp-block-gallery.rc-slideshow figure.wp-block-image.rc-slideshow__slide figcaption {
	position: absolute;
	right: auto;
	bottom: clamp(1.25rem, 3vw, 2.5rem);
	left: clamp(1.25rem, 4vw, 4rem);
	z-index: 2;
	width: auto;
	max-width: min(36ch, 70%);
	max-height: none;
	margin: 0;
	padding: 0;
	overflow: visible;
	background: none;
	color: var(--rc-inverse-text);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-align: left;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
	text-transform: uppercase;
}

.rc-slideshow__ui {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2rem);
	padding: 1rem clamp(1.25rem, 4vw, 4rem) 1.2rem;
}

.rc-slideshow__count {
	margin: 0;
	color: rgba(245, 245, 247, 0.56);
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

.rc-slideshow__count span {
	color: var(--rc-inverse-text);
}

.rc-slideshow__bars {
	display: flex;
	gap: 4px;
	min-width: 0;
}

.rc-slideshow__bar {
	position: relative;
	flex: 1 1 0;
	min-width: 0.75rem;
	height: 1.75rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.rc-slideshow__bar::before,
.rc-slideshow__bar span {
	position: absolute;
	top: 50%;
	left: 0;
	height: 2px;
	margin-top: -1px;
	content: "";
}

.rc-slideshow__bar::before {
	right: 0;
	background: rgba(245, 245, 247, 0.45);
	transition: background 200ms var(--rc-ease);
}

.rc-slideshow__bar:hover::before {
	background: rgba(245, 245, 247, 0.5);
}

.rc-slideshow__bar span {
	width: 0;
	background: var(--rc-inverse-text);
}

.rc-slideshow__bar.is-done span,
.rc-slideshow__bar.is-active span {
	width: 100%;
}

.rc-slideshow.is-running .rc-slideshow__bar.is-active span {
	animation: rc-slideshow-fill var(--rc-slide-delay, 6000ms) linear both;
}

@keyframes rc-slideshow-fill {
	from {
		width: 0;
	}

	to {
		width: 100%;
	}
}

.rc-slideshow__bar:focus-visible,
.rc-slideshow__toggle:focus-visible,
.rc-slideshow__arrow:focus-visible,
.rc-filmstrip__arrow:focus-visible {
	outline: 2px solid var(--rc-inverse-text);
	outline-offset: 2px;
}

.rc-slideshow__toggle {
	position: relative;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid rgba(245, 245, 247, 0.4);
	border-radius: 50%;
	background: none;
	color: var(--rc-inverse-text);
	cursor: pointer;
}

/* Pause: two bars. Play: a triangle. */
.rc-slideshow__toggle::before,
.rc-slideshow__toggle::after {
	position: absolute;
	top: 50%;
	width: 2px;
	height: 0.75rem;
	margin-top: -0.375rem;
	background: currentColor;
	content: "";
}

.rc-slideshow__toggle::before {
	left: calc(50% - 4px);
}

.rc-slideshow__toggle::after {
	left: calc(50% + 2px);
}

.rc-slideshow.is-paused .rc-slideshow__toggle::before {
	left: calc(50% - 3px);
	width: 0;
	height: 0;
	margin-top: -0.4rem;
	border-top: 0.4rem solid transparent;
	border-bottom: 0.4rem solid transparent;
	border-left: 0.66rem solid currentColor;
	background: none;
}

.rc-slideshow.is-paused .rc-slideshow__toggle::after {
	content: none;
}

/*
 * The theme styles every button as a black box with !important colours
 * (style.css, "button:not(.rc-menu-toggle)"); these controls are not that, so
 * the reset has to match its weight.
 */
.rc-slideshow button.rc-slideshow__bar,
.rc-slideshow button.rc-slideshow__toggle,
.rc-slideshow button.rc-slideshow__arrow,
.rc-filmstrip button.rc-filmstrip__arrow {
	min-height: 0;
	padding: 0;
	box-shadow: none !important;
	letter-spacing: 0;
}

.rc-slideshow button.rc-slideshow__bar,
.rc-slideshow button.rc-slideshow__bar:hover {
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: inherit !important;
}

.rc-slideshow button.rc-slideshow__toggle,
.rc-slideshow button.rc-slideshow__toggle:hover {
	border: 1px solid rgba(245, 245, 247, 0.4) !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: var(--rc-inverse-text) !important;
}

.rc-slideshow button.rc-slideshow__toggle:hover {
	border-color: var(--rc-inverse-text) !important;
}

.rc-slideshow button.rc-slideshow__arrow,
.rc-filmstrip button.rc-filmstrip__arrow {
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(22, 22, 23, 0.42) !important;
	color: var(--rc-inverse-text) !important;
}

.rc-slideshow button.rc-slideshow__arrow:hover,
.rc-filmstrip button.rc-filmstrip__arrow:hover {
	background: rgba(22, 22, 23, 0.72) !important;
}

/* Arrows: round, translucent, clear of the edges — the product gallery's. */
.rc-slideshow__arrow,
.rc-filmstrip__arrow {
	position: absolute;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(22, 22, 23, 0.42);
	color: var(--rc-inverse-text);
	cursor: pointer;
	backdrop-filter: blur(6px);
	transition: background 200ms var(--rc-ease), opacity 200ms var(--rc-ease);
}

.rc-slideshow__arrow:hover,
.rc-filmstrip__arrow:hover {
	background: rgba(22, 22, 23, 0.72);
}

.rc-slideshow__arrow::before,
.rc-filmstrip__arrow::before {
	width: 0.6rem;
	height: 0.6rem;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	content: "";
}

.rc-slideshow__arrow--prev::before,
.rc-filmstrip__arrow--prev::before {
	margin-left: 0.2rem;
	transform: rotate(-135deg);
}

.rc-slideshow__arrow--next::before,
.rc-filmstrip__arrow--next::before {
	margin-right: 0.2rem;
	transform: rotate(45deg);
}

.rc-slideshow__arrow {
	top: 50%;
	margin-top: -1.5rem;
}

.rc-slideshow__arrow--prev {
	left: clamp(0.75rem, 2.5vw, 2rem);
}

.rc-slideshow__arrow--next {
	right: clamp(0.75rem, 2.5vw, 2rem);
}

@media (hover: hover) {
	.rc-slideshow__arrow {
		opacity: 0;
	}

	.rc-slideshow:hover .rc-slideshow__arrow,
	.rc-slideshow__arrow:focus-visible {
		opacity: 1;
	}
}

/* A gallery with one picture: just the picture. */
.wp-block-gallery.rc-slideshow--single {
	display: block;
}

/* ---------------------------------------------------------------------------
 * Gallery: filmstrip
 * ------------------------------------------------------------------------ */

:where(.rc-showcase, .rc-page-body) .wp-block-gallery.is-style-rc-filmstrip:not(.rc-filmstrip),
.rc-filmstrip__track {
	display: flex;
	flex-wrap: nowrap;
	gap: clamp(0.5rem, 1vw, 1rem);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

:where(.rc-showcase, .rc-page-body) .wp-block-gallery.is-style-rc-filmstrip:not(.rc-filmstrip)::-webkit-scrollbar,
.rc-filmstrip__track::-webkit-scrollbar {
	display: none;
}

.wp-block-gallery.rc-filmstrip {
	position: relative;
	display: block;
}

/* Until the script builds the track, the row is clipped rather than wrapped,
   so the page does not jump when it does (1.20.0). */
.rc-js :where(.rc-showcase, .rc-page-body) .wp-block-gallery.is-style-rc-filmstrip:not(.rc-filmstrip) {
	overflow-x: clip;
}

.rc-filmstrip__track {
	padding-inline: max(calc((100% - var(--rc-frame)) / 2), clamp(0.625rem, 2.5vw, 2.5rem));
	scroll-padding-inline: max(calc((100% - var(--rc-frame)) / 2), clamp(0.625rem, 2.5vw, 2.5rem));
	cursor: grab;
}

.rc-filmstrip__track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
}

:where(.rc-showcase, .rc-page-body) .wp-block-gallery.is-style-rc-filmstrip:not(.rc-filmstrip) > figure.wp-block-image,
.rc-filmstrip__track > figure.wp-block-image {
	flex: 0 0 auto !important;
	width: auto !important;
	/* Core caps gallery figures and images at the gallery's width; a
	   filmstrip is wider than the screen on purpose. */
	max-width: none !important;
	height: clamp(18rem, 66svh, 46rem);
	margin: 0 !important;
	scroll-snap-align: start;
}

:where(.rc-showcase, .rc-page-body) .wp-block-gallery.is-style-rc-filmstrip:not(.rc-filmstrip) > figure.wp-block-image img,
.rc-filmstrip__track > figure.wp-block-image img {
	flex: none !important;
	width: auto !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	-webkit-user-drag: none;
}

.wp-block-gallery.has-nested-images.rc-filmstrip .rc-filmstrip__track > figure.wp-block-image figcaption {
	padding: 1.5rem 0.9rem 0.8rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-align: left;
	text-transform: uppercase;
}

.rc-filmstrip__arrow {
	top: 50%;
	margin-top: -1.5rem;
	opacity: 1;
}

.rc-filmstrip__arrow--prev {
	left: clamp(0.75rem, 2.5vw, 2rem);
}

.rc-filmstrip__arrow--next {
	right: clamp(0.75rem, 2.5vw, 2rem);
}

/* At either end the arrow fades and stops taking clicks, but stays focusable
   (aria-disabled, not disabled) so the keyboard focus it holds is not lost;
   it shows again while focused. */
.wp-block-gallery.rc-filmstrip .rc-filmstrip__arrow.is-off {
	opacity: 0;
	pointer-events: none;
}

.wp-block-gallery.rc-filmstrip .rc-filmstrip__arrow.is-off:focus-visible {
	opacity: 0.4;
}

/* The theme's global button rule sets display with !important behind a long
   :not() chain (style.css, "button:not(.rc-menu-toggle):not(...)"); the
   :not(#…) gives this an ID's weight so it wins. */
.wp-block-gallery.rc-filmstrip .rc-filmstrip__arrow[hidden]:not(#rc-filmstrip-none) {
	display: none !important;
}

/* ---------------------------------------------------------------------------
 * Gallery: mosaic — a large picture beside two, then three across; the next
 * six mirrored. Crops to fill; the gallery's own gap is kept.
 * ------------------------------------------------------------------------ */

:where(.rc-showcase, .rc-page-body) .wp-block-gallery.is-style-rc-mosaic {
	display: grid;
	grid-auto-flow: row dense;
	grid-auto-rows: clamp(7rem, 12.5vw, 15rem);
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--wp--style--unstable-gallery-gap, clamp(0.5rem, 1vw, 1rem));
}

:where(.rc-showcase, .rc-page-body) .wp-block-gallery.is-style-rc-mosaic > figure.wp-block-image {
	grid-row: span 3;
	grid-column: span 4;
	width: auto !important;
	height: auto;
	margin: 0 !important;
	overflow: hidden;
}

:where(.rc-showcase, .rc-page-body) .wp-block-gallery.is-style-rc-mosaic > figure.wp-block-image:nth-of-type(12n + 1) {
	grid-row: span 4;
	grid-column: 1 / span 7;
}

:where(.rc-showcase, .rc-page-body) .wp-block-gallery.is-style-rc-mosaic > figure.wp-block-image:nth-of-type(12n + 2),
:where(.rc-showcase, .rc-page-body) .wp-block-gallery.is-style-rc-mosaic > figure.wp-block-image:nth-of-type(12n + 3) {
	grid-row: span 2;
	grid-column: 8 / span 5;
}

:where(.rc-showcase, .rc-page-body) .wp-block-gallery.is-style-rc-mosaic > figure.wp-block-image:nth-of-type(12n + 7),
:where(.rc-showcase, .rc-page-body) .wp-block-gallery.is-style-rc-mosaic > figure.wp-block-image:nth-of-type(12n + 8) {
	grid-row: span 2;
	grid-column: 1 / span 5;
}

:where(.rc-showcase, .rc-page-body) .wp-block-gallery.is-style-rc-mosaic > figure.wp-block-image:nth-of-type(12n + 9) {
	grid-row: span 4;
	grid-column: 6 / span 7;
}

/* The last few pictures fill their row instead of leaving a hole, for any
   number of pictures. */
:where(.rc-showcase, .rc-page-body) .wp-block-gallery.is-style-rc-mosaic > figure.wp-block-image:nth-of-type(6n + 1):last-of-type,
:where(.rc-showcase, .rc-page-body) .wp-block-gallery.is-style-rc-mosaic > figure.wp-block-image:nth-of-type(6n + 4):last-of-type {
	grid-row: span 4;
	grid-column: 1 / -1;
}

:where(.rc-showcase, .rc-page-body) .wp-block-gallery.is-style-rc-mosaic > figure.wp-block-image:nth-of-type(6n + 1):nth-last-of-type(2),
:where(.rc-showcase, .rc-page-body) .wp-block-gallery.is-style-rc-mosaic > figure.wp-block-image:nth-of-type(6n + 2):last-of-type {
	grid-row: span 4;
	grid-column: auto / span 6;
}

:where(.rc-showcase, .rc-page-body) .wp-block-gallery.is-style-rc-mosaic > figure.wp-block-image:nth-of-type(6n + 4):nth-last-of-type(2),
:where(.rc-showcase, .rc-page-body) .wp-block-gallery.is-style-rc-mosaic > figure.wp-block-image:nth-of-type(6n + 5):last-of-type {
	grid-column: auto / span 6;
}

:where(.rc-showcase, .rc-page-body) .wp-block-gallery.is-style-rc-mosaic > figure.wp-block-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	transition: transform 900ms var(--rc-ease);
}

:where(.rc-showcase, .rc-page-body) .wp-block-gallery.is-style-rc-mosaic > figure.wp-block-image:hover img {
	transform: scale(1.03);
}

/* ---------------------------------------------------------------------------
 * Live blocks
 * ------------------------------------------------------------------------ */

/* Collections: a list set large beside one picture. */
.rc-collections__index {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: start;
	gap: var(--rc-gutter);
}

.rc-collections__list {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--rc-line-strong);
	list-style: none;
}

.rc-collections__row {
	margin: 0;
	border-bottom: 1px solid var(--rc-line);
}

.rc-collections__link {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 1rem;
	padding: clamp(0.9rem, 1.6vw, 1.35rem) 0;
	color: var(--rc-ink);
	text-decoration: none;
	transition: color 220ms var(--rc-ease), padding 320ms var(--rc-ease);
}

.rc-collections__thumb {
	display: none;
}

.rc-collections__num,
.rc-collections__count {
	color: var(--rc-muted);
	font-size: 0.72rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.rc-collections__name {
	min-width: 0;
	overflow-wrap: break-word;
	hyphens: auto;
	font-size: clamp(1.6rem, 3.3vw, 3.1rem);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 0.95;
	text-transform: uppercase;
}

/* Pointing at one row quietens the others. */
.rc-collections__list:hover .rc-collections__link,
.rc-collections__list:focus-within .rc-collections__link {
	color: var(--rc-muted);
}

.rc-collections__list .rc-collections__link:hover,
.rc-collections__list .rc-collections__link:focus-visible,
.rc-collections__list .rc-collections__link.is-current {
	padding-left: 0.75rem;
	color: var(--rc-ink);
}

.rc-collections__stage {
	position: sticky;
	top: calc(var(--rc-header-height) + 1.5rem);
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--rc-paper-soft);
}

.rc-collections__picture {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	margin: 0;
	opacity: 0;
	transition: opacity 600ms var(--rc-ease);
}

.rc-collections__picture.is-active {
	opacity: 1;
}

.rc-collections__picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.04);
	transition: transform 1400ms var(--rc-ease);
}

.rc-collections__picture.is-active img {
	transform: scale(1);
}

.rc-collections__picture--empty span {
	padding: 1.5rem;
	color: var(--rc-muted);
	font-size: clamp(1.6rem, 3vw, 2.6rem);
	font-weight: 700;
	line-height: 0.95;
	text-align: center;
	text-transform: uppercase;
}

.rc-product-grid--1 {
	grid-template-columns: minmax(0, 1fr);
	max-width: 30rem;
}

.rc-product-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rc-product-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Pieces, "Aside" style (1.19.2): an interlude between pictures rather than
   a section of its own — the heading and its link on the left, the cards on
   the right at a set width. 1.19.5 made the cards and the band around them
   larger (the owner found 15rem cards small on a wide screen): one or two
   cards now grow to 28rem, and the section has more air above and below.
   Three or four keep the smaller size, so the heading keeps its room. */
.rc-pieces.is-style-rc-aside {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--rc-gutter) clamp(2rem, 6vw, 6rem);
	padding-block: clamp(4rem, 8vw, 9rem);
}

.rc-pieces.is-style-rc-aside .rc-section__header,
.rc-pieces.is-style-rc-aside .rc-section__header--split {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(1rem, 2vw, 1.75rem);
	max-width: none;
	margin-bottom: 0;
}

.rc-pieces.is-style-rc-aside .rc-section__header h2 {
	margin-top: 0;
	font-size: clamp(2rem, 4vw, 3.25rem);
}

/* At most four cards to a row; more wrap onto another row instead of
   crushing the heading. */
.rc-pieces.is-style-rc-aside .rc-product-grid {
	--rc-aside-card: clamp(9.5rem, 17vw, 15rem);
	grid-template-columns: repeat(4, var(--rc-aside-card));
	grid-auto-columns: auto;
	grid-auto-flow: row;
	justify-self: end;
	width: auto;
	max-width: none;
}

.rc-pieces.is-style-rc-aside .rc-product-grid--1 {
	--rc-aside-card: clamp(10.5rem, 19vw, 28rem);
	grid-template-columns: var(--rc-aside-card);
}

.rc-pieces.is-style-rc-aside .rc-product-grid--2 {
	--rc-aside-card: clamp(10.5rem, 19vw, 28rem);
	grid-template-columns: repeat(2, var(--rc-aside-card));
}

.rc-pieces.is-style-rc-aside .rc-product-grid--3 {
	grid-template-columns: repeat(3, var(--rc-aside-card));
}

@media (max-width: 47.99rem) {
	.rc-pieces.is-style-rc-aside {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}

	.rc-pieces.is-style-rc-aside .rc-product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-columns: auto;
		grid-auto-flow: row;
		justify-self: stretch;
	}
}

/* The editor's preview of an empty live block. */
.rc-showcase-empty {
	margin: 0;
	padding: 1.5rem;
	border: 1px dashed var(--rc-line);
	color: var(--rc-muted);
	font-size: 0.85rem;
}

/* ---------------------------------------------------------------------------
 * Small screens
 * ------------------------------------------------------------------------ */

@media (max-width: 74.99rem) {
	.rc-product-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Below a laptop the picture moves into each row. */
@media (max-width: 63.99rem) {
	.rc-collections__index {
		grid-template-columns: minmax(0, 1fr);
	}

	.rc-collections__stage {
		display: none;
	}

	.rc-collections__link {
		grid-template-columns: 4.5rem minmax(0, 1fr) auto;
		align-items: center;
	}

	.rc-collections__num {
		display: none;
	}

	/* Smaller on a phone, so a one-word category ("Accessories") fits its
	   column rather than breaking. */
	.rc-collections__name {
		font-size: clamp(1.05rem, 5.5vw, 2.4rem);
	}

	.rc-collections__list .rc-collections__link:hover,
	.rc-collections__list .rc-collections__link:focus-visible,
	.rc-collections__list .rc-collections__link.is-current {
		padding-left: 0;
	}

	.rc-collections__thumb {
		display: block;
		width: 4.5rem;
		aspect-ratio: 4 / 5;
		overflow: hidden;
		background: var(--rc-paper-soft);
	}

	.rc-collections__thumb img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

@media (max-width: 47.99rem) {
	.rc-showcase .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media {
		min-height: 68svh;
	}

	.rc-slideshow__stage {
		height: min(80svh, 132vw);
	}

	.rc-slideshow__ui {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.rc-slideshow__toggle {
		justify-self: end;
	}

	.rc-slideshow__bars {
		grid-column: 1 / -1;
		grid-row: 2;
		gap: 3px;
	}

	.rc-slideshow__bar {
		min-width: 0;
	}

	.rc-slideshow__arrow,
	.rc-filmstrip__arrow {
		width: 2.5rem;
		height: 2.5rem;
		margin-top: -1.25rem;
	}

	:where(.rc-showcase, .rc-page-body) .wp-block-gallery.is-style-rc-mosaic {
		grid-auto-rows: 36vw;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* As heavy as the desktop fill rules above, so this resets them too. */
	:where(.rc-showcase, .rc-page-body) .wp-block-gallery.is-style-rc-mosaic > figure.wp-block-image:nth-of-type(n):nth-last-of-type(n) {
		grid-row: span 1;
		grid-column: span 1;
	}

	:where(.rc-showcase, .rc-page-body) .wp-block-gallery.is-style-rc-mosaic > figure.wp-block-image:nth-of-type(3n + 1):nth-last-of-type(n),
	:where(.rc-showcase, .rc-page-body) .wp-block-gallery.is-style-rc-mosaic > figure.wp-block-image:nth-of-type(3n + 2):last-of-type {
		grid-row: span 2;
		grid-column: 1 / -1;
	}

	.rc-product-grid--2,
	.rc-product-grid--3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.rc-showcase .wp-block-cover__image-background,
	.wp-block-gallery.rc-slideshow figure.wp-block-image.rc-slideshow__slide img {
		animation: none;
		transform: none;
		transition: none;
	}

	.wp-block-gallery.rc-slideshow figure.wp-block-image.rc-slideshow__slide {
		transition: none;
	}
}

/* ===========================================================================
 * 1.20.0: the home page's language, as block styles the owner can use on
 * any showcase page. Four devices and no more: a lacquer ground, lines of
 * light (rim), one moving highlight (the slogan in home.css, and a glint
 * along a link's underline), and one settle as a picture arrives.
 * ======================================================================== */

:root {
	--rc-lacquer: #0a0a0b;
	--rc-lacquer-text: #f5f5f7;
	/* For things that travel and come to rest: symmetric, no overshoot. */
	--rc-tension: cubic-bezier(0.65, 0, 0.35, 1);
	/* A line of light, brightest under the ground's reflection. */
	--rc-rim: linear-gradient(90deg, rgb(245 245 247 / 0), rgb(245 245 247 / 0.42) 24%, rgb(245 245 247 / 0.12) 64%, rgb(245 245 247 / 0));
}

/* Lacquer: black latex is never flat. It is black holding one broad, soft
   reflection of the room's light. The reflection sits upper left, on the key
   light's side of the photographs, and lifts the black by 6.5% at most.
   Deeper than the site's #161617, so the photographs' own blacks sink into
   it without a box. Choosing "Lacquer" as a Group's background is the whole
   switch. */
.wp-block-group.has-lacquer-background-color {
	position: relative;
	isolation: isolate;
	background-image: radial-gradient(64% clamp(14rem, 34vw, 44rem) at 24% 0, rgb(255 255 255 / 0.065), rgb(255 255 255 / 0.02) 45%, rgb(255 255 255 / 0) 74%);
	background-repeat: no-repeat;
	color: var(--rc-lacquer-text);
}

/* A faint grain under the reflection only, so the soft gradient does not
   band into steps on a large screen. Invisible as texture. */
.wp-block-group.has-lacquer-background-color::after {
	position: absolute;
	inset: 0 0 auto;
	z-index: -1;
	height: clamp(14rem, 34vw, 44rem);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .015 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	-webkit-mask-image: linear-gradient(#000, transparent);
	mask-image: linear-gradient(#000, transparent);
	content: "";
	pointer-events: none;
}

.has-lacquer-background-color :is(h1, h2, h3, p, .wp-block-heading) {
	color: inherit;
}

.has-lacquer-background-color :focus-visible {
	outline-color: var(--rc-lacquer-text);
}

/* Rim light: an edge drawn in light, never ornament. As a Separator style,
   and by itself where one lacquer section meets the next (a fold). */
.wp-block-separator.is-style-rc-rim {
	width: auto;
	max-width: none;
	height: 1px;
	border: 0 !important;
	background: var(--rc-rim);
	opacity: 1;
}

/* A lacquer section straight after another continues the same surface: no
   second reflection, which read as an empty grey band at the fold. */
.rc-showcase > .has-lacquer-background-color + .has-lacquer-background-color {
	background-image: none;
}

.rc-showcase > .has-lacquer-background-color + .has-lacquer-background-color::after {
	display: none;
}

.rc-showcase > .has-lacquer-background-color + .has-lacquer-background-color::before {
	position: absolute;
	top: 0;
	right: var(--rc-showcase-side);
	left: var(--rc-showcase-side);
	height: 1px;
	background: var(--rc-rim);
	content: "";
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * The home page's flow
 * ------------------------------------------------------------------------ */

.rc-showcase--home > .wp-block-group.alignfull.has-lacquer-background-color {
	padding-block: var(--rc-home-space);
}

.rc-showcase--home > .has-lacquer-background-color > * + * {
	margin-top: var(--rc-home-step);
}

.rc-showcase--home > .has-lacquer-background-color > :is(.is-style-rc-rim, .is-style-rc-rim + *) {
	margin-top: calc(var(--rc-home-space) / 2);
}

.rc-showcase--home > .has-lacquer-background-color > .wp-block-heading + .wp-block-gallery {
	margin-top: var(--rc-home-near);
}

.rc-showcase--home > .has-lacquer-background-color > .wp-block-gallery + * {
	margin-top: var(--rc-gutter);
}

.rc-showcase--home h2.wp-block-heading:not(.is-style-rc-lockup),
.rc-home .rc-section__header h2 {
	max-width: none;
	font-size: var(--rc-home-h2);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 0.9;
	text-transform: uppercase;
}

.rc-showcase--home .is-style-rc-lede {
	max-width: none;
	font-size: var(--rc-home-lede);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.08;
}

.rc-showcase--home .rc-filmstrip__track > figure.wp-block-image,
.rc-showcase--home .wp-block-gallery.is-style-rc-filmstrip:not(.rc-filmstrip) > figure.wp-block-image {
	height: clamp(16rem, min(62svh, 88vw), 46rem);
}

/* Links on the home page: the section's "Shop the …" row and the hero's.
   Set in the page's type (no tracking), sized with the page, and underlined
   by a line that a highlight runs along when the link is pointed at. */
.rc-home :is(.is-style-rc-arrow, .rc-shop-links) a {
	border-bottom: 0;
	background-image: linear-gradient(90deg, rgb(255 255 255 / 0), var(--rc-glint, #a1a1a6) 50%, rgb(255 255 255 / 0)), var(--rc-underline, linear-gradient(currentColor, currentColor));
	background-position: -60% 100%, 0 100%;
	background-repeat: no-repeat;
	background-size: 34% 1px, 100% 1px;
	font-size: var(--rc-home-link);
	letter-spacing: 0;
}

.rc-home .has-lacquer-background-color {
	--rc-glint: #fff;
	--rc-underline: linear-gradient(90deg, rgb(245 245 247 / 0.25), rgb(245 245 247 / 0.9) 35%, rgb(245 245 247 / 0.4));
}

@media (prefers-reduced-motion: no-preference) {
	.rc-home :is(.is-style-rc-arrow, .rc-shop-links) a:is(:hover, :focus-visible) {
		background-position: 160% 100%, 0 100%;
		transition: background-position 640ms var(--rc-tension);
	}
}

/* ---------------------------------------------------------------------------
 * Spread: one or two pictures and a few words on the twelve-column grid.
 * Each picture is told its shape on the server (rc-r-land, rc-r-port,
 * rc-r-sq; inc/showcase.php) and takes its place by it.
 * ------------------------------------------------------------------------ */

.rc-showcase .wp-block-group.is-style-rc-spread {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: end;
	column-gap: var(--rc-gutter);
	/* 1.20.5: a heading under or over its pictures keeps a clear distance
	   (the owner: the gaps were too short). */
	row-gap: var(--rc-home-step, clamp(2.5rem, 6vw, 6.5rem));
}

.rc-showcase .is-style-rc-spread > *,
.rc-showcase .is-style-rc-spread > .wp-block-group > * {
	max-width: none !important;
	margin-inline: 0 !important;
}

.rc-showcase .is-style-rc-spread > * {
	width: auto;
	margin-block: 0 !important;
}

.rc-showcase .is-style-rc-spread > .wp-block-group > * + * {
	margin-top: var(--rc-gutter) !important;
}

.rc-showcase .is-style-rc-spread img {
	display: block;
	width: 100%;
	height: auto;
}

.rc-showcase .is-style-rc-spread > figure {
	--rc-span: 6;
}

.rc-showcase .is-style-rc-spread > figure.rc-r-port {
	--rc-span: 4;
}

.rc-showcase .is-style-rc-spread > figure.rc-r-sq {
	--rc-span: 5;
}

/* One picture: picture and words side by side, whichever comes first. */
.rc-showcase .is-style-rc-spread:not(:has(> figure ~ figure)) > * {
	grid-row: 1;
}

.rc-showcase .is-style-rc-spread:not(:has(> figure ~ figure)) > figure {
	grid-column: 1 / span 6;
}

.rc-showcase .is-style-rc-spread:not(:has(> figure ~ figure)) > figure.rc-r-port {
	grid-column: 1 / span 5;
}

.rc-showcase .is-style-rc-spread:not(:has(> figure ~ figure)) > figure ~ * {
	grid-column: 8 / -1;
}

.rc-showcase .is-style-rc-spread:not(:has(> figure ~ figure)):has(> :not(figure) + figure) > figure {
	grid-column: 7 / -1;
}

.rc-showcase .is-style-rc-spread:not(:has(> figure ~ figure)):has(> :not(figure) + figure) > figure.rc-r-port {
	grid-column: 8 / -1;
}

.rc-showcase .is-style-rc-spread:not(:has(> figure ~ figure)) > :not(figure):has(~ figure) {
	grid-column: 1 / span 6;
}

/* Two pictures: words before them go above, words after them go under the
   landscape picture; a portrait runs the full height beside them. */
.rc-showcase .is-style-rc-spread:has(> figure ~ figure) {
	grid-template-rows: auto auto auto;
}

.rc-showcase .is-style-rc-spread:has(> figure ~ figure) > :not(figure):has(~ figure) {
	grid-row: 1;
	grid-column: 1 / span 8;
}

.rc-showcase .is-style-rc-spread:has(> figure ~ figure) > figure {
	grid-row: 2 / span 2;
	align-self: end;
}

.rc-showcase .is-style-rc-spread:has(> figure ~ figure) > figure.rc-r-land {
	grid-row: 2;
	align-self: start;
}

.rc-showcase .is-style-rc-spread:has(> figure ~ figure) > figure:first-of-type {
	grid-column: 1 / span var(--rc-span);
}

.rc-showcase .is-style-rc-spread:has(> figure ~ figure) > figure:last-of-type {
	grid-column: span var(--rc-span) / -1;
}

.rc-showcase .is-style-rc-spread:has(> figure ~ figure) > figure ~ :not(figure) {
	grid-row: 3;
	grid-column: 1 / span 8;
	align-self: end;
}

.rc-showcase .is-style-rc-spread:has(> figure.rc-r-land:last-of-type):not(:has(> figure.rc-r-land:first-of-type)) > figure ~ :not(figure) {
	grid-column: 7 / -1;
}

/* With the words above the pair, both pictures hang from the same line. */
.rc-showcase .is-style-rc-spread:has(> :not(figure):first-child):has(> figure ~ figure) > figure:not(.rc-r-land) {
	align-self: start;
}

/* Three or more pictures: rows of three, the words after them. */
.rc-showcase .is-style-rc-spread:has(> figure:nth-of-type(3)) > figure {
	grid-row: auto !important;
	grid-column: span 4 !important;
	align-self: end;
}

.rc-showcase .is-style-rc-spread:has(> figure:nth-of-type(3)) > :not(figure) {
	grid-row: auto !important;
	grid-column: 1 / -1 !important;
}

/* Rows of pictures sit a gutter apart, as they do across; only the words
   keep the heading's distance from them (1.20.5). */
@media (min-width: 48rem) {
	.rc-showcase .wp-block-group.is-style-rc-spread:has(> figure:nth-of-type(3)) {
		row-gap: var(--rc-gutter);
	}

	.rc-showcase .is-style-rc-spread:has(> figure:nth-of-type(3)) > :not(figure) {
		margin-top: calc(var(--rc-home-step) - var(--rc-gutter)) !important;
	}
}

/* Phones: one column. Pictures run to the screen's edges; in a pair the
   narrow one takes 78% of the width, left then right. A single picture
   comes before its words. */
@media (max-width: 47.99rem) {
	.rc-showcase .wp-block-group.is-style-rc-spread {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		row-gap: 0;
	}

	.rc-showcase .is-style-rc-spread > figure {
		margin-inline: calc(-1 * var(--rc-showcase-side)) !important;
	}

	.rc-showcase .is-style-rc-spread:has(> figure ~ figure) > figure:not(.rc-r-land) {
		width: 78vw;
	}

	.rc-showcase .is-style-rc-spread:has(> figure ~ figure) > figure:not(.rc-r-land):first-of-type {
		align-self: flex-start;
		margin-right: 0 !important;
	}

	.rc-showcase .is-style-rc-spread:has(> figure ~ figure) > figure:not(.rc-r-land):last-of-type {
		align-self: flex-end;
		margin-left: 0 !important;
	}

	/* A row of three steps left, center, right (1.20.2). */
	.rc-showcase .is-style-rc-spread:has(> figure:nth-of-type(3)) > figure:not(.rc-r-land):not(:first-of-type):not(:last-of-type) {
		align-self: center;
		margin-inline: 0 !important;
	}

	.rc-showcase .is-style-rc-spread > figure + figure {
		margin-top: var(--rc-gutter) !important;
	}

	.rc-showcase .is-style-rc-spread > * + :not(figure),
	.rc-showcase .is-style-rc-spread > :not(figure) + figure {
		margin-top: var(--rc-home-step, 2.5rem) !important;
	}

	.rc-showcase .is-style-rc-spread:not(:has(> figure ~ figure)) > figure {
		order: -1;
		margin-top: 0 !important;
	}

	.rc-showcase .is-style-rc-spread:not(:has(> figure ~ figure)) > :not(figure) {
		margin-top: var(--rc-home-step, 2.5rem) !important;
	}
}

/* ---------------------------------------------------------------------------
 * Lockup and Signature: the slogan again at the end of the page, in light,
 * laid on the empty board of the last picture. WHEN is the line inside a
 * Highlight (mark), drawn as a 1px contour.
 * ------------------------------------------------------------------------ */

.is-style-rc-lockup {
	font-family: var(--rc-font, "BDO Grotesk", sans-serif);
	font-size: clamp(3.5rem, 16.8vw, 11rem);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 0.84;
	text-transform: uppercase;
}

.is-style-rc-lockup mark {
	display: inline-block;
	margin-left: 1.44em;
	padding: 0;
	background: none !important;
	color: inherit;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: clamp(1px, 0.0045em, 1.5px) currentColor;
}

.rc-showcase .wp-block-group.is-style-rc-signature {
	container-type: inline-size;
}

.rc-showcase .is-style-rc-signature > .is-style-rc-lockup {
	font-size: calc(100cqi / 5.5);
}

@media (min-width: 64rem) {
	.rc-showcase .wp-block-group.is-style-rc-signature {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		align-items: end;
		column-gap: var(--rc-gutter);
	}

	.rc-showcase .is-style-rc-signature > * {
		grid-row: 1;
		max-width: none !important;
		margin: 0 !important;
	}

	.rc-showcase .is-style-rc-signature > figure {
		grid-column: 6 / -1;
	}

	/* Over the picture's left, on its empty board: 5% in, and sized so that
	   WRAPPED ends at about half the picture's width. */
	.rc-showcase .is-style-rc-signature > .is-style-rc-lockup {
		z-index: 1;
		grid-column: 6 / -1;
		align-self: center;
		justify-self: start;
		margin-left: calc(((100cqi - 11 * var(--rc-gutter)) / 12 * 7 + 6 * var(--rc-gutter)) * 0.05) !important;
		font-size: calc(((100cqi - 11 * var(--rc-gutter)) / 12 * 7 + 6 * var(--rc-gutter)) * 0.0909);
	}

	.rc-showcase .is-style-rc-signature > :is(.rc-shop-links, .wp-block-raptclub-shop-links) {
		grid-column: 1 / span 4;
	}
}

@media (max-width: 63.99rem) {
	.rc-showcase .is-style-rc-signature > figure {
		margin-inline: calc(-1 * var(--rc-showcase-side)) !important;
	}

	.rc-showcase .is-style-rc-signature > .is-style-rc-lockup {
		margin-top: var(--rc-home-near, 1.25rem) !important;
	}

	.rc-showcase .is-style-rc-signature > :is(.rc-shop-links, .wp-block-raptclub-shop-links) {
		margin-top: var(--rc-gutter) !important;
	}
}

/* ---------------------------------------------------------------------------
 * Settle: a picture in a Spread, the Signature, a Scale, a Column or an
 * Overlap (1.20.4) arrives a touch large and eases to rest, the way latex
 * goes on under slight tension and then lies still. Scale only, no fade, so
 * everything shows without the script.
 * ------------------------------------------------------------------------ */

.rc-showcase :is(.is-style-rc-spread, .is-style-rc-signature, .is-style-rc-scale, .is-style-rc-column, .is-style-rc-overlap) > figure.wp-block-image {
	overflow: hidden;
}

.rc-js .rc-showcase :is(.is-style-rc-spread, .is-style-rc-signature, .is-style-rc-scale, .is-style-rc-column, .is-style-rc-overlap) > figure.wp-block-image img {
	transform: scale(1.035);
	transform-origin: 50% 40%;
	transition: transform 1600ms var(--rc-ease);
}

.rc-js .rc-showcase :is(.is-style-rc-spread, .is-style-rc-signature, .is-style-rc-scale, .is-style-rc-column, .is-style-rc-overlap) > figure.wp-block-image.is-settled img {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.rc-js .rc-showcase :is(.is-style-rc-spread, .is-style-rc-signature, .is-style-rc-scale, .is-style-rc-column, .is-style-rc-overlap) > figure.wp-block-image img {
		transform: none;
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Collections, "Index, names only": the categories as a list of names set
 * large, each on its own line between hairlines. No pictures, numbers or
 * counts.
 * ------------------------------------------------------------------------ */

.rc-collections.is-style-rc-index {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--rc-gutter);
	row-gap: var(--rc-home-near, clamp(1.25rem, 2.4vw, 4rem));
	align-items: start;
}

.rc-collections.is-style-rc-index > .rc-section__header {
	grid-column: 1 / -1;
	margin: 0;
}

.rc-collections.is-style-rc-index > .rc-collections__list {
	grid-column: 1 / -1;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--rc-line);
	list-style: none;
}

.rc-collections.is-style-rc-index .rc-collections__row {
	border-bottom: 1px solid var(--rc-line);
}

.rc-collections.is-style-rc-index .rc-collections__link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--rc-gutter);
	padding-block: clamp(0.6rem, 1.1vw, 1.6rem);
	color: var(--rc-ink);
	text-decoration: none;
}

.rc-collections.is-style-rc-index .rc-collections__name {
	font-size: clamp(1.75rem, 4.4vw, 7rem);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 0.95;
	text-transform: uppercase;
}

.rc-collections.is-style-rc-index .rc-collections__link::after {
	flex: none;
	content: "\2192";
	content: "\2192" / "";
	font-size: clamp(1.25rem, 2.2vw, 3.5rem);
	transition: transform 260ms var(--rc-ease);
}

.rc-collections.is-style-rc-index .rc-collections__link:hover::after,
.rc-collections.is-style-rc-index .rc-collections__link:focus-visible::after {
	transform: translateX(0.35em);
}

/* Wide screens: the heading on one line, the names under it from column 5. */
@media (min-width: 64rem) {
	.rc-collections.is-style-rc-index > .rc-section__header {
		grid-column: 1 / span 8;
	}

	.rc-collections.is-style-rc-index > .rc-collections__list {
		grid-row: 2;
		grid-column: 5 / -1;
	}
}

/* On the home page it is the page's one breath of paper: shorter than a
   chapter, the names a step below the headings, and nothing fades in. */
.rc-showcase--home > .rc-collections.is-style-rc-index,
.rc-home > .rc-collections.is-style-rc-index {
	padding-block: var(--rc-home-step);
	border-bottom: 0;
}

.rc-home .rc-collections.is-style-rc-index .rc-collections__name {
	font-size: var(--rc-home-lede);
}

.rc-js .rc-home .rc-collections.is-style-rc-index > .rc-section__header.rc-reveal {
	opacity: 1;
	transform: none;
	transition: none;
}

/* The pieces on the home page (1.20.1): the page's one breath of paper, the
   cards without their category line (no labels on the home page), the names
   a little larger. */
.rc-showcase--home > .rc-pieces.rc-section {
	padding-block: var(--rc-home-step);
	border-bottom: 0;
}

.rc-showcase--home > .rc-pieces.rc-section .rc-section__header {
	margin-bottom: var(--rc-home-step);
}

.rc-showcase--home .rc-pieces .rc-product-card__kicker {
	display: none;
}

.rc-showcase--home .rc-pieces .rc-product-card__body h3 {
	font-size: clamp(1.05rem, 0.95vw, 1.3rem);
}

/* Its heading is short: "Shop all" sits on the same line, at its foot (the
   home page's older rule set a long headline and the link on a line below). */
.rc-showcase--home .rc-pieces .rc-section__header--split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
}

.rc-showcase--home .rc-pieces .rc-section__header--split > .rc-text-link {
	position: static;
	justify-self: end;
	width: auto;
	min-width: 0;
}

.rc-showcase--home .rc-pieces .rc-section__header--split > div,
.rc-showcase--home .rc-pieces .rc-section__header h2 {
	width: auto;
	max-width: none;
}


/* On a phone the four cards are two across rather than one very long column. */
@media (max-width: 47.99rem) {
	.rc-showcase--home .rc-pieces .rc-product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
	}

	.rc-showcase--home .rc-pieces .rc-product-card__body h3 {
		font-size: 0.9rem;
	}
}

/* ---------------------------------------------------------------------------
 * The close (1.20.2): an Edit on the footer's own ground, in place of the
 * slogan on lacquer (the owner: light, into the footer, featured pieces, no
 * slogan again). A Group in "Paper soft" holds a heading and a pieces block
 * in the "Edit, head to toe" style: four details from the pieces' own
 * photographs (their Home card pictures), three columns each, stepping down
 * the grid from the head to the feet, captioned by name and price only.
 * No card boxes, hairlines or labels. "Shop all" comes after the pieces
 * (inc/showcase.php) and sits in the pocket the steps leave under the first
 * one, on the line of the last caption. The footer carries on in the same
 * grey, parted by one line across the frame. The layout also applies in
 * the editor's preview; only the settle needs the site's script.
 * ------------------------------------------------------------------------ */

.rc-showcase--home > .wp-block-group.alignfull.has-paper-soft-background-color {
	padding-block: var(--rc-home-step);
}

.rc-showcase--home > .has-paper-soft-background-color > * + * {
	margin-top: var(--rc-home-step);
}

:is(.rc-showcase, .rc-showcase-editor-preview) .rc-pieces.is-style-rc-edit {
	--rc-edit-step: calc(2 * var(--rc-home-near, 1.25rem));
	--rc-edit-caption: clamp(0.95rem, 0.75vw, 1.2rem);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: var(--rc-gutter);
	padding-block: 0;
	border-bottom: 0;
}

/* The cards and the header's parts sit straight on the section's grid: no
   box, no hairlines. */
:is(.rc-showcase, .rc-showcase-editor-preview) .rc-pieces.is-style-rc-edit > :is(.rc-product-grid, .rc-section__header) {
	display: contents;
}

/* A heading typed into the block itself runs across the top. */
:is(.rc-showcase, .rc-showcase-editor-preview) .rc-pieces.is-style-rc-edit .rc-section__header > div:not(:empty) {
	grid-row: 1;
	grid-column: 1 / -1;
	margin-bottom: var(--rc-home-near, 1.25rem);
}

:is(.rc-showcase, .rc-showcase-editor-preview) .rc-pieces.is-style-rc-edit .rc-section__header > div:empty {
	display: none;
}

:is(.rc-showcase, .rc-showcase-editor-preview) .rc-pieces.is-style-rc-edit .rc-product-card {
	grid-row: 2;
	align-self: start;
	min-width: 0;
	border: 0 !important;
	background: none;
}

:is(.rc-showcase, .rc-showcase-editor-preview) .rc-pieces.is-style-rc-edit .rc-product-card:nth-child(1) {
	grid-column: 1;
	/* Room for "Shop all" under it however few pieces there are; with
	   three or four the steps leave more than this anyway. */
	margin-bottom: calc(2.75rem + var(--rc-home-near, 1.25rem));
}

:is(.rc-showcase, .rc-showcase-editor-preview) .rc-pieces.is-style-rc-edit .rc-product-card:nth-child(2) {
	grid-column: 2;
	margin-top: var(--rc-edit-step);
}

:is(.rc-showcase, .rc-showcase-editor-preview) .rc-pieces.is-style-rc-edit .rc-product-card:nth-child(3) {
	grid-column: 3;
	margin-top: calc(2 * var(--rc-edit-step));
}

:is(.rc-showcase, .rc-showcase-editor-preview) .rc-pieces.is-style-rc-edit .rc-product-card:nth-child(4) {
	grid-column: 4;
	margin-top: calc(3 * var(--rc-edit-step));
}

:is(.rc-showcase, .rc-showcase-editor-preview) .rc-pieces.is-style-rc-edit .rc-product-card:nth-child(n + 5) {
	display: none;
}

:is(.rc-showcase, .rc-showcase-editor-preview) .rc-pieces.is-style-rc-edit .rc-section__header > .rc-text-link {
	position: static;
	grid-row: 2;
	grid-column: 1;
	align-self: end;
	justify-self: start;
	width: auto;
	min-width: 0;
}

:is(.rc-showcase, .rc-showcase-editor-preview) .rc-pieces.is-style-rc-edit .rc-product-card figure {
	background: none;
}

:is(.rc-showcase, .rc-showcase-editor-preview) .rc-pieces.is-style-rc-edit .rc-product-card:hover img {
	transform: none;
}

:is(.rc-showcase, .rc-showcase-editor-preview) .rc-pieces.is-style-rc-edit .rc-product-card__body {
	display: block;
	min-height: 0;
	padding: 1rem 0 0;
}

:is(.rc-showcase, .rc-showcase-editor-preview) .rc-pieces.is-style-rc-edit .rc-product-card__kicker {
	display: none;
}

:is(.rc-showcase, .rc-showcase-editor-preview) .rc-pieces.is-style-rc-edit .rc-product-card__body h3 {
	margin: 0;
	font-size: var(--rc-edit-caption);
	line-height: 1.2;
}

/* The name is underlined only when the piece is pointed at: the line draws
   out and a highlight runs along it, like the page's other links. */
:is(.rc-showcase, .rc-showcase-editor-preview) .rc-pieces.is-style-rc-edit .rc-product-card__body h3 a {
	display: inline;
	padding-bottom: 0.2em;
	background-image: linear-gradient(90deg, rgb(255 255 255 / 0), #a1a1a6 50%, rgb(255 255 255 / 0)), linear-gradient(currentColor, currentColor);
	background-position: -60% 100%, 0 100%;
	background-repeat: no-repeat;
	background-size: 34% 1px, 0 1px;
}

:is(.rc-showcase, .rc-showcase-editor-preview) .rc-pieces.is-style-rc-edit .rc-product-card:is(:hover, :focus-within) h3 a {
	background-size: 34% 1px, 100% 1px;
}

@media (prefers-reduced-motion: no-preference) {
	:is(.rc-showcase, .rc-showcase-editor-preview) .rc-pieces.is-style-rc-edit .rc-product-card:is(:hover, :focus-within) h3 a {
		background-position: 160% 100%, 0 100%;
		transition: background-size 480ms var(--rc-tension), background-position 640ms var(--rc-tension) 120ms;
	}
}

:is(.rc-showcase, .rc-showcase-editor-preview) .rc-pieces.is-style-rc-edit .rc-product-card__price,
:is(.rc-showcase, .rc-showcase-editor-preview) .rc-pieces.is-style-rc-edit .rc-product-card__price * {
	color: var(--rc-muted);
	font-size: var(--rc-edit-caption);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

:is(.rc-showcase, .rc-showcase-editor-preview) .rc-pieces.is-style-rc-edit .rc-product-card__price {
	display: block;
	margin-top: 0.3rem;
}

/* One thing moves at a time: nothing fades in; each picture settles
   (showcase.js), one after another down the stair. */
.rc-js .rc-showcase .rc-pieces.is-style-rc-edit .rc-reveal {
	opacity: 1;
	transform: none;
	transition: none;
}

.rc-js .rc-showcase .rc-pieces.is-style-rc-edit .rc-product-card figure img {
	transform: scale(1.035);
	transform-origin: 50% 40%;
	transition: transform 1600ms var(--rc-ease);
}

.rc-js .rc-showcase .rc-pieces.is-style-rc-edit .rc-product-card:nth-child(2) figure img {
	transition-delay: 120ms;
}

.rc-js .rc-showcase .rc-pieces.is-style-rc-edit .rc-product-card:nth-child(3) figure img {
	transition-delay: 240ms;
}

.rc-js .rc-showcase .rc-pieces.is-style-rc-edit .rc-product-card:nth-child(4) figure img {
	transition-delay: 360ms;
}

.rc-js .rc-showcase .rc-pieces.is-style-rc-edit .rc-product-card figure.is-settled img {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.rc-js .rc-showcase .rc-pieces.is-style-rc-edit .rc-product-card figure img {
		transform: none;
		transition: none;
	}
}

/* Phones: two columns, the right one dropped, so the stair still reads;
   "Shop all" after the pieces, as in the markup. */
@media (max-width: 47.99rem) {
	:is(.rc-showcase, .rc-showcase-editor-preview) .rc-pieces.is-style-rc-edit {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 0.75rem;
		row-gap: 1.75rem;
	}

	:is(.rc-showcase, .rc-showcase-editor-preview) .rc-pieces.is-style-rc-edit .rc-product-card:nth-child(n) {
		grid-row: auto;
		grid-column: auto;
		margin-top: 0;
		margin-bottom: 0;
	}

	:is(.rc-showcase, .rc-showcase-editor-preview) .rc-pieces.is-style-rc-edit .rc-product-card:nth-child(even) {
		margin-top: 3.5rem;
	}

	:is(.rc-showcase, .rc-showcase-editor-preview) .rc-pieces.is-style-rc-edit .rc-section__header > .rc-text-link {
		grid-row: auto;
		grid-column: 1 / -1;
	}

	:is(.rc-showcase, .rc-showcase-editor-preview) .rc-pieces.is-style-rc-edit .rc-product-card__body h3 {
		font-size: 0.9rem;
	}
}

/* Where the home page ends on Paper soft, the footer carries on in the same
   grey: its band edge gives way to one line across the frame. */
body.home:has(.rc-showcase--home > .has-paper-soft-background-color:last-child) .rc-site-footer {
	border-top-color: transparent;
}

body.home:has(.rc-showcase--home > .has-paper-soft-background-color:last-child) .rc-footer-grid {
	border-top: 1px solid var(--rc-line);
}

/* ---------------------------------------------------------------------------
 * 1.20.4: the filmstrip's photographs become sections of their own, each
 * hung a different way (the owner: one long slider was lazy). Three group
 * styles, all on the twelve-column grid and laid out by how many pictures
 * they hold. Words sit beside or under the pictures, never laid on a
 * picture's empty area (the owner: "很丑"):
 *   - Scale: one large picture with two stacked beside it, level with its
 *     top and foot (three, 1.20.5), or one print alone, centered, as high
 *     as the screen allows;
 *   - Column: prints six columns wide, two to a row, the words beside the
 *     first, heading on its top line and links on its foot (1.20.5);
 *   - Overlap: a second picture laid over the first's lower right, ringed
 *     in the section's ground, the words beside them.
 * The home page's light grounds (Surface) get the chapter spacing. Like the
 * Spread, the layouts show on the site; the editor stacks the blocks.
 * ------------------------------------------------------------------------ */

.wp-block-group.has-lacquer-background-color {
	--rc-ground: var(--rc-lacquer, #0a0a0b);
}

.wp-block-group.has-surface-background-color {
	--rc-ground: var(--rc-paper);
}

.wp-block-group.has-paper-soft-background-color {
	--rc-ground: var(--rc-paper-soft);
}

.wp-block-group.has-ink-background-color {
	--rc-ground: var(--wp--preset--color--ink);
}

.wp-block-group.has-graphite-background-color {
	--rc-ground: var(--wp--preset--color--graphite);
}

.wp-block-group.has-line-background-color {
	--rc-ground: var(--wp--preset--color--line);
}

.rc-showcase--home > .wp-block-group.alignfull.has-surface-background-color,
.rc-showcase--home > .wp-block-group.alignfull.has-paper-soft-background-color:has(> .is-style-rc-overlap) {
	padding-block: var(--rc-home-space);
}

.rc-showcase--home > .has-surface-background-color > * + *,
.rc-showcase--home > .has-paper-soft-background-color:has(> :is(.is-style-rc-scale, .is-style-rc-column, .is-style-rc-overlap)) > * + * {
	margin-top: var(--rc-home-space);
}

/* Two Paper soft sections in a row are one ground: no second top space. */
.rc-showcase--home > .has-paper-soft-background-color + .wp-block-group.alignfull.has-paper-soft-background-color {
	padding-top: 0;
}

.rc-showcase .wp-block-group:is(.is-style-rc-scale, .is-style-rc-column, .is-style-rc-overlap) {
	container-type: inline-size;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--rc-gutter);
}

.rc-showcase :is(.is-style-rc-scale, .is-style-rc-column, .is-style-rc-overlap) > *,
.rc-showcase :is(.is-style-rc-scale, .is-style-rc-column, .is-style-rc-overlap) > .wp-block-group > * {
	width: auto;
	max-width: none !important;
	margin-inline: 0 !important;
}

.rc-showcase :is(.is-style-rc-scale, .is-style-rc-column, .is-style-rc-overlap) > * {
	margin-block: 0 !important;
}

.rc-showcase :is(.is-style-rc-scale, .is-style-rc-column, .is-style-rc-overlap) > .wp-block-group > * + * {
	margin-top: var(--rc-gutter) !important;
}

.rc-showcase :is(.is-style-rc-scale, .is-style-rc-column, .is-style-rc-overlap) img {
	display: block;
	width: 100%;
	height: auto;
}

/* Scale. Two: the first picture large in columns 4 to 9, the second small
   at the top left. Three or more (1.20.5, below): the first large on the
   left, the next two stacked beside it, level with its top and its foot.
   The words centered under them. */
.rc-showcase .is-style-rc-scale > figure:first-of-type {
	grid-row: 1;
	grid-column: 4 / 10;
}

.rc-showcase .is-style-rc-scale > figure:nth-of-type(2) {
	grid-row: 1;
	grid-column: 1 / 4;
	align-self: start;
}

.rc-showcase .is-style-rc-scale > figure:nth-of-type(3) {
	grid-row: 1;
	grid-column: 10 / -1;
	align-self: end;
}

.rc-showcase .is-style-rc-scale > figure:nth-of-type(n + 4) {
	grid-column: span 3;
}

.rc-showcase .is-style-rc-scale > :not(figure) {
	grid-column: 1 / -1;
	margin-top: var(--rc-home-step, 2.5rem) !important;
	text-align: center;
}

.rc-showcase .is-style-rc-scale > :not(figure) :is(.rc-shop-links, .is-style-rc-arrow) {
	justify-content: center;
}

/* Three or more (1.20.5; the owner: small and large pictures mixed at
   random, some too small to see). The first picture in columns 1 to 7 over
   two rows; the second and third in columns 8 to 12, one to a row, filling
   those rows exactly (they take no height of their own, and their pictures
   are cover-fit from the top), so the stack starts level with the large
   picture's top and ends level with its foot. */
@media (min-width: 48rem) {
	.rc-showcase .wp-block-group.is-style-rc-scale:has(> figure:nth-of-type(3)) {
		row-gap: var(--rc-gutter);
	}

	.rc-showcase .is-style-rc-scale:has(> figure:nth-of-type(3)) > figure:first-of-type {
		grid-row: 1 / span 2;
		grid-column: 1 / 8;
	}

	.rc-showcase .is-style-rc-scale:has(> figure:nth-of-type(3)) > figure:is(:nth-of-type(2), :nth-of-type(3)) {
		grid-column: 8 / -1;
		align-self: stretch;
		contain: size;
	}

	.rc-showcase .is-style-rc-scale:has(> figure:nth-of-type(3)) > figure:nth-of-type(2) {
		grid-row: 1;
	}

	.rc-showcase .is-style-rc-scale:has(> figure:nth-of-type(3)) > figure:nth-of-type(3) {
		grid-row: 2;
	}

	.rc-showcase .is-style-rc-scale:has(> figure:nth-of-type(3)) > figure:is(:nth-of-type(2), :nth-of-type(3)) img {
		height: 100%;
		object-fit: cover;
		object-position: 50% 0;
	}

	.rc-showcase .is-style-rc-scale:has(> figure:nth-of-type(3)) > :not(figure) {
		margin-top: calc(var(--rc-home-step, 2.5rem) - var(--rc-gutter)) !important;
	}
}

/* One print alone: centered, never taller than most of the screen. */
.rc-showcase .is-style-rc-scale:not(:has(> figure ~ figure)) > figure {
	grid-column: 4 / 10;
	/* The frame is the print's own size, so the settle stays inside it. */
	justify-self: center;
	width: fit-content;
	max-width: 100%;
}

.rc-showcase .is-style-rc-scale:not(:has(> figure ~ figure)) > figure img {
	width: auto;
	max-width: 100%;
	max-height: 76svh;
	margin-inline: auto;
}

/* Column (1.20.5, the owner: pictures too small and sizes mixed at random).
   Every print six columns wide, two to a row. The words come first in the
   markup, so the heading is read before the prints; they take the right
   half of the first row, beside the first print, flush right: the heading
   on its top line, the links on its foot. */
.rc-showcase .wp-block-group.is-style-rc-column {
	row-gap: var(--rc-gutter);
}

.rc-showcase .is-style-rc-column > figure {
	grid-column: span 6;
}

.rc-showcase .is-style-rc-column > figure:nth-of-type(1) {
	grid-row: 1;
	grid-column: 1 / 7;
	align-self: end;
}

.rc-showcase .is-style-rc-column > :not(figure) {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	grid-row: 1;
	grid-column: 7 / -1;
}

@media (min-width: 48rem) {
	.rc-showcase .is-style-rc-column > :not(figure) {
		text-align: right;
	}

	.rc-showcase .is-style-rc-column > :not(figure) > .wp-block-heading {
		text-box: trim-start cap alphabetic;
	}

	/* The space between links goes before each one, so every line of links
	   ends on the frame's edge. */
	.rc-showcase .is-style-rc-column > :not(figure) .is-style-rc-arrow a:not(:last-child) {
		margin-right: 0;
	}

	.rc-showcase .is-style-rc-column > :not(figure) .is-style-rc-arrow a:not(:first-child) {
		margin-left: clamp(1.5rem, 3vw, 2.75rem);
	}
}

/* Overlap. The first picture in columns 1 to 6, the second in columns 5 to
   8 laid over its lower right with a ring of the ground, the words in
   columns 9 to 12, heading level with the first picture's top, links level
   with the second's foot. */
.rc-showcase .is-style-rc-overlap > figure:first-of-type {
	grid-row: 1;
	grid-column: 1 / 7;
	align-self: start;
}

.rc-showcase .is-style-rc-overlap > figure:nth-of-type(2) {
	z-index: 1;
	grid-row: 1;
	grid-column: 5 / 9;
	align-self: start;
	margin-top: 19.5cqi !important;
	outline: clamp(6px, 0.7cqi, 12px) solid var(--rc-ground, var(--rc-paper));
}

.rc-showcase .is-style-rc-overlap > figure:nth-of-type(n + 3) {
	grid-column: span 4;
	margin-top: var(--rc-home-near, 1.25rem) !important;
}

.rc-showcase .is-style-rc-overlap > :not(figure) {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	grid-row: 1;
	grid-column: 9 / -1;
}

/* Settle order: the prints of a Column one after another, the laid-over
   picture of an Overlap and the small ones of a Scale a beat later. */
.rc-js .rc-showcase .is-style-rc-column > figure.wp-block-image:nth-of-type(2) img {
	transition-delay: 120ms;
}

.rc-js .rc-showcase .is-style-rc-column > figure.wp-block-image:nth-of-type(3) img {
	transition-delay: 240ms;
}

.rc-js .rc-showcase :is(.is-style-rc-overlap, .is-style-rc-scale) > figure.wp-block-image:not(:first-of-type) img {
	transition-delay: 160ms;
}

/* Phones. Scale: every picture edge to edge, one under another. Column: the
   heading, the prints at the frame's width, the links. Overlap: the first
   picture left, the second right, drawn up over it. */
@media (max-width: 47.99rem) {
	.rc-showcase .wp-block-group.is-style-rc-scale {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 0.75rem;
		row-gap: var(--rc-gutter);
	}

	.rc-showcase .is-style-rc-scale > figure:first-of-type {
		grid-column: 1 / -1;
		margin-inline: calc(-1 * var(--rc-showcase-side, 0.625rem)) !important;
	}

	.rc-showcase .is-style-rc-scale > figure:is(:nth-of-type(2), :nth-of-type(3)) {
		grid-row: auto;
		grid-column: 1 / -1;
		margin-inline: calc(-1 * var(--rc-showcase-side, 0.625rem)) !important;
	}

	/* Three or more: the stacked pair keeps its 3:2 on a phone. A pair's
	   second picture keeps its own proportions. */
	.rc-showcase .is-style-rc-scale:has(> figure:nth-of-type(3)) > figure:is(:nth-of-type(2), :nth-of-type(3)) img {
		aspect-ratio: 3 / 2;
		object-fit: cover;
		object-position: 50% 0;
	}

	.rc-showcase .is-style-rc-scale > figure:nth-of-type(n + 4) {
		grid-column: auto;
	}

	.rc-showcase .is-style-rc-scale:not(:has(> figure ~ figure)) > figure:first-of-type {
		grid-column: 1 / -1;
		margin-inline: 8% !important;
	}

	.rc-showcase .is-style-rc-scale > :not(figure) {
		margin-top: calc(var(--rc-home-step, 2.5rem) - var(--rc-gutter)) !important;
		text-align: left;
	}

	.rc-showcase .is-style-rc-scale > :not(figure) :is(.rc-shop-links, .is-style-rc-arrow) {
		justify-content: flex-start;
	}

	.rc-showcase .wp-block-group:is(.is-style-rc-column, .is-style-rc-overlap) {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		row-gap: var(--rc-gutter);
	}

	.rc-showcase .is-style-rc-column > :not(figure) {
		display: contents;
	}

	.rc-showcase .is-style-rc-column > :not(figure) > :not(.wp-block-heading) {
		order: 1;
	}

	/* The flex column's gap is the gutter; a heading or the links next to
	   the prints keep the page's distance from them. */
	.rc-showcase .is-style-rc-column > .wp-block-group > .wp-block-heading {
		margin-bottom: calc(var(--rc-home-step, 2.5rem) - var(--rc-gutter)) !important;
	}

	.rc-showcase .is-style-rc-column > .wp-block-group > :not(.wp-block-heading),
	.rc-showcase .is-style-rc-overlap > :not(figure) {
		margin-top: calc(var(--rc-home-step, 2.5rem) - var(--rc-gutter)) !important;
	}

	.rc-showcase .is-style-rc-column > figure {
		align-self: stretch;
		width: auto;
	}

	.rc-showcase .is-style-rc-overlap > figure:first-of-type {
		align-self: flex-start;
		width: 86%;
	}

	.rc-showcase .is-style-rc-overlap > figure:nth-of-type(2) {
		align-self: flex-end;
		width: 64%;
		margin-top: -18vw !important;
		outline-width: 6px;
	}
}