/*
Theme Name: ERUPTT
Theme URI: https://erupttrinidad.com
Author: Caribranding
Author URI: https://erupttrinidad.com
Description: A minimal, typographic theme for ERUPT EVENTS LTD. Full-viewport split-screen index, hairline-ruled rows, one type size, and WooCommerce support for merch collections. Events link out to an external ticketing platform.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eruptt
Tags: minimal, typography, e-commerce, custom-menu, custom-logo, translation-ready
*/

/* ==========================================================================
   ERUPTT — design system
   One type size. One easing curve. Hairlines instead of boxes.
   ========================================================================== */

@font-face {
	font-family: "DM Mono";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("assets/fonts/dm-mono-300.woff2") format("woff2");
}
@font-face {
	font-family: "DM Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/dm-mono-400.woff2") format("woff2");
}
@font-face {
	font-family: "DM Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("assets/fonts/dm-mono-500.woff2") format("woff2");
}

:root {
	/* Type — everything on the site is this size. Hierarchy comes from
	   position and space, never from scale. */
	--e-fs: 0.6875rem;      /* 11px */
	--e-ls: 0.020625rem;    /* 0.33px */
	--e-lh: 1.545454;

	/* Ink */
	--e-bg: #ffffff;
	--e-ink: #000000;
	--e-rule: #cbcbcb;
	--e-mute: #767676;      /* passes AA on white */
	--e-lava: #e4321b;      /* brand accent — used sparingly */

	/* Space */
	--e-gutter: 2rem;
	--e-vmargin: 6rem;
	--e-row: 0.9375rem;

	/* Motion — a single curve, used for everything */
	--e-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--e-fast: 125ms;
	--e-base: 0.25s;
	--e-slow: 0.6s;

	--e-header-h: 5.3125rem;
}

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

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

body {
	margin: 0;
	background: var(--e-bg);
	color: var(--e-ink);
	font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: var(--e-fs);
	font-weight: 400;
	letter-spacing: var(--e-ls);
	line-height: var(--e-lh);
	text-transform: uppercase;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Everything inherits. There is no type scale in this theme. */
h1, h2, h3, h4, h5, h6,
p, li, dd, dt, blockquote, figcaption,
input, textarea, select, button, label, table, th, td {
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	margin: 0;
}

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

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--e-base) var(--e-ease),
		border-color var(--e-base) var(--e-ease),
		opacity var(--e-base) var(--e-ease);
}

button {
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	cursor: pointer;
	border-radius: 0;
}

:focus-visible {
	outline: 1px solid var(--e-ink);
	outline-offset: 3px;
}

.e-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.e-skip:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100;
	background: var(--e-bg);
	color: var(--e-ink);
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--e-ink);
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.e-wrap {
	padding: 0 var(--e-gutter);
}

.e-flex {
	display: flex;
	position: relative;
}

.e-between {
	justify-content: space-between;
}

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

.e-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: var(--e-gutter) 0;
	z-index: 40;
}

.e-header__inner {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
}

/* The nav is pushed to the right so it and the cart sit together, rather
   than space-between stranding the nav in the middle of the bar. */
.e-nav {
	margin-left: auto;
}

/* On the split index the logo sits over the dark artwork panel and the cart
   sits over the white one, so each is coloured for its own background. On
   mobile the split reverses and the logo lands on white, so it flips back
   in the breakpoint below. */
.e-home .e-logo {
	color: #fff;
}

/* Dual logo: light over the artwork, dark over the index panel. */
.e-logo--dual .e-logo__dark {
	display: none;
}

.e-logo {
	display: inline-block;
	line-height: 1;
}

.e-logo img {
	height: 0.875rem;
	width: auto;
}

.e-logo--text {
	letter-spacing: 0.14em;
}

.e-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.e-header__cart {
	flex: 0 0 auto;
	white-space: nowrap;
}

@media (hover: hover) {
	.e-nav a:hover,
	.e-header__cart:hover {
		opacity: 0.55;
	}
}

.e-nav .current-menu-item > a,
.e-nav .current_page_item > a {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.e-footer {
	padding: var(--e-gutter) 0 1.8125rem;
	position: relative;
	z-index: 30;
}

.e-footer__inner {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	color: var(--e-mute);
}

@media (hover: hover) {
	.e-footer a:hover {
		color: var(--e-ink);
	}
}

/* --------------------------------------------------------------------------
   Split index — the homepage. Full viewport, does not scroll.
   -------------------------------------------------------------------------- */

.e-split {
	display: flex;
	height: 100vh;
	height: 100svh;
}

.e-split__media {
	width: 64.44%;
	position: relative;
	overflow: hidden;
	background: #0b0b0b;
}

/* Stacked media layers — one per row. Only the active one is visible. */
.e-media__layer {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--e-slow) cubic-bezier(0.22, 0.61, 0.36, 1);
	pointer-events: none;
}

.e-media__layer.is-active {
	opacity: 1;
}

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

/* The signature move: hovering a row blurs whatever is behind it. */
.e-split__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	backdrop-filter: blur(0);
	-webkit-backdrop-filter: blur(0);
	transition: backdrop-filter var(--e-base) ease,
		-webkit-backdrop-filter var(--e-base) ease;
}

.e-split.is-blurred .e-split__media::after {
	backdrop-filter: blur(0.625rem);
	-webkit-backdrop-filter: blur(0.625rem);
}

.e-split__panel {
	width: 35.56%;
	display: flex;
	flex-direction: column;
	padding-top: var(--e-vmargin);
	padding-bottom: 4.625rem;
}

.e-split__panel-inner {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

.e-index {
	margin-top: 1.5rem;
}

/* Justified standfirst — the reference site's most recognisable detail. */
.e-standfirst {
	margin-top: auto;
	padding-top: 3rem;
	text-align: justify;
	text-justify: inter-word;
	hyphens: none;
}

.e-standfirst p + p {
	margin-top: 1.5rem;
}

.e-tagline {
	letter-spacing: 0.32em;
}

/* Credit sits over the artwork, bottom-left. */
.e-split__credit {
	position: absolute;
	left: 0;
	bottom: 1.8125rem;
	z-index: 3;
	color: rgba(255, 255, 255, 0.6);
	pointer-events: none;
}

.e-split__foot {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 2.5rem;
	color: var(--e-mute);
}

@media (hover: hover) {
	.e-split__foot a:hover {
		color: var(--e-ink);
	}
}

/* Monospace already gives even digits; this guards the fallback stack. */
.e-clock {
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Rows — the universal list element. Used by the index, events,
   gallery sets and the cares schedule.
   -------------------------------------------------------------------------- */

.e-rows {
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--e-rule);
}

.e-row {
	border-top: 1px solid var(--e-rule);
}

.e-row__link,
.e-row__toggle {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: var(--e-row) 0;
	text-align: left;
	color: var(--e-ink);
}

.e-row__label {
	flex: 1 1 auto;
	min-width: 0;
	transition: opacity var(--e-base) var(--e-ease);
}

.e-row__meta {
	color: var(--e-mute);
	flex: 0 0 auto;
	transition: color var(--e-base) var(--e-ease);
}

@media (hover: hover) {
	.e-row__link:hover .e-row__meta,
	.e-row__toggle:hover .e-row__meta {
		color: var(--e-ink);
	}
	.e-row__link:hover .e-row__label,
	.e-row__toggle:hover .e-row__label {
		opacity: 0.55;
	}
}

.e-row--dim .e-row__label {
	color: var(--e-mute);
}

/* Collapsible detail.
   Animating grid-template-rows means the panel never needs its height
   measured in JS, so it reflows on its own when the window resizes or an
   image finishes loading. */
.e-row__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s var(--e-ease);
}

.e-row.is-open > .e-row__panel {
	grid-template-rows: 1fr;
}

.e-row__panel-inner {
	overflow: hidden;
	min-height: 0;
	color: var(--e-mute);
	max-width: 44ch;
}

.e-row__panel-inner > * + * {
	margin-top: 1rem;
}

/* Bottom spacing has to live inside the clipped box, or it would show
   through while the panel is closed. */
.e-row__panel-inner > :last-child {
	margin-bottom: var(--e-row);
}

/* --------------------------------------------------------------------------
   Interior pages
   -------------------------------------------------------------------------- */

.e-page {
	padding-top: calc(var(--e-header-h) + var(--e-vmargin));
	padding-bottom: var(--e-vmargin);
	min-height: 70vh;
}

.e-page__head {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 1.5rem;
	flex-wrap: wrap;
}

.e-page__intro {
	max-width: 44ch;
	margin-top: 1.5rem;
	color: var(--e-mute);
	text-align: justify;
	text-justify: inter-word;
}

.e-count {
	color: var(--e-mute);
}

/* Empty states — these show until content is uploaded. */
.e-empty {
	border-top: 1px solid var(--e-rule);
	border-bottom: 1px solid var(--e-rule);
	padding: var(--e-vmargin) 0;
	color: var(--e-mute);
	text-align: center;
}

/* --------------------------------------------------------------------------
   Grids — gallery sets, products, cares
   -------------------------------------------------------------------------- */

.e-grid {
	display: grid;
	gap: var(--e-gutter);
	grid-template-columns: repeat(3, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

.e-grid--2 {
	grid-template-columns: repeat(2, 1fr);
}

.e-grid--4 {
	grid-template-columns: repeat(4, 1fr);
}

.e-tile__media {
	position: relative;
	overflow: hidden;
	background: #f2f2f2;
	aspect-ratio: 4 / 5;
}

.e-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s var(--e-ease);
}

@media (hover: hover) {
	.e-tile a:hover .e-tile__media img {
		transform: scale(1.03);
	}
}

.e-tile__body {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 0.75rem;
	align-items: baseline;
}

.e-tile__meta {
	color: var(--e-mute);
	flex: 0 0 auto;
}

.e-tile__sub {
	color: var(--e-mute);
	padding-top: 0.25rem;
}

.e-tile__media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--e-mute);
	border: 1px solid var(--e-rule);
	background: transparent;
}

/* --------------------------------------------------------------------------
   Buttons — hairline boxes, never filled until hover
   -------------------------------------------------------------------------- */

.e-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.25rem;
	border: 1px solid var(--e-ink);
	background: transparent;
	color: var(--e-ink);
	line-height: 1;
	transition: background-color var(--e-base) var(--e-ease),
		color var(--e-base) var(--e-ease),
		border-color var(--e-base) var(--e-ease);
}

@media (hover: hover) {
	.e-btn:hover {
		background: var(--e-ink);
		color: var(--e-bg);
	}
}

.e-btn--block {
	width: 100%;
}

.e-btn[disabled],
.e-btn.is-disabled {
	border-color: var(--e-rule);
	color: var(--e-mute);
	pointer-events: none;
}

.e-btn--lava {
	border-color: var(--e-lava);
	color: var(--e-lava);
}

@media (hover: hover) {
	.e-btn--lava:hover {
		background: var(--e-lava);
		border-color: var(--e-lava);
		color: #fff;
	}
}

/* External-link marker — events point off-site to the ticket platform. */
.e-ext::after {
	content: " \2197";
	display: inline-block;
}

/* --------------------------------------------------------------------------
   Editorial content (single posts, page bodies, product descriptions).
   The one place uppercase is relaxed, so long copy stays readable.
   -------------------------------------------------------------------------- */

.e-prose {
	text-transform: none;
	max-width: 62ch;
	color: var(--e-ink);
}

.e-prose > * + * {
	margin-top: 1.5rem;
}

.e-prose a {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.e-prose ul,
.e-prose ol {
	padding-left: 1.25rem;
}

.e-prose li + li {
	margin-top: 0.5rem;
}

.e-prose img {
	margin: 2rem 0;
}

.e-prose blockquote {
	border-left: 1px solid var(--e-rule);
	padding-left: 1rem;
	color: var(--e-mute);
}

/* --------------------------------------------------------------------------
   Forms — Ninja Forms lives on the Committee page. These selectors are
   deliberately broad so WPForms / CF7 inherit the same look.
   -------------------------------------------------------------------------- */

.e-form,
.nf-form-cont,
.wpforms-container,
.wpcf7 {
	max-width: 34rem;
}

.e-form input[type="text"],
.e-form input[type="email"],
.e-form input[type="tel"],
.e-form input[type="url"],
.e-form input[type="number"],
.e-form input[type="search"],
.e-form input[type="password"],
.e-form textarea,
.e-form select,
.nf-form-cont input[type="text"],
.nf-form-cont input[type="email"],
.nf-form-cont input[type="tel"],
.nf-form-cont input[type="url"],
.nf-form-cont input[type="number"],
.nf-form-cont input[type="password"],
.nf-form-cont textarea,
.nf-form-cont select,
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container textarea,
.wpforms-container select,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 select {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--e-rule);
	border-radius: 0;
	padding: 0.75rem 0;
	color: var(--e-ink);
	font: inherit;
	letter-spacing: inherit;
	text-transform: uppercase;
	transition: border-color var(--e-base) var(--e-ease);
	-webkit-appearance: none;
	appearance: none;
}

.e-form textarea,
.nf-form-cont textarea,
.wpforms-container textarea,
.wpcf7 textarea {
	min-height: 7rem;
	resize: vertical;
}

.e-form input:focus,
.e-form textarea:focus,
.e-form select:focus,
.nf-form-cont input:focus,
.nf-form-cont textarea:focus,
.nf-form-cont select:focus,
.wpforms-container input:focus,
.wpforms-container textarea:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus {
	border-bottom-color: var(--e-ink);
	outline: 0;
}

.e-form ::placeholder,
.nf-form-cont ::placeholder {
	color: var(--e-mute);
	opacity: 1;
	text-transform: uppercase;
}

.e-form label,
.nf-form-cont .nf-field-label label,
.wpforms-container .wpforms-field-label {
	display: block;
	color: var(--e-mute);
	font-weight: 400 !important;
	margin-bottom: 0.25rem;
}

/* Ninja Forms ships its own layout and typography — flatten it. */
.nf-form-cont .nf-form-title,
.nf-form-cont .nf-form-fields-required {
	display: none;
}

.nf-form-cont .nf-field-container {
	margin-bottom: 1.75rem;
}

.nf-form-cont .nf-error-msg,
.nf-form-cont .ninja-forms-req-symbol {
	color: var(--e-lava) !important;
	font: inherit !important;
	letter-spacing: inherit !important;
}

.nf-form-cont .nf-error .ninja-forms-field {
	border-bottom-color: var(--e-lava) !important;
}

.e-form button[type="submit"],
.nf-form-cont input[type="button"],
.nf-form-cont button[type="submit"],
.wpforms-container button[type="submit"],
.wpcf7 input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	background: transparent !important;
	border: 1px solid var(--e-ink) !important;
	border-radius: 0 !important;
	color: var(--e-ink) !important;
	font: inherit !important;
	letter-spacing: inherit !important;
	text-transform: uppercase !important;
	padding: 0.75rem 1.5rem !important;
	height: auto !important;
	line-height: 1 !important;
	cursor: pointer;
	transition: background-color var(--e-base) var(--e-ease),
		color var(--e-base) var(--e-ease);
}

@media (hover: hover) {
	.e-form button[type="submit"]:hover,
	.nf-form-cont input[type="button"]:hover,
	.wpcf7 input[type="submit"]:hover {
		background: var(--e-ink) !important;
		color: var(--e-bg) !important;
	}
}

.nf-response-msg,
.wpcf7-response-output {
	border: 1px solid var(--e-rule) !important;
	padding: 1rem !important;
	margin: 1.5rem 0 0 !important;
	color: var(--e-ink);
}

/* --------------------------------------------------------------------------
   WooCommerce
   -------------------------------------------------------------------------- */

.woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	list-style: none;
	border: 1px solid var(--e-rule);
	padding: 1rem;
	margin: 0 0 2rem;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	align-items: center;
	background: transparent;
}

.woocommerce-error {
	border-color: var(--e-lava);
	color: var(--e-lava);
}

.e-shop__collection + .e-shop__collection {
	margin-top: var(--e-vmargin);
}

.e-collection__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	border-bottom: 1px solid var(--e-rule);
	padding-bottom: 0.75rem;
	margin-bottom: var(--e-gutter);
}

.e-price del {
	color: var(--e-mute);
	margin-right: 0.5rem;
}

.e-price ins {
	text-decoration: none;
}

.e-soldout {
	color: var(--e-lava);
}

/* Single product */
.e-product {
	display: flex;
	gap: var(--e-gutter);
	align-items: flex-start;
}

.e-product__media {
	flex: 1 1 64%;
	min-width: 0;
}

.e-product__media img {
	width: 100%;
}

.e-product__media > * + * {
	margin-top: 0.5rem;
}

.e-product__panel {
	flex: 1 1 36%;
	position: sticky;
	top: calc(var(--e-header-h) + var(--e-gutter));
}

.e-product__panel .e-rows {
	margin-top: 2rem;
}

.e-product__cart {
	margin-top: 2rem;
}

.e-product__cart .quantity {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--e-rule);
	padding-bottom: 0.75rem;
}

.e-product__cart .quantity input {
	width: 4rem;
	background: transparent;
	border: 0;
	font: inherit;
	color: inherit;
	padding: 0;
}

/* Scoped to the panel as well as to .woocommerce, so the button keeps its
   outline even if Woo drops its body class on a template. */
.e-product__cart button,
.e-product__cart .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background: transparent;
	border: 1px solid var(--e-ink);
	border-radius: 0;
	color: var(--e-ink);
	font: inherit;
	letter-spacing: inherit;
	text-transform: uppercase;
	padding: 0.875rem 1.25rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--e-base) var(--e-ease),
		color var(--e-base) var(--e-ease);
}

@media (hover: hover) {
	.e-product__cart button:hover,
	.e-product__cart .single_add_to_cart_button:hover {
		background: var(--e-ink);
		color: var(--e-bg);
	}
}

/* Cart / checkout / account — flatten Woo's default chrome */
.woocommerce table.shop_table,
.woocommerce-cart table.cart {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	border-radius: 0;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border: 0;
	border-bottom: 1px solid var(--e-rule);
	padding: 1rem 0.5rem 1rem 0;
	text-align: left;
	vertical-align: top;
}

.woocommerce table.shop_table img {
	width: 4rem;
}

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--e-ink);
	border-radius: 0;
	color: var(--e-ink);
	font: inherit;
	letter-spacing: inherit;
	text-transform: uppercase;
	font-weight: 400;
	padding: 0.875rem 1.25rem;
	line-height: 1;
	transition: background-color var(--e-base) var(--e-ease),
		color var(--e-base) var(--e-ease);
}

.woocommerce .single_add_to_cart_button {
	width: 100%;
}

@media (hover: hover) {
	.woocommerce .button:hover,
	.woocommerce a.button:hover,
	.woocommerce button.button:hover,
	.woocommerce input.button:hover,
	.woocommerce .single_add_to_cart_button:hover {
		background: var(--e-ink);
		border-color: var(--e-ink);
		color: var(--e-bg);
	}
}

.woocommerce .quantity input[type="number"],
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--e-rule);
	border-radius: 0;
	padding: 0.75rem 0;
	font: inherit;
	letter-spacing: inherit;
	color: var(--e-ink);
	width: 100%;
}

.woocommerce form .form-row label {
	color: var(--e-mute);
}

.woocommerce-breadcrumb,
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	color: var(--e-mute);
}

.e-back {
	margin-top: var(--e-vmargin);
	border-top: 1px solid var(--e-rule);
	padding-top: 1.5rem;
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.e-pagination {
	display: flex;
	gap: 1rem;
	justify-content: center;
	margin-top: var(--e-vmargin);
	border-top: 1px solid var(--e-rule);
	padding-top: 1.5rem;
}

.e-pagination .current {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* --------------------------------------------------------------------------
   Responsive — a single breakpoint, matching the reference
   -------------------------------------------------------------------------- */

@media screen and (max-width: 910px) {
	:root {
		--e-gutter: 1.125rem;
		--e-vmargin: 3.5rem;
	}

	/* The split stacks, media below the index, so the rows are reachable
	   without scrolling on a phone. */
	.e-split {
		flex-direction: column-reverse;
		height: auto;
		min-height: 100svh;
	}

	.e-split__media {
		width: 100%;
		aspect-ratio: 1 / 1;
		height: auto;
	}

	.e-split__panel {
		width: 100%;
		padding-top: calc(var(--e-header-h) + 1rem);
		padding-bottom: 2.5rem;
	}

	.e-standfirst {
		margin-top: 3rem;
		padding-top: 0;
	}

	.e-grid,
	.e-grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.e-product {
		flex-direction: column;
	}

	.e-product__media,
	.e-product__panel {
		flex: 1 1 auto;
		width: 100%;
		position: static;
	}

	/* Five menu items plus the cart do not fit on one line at this width —
	   they used to run off the right edge, invisibly, because the header is
	   fixed and so never produced a scrollbar. The nav drops to its own
	   full-width row beneath the logo and cart, and wraps within that row on
	   the narrowest phones. */
	.e-header__inner {
		flex-wrap: wrap;
		gap: 0.875rem 1rem;
	}

	.e-nav {
		order: 3;
		width: 100%;
		margin-left: 0;
	}

	.e-nav ul {
		gap: 0.5rem 1.125rem;
	}

	.e-header__cart {
		margin-left: auto;
	}

	/* Two rows of header instead of one. Home has no nav row, so it keeps
	   the shorter measurement. */
	:root {
		--e-header-h: 6rem;
	}

	.e-home {
		--e-header-h: 4rem;
	}

	/* The index panel is now at the top of the home page, so the header sits
	   on white and the logo has to go dark again. */
	.e-home .e-logo {
		color: var(--e-ink);
	}

	.e-logo--dual .e-logo__light {
		display: none;
	}

	.e-logo--dual .e-logo__dark {
		display: block;
	}
}

@media screen and (max-width: 560px) {
	.e-grid {
		grid-template-columns: 1fr;
	}

	.e-footer__inner {
		flex-direction: column;
		gap: 0.5rem;
	}
}

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

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.e-split.is-blurred .e-split__media::after {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	/* The accordion still opens and closes — it just does so instantly. */
	.e-row__panel {
		transition: none;
	}

	.e-tile a:hover .e-tile__media img {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
	.e-header,
	.e-footer,
	.e-split__media {
		display: none;
	}

	body {
		text-transform: none;
	}
}