/*
 * Meridian Coffee — the front-end stylesheet.
 *
 * The page is built as a magazine: a hairline grid, running heads with chapter
 * numbers, photographs that carry captions, and body copy held to a measure.
 * Everything below resolves against the custom properties printed by
 * inc/design-tokens.php, so nothing here hard-codes a colour and switching the
 * colourway in the Customizer moves the whole file with it — as does any
 * Elementor widget dropped onto a page, which is the point of routing the
 * palette through :root instead of through this file.
 *
 * Section order follows the front page: chrome, cover, then one block per
 * chapter, then the colophon.
 */

/* -------------------------------------------------------------------------
   1. Reset
   ------------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* The sticky masthead is exactly this tall; without the offset an in-page
	   anchor lands with its heading tucked under the bar. */
	scroll-padding-top: 5.5rem;
}

body {
	margin: 0;
	background: var(--me-bg);
	color: var(--me-ink-soft);
	font-family: var(--me-font-sans);
	font-size: var(--me-text-base);
	line-height: 1.7;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

figure {
	margin: 0;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	color: var(--me-ink);
	font-family: var(--me-font-display);
	/* 400 and 600 are the two weights the theme ships. Fraunces carries an
	   optical-size axis, so the display sizes are set a little tighter and the
	   caption sizes a little wider through the same family. */
	font-weight: 400;
	font-variation-settings: "SOFT" 0, "WONK" 0;
	line-height: 1.06;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

h1 {
	font-size: var(--me-text-3xl);
	font-weight: 600;
}

h2 {
	font-size: var(--me-text-2xl);
}

h3 {
	font-size: var(--me-text-lg);
	letter-spacing: -0.01em;
}

p {
	margin: 0;
}

a {
	color: inherit;
	text-decoration-color: var(--me-accent-2);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

a:hover {
	text-decoration-color: var(--me-accent);
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

input,
textarea,
select {
	font: inherit;
	color: inherit;
}

::selection {
	background: var(--me-accent);
	color: var(--me-surface);
}

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

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

.skip-link:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 200;
	width: auto;
	height: auto;
	clip: auto;
	padding: 10px 16px;
	background: var(--me-surface);
	color: var(--me-ink);
}

/* -------------------------------------------------------------------------
   2. Layout: containers, the twelve-column grid, and hairlines
   ------------------------------------------------------------------------- */

.me-page {
	overflow-x: clip;
}

.me-wrap {
	width: 100%;
	max-width: var(--me-container);
	margin-inline: auto;
	padding-inline: var(--me-gutter);
}

.me-wrap--wide {
	max-width: var(--me-container-wide);
}

.me-wrap--tight {
	max-width: var(--me-container-tight);
}

/*
 * A section is separated from the next by a hairline as well as by space. The
 * rule is what makes the page read as ruled stock rather than as a stack of
 * bands, and it is one declaration instead of a border on every section.
 */
.me-rule,
.me-hero + .me-statement,
.me-statement + .me-elements,
.me-elements + .me-feature,
.me-feature + .me-release,
.me-release + .me-origins,
.me-journal + .me-wall,
.me-wall + .me-stores {
	border-top: var(--me-rule) solid var(--me-line);
}

/*
 * The editorial furniture. Every section opens with the same three lines — a
 * running head, an eyebrow and a headline — so the reader learns the shape once
 * and then only has to read.
 */
.me-section__head {
	display: grid;
	gap: 0.75rem;
	margin-bottom: var(--me-section-sm);
}

.me-section__head--center {
	justify-items: center;
	text-align: center;
}

.me-chapter {
	display: flex;
	align-items: baseline;
	gap: 0.9rem;
	margin-bottom: 0.35rem;
	font-family: var(--me-font-sans);
	font-size: var(--me-text-xs);
	font-weight: 600;
	letter-spacing: var(--me-track-wide);
	text-transform: uppercase;
	color: var(--me-muted);
}

.me-chapter__no {
	color: var(--me-accent);
	font-variant-numeric: tabular-nums;
}

.me-chapter--light {
	color: rgb(255 255 255 / 0.78);
}

.me-chapter--light .me-chapter__no {
	color: rgb(255 255 255 / 0.95);
}

.me-eyebrow {
	margin: 0;
	font-size: var(--me-text-xs);
	font-weight: 600;
	letter-spacing: var(--me-track-wide);
	text-transform: uppercase;
	color: var(--me-accent);
}

.me-section__title {
	max-width: 22ch;
	margin: 0;
}

.me-section__head--center .me-section__title {
	max-width: 26ch;
}

.me-section__copy {
	max-width: 58ch;
	margin-top: 0.9rem;
	color: var(--me-muted);
}

.me-section__link {
	margin-top: 1.1rem;
}

/*
 * The editorial link. Uppercase, tracked, with an arrow that slides — the one
 * control used everywhere on the page, so it only has to be learned once.
 */
.me-link {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--me-ink);
	font-size: var(--me-text-xs);
	font-weight: 600;
	letter-spacing: var(--me-track);
	text-transform: uppercase;
	text-decoration: none;
	background-image: linear-gradient(var(--me-accent), var(--me-accent));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1px;
	transition: background-size var(--me-speed) var(--me-ease-enter), color var(--me-speed) var(--me-ease);
}

.me-link svg {
	transition: transform var(--me-speed) var(--me-ease-enter);
}

.me-link:hover {
	background-size: 100% 1px;
	color: var(--me-accent);
}

.me-link:hover svg {
	transform: translateX(4px);
}

.me-caption {
	margin-top: 0.75rem;
	color: var(--me-muted);
	font-size: var(--me-text-xs);
	letter-spacing: 0.04em;
	line-height: 1.5;
}

.me-caption--light {
	color: rgb(255 255 255 / 0.72);
}

.me-tag {
	display: inline-block;
	padding: 0.2rem 0.55rem;
	border: var(--me-rule) solid var(--me-line);
	border-radius: var(--me-radius-pill);
	color: var(--me-muted);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: var(--me-track);
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   3. Plates: every photograph on the page, at a fixed ratio
   ------------------------------------------------------------------------- */

.me-plate {
	position: relative;
	margin: 0;
}

.me-plate__frame {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--me-bg-soft);
}

.me-plate__frame img,
.me-plate__frame video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.me-plate--3-2 .me-plate__frame { aspect-ratio: 3 / 2; }
.me-plate--4-3 .me-plate__frame { aspect-ratio: 4 / 3; }
.me-plate--1-1 .me-plate__frame { aspect-ratio: 1 / 1; }
.me-plate--3-4 .me-plate__frame { aspect-ratio: 3 / 4; }
.me-plate--4-5 .me-plate__frame { aspect-ratio: 4 / 5; }

/*
 * A clip and the still it stands on.
 *
 * The still is a real image in the frame and the clip is stacked over it, which
 * is what makes the section a photograph when there is no script to play the
 * clip, and a photograph for the moment before the clip has decoded its first
 * frame. The `poster` attribute cannot do either job on its own: a video element
 * with no source fetches its poster and paints nothing.
 *
 * The clip paints nothing until it has frames, so it needs no fade and no class
 * to reveal itself — the still shows through it exactly as long as it should,
 * which is until the first frame is ready.
 */
.me-plate__frame > .me-video__still {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}

.me-plate__frame > .me-video {
	position: relative;
	z-index: 1;
}

/* -------------------------------------------------------------------------
   4. Buttons and forms
   ------------------------------------------------------------------------- */

.me-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.95rem 1.6rem;
	border: var(--me-rule) solid var(--me-ink);
	border-radius: var(--me-radius);
	font-size: var(--me-text-xs);
	font-weight: 600;
	letter-spacing: var(--me-track);
	text-transform: uppercase;
	text-decoration: none;
	transition: background var(--me-speed-fast) var(--me-ease), color var(--me-speed-fast) var(--me-ease), border-color var(--me-speed-fast) var(--me-ease);
}

.me-btn--solid {
	background: var(--me-ink);
	color: var(--me-bg);
}

.me-btn--solid:hover {
	background: var(--me-accent);
	border-color: var(--me-accent);
	color: var(--me-surface);
}

.me-btn--ghost {
	border-color: rgb(255 255 255 / 0.5);
	color: var(--me-ink);
}

.me-hero .me-btn--ghost {
	color: #fff;
}

.me-btn--ghost:hover {
	border-color: var(--me-ink);
	background: var(--me-surface);
	color: var(--me-ink);
}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="password"],
textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	background: var(--me-surface);
	border: var(--me-rule) solid var(--me-line);
	border-radius: var(--me-radius);
}

/* -------------------------------------------------------------------------
   5. Announcement, masthead and drawer
   ------------------------------------------------------------------------- */

.me-announce {
	background: var(--me-ink);
	color: var(--me-bg);
	text-align: center;
}

.me-announce p {
	margin: 0;
	padding: 0.6rem 1.5rem;
	font-size: var(--me-text-xs);
	font-weight: 500;
	letter-spacing: var(--me-track);
	text-transform: uppercase;
}

/*
 * A sticky bar rather than a floating one. The reference this theme is measured
 * against fixes three translucent pills over the page and lets content scroll
 * under the middle of them, which is how a product title ends up sliced in half
 * by a menu. Here the bar occupies its own row of the document: nothing can
 * pass behind it, and the price of that is 74 pixels of paper.
 */
.me-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--me-bg);
	border-bottom: var(--me-rule) solid var(--me-line);
}

/*
 * Three columns: the nav, the wordmark, the actions.
 *
 * The spellings that look right and are not:
 *
 *   `1fr auto 1fr` wraps the nav. The two `1fr` columns are equal, so a
 *   five-item menu is squeezed into half the row and a two-word item like "The
 *   roastery" breaks across lines, which pushes the sticky bar taller.
 *
 *   `minmax(max-content, 1fr) auto minmax(max-content, 1fr)` fixes the wrap but
 *   leaves the wordmark 23px right of the centre line at 1440, because the
 *   nav's max-content is wider than an equal share of the row.
 *
 *   Taking the wordmark out of the flow entirely centres it exactly, and
 *   collides: below about 1300px a five-item nav reaches across the centre line
 *   and overprints the logo. That one shipped in a draft of this file and was
 *   visible in the theme screenshot, which is why it is written down here.
 *
 * What is left is this: three columns, `max-content` floors so nothing wraps,
 * and the wordmark centred in its own column. It can sit up to about twenty
 * pixels off the centre line when the two side groups differ in width, and it
 * cannot ever overlap either of them — the grid reserves the space. Twenty
 * pixels is not a thing anybody notices; two elements printed on top of each
 * other is.
 */
.me-header__inner {
	display: grid;
	grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
	align-items: center;
	gap: 1.5rem;
	min-height: 74px;
}

.me-header__brand {
	display: flex;
	justify-content: center;
}

.me-brand {
	display: inline-block;
	color: var(--me-ink);
	font-family: var(--me-font-display);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	/* The masthead is one line, at every width. A wordmark that wraps to two
	   lines changes the height of a sticky bar that the rest of the page is
	   measured against. */
	white-space: nowrap;
}

.me-brand img {
	max-height: 40px;
	width: auto;
}

.me-header__lead,
.me-header__aside {
	display: flex;
	align-items: center;
	gap: 1.4rem;
}

.me-header__aside {
	justify-content: flex-end;
}

.me-header__toggle {
	display: none;
	align-items: center;
	gap: 0.5rem;
	order: -1;
}

.me-nav ul {
	display: flex;
	gap: 1.6rem;
}

.me-nav a {
	display: inline-block;
	color: var(--me-ink-soft);
	font-size: var(--me-text-xs);
	font-weight: 500;
	letter-spacing: var(--me-track);
	text-transform: uppercase;
	text-decoration: none;
	/* A nav item that wraps to two lines ("The roastery") drags the sticky bar
	   taller and pushes the centred wordmark off its baseline. */
	white-space: nowrap;
}

.me-nav a:hover {
	color: var(--me-accent);
}

.me-header__cta {
	color: var(--me-ink);
	font-size: var(--me-text-xs);
	font-weight: 600;
	letter-spacing: var(--me-track);
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: var(--me-rule) solid var(--me-accent);
	padding-bottom: 2px;
}

.me-header__actions {
	display: flex;
	align-items: center;
	gap: 1.1rem;
}

.me-header__action {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--me-ink);
	font-size: var(--me-text-xs);
	letter-spacing: var(--me-track);
	text-transform: uppercase;
	text-decoration: none;
}

.me-header__count {
	color: var(--me-muted);
	font-variant-numeric: tabular-nums;
}

/* A scroll-progress rule, pinned to the bottom edge of the sticky bar. */
.me-progress {
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 2px;
	background: var(--me-accent);
	transform: scaleX(0);
	transform-origin: 0 50%;
	opacity: 0;
	transition: opacity var(--me-speed) var(--me-ease);
}

.me-motion .me-progress[data-me-progress] {
	opacity: 1;
}

.me-search {
	border-top: var(--me-rule) solid var(--me-line);
	background: var(--me-surface);
}

.me-search__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-block: 1.1rem;
}

.me-search__close {
	color: var(--me-muted);
}

.me-drawer {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgb(0 0 0 / 0.4);
}

.me-drawer__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	display: flex;
	flex-direction: column;
	width: min(360px, 88vw);
	padding: 1.5rem;
	overflow-y: auto;
	background: var(--me-bg);
}

.me-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 2rem;
}

.me-drawer__nav ul {
	display: grid;
	gap: 1.1rem;
}

.me-drawer__nav a {
	color: var(--me-ink);
	font-family: var(--me-font-display);
	font-size: 1.5rem;
	text-decoration: none;
}

.me-drawer__foot {
	margin-top: auto;
	padding-top: 2rem;
}

/*
 * The account link, under the shop button rather than beside it: the button is
 * what the drawer is for, and the link is a second door that should not compete
 * with it.
 */
.me-drawer__account {
	display: block;
	margin-top: 1rem;
	color: var(--me-muted);
	font-size: var(--me-text-xs);
	letter-spacing: var(--me-track);
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   6. Chapter 01 — the cover
   ------------------------------------------------------------------------- */

.me-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: min(88svh, 860px);
	overflow: hidden;
	background: var(--me-ink);
	color: #fff;
	isolation: isolate;
}

.me-hero__stage {
	position: absolute;
	inset: 0;
}

.me-hero__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	overflow: hidden;
	opacity: 0;
	transition: opacity 1.1s var(--me-ease);
}

.me-hero__slide.is-active {
	opacity: 1;
}

.me-hero__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * The cover photograph never sits still.
 *
 * A carousel of three stills that only crossfades reads as three slides of a
 * slideshow; the same three with a very slow settle underneath the crossfade
 * read as a camera holding on a subject. The animation — rather than a
 * transition — is what makes the *first* photograph drift too: it is already
 * marked active in the markup, so there is no state change for a transition to
 * catch, and a JavaScript class flip to fake one would flash the photograph
 * off and on at the moment the reader is looking straight at it.
 *
 * Eighteen seconds against a seven-second dwell: the drift is always still in
 * progress when the next photograph arrives, which is what keeps it from
 * reading as a loop.
 */
@keyframes me-cover-drift {
	from {
		transform: scale(1.08);
	}

	to {
		transform: scale(1);
	}
}

.me-hero__slide.is-active img {
	animation: me-cover-drift 18s var(--me-ease-enter) forwards;
}

/*
 * The scrim is a two-stop gradient rather than a flat overlay: the headline
 * sits in the lower left, so the bottom half carries the contrast and the top
 * half stays as close to the photograph as it can.
 */
.me-hero__stage::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(10 9 7 / 0.82) 0%, rgb(10 9 7 / 0.34) 46%, rgb(10 9 7 / 0.2) 100%);
}

.me-hero__inner {
	position: relative;
	flex: 1;
	display: flex;
	align-items: flex-end;
	padding-block: clamp(3rem, 8vh, 6rem);
}

.me-hero__title {
	max-width: 19ch;
	margin: 0.6rem 0 0;
	color: #fff;
}

.me-hero__lede {
	max-width: 46ch;
	margin-top: 1.4rem;
	color: rgb(255 255 255 / 0.86);
	font-size: var(--me-text-lg);
	line-height: 1.55;
}

.me-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-top: 2.2rem;
}

.me-hero__foot {
	position: relative;
	border-top: var(--me-rule) solid rgb(255 255 255 / 0.22);
}

.me-hero__foot-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 1rem;
}

.me-hero__dots {
	display: flex;
	gap: 0.5rem;
}

.me-hero__nav {
	display: flex;
	gap: 0.4rem;
	flex: 0 0 auto;
}

.me-hero__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: #fff;
	border: var(--me-rule) solid rgb(255 255 255 / 0.28);
	background: transparent;
	transition:
		background var(--me-speed) var(--me-ease),
		border-color var(--me-speed) var(--me-ease);
}

.me-hero__arrow:hover {
	background: rgb(255 255 255 / 0.14);
	border-color: rgb(255 255 255 / 0.8);
}

.me-hero__dot {
	width: 34px;
	height: 2px;
	background: rgb(255 255 255 / 0.32);
	transition: background var(--me-speed) var(--me-ease), width var(--me-speed) var(--me-ease-enter);
}

.me-hero__dot.is-active {
	width: 56px;
	background: #fff;
}

.me-hero__credit {
	flex: 1;
}

.me-hero__credit .me-caption {
	margin: 0;
	opacity: 0;
	transition: opacity var(--me-speed) var(--me-ease);
}

.me-hero__credit .me-caption.is-active {
	opacity: 1;
}

.me-hero__cue {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	color: rgb(255 255 255 / 0.7);
	font-size: var(--me-text-xs);
	letter-spacing: var(--me-track);
	text-transform: uppercase;
}

.me-scroll-cue {
	position: relative;
	display: block;
	width: 1px;
	height: 26px;
	background: rgb(255 255 255 / 0.4);
	overflow: hidden;
}

.me-scroll-cue::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: -60%;
	height: 60%;
	background: #fff;
	animation: me-cue 2.4s var(--me-ease) infinite;
}

@keyframes me-cue {
	0% { transform: translateY(0); }
	60%,
	100% { transform: translateY(280%); }
}

/* -------------------------------------------------------------------------
   7. Chapter 02 — the house statement
   ------------------------------------------------------------------------- */

.me-statement {
	padding-block: var(--me-section);
}

.me-statement .me-section__title {
	max-width: 26ch;
	font-weight: 600;
	letter-spacing: -0.03em;
}

.me-statement__copy {
	max-width: 62ch;
	margin-top: var(--me-block);
	padding-top: var(--me-block);
	border-top: var(--me-rule) solid var(--me-line);
	color: var(--me-muted);
	font-size: var(--me-text-lg);
}

/* -------------------------------------------------------------------------
   8. Chapter 03 — the five elements
   ------------------------------------------------------------------------- */

.me-elements {
	padding-block: var(--me-section);
}

.me-elements__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

.me-elements__media {
	position: sticky;
	/* Clears the sticky masthead plus the caption below the plate. */
	top: 6.5rem;
}

.me-figures {
	display: grid;
	border-top: var(--me-rule) solid var(--me-line);
}

/*
 * Each element is a three-column row: number, name, description. The number
 * column is a fixed width so the names align down the page, which is the whole
 * reason a list beats two paragraphs here.
 */
.me-figure {
	display: grid;
	grid-template-columns: 2.5rem minmax(8rem, 12rem) minmax(0, 1fr);
	gap: 1.5rem;
	align-items: baseline;
	padding-block: 1.4rem;
	border-bottom: var(--me-rule) solid var(--me-line);
}

.me-figure__no {
	color: var(--me-accent);
	font-size: var(--me-text-xs);
	font-weight: 600;
	letter-spacing: var(--me-track);
	font-variant-numeric: tabular-nums;
}

.me-figure__name {
	margin: 0;
	font-size: var(--me-text-lg);
}

.me-figure__copy {
	margin: 0;
	max-width: 46ch;
	color: var(--me-muted);
	font-size: var(--me-text-sm);
}

/* -------------------------------------------------------------------------
   9. Chapter 04 — the feature spread
   ------------------------------------------------------------------------- */

.me-feature {
	padding-block: var(--me-section);
}

.me-feature__spread {
	display: grid;
	grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: start;
}

.me-feature__aside {
	display: grid;
	gap: 1.5rem;
	/* The inset rides up alongside the lead plate rather than starting level
	   with it: that overlap is what makes the pair read as one spread. */
	margin-top: clamp(0rem, 4vw, 4rem);
}

/*
 * A drop cap, done with a float so the first line still wraps under it. It is
 * the oldest editorial signal there is, and it costs four declarations.
 */
.me-dropcap {
	max-width: 34ch;
	color: var(--me-ink-soft);
}

.me-dropcap::first-letter {
	float: left;
	margin: 0.06em 0.12em 0 0;
	color: var(--me-ink);
	font-family: var(--me-font-display);
	font-size: 4.2em;
	font-weight: 600;
	line-height: 0.78;
}

/* -------------------------------------------------------------------------
   10. Chapter 05 — this month's release
   ------------------------------------------------------------------------- */

.me-release {
	padding-block: var(--me-section);
}

.me-release__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: start;
}

.me-release__rest {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

/*
 * A lot is a card without a box: the plate sits on the page, the name and price
 * are set on one line, and the tasting line and the tags follow. Nothing is
 * enclosed, because a border here would fight the section rules.
 */
.me-lot {
	border-top: var(--me-rule) solid var(--me-line);
	padding-top: 1rem;
}

.me-lot__link {
	display: grid;
	gap: 1rem;
	color: inherit;
	text-decoration: none;
}

.me-lot__media {
	display: block;
	overflow: hidden;
	background: var(--me-bg-soft);
}

.me-lot__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--me-speed-slow) var(--me-ease-enter);
}

/*
 * Portrait for the lead lot, landscape for the two beside it. Both ratios are
 * deliberate choices rather than a shared one: a 4:5 hero plate in the 7-column
 * slot and 4:3 details in the 5-column slot come out within about sixty pixels
 * of the same height, where two square plates would leave the left column half
 * empty by the time the reader reaches the second lot.
 */
.me-lot--lead .me-lot__media {
	aspect-ratio: 4 / 5;
}

.me-lot__media {
	aspect-ratio: 4 / 3;
}

.me-lot:hover .me-lot__media img {
	transform: scale(1.03);
}

.me-lot__body {
	display: grid;
	gap: 0.6rem;
}

.me-lot__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	border-bottom: var(--me-rule) solid var(--me-line);
	padding-bottom: 0.6rem;
}

.me-lot__title {
	margin: 0;
	font-size: var(--me-text-lg);
}

.me-lot--lead .me-lot__title {
	font-size: var(--me-text-xl);
}

.me-lot__price {
	color: var(--me-ink);
	font-size: var(--me-text-sm);
	letter-spacing: 0.02em;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.me-lot__note {
	color: var(--me-muted);
	font-size: var(--me-text-sm);
}

.me-lot__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.me-lot:hover .me-lot__title {
	color: var(--me-accent);
}

/* -------------------------------------------------------------------------
   11. Chapter 06 — three origins
   ------------------------------------------------------------------------- */

.me-origins {
	padding-block: var(--me-section);
}

.me-origins__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.me-origin {
	display: grid;
	gap: 0.5rem;
	align-content: start;
}

.me-origin__place {
	margin: 0;
	color: var(--me-ink);
	font-family: var(--me-font-display);
	font-size: var(--me-text-lg);
}

.me-origin__copy {
	margin: 0 0 0.6rem;
	color: var(--me-muted);
	font-size: var(--me-text-sm);
}

/* -------------------------------------------------------------------------
   12. Chapter 07 — the dark spread
   ------------------------------------------------------------------------- */

.me-studio {
	padding-block: var(--me-section);
	background: var(--me-ink);
	color: rgb(255 255 255 / 0.72);
}

.me-studio .me-section__title,
.me-studio .me-figure__name {
	color: #fff;
}

.me-studio .me-section__copy {
	color: rgb(255 255 255 / 0.62);
}

.me-studio .me-eyebrow {
	color: var(--me-accent-2);
}

.me-studio .me-chapter {
	color: rgb(255 255 255 / 0.6);
}

.me-studio .me-chapter__no {
	color: var(--me-accent-2);
}

.me-studio__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: end;
}

/*
 * The awards list is set in the display face at almost headline size. A record
 * of prizes is usually the smallest type on a page; set this large, with a rule
 * between each line, the same six lines become evidence.
 */
.me-awards {
	display: grid;
	border-top: var(--me-rule) solid rgb(255 255 255 / 0.22);
}

.me-awards__row {
	padding-block: 0.85rem;
	border-bottom: var(--me-rule) solid rgb(255 255 255 / 0.22);
	color: #fff;
	font-family: var(--me-font-display);
	font-size: var(--me-text-lg);
	line-height: 1.3;
}

/* -------------------------------------------------------------------------
   13. Chapter 08 — from the journal
   ------------------------------------------------------------------------- */

.me-journal {
	padding-block: var(--me-section);
}

.me-entries {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.me-entry__link {
	display: grid;
	gap: 0.75rem;
	color: inherit;
	text-decoration: none;
}

.me-entry__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--me-bg-soft);
}

.me-entry__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--me-speed-slow) var(--me-ease-enter);
}

.me-entry__link:hover .me-entry__media img {
	transform: scale(1.03);
}

.me-entry__meta {
	color: var(--me-muted);
	font-size: var(--me-text-xs);
	letter-spacing: var(--me-track);
	text-transform: uppercase;
}

.me-entry__title {
	color: var(--me-ink);
	font-family: var(--me-font-display);
	font-size: var(--me-text-lg);
	line-height: 1.2;
}

.me-entry__link:hover .me-entry__title {
	color: var(--me-accent);
}

/* -------------------------------------------------------------------------
   14. Chapter 09 — the wall
   ------------------------------------------------------------------------- */

.me-wall {
	padding-block: var(--me-section);
	overflow: hidden;
}

/*
 * The row is a flex track twice the length of its contents, holding the same
 * eight plates twice. Translating it by exactly half its own width moves the
 * second copy into the first copy's place, so the loop has no seam and needs no
 * measurement in JavaScript.
 */
.me-wall__track {
	display: flex;
	margin-top: var(--me-section-sm);
	width: max-content;
}

.me-motion .me-wall__track {
	animation: me-wall-track 68s linear infinite;
}

.me-wall__track:hover,
.me-wall__track:focus-within {
	animation-play-state: paused;
}

@keyframes me-wall-track {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

.me-wall__row {
	display: flex;
	gap: 0.75rem;
	padding-inline: 0.375rem;
}

.me-wall__item {
	overflow: hidden;
	width: clamp(200px, 22vw, 320px);
	aspect-ratio: 4 / 5;
	background: var(--me-bg-soft);
}

.me-wall__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Without motion — or on a phone, where a moving row is a row that eats battery
 * — the same eight plates become a plain scroller. Two columns, no animation,
 * every photograph still reachable. The reference this theme answers renders an
 * empty band here instead.
 */
.me-wall__track:not(.me-motion .me-wall__track) {
	animation: none;
}

/* -------------------------------------------------------------------------
   15. Chapter 10 — the stores
   ------------------------------------------------------------------------- */

.me-stores {
	padding-block: var(--me-section);
}

.me-stores__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.me-stores__list {
	display: grid;
	margin-top: var(--me-section-sm);
	border-top: var(--me-rule) solid var(--me-line);
}

.me-store {
	display: grid;
	gap: 0.45rem;
	padding-block: 1.4rem;
	border-bottom: var(--me-rule) solid var(--me-line);
}

.me-store__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.me-store__city {
	color: var(--me-ink);
	font-family: var(--me-font-display);
	font-size: var(--me-text-xl);
}

/*
 * The local time, set in tabular figures so it does not reflow as the digits
 * change, and muted so it reads as a marginal note rather than as content.
 */
.me-store__clock {
	color: var(--me-muted);
	font-size: var(--me-text-xs);
	font-weight: 500;
	letter-spacing: var(--me-track);
	font-variant-numeric: tabular-nums;
}

.me-store__clock::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-inline-end: 0.5rem;
	border-radius: 50%;
	background: var(--me-accent);
	vertical-align: middle;
}

.me-store__address,
.me-store__hours {
	color: var(--me-muted);
	font-size: var(--me-text-sm);
	line-height: 1.55;
}

/* -------------------------------------------------------------------------
   16. Chapter 11 — the sign-up
   ------------------------------------------------------------------------- */

.me-signup {
	padding-block: var(--me-section);
	background: var(--me-bg-soft);
}

.me-signup__inner {
	text-align: center;
}

/* -------------------------------------------------------------------------
   17. Newsletter
   ------------------------------------------------------------------------- */

.me-newsletter {
	display: grid;
	justify-items: center;
	gap: 0.6rem;
	margin-top: var(--me-block);
}

.me-newsletter--footer {
	justify-items: start;
	margin-top: 1.5rem;
	text-align: start;
}

/*
 * The sign-up section already says "The roasting list" in its headline, so the
 * form's own title is suppressed there rather than printed twice.
 */
.me-signup .me-newsletter__title {
	display: none;
}

.me-newsletter__title {
	font-size: var(--me-text-lg);
}

.me-newsletter__note {
	max-width: 44ch;
	color: var(--me-muted);
	font-size: var(--me-text-sm);
}

.me-newsletter__form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	width: min(100%, 460px);
	margin-top: 1rem;
}

.me-newsletter__form input[type="email"] {
	flex: 1 1 220px;
}

.me-newsletter__status {
	margin: 0.5rem 0 0;
	font-size: var(--me-text-sm);
	color: var(--me-muted);
}

.me-newsletter__status.is-error {
	color: #b3261e;
}

/* -------------------------------------------------------------------------
   18. Colophon
   ------------------------------------------------------------------------- */

.me-footer {
	padding-top: var(--me-section);
	background: var(--me-bg);
	border-top: var(--me-rule) solid var(--me-line);
}

.me-footer__brand-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
}

.me-footer__email {
	margin: 0.6rem 0 0;
	font-size: var(--me-text-sm);
}

.me-footer__blurb {
	margin: 0;
	max-width: 44ch;
	color: var(--me-muted);
}

.me-footer__news {
	padding-block: var(--me-section-sm);
}

.me-footer__columns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
	padding-block: var(--me-section-sm);
	border-top: var(--me-rule) solid var(--me-line);
}

.me-footer__heading {
	margin-bottom: 0.85rem;
	font-family: var(--me-font-sans);
	font-size: var(--me-text-xs);
	font-weight: 600;
	letter-spacing: var(--me-track-wide);
	text-transform: uppercase;
}

.me-footer__list {
	display: grid;
	gap: 0.5rem;
	font-size: var(--me-text-sm);
}

.me-footer__list a {
	color: var(--me-muted);
	text-decoration: none;
}

.me-footer__list a:hover {
	color: var(--me-ink);
}

.me-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
	padding-block: 1.25rem;
	border-top: var(--me-rule) solid var(--me-line);
	color: var(--me-muted);
	font-size: var(--me-text-xs);
}

.me-footer__note {
	margin: 0;
}

.me-footer__legal ul {
	display: flex;
	gap: 1.25rem;
}

.me-footer__legal a {
	text-decoration: none;
}

.me-social {
	display: flex;
	gap: 1rem;
	margin-inline-start: auto;
}

.me-social a {
	display: inline-flex;
	color: var(--me-muted);
}

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

/*
 * The masthead wordmark.
 *
 * The svg is 1000x132 with the baseline at 128, so the caps occupy the lower
 * ~105 units of the box and there are ~27 units of ascender space above them
 * that nothing uses. The negative top margin crops that space so the wordmark
 * sits close to the blurb instead of floating below it — and, because the box
 * is not clipped, the letters are never cut through.
 */
.me-footer__masthead {
	margin-top: clamp(1.5rem, 4vw, 3rem);
	margin-bottom: clamp(-1rem, -1.2vw, -2.5rem);
}

.me-footer__masthead svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.me-footer__masthead text {
	fill: var(--me-ink);
	font-family: var(--me-font-display);
	font-weight: 600;
	letter-spacing: -0.02em;
}

/* -------------------------------------------------------------------------
   19. Page heads, entries, archives, cards
   ------------------------------------------------------------------------- */

/*
 * The top of a page, and the only place in the theme that decides how much room
 * it gets.
 *
 * It used to be `padding-block: var(--me-section-sm) var(--me-block)`, which is
 * a section's rhythm borrowed for a job it does not fit: `--me-section-sm` is
 * the gap *between* two bands of content, and a page head is not standing
 * between anything. Above it there is only the masthead, and below it only the
 * thing the page is about.
 *
 * The wrappers around this are required to add nothing of their own (see the
 * WooCommerce stylesheet), so this rule is the whole of the answer to "how far
 * down does the first thing on the page sit".
 */
.me-page-head {
	padding-block: var(--me-head-pad) var(--me-head-gap);
}

.me-page-head__title {
	margin: 0;
	font-size: var(--me-text-page);
}

.me-page-head__copy {
	max-width: 56ch;
	margin-top: 0.9rem;
	color: var(--me-muted);
}

.me-crumbs {
	margin-bottom: 1.5rem;
	color: var(--me-muted);
	font-size: var(--me-text-xs);
	letter-spacing: 0.04em;
}

.me-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.me-crumbs li + li::before {
	content: "/";
	margin-inline-end: 0.6rem;
	opacity: 0.5;
}

.me-entry > * {
	max-width: 72ch;
}

.me-article__body > * + * {
	margin-top: 1.4em;
}

.me-article__body h2,
.me-article__body h3 {
	margin-top: 1.8em;
}

.me-single__media {
	margin-block: var(--me-section-sm);
}

.me-single__media img {
	width: 100%;
}

.me-author {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin-top: 2.5em;
	padding-top: 2em;
	border-top: var(--me-rule) solid var(--me-line);
}

.me-author__avatar img {
	border-radius: 50%;
}

.me-author__name {
	margin: 0;
	color: var(--me-ink);
	font-weight: 500;
}

.me-author__bio {
	margin: 0;
	color: var(--me-muted);
	font-size: var(--me-text-sm);
}

.me-postnav {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: 2.5em;
	font-size: var(--me-text-sm);
}

.me-nav__label {
	display: block;
	color: var(--me-muted);
	font-size: var(--me-text-xs);
	letter-spacing: var(--me-track);
	text-transform: uppercase;
}

.me-pagelinks,
.pagination,
.navigation.pagination {
	margin-block: var(--me-section-sm);
	font-size: var(--me-text-sm);
}

.me-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: var(--me-section-sm);
}

.me-chips a {
	display: inline-block;
	padding: 0.4rem 0.9rem;
	border: var(--me-rule) solid var(--me-line);
	border-radius: var(--me-radius-pill);
	color: var(--me-muted);
	font-size: var(--me-text-xs);
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
}

.me-chips a.is-current,
.me-chips a:hover {
	border-color: var(--me-ink);
	color: var(--me-ink);
}

.me-sidebar {
	padding-block: var(--me-section-sm);
	border-top: var(--me-rule) solid var(--me-line);
}

.me-comments {
	margin-top: var(--me-section-sm);
}

.me-comments__list {
	margin-bottom: 2em;
}

.me-comments__list li {
	padding-block: 1.5em;
	border-top: var(--me-rule) solid var(--me-line);
}

.me-comments__note {
	color: var(--me-muted);
	font-size: var(--me-text-sm);
}

.me-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.me-card__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--me-bg-soft);
}

.me-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--me-speed-slow) var(--me-ease-enter);
}

.me-card__link:hover .me-card__media img {
	transform: scale(1.03);
}

.me-card__title {
	margin: 0.9rem 0 0.2rem;
	font-family: var(--me-font-sans);
	font-size: var(--me-text-sm);
	font-weight: 500;
	letter-spacing: 0;
}

.me-card__price {
	color: var(--me-muted);
	font-size: var(--me-text-sm);
}

.me-empty {
	padding-block: var(--me-section-sm);
	text-align: center;
	color: var(--me-muted);
}

.me-products ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2.5vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The archive and journal grid.
 *
 * The same two components the front page's journal chapter uses — an
 * `.me-entries` list of `.me-entry` cards — so the archive is not a second
 * design that has to be kept in step with the first. The Elementor tiles widget
 * addresses the same grid through `.me-tiles`/`.me-tile`, which is the other
 * half of the same idea: one grid, three callers.
 */
.me-grid {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.me-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.me-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.me-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.me-entry__excerpt {
	color: var(--me-muted);
	font-size: var(--me-text-sm);
}

.me-tiles,
.me-entries--archive {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.me-tile__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--me-bg-soft);
}

.me-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.me-tile__title {
	margin: 1rem 0 0.35rem;
	font-size: var(--me-text-lg);
}

.me-tile__copy {
	margin: 0;
	color: var(--me-muted);
	font-size: var(--me-text-sm);
}

/*
 * Blocks of content that stand on their own outside the front page: the search
 * result groups, the 404's recent list, and anything a block template builds
 * from `.me-section`.
 */
.me-section {
	padding-block: var(--me-section);
}

.me-section__title {
	margin-bottom: 0.4em;
}

.me-search__products {
	margin-bottom: var(--me-section-sm);
}

.me-search__products .me-section__title {
	margin-bottom: 1.5rem;
}

.me-chips--tight {
	margin-bottom: 2rem;
}

/* -------------------------------------------------------------------------
   20. 404 and Elementor
   ------------------------------------------------------------------------- */

/*
 * The 404 is the one page that opens without a page head — its title is its own
 * element so the search box and the two ways out can sit under it — so it asks
 * for the same two gaps directly. Leaving it out is how a theme ends up with
 * eleven pages that open at one height and a twelfth that opens at another.
 */
.me-404 {
	padding-block: var(--me-head-pad) var(--me-section);
	text-align: center;
}

.me-404__title {
	font-size: var(--me-text-page);
}

.me-404__copy {
	color: var(--me-muted);
}

.me-404__search {
	max-width: 420px;
	margin: 2em auto;
}

.me-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25rem;
	align-items: center;
}

.me-elementor-page .me-page-head {
	display: none;
}

/* -------------------------------------------------------------------------
   21. Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 1080px) {
	.me-header__inner {
		gap: 1rem;
	}

	.me-nav ul {
		gap: 1rem;
	}

	.me-brand {
		font-size: 1.125rem;
	}

	.me-elements__grid,
	.me-feature__spread,
	.me-release__grid,
	.me-stores__grid,
	.me-studio__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.me-elements__media {
		position: static;
	}

	.me-feature__aside {
		margin-top: 0;
	}

	/*
	 * A three-column row of a number, a name and a description cannot hold at
	 * this width, so the name and the copy stack under the number instead.
	 */
	.me-figure {
		grid-template-columns: 2.5rem minmax(0, 1fr);
	}

	.me-figure__copy {
		grid-column: 2;
	}

	.me-origins__grid,
	.me-entries,
	.me-entries--archive,
	.me-tiles,
	.me-grid--3,
	.me-grid--4,
	.me-products ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.me-studio__grid {
		align-items: start;
	}
}

@media (max-width: 860px) {
	/*
	 * The *nav* is hidden rather than its wrapper: the wrapper also holds the
	 * button that opens the drawer, so hiding it by class would take the menu
	 * away and leave no way to reach it. With the nav gone the left column is
	 * one 44px button, which is what stops the header forcing the document
	 * wider than the phone.
	 */
	.me-header__toggle {
		display: inline-flex;
	}

	.me-nav {
		display: none;
	}

	.me-brand {
		font-size: 1.125rem;
	}

	.me-header__cta {
		display: none;
	}

	.me-hero {
		min-height: min(92svh, 720px);
	}

	.me-hero__foot-inner {
		flex-wrap: wrap;
	}

	.me-hero__credit {
		order: 3;
		flex-basis: 100%;
	}

	.me-footer__brand-inner,
	.me-footer__columns {
		grid-template-columns: minmax(0, 1fr);
	}

	.me-social {
		margin-inline-start: 0;
	}
}

@media (max-width: 620px) {
	/*
	 * Search and the account link move into the drawer at this width; the bag
	 * stays. Three icons, a wordmark and a menu button do not fit on a 390px
	 * header, and the bag is the one that has to be reachable from the page
	 * rather than from inside a menu.
	 */
	.me-header__action[data-me-search-open],
	.me-header__action[data-me-account] {
		display: none;
	}

	.me-origins__grid,
	.me-entries,
	.me-entries--archive,
	.me-tiles,
	.me-grid--2,
	.me-grid--3,
	.me-grid--4,
	.me-products ul.products {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * The wall stops being a track on a phone: the row keeps its photographs at
	 * a readable size and becomes a swipeable strip, so the section can never be
	 * an empty band the way a scaled-down marquee is.
	 */
	.me-wall__track {
		display: grid;
		width: 100%;
		animation: none;
	}

	.me-wall__row {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 0.5rem;
	}

	.me-wall__row[aria-hidden="true"] {
		display: none;
	}

	.me-wall__item {
		flex: 0 0 auto;
		width: 62vw;
		scroll-snap-align: start;
	}

	.me-figure {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.5rem;
	}

	.me-figure__copy {
		grid-column: 1;
	}

	.me-store__top {
		flex-wrap: wrap;
	}
}