/**
 * Curatery site chrome — header, search strip and footer — plus Blocksy's
 * site-wide colors and fonts, in the rebrand's look.
 *
 * Blocksy decides where each piece sits (Customizer → Header and Footer, set up
 * by curatery-core/tools/setup-header-footer.php). This file decides how it
 * looks, using the --cur- tokens from tokens.css. It loads after Blocksy's own
 * styles.
 *
 * Specificity: Blocksy's generated rules look like
 *   [data-header*="type-1"] .ct-header [data-row*="middle"]   (0,3,0)
 * so rules here are anchored on #header / #footer (1,x,x) to win cleanly
 * without !important.
 *
 * Source for every value: Curatery-Rebrand-Mockup/browse.css and index.html.
 */


/* ════════════════════════════════════════════════════════════
   1. Site-wide: Blocksy's palette and fonts → the rebrand
   ════════════════════════════════════════════════════════════ */

:root {
	/* Blocksy routes nearly every color through these eight slots. */
	--theme-palette-color-1: var(--cur-tomato); /* Buttons, accents. */
	--theme-palette-color-2: var(--cur-tomato-hover);           /* Hover: tomato, 15% darker. */
	--theme-palette-color-3: var(--cur-ink);    /* Body text. */
	--theme-palette-color-4: var(--cur-ink);    /* Headings. */
	--theme-palette-color-5: #dad7d2;           /* Borders: --cur-line flattened onto paper. */
	--theme-palette-color-6: var(--cur-cream);  /* Soft backgrounds. */
	--theme-palette-color-7: var(--cur-paper);  /* Page background. */
	--theme-palette-color-8: #ffffff;

	--theme-font-family: var(--cur-sans);
	--theme-line-height: 1.5;
}

body {
	font-family: var(--cur-sans);
	color: var(--cur-ink);
	background-color: var(--cur-paper);
}

/* DM Serif Display has a single weight, so headings drop Blocksy's bold. */
h1, h2, h3, h4, h5, h6 {
	--theme-font-family: var(--cur-serif);
	--theme-font-weight: 400;
	--theme-line-height: 1.1;
	--theme-letter-spacing: -0.02em;
	font-family: var(--cur-serif);
	font-weight: 400;
	letter-spacing: -0.02em;
}


/* ════════════════════════════════════════════════════════════
   2. Header
   ════════════════════════════════════════════════════════════ */

/* Rows run edge to edge with the mockup's 5vw gutter. */
#header [data-device="desktop"] [data-row] > .ct-container {
	width: 100%;
	max-width: none;
	padding-inline: var(--cur-gutter);
}

/* ── Top row: the blue tagline bar ─────────────────────────── */

#header [data-row="top"] {
	--height: 34px;
	background-color: #96bde3; /* A lighter take on the brand blue, easier on the dark text. */
	border: 0;
	box-shadow: none;
}

/* Dark text: white on this blue is too faint to read at this size. */
#header [data-row="top"] .ct-header-text,
#header [data-row="top"] .ct-header-text p {
	margin: 0;
	color: var(--cur-ink);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	text-align: center;
}

#header [data-id="menu-secondary"] .ct-menu-link {
	--theme-link-initial-color: #163450;
	--theme-link-hover-color: var(--cur-ink);
	color: #163450;
	padding-inline: 0.75rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

#header [data-id="menu-secondary"] .ct-menu-link:hover,
#header [data-id="menu-secondary"] .ct-menu-link:focus-visible {
	color: var(--cur-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── Main row: lettering, menu, icons ──────────────────────── */

#header [data-row="middle"] {
	--height: 82px;
	background-color: var(--cur-cream);
	border-bottom: 1px solid var(--cur-line);
	box-shadow: none;
}

#header .site-title {
	--theme-font-family: var(--cur-serif);
	--theme-font-size: 3rem;
	--theme-font-weight: 400;
	--theme-line-height: 1;
	font-family: var(--cur-serif);
	font-size: 3rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.04em;
}

/* The logo keeps the bright tomato: it's large enough to read. */
#header .site-title a,
#header .site-title a:hover {
	--theme-link-initial-color: var(--cur-tomato-bright);
	--theme-link-hover-color: var(--cur-tomato-bright);
	color: var(--cur-tomato-bright);
}

#header [data-id="menu"] .ct-menu-link {
	--theme-link-initial-color: var(--cur-ink);
	--theme-link-hover-color: var(--cur-tomato);
	color: var(--cur-ink);
	padding-inline: 1.35rem;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

#header [data-id="menu"] .ct-menu-link:hover,
#header [data-id="menu"] .ct-menu-link:focus-visible,
#header [data-id="menu"] .current-menu-item > .ct-menu-link {
	color: var(--cur-tomato);
}

/* "More": when the menu doesn't fit, Blocksy folds its last links into a
   dropdown (li.more-items-container, built by its script). Styled as a paper
   card under the header, with the links set like the menu itself. */
#header [data-id="menu"] .more-items-container > .ct-menu-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

#header [data-id="menu"] .ct-toggle-dropdown-desktop {
	display: inline-grid;
	place-items: center;
	margin: 0;
}

#header [data-id="menu"] .ct-toggle-dropdown-desktop svg {
	width: 8px;
	height: 8px;
	fill: currentColor;
	transition: transform 0.15s ease;
}

#header [data-id="menu"] .more-items-container:hover .ct-toggle-dropdown-desktop svg,
#header [data-id="menu"] .more-items-container:focus-within .ct-toggle-dropdown-desktop svg {
	transform: rotate(180deg);
}

#header [data-id="menu"] .sub-menu {
	--dropdown-background-color: var(--cur-paper);
	--dropdown-items-spacing: 0;
	--dropdown-divider: none;
	--dropdown-box-shadow: var(--cur-shadow-card);
	--theme-link-initial-color: var(--cur-ink);
	--theme-link-hover-color: var(--cur-tomato);
	min-width: 240px;
	margin-top: 0;
	padding: 0.5rem;
	border: 1px solid var(--cur-line);
	border-radius: 12px;
	background: var(--cur-paper);
	box-shadow: var(--cur-shadow-card);
}

#header [data-id="menu"] .sub-menu::before {
	display: none;
}

#header [data-id="menu"] .sub-menu > li {
	margin: 0;
	border: 0;
}

#header [data-id="menu"] .sub-menu .ct-menu-link {
	display: block;
	width: 100%;
	padding: 0.8rem 0.95rem;
	border-radius: 8px;
	background: transparent;
	color: var(--cur-ink);
	font-size: 0.74rem;
	line-height: 1.3;
	white-space: nowrap;
}

#header [data-id="menu"] .sub-menu .ct-menu-link:hover,
#header [data-id="menu"] .sub-menu .ct-menu-link:focus-visible,
#header [data-id="menu"] .sub-menu .current-menu-item > .ct-menu-link {
	background: var(--cur-butter);
	color: var(--cur-tomato);
}

/* The Saved heart and the sign-in button share one round look. */
#header .cur-round-icon,
#header [data-id="account"] .ct-account-item {
	--theme-button-min-height: 39px;
	display: inline-grid;
	place-items: center;
	/* The header lays its items out in a row that can run short of space. Without
	   this the circles are squeezed into ovals as the window narrows. */
	flex: none;
	width: 39px;
	min-width: 39px;
	height: 39px;
	min-height: 39px;
	padding: 0;
	border: 1px solid var(--cur-line);
	border-radius: 50%;
	background: #ffffff;
	box-shadow: none;
	color: var(--cur-ink);
	font-size: 1.05rem;
	line-height: 1;
	overflow: hidden;
	transition: border-color 0.15s ease, color 0.15s ease;
}

#header .cur-round-icon:hover,
#header .cur-round-icon:focus-visible,
#header [data-id="account"] .ct-account-item:hover,
#header [data-id="account"] .ct-account-item:focus-visible {
	border-color: var(--cur-tomato);
	background: #ffffff;
	color: var(--cur-tomato);
}

#header [data-id="button"],
#header [data-id="trending"] {
	margin-inline-end: 0.9rem;
}

/* Trending, beside the Saved heart (inc/header-trending.php). */
#header .cur-trending-link svg {
	display: block;
	width: 19px;
	height: 19px;
}

#header .cur-trending-link[aria-current="page"] {
	border-color: var(--cur-tomato);
	color: var(--cur-tomato);
}

/* The Saved link holds a real icon, printed by Curatery Core's
   [curatery_icon name="heart"] shortcode in the button's label. Sized to match
   the account icon beside it; it takes the text colour, so hover still works. */
#header .cur-saved-link svg {
	display: block;
	width: 19px;
	height: 19px;
}

#header [data-id="account"] .ct-icon {
	--theme-icon-size: 19px;
	width: 19px;
	height: 19px;
}

/* Signed in, Blocksy shows the member's avatar in the same circle. */
#header [data-id="account"] img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

/* ── Phones and tablets ────────────────────────────────────── */

#header [data-device="mobile"] [data-row="middle"] {
	--height: 64px;
}

#header [data-device="mobile"] .site-title {
	--theme-font-size: 2.4rem;
	font-size: 2.4rem;
}

#header [data-device="mobile"] [data-id="account"] {
	margin-inline-end: 0.6rem;
}

#header [data-id="trigger"] {
	--theme-icon-size: 20px;
	color: var(--cur-ink);
}

/* ── The slide-out menu on phones ─────────────────────────────
   Cream, like the header. Saved and Trending sit at the top as two cards
   (inc/header-mobile-menu-view.php), then the menu: the four ways in as big
   serif links, the rest smaller, and Join the Club as the tomato button. */

[data-header*="type-1"] #offcanvas .ct-panel-inner {
	background-color: var(--cur-cream);
}

#offcanvas .ct-panel-actions {
	padding: 1.1rem 1.25rem 0;
}

/* Round, like the header's icons. Blocksy draws its close button from its own
   variables, so those are set too, at a specificity above Blocksy's. */
[data-header*="type-1"] #offcanvas .ct-panel-actions .ct-toggle-close {
	--theme-icon-color: var(--cur-ink);
	--theme-icon-hover-color: var(--cur-tomato);
	--theme-icon-size: 12px;
	--toggle-button-radius: 50%;
	--toggle-button-background: #ffffff;
	--toggle-button-hover-background: #ffffff;
	--toggle-button-border-color: var(--cur-line);
	--toggle-button-hover-border-color: var(--cur-tomato);
	display: grid;
	place-items: center;
	width: 39px;
	height: 39px;
	padding: 0;
	border: 1px solid var(--cur-line);
	border-radius: 50%;
	background: #ffffff;
	color: var(--cur-ink);
	outline: none;
}

[data-header*="type-1"] #offcanvas .ct-panel-actions .ct-toggle-close:hover,
[data-header*="type-1"] #offcanvas .ct-panel-actions .ct-toggle-close:focus-visible {
	border-color: var(--cur-tomato);
	color: var(--cur-tomato);
}

[data-header*="type-1"] #offcanvas .ct-panel-actions .ct-toggle-close:focus-visible {
	box-shadow: 0 0 0 3px rgba(232, 82, 50, 0.25);
}

[data-header*="type-1"] #offcanvas .ct-panel-actions .ct-toggle-close svg {
	width: 12px;
	height: 12px;
	fill: currentColor;
}

#offcanvas .ct-panel-content-inner {
	padding: 1rem 1.5rem 2.5rem;
}

.cur-drawer-shortcuts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.7rem;
	width: 100%;
	margin-bottom: 1.4rem;
}

#offcanvas .cur-drawer-shortcut {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.75rem 0.85rem;
	border: 1px solid var(--cur-line);
	border-radius: 12px;
	background: #ffffff;
	color: var(--cur-ink);
	font: 700 0.85rem/1.2 var(--cur-sans);
	text-decoration: none;
}

#offcanvas .cur-drawer-shortcut:hover,
#offcanvas .cur-drawer-shortcut:focus-visible,
#offcanvas .cur-drawer-shortcut[aria-current="page"] {
	border-color: var(--cur-tomato);
	color: var(--cur-tomato);
}

.cur-drawer-shortcut__icon {
	display: grid;
	flex: 0 0 34px;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--cur-butter);
	color: var(--cur-tomato);
}

.cur-drawer-shortcut__icon svg {
	width: 17px;
	height: 17px;
}

#offcanvas [data-id="mobile-menu"] {
	--theme-link-initial-color: var(--cur-ink);
	--theme-link-hover-color: var(--cur-tomato);
	--mobile-menu-divider: 1px solid var(--cur-line);
	width: 100%;
}

#offcanvas [data-id="mobile-menu"] > ul {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--cur-line);
}

#offcanvas [data-id="mobile-menu"] li {
	margin: 0;
}

#offcanvas [data-id="mobile-menu"] a {
	display: block;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--cur-line);
	color: var(--cur-ink);
	font: 400 1.75rem/1.05 var(--cur-serif);
	letter-spacing: -0.01em;
}

#offcanvas [data-id="mobile-menu"] a:hover,
#offcanvas [data-id="mobile-menu"] a:focus-visible,
#offcanvas [data-id="mobile-menu"] .current-menu-item > a {
	color: var(--cur-tomato);
}

/* After the four ways in: My Space, About and the like, set small. */
#offcanvas [data-id="mobile-menu"] > ul > li:nth-child(n+5) > a {
	padding: 0.9rem 0;
	font: 700 0.74rem/1.3 var(--cur-sans);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Join the Club, wherever it sits in the menu, as the tomato button. */
#offcanvas [data-id="mobile-menu"] > ul > li > a[href*="curatery-club"] {
	margin-top: 1.4rem;
	padding: 1rem 1.2rem;
	border: 2px solid var(--cur-tomato);
	background: var(--cur-tomato);
	color: #ffffff;
	text-align: center;
}

#offcanvas [data-id="mobile-menu"] > ul > li > a[href*="curatery-club"]:hover,
#offcanvas [data-id="mobile-menu"] > ul > li > a[href*="curatery-club"]:focus-visible {
	border-color: var(--cur-tomato-hover);
	background: var(--cur-tomato-hover);
	color: #ffffff;
}


/* ════════════════════════════════════════════════════════════
   3. Search strip (inc/search-strip.php → Curatery Core's 051)
   ════════════════════════════════════════════════════════════
   051 prints its own inline <style> with single-class selectors.
   Everything here is scoped under .cur-searchbar, so it outranks
   those regardless of order. */

.cur-searchbar {
	padding: 0.75rem var(--cur-gutter);
	background: #ffffff;
	border-bottom: 1px solid var(--cur-line);
}

.cur-searchbar__inner {
	display: flex;
	justify-content: center;
}

.cur-searchbar .cgs-wrap {
	width: min(650px, 100%);
	max-width: 100%;
}

.cur-searchbar .cgs-input-row {
	gap: 0.7rem;
	padding: 0.35rem 0.45rem 0.35rem 1rem;
	background: var(--cur-cream);
	border: 2px solid var(--cur-mustard);
	border-radius: var(--cur-radius-pill);
	overflow: visible;
}

.cur-searchbar .cgs-input-row:focus-within {
	border-color: var(--cur-mustard);
	box-shadow: 0 0 0 3px rgba(237, 189, 67, 0.3);
}

.cur-searchbar .cgs-input-row.is-open {
	border-radius: 22px 22px 0 0;
	border-bottom-color: transparent;
}

.cur-searchbar .cgs-icon {
	margin-left: 0;
	color: var(--cur-ink-muted);
}

.cur-searchbar .cgs-input {
	height: auto;
	min-height: 0;
	padding: 0.45rem 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--cur-ink);
	font-family: var(--cur-sans);
	font-size: 0.95rem;
	font-weight: 500;
}

.cur-searchbar .cgs-input::placeholder {
	color: #8a7766;
}

/* The pill already shows focus with its glow; don't draw a second box inside it. */
.cur-searchbar .cgs-input:focus,
.cur-searchbar .cgs-input:focus-visible {
	border: 0;
	outline: none;
	box-shadow: none;
}

.cur-searchbar .cgs-filters {
	gap: 0.35rem;
	padding: 0;
	border-left: 0;
}

.cur-searchbar .cgs-filter {
	min-height: 0;
	padding: 0.35rem 0.65rem;
	background: transparent;
	border: 0;
	border-radius: 18px;
	box-shadow: none;
	color: var(--cur-ink);
	font-family: var(--cur-sans);
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1.2;
}

.cur-searchbar .cgs-filter:hover {
	background: var(--cur-butter);
	color: var(--cur-ink);
}

.cur-searchbar .cgs-filter.active {
	background: var(--cur-mustard);
	color: var(--cur-ink);
}

.cur-searchbar .cgs-filter:focus-visible,
.cur-searchbar .cgs-clear:focus-visible {
	outline: 2px solid var(--cur-ink);
	outline-offset: 2px;
}

.cur-searchbar .cgs-clear {
	color: var(--cur-ink-muted);
}

.cur-searchbar .cgs-dropdown {
	top: calc(100% - 2px);
	background: var(--cur-cream);
	border: 2px solid var(--cur-mustard);
	border-top: 0;
	border-radius: 0 0 18px 18px;
	box-shadow: 0 10px 24px rgba(36, 27, 22, 0.1);
}

.cur-searchbar .cgs-group-label {
	color: var(--cur-tomato);
	border-top-color: var(--cur-line);
	letter-spacing: 0.14em;
}

.cur-searchbar .cgs-item:hover,
.cur-searchbar .cgs-item.cgs-active {
	background: var(--cur-butter);
}

.cur-searchbar .cgs-item-title {
	color: var(--cur-ink);
	font-family: var(--cur-sans);
}

.cur-searchbar .cgs-no-results {
	color: var(--cur-ink-muted);
}

@media (max-width: 650px) {
	.cur-searchbar .cgs-filters {
		display: none;
	}
}


/* ════════════════════════════════════════════════════════════
   4. Footer
   ════════════════════════════════════════════════════════════ */

#footer {
	position: relative;
	z-index: 1; /* Keeps the scallops above a last section that sets its own stacking. */
	background-color: var(--cur-sky);
}

/* The scalloped top edge. It hangs over the bottom of whatever comes before
   the footer, so the gaps between scallops show that section's color. */
#footer::before {
	content: "";
	position: absolute;
	top: -21px;
	left: 0;
	right: 0;
	height: 22px;
	background: radial-gradient(circle at 22px 22px, var(--cur-sky) 21px, transparent 22px);
	background-size: 44px 22px;
	pointer-events: none;
}

#footer [data-row="middle"],
#footer [data-row="bottom"] {
	background: transparent;
	border: 0;
}

#footer [data-row="middle"] > .ct-container {
	--grid-template-columns: 1fr repeat(3, 180px);
	grid-template-columns: 1fr repeat(3, 180px);
	gap: 2rem;
	max-width: var(--cur-max-width);
	padding-top: 4.2rem;
	padding-bottom: 0;
}

#footer .widget-title {
	--theme-font-size: 0.72rem;
	margin: 0 0 0.3rem;
	color: var(--cur-ink);
	font-family: var(--cur-sans);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* First column: the lettered Curatery name, not a label. */
#footer [data-column="widget-area-1"] .widget-title {
	--theme-font-size: 2.2rem;
	margin-bottom: 0.6rem;
	color: var(--cur-tomato);
	font-family: var(--cur-serif);
	font-size: 2.2rem;
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1;
	text-transform: none;
}

#footer .textwidget p {
	max-width: 30ch;
	margin: 0;
	color: var(--cur-ink);
	font-size: 0.95rem;
}

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

#footer .widget-menu a {
	--theme-link-initial-color: var(--cur-ink);
	display: block;
	margin: 0.42rem 0;
	color: var(--cur-ink);
	font-size: 0.84rem;
}

#footer .widget-menu a:hover,
#footer .widget-menu a:focus-visible {
	color: var(--cur-tomato);
}

#footer [data-row="bottom"] > .ct-container {
	max-width: var(--cur-max-width);
	margin-top: 3rem;
	padding: 1.2rem 0 2rem;
	border-top: 1px solid rgba(36, 27, 22, 0.15);
}

#footer [data-id="copyright"] {
	--theme-font-size: 0.72rem;
	color: var(--cur-ink);
	font-size: 0.72rem;
}

/* Below this the three 180px menus left the name and tagline a ~100px column
   (tablets, narrow windows, printed pages), so they get their own row. */
@media (max-width: 960px) {
	#footer [data-row="middle"] > .ct-container {
		--grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	#footer [data-column="widget-area-1"] {
		grid-column: 1 / -1;
	}
}

@media (max-width: 650px) {
	#footer [data-row="middle"] > .ct-container {
		--grid-template-columns: 1fr 1fr;
		grid-template-columns: 1fr 1fr;
	}

	#footer [data-column="widget-area-1"] {
		grid-column: 1 / -1;
	}
}

/* ════════════════════════════════════════════════════════════
   Printing
   ════════════════════════════════════════════════════════════
   A printed receipt or order confirmation is just the receipt: no header,
   search, sign-up band, footer, cookie notice, adverts, pop-ups or buttons. */

@media print {
	#header,
	.cur-searchbar,
	.cur-join,
	#footer,
	.cur-consent,
	#offcanvas,
	#account-modal,
	#search-modal,
	.ct-back-to-top,
	ins.adsbygoogle,
	[id^="google_ads"],
	.curatery-ad-slot,
	.curatery-ad-preview,
	.cur-confirmation__button,
	.cur-confirmation__buttons,
	.cur-confirmation__quiet,
	.cur-confirmation__actions {
		display: none !important;
	}

	html,
	body {
		background: #fff !important;
	}

	.cur-confirmation__hero,
	.cur-confirmation__card {
		box-shadow: none !important;
		break-inside: avoid;
	}
}

/* The sign-in pop-up's unselected tab (Login / Sign Up). Blocksy fades it to
   half strength, which put its label at 3.1:1; it stays readable instead, in
   the quieter ink. */
#account-modal ul > li:not(.active) {
	opacity: 1;
	color: var(--cur-ink-muted);
}


/* ════════════════════════════════════════════════════════════
   5. Sign-up band (inc/join-band.php)
   ════════════════════════════════════════════════════════════
   The mockup's .free-join: striped paper with a green dashed top edge,
   just above the footer, whose scallops hang over its bottom. */

.cur-join {
	position: relative;
	z-index: 1;
	padding: 4.4rem var(--cur-gutter) 4.8rem;
	border-top: 12px solid transparent;
	border-image: repeating-linear-gradient(90deg, var(--cur-green) 0 70px, var(--cur-green-pale) 70px 140px) 12;
	background: repeating-linear-gradient(92deg, var(--cur-paper) 0 88px, #fbf4e9 88px 176px);
	color: var(--cur-ink);
	font-family: var(--cur-sans);
}

.cur-join__inner {
	display: grid;
	grid-template-columns: 0.65fr 1.15fr 1fr;
	gap: 3rem;
	align-items: center;
	max-width: var(--cur-max-width);
	margin: 0 auto;
}

.cur-join__logo {
	margin: 0;
	color: var(--cur-tomato);
	font: 400 3.6rem/1 var(--cur-serif);
	letter-spacing: -0.04em;
}

.cur-join .cur-join__copy h2 {
	margin: 0.35rem 0 0.7rem;
	color: var(--cur-ink);
	font: 400 2.8rem/0.98 var(--cur-serif);
	letter-spacing: -0.02em;
}

.cur-join__copy p {
	margin: 0;
}

.cur-join__form {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
}

.cur-join .cur-join__form input {
	flex: 1;
	min-width: 0;
	height: auto;
	min-height: 0;
	padding: 0.85rem 1rem;
	border: 2px solid var(--cur-ink);
	border-right: 0;
	border-radius: 0;
	background: var(--cur-cream);
	box-shadow: none;
	color: var(--cur-ink);
	font: 500 0.9rem/1.3 var(--cur-sans);
}

.cur-join .cur-join__form input:focus {
	outline: 3px solid var(--cur-mustard);
	outline-offset: 0;
}

.cur-join .cur-join__form button {
	min-height: 0;
	padding: 0.9rem 1.15rem;
	border: 2px solid var(--cur-tomato);
	border-radius: 0;
	background: var(--cur-tomato);
	color: #ffffff;
	font: 700 0.72rem/1.2 var(--cur-sans);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

.cur-join .cur-join__form button:hover,
.cur-join .cur-join__form button:focus-visible {
	border-color: var(--cur-tomato-hover);
	background: var(--cur-tomato-hover);
}

.cur-join .cur-join__form button:focus-visible {
	outline: 3px solid var(--cur-ink);
	outline-offset: 2px;
}

.cur-join__form small {
	flex-basis: 100%;
	margin-top: 0.75rem;
	color: var(--cur-ink-muted);
	font-size: 0.68rem;
	line-height: 1.4;
}

@media (max-width: 950px) {
	.cur-join__inner {
		grid-template-columns: 0.6fr 1.4fr;
	}

	.cur-join__form {
		grid-column: 1 / -1;
	}
}

@media (max-width: 650px) {
	.cur-join {
		padding: 3.5rem 6vw 4rem;
	}

	.cur-join__inner {
		grid-template-columns: 1fr;
		gap: 1.3rem;
	}

	.cur-join__logo {
		font-size: 3rem;
	}

	.cur-join__form {
		grid-column: auto;
	}

	.cur-join .cur-join__form input {
		flex-basis: 100%;
		border-right: 2px solid var(--cur-ink);
		border-bottom: 0;
	}

	.cur-join .cur-join__form button {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	#header .cur-round-icon,
	#header [data-id="account"] .ct-account-item {
		transition: none;
	}
}

/* ── When someone asks their device for less movement ──
   Seven of the site's stylesheets slide, fade or scale something on hover,
   and the theme and plugins add their own. This switches all of it off in one
   place — everything still changes, it just changes instantly. */
@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;
	}
}