/*
Theme Name: JigsawEarth
Description: Original theme for jigsawearth.com — travel & nature jigsaw puzzles.
Author: JigsawEarth
Version: 0.1.0
*/

:root {
	--je-bg: #fbf7ef;
	--je-surface: #ffffff;
	--je-primary: #0e7c7b;
	--je-primary-dark: #0b5d5c;
	--je-accent: #e8873a;
	--je-text: #1f2a33;
	--je-text-muted: #5b6b73;
	--je-border: #e4dcc8;
	--je-tray-bg: #f3ecdd;
	--je-tray-bg-alt: #ece3cf;
	--je-font-heading: 'Fredoka', system-ui, sans-serif;
	--je-font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--je-bg);
	color: var(--je-text);
	font-family: var(--je-font-body);
	line-height: 1.55;
}

a {
	color: var(--je-primary);
}

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

h1, h2, h3, h4 {
	font-family: var(--je-font-heading);
	line-height: 1.2;
}

.je-container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 16px;
}

/* Header */

.je-header {
	background: var(--je-surface);
	border-bottom: 1px solid var(--je-border);
	position: sticky;
	top: 0;
	z-index: 50;
}

/* A little wider than the page content: the logo, menu, buttons and search
   box need about 1210px to share one row. */
.je-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	max-width: 1240px;
	margin: 0 auto;
	gap: 16px;
	flex-wrap: wrap;
}

.je-logo {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--je-font-heading);
	font-size: 1.3rem;
	font-weight: 700;
	text-decoration: none;
	color: #2a6a3a;
}

/* The globe from the logo (images/logo.png is the full artwork). */
.je-logo__mark {
	width: 51px;
	height: 40px;
	flex-shrink: 0;
	display: block;
}

.je-logo__earth {
	color: #82593a;
}

.je-nav {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.je-nav a {
	text-decoration: none;
	color: var(--je-text);
	font-size: 0.92rem;
	font-weight: 500;
}

.je-nav a:hover {
	color: var(--je-primary);
}

/* Hero */

.je-hero {
	background: linear-gradient(135deg, var(--je-primary) 0%, var(--je-primary-dark) 100%);
	color: #fff;
	padding: 48px 16px;
	text-align: center;
}

.je-hero h1 {
	margin: 0 0 10px;
	font-size: clamp(1.6rem, 4vw, 2.4rem);
}

.je-hero p {
	margin: 0 auto;
	max-width: 520px;
	opacity: 0.9;
}

/* Region tiles */

.je-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 10px;
	margin: 20px 0 32px;
}

.je-tile {
	display: block;
	background: var(--je-surface);
	border: 1px solid var(--je-border);
	border-radius: 10px;
	padding: 14px 10px;
	text-align: center;
	text-decoration: none;
	color: var(--je-text);
	font-size: 0.85rem;
	font-weight: 600;
}

.je-tile:hover {
	border-color: var(--je-primary);
	color: var(--je-primary);
}

.je-section-title {
	margin: 32px 0 4px;
	font-size: 1.3rem;
}

.je-section-sub {
	color: var(--je-text-muted);
	margin: 0 0 8px;
	font-size: 0.92rem;
}

.je-section-intro {
	max-width: 72ch;
	margin: 0 0 14px;
	font-size: 0.95rem;
}

/* Place pages: trail, introduction, countries, "About" text */

.je-crumbs {
	margin: 20px 0 -16px;
	font-size: 0.85rem;
	color: var(--je-text-muted);
}

.je-crumbs a {
	color: var(--je-text-muted);
	text-decoration: none;
}

.je-crumbs a:hover {
	color: var(--je-primary);
	text-decoration: underline;
}

.je-crumbs .jig-crumbs__sep {
	margin: 0 6px;
}

.je-intro {
	max-width: 760px;
	margin: 6px 0 14px;
	color: var(--je-text);
	font-size: 1rem;
}

.je-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}

.je-chips a {
	padding: 5px 12px;
	border: 1px solid var(--je-border);
	border-radius: 999px;
	background: var(--je-surface);
	color: var(--je-text);
	text-decoration: none;
	font-size: 0.85rem;
}

.je-chips a:hover {
	border-color: var(--je-primary);
	color: var(--je-primary);
}

.je-about-place {
	max-width: 760px;
	margin: 36px 0 12px;
	padding: 20px 24px;
	background: var(--je-surface);
	border: 1px solid var(--je-border);
	border-radius: 14px;
}

.je-about-place h2 {
	margin: 0 0 10px;
	font-size: 1.2rem;
}

.je-about-place p {
	margin: 0 0 10px;
}

.je-about-place p:last-child {
	margin-bottom: 0;
}

/* Guides */

.je-guide-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 18px;
	margin: 16px 0 40px;
}

.je-guide-card {
	display: flex;
	flex-direction: column;
	background: var(--je-surface);
	border: 1px solid var(--je-border);
	border-radius: 14px;
	overflow: hidden;
	color: var(--je-text);
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.je-guide-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(31, 42, 51, 0.1);
}

.je-guide-card__img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

.je-guide-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px 16px;
}

.je-guide-card__title {
	font-family: var(--je-font-heading);
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.25;
}

.je-guide-card__text {
	color: var(--je-text-muted);
	font-size: 0.9rem;
}

.je-guide-card__meta {
	color: var(--je-primary);
	font-size: 0.8rem;
	font-weight: 600;
}

.je-guide {
	max-width: 780px;
	margin: 0 auto;
	padding: 0 16px 24px;
}

.je-guide__head h1 {
	margin: 24px 0 8px;
	font-size: clamp(1.6rem, 4vw, 2.3rem);
}

.je-guide__lead {
	margin: 0 0 8px;
	font-size: 1.1rem;
	color: var(--je-text-muted);
}

.je-guide__meta {
	margin: 0 0 18px;
	font-size: 0.85rem;
	color: var(--je-text-muted);
}

.je-guide__cover {
	margin: 0 0 24px;
}

.je-guide__cover img {
	width: 100%;
	border-radius: 14px;
	display: block;
}

.je-guide__cover figcaption {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 12px;
	margin-top: 6px;
	font-size: 0.8rem;
	color: var(--je-text-muted);
}

.je-guide__content {
	font-size: 1.05rem;
	line-height: 1.7;
}

.je-guide__content h2 {
	margin: 32px 0 8px;
	font-size: 1.45rem;
}

.je-guide__content h3 {
	margin: 24px 0 6px;
	font-size: 1.15rem;
}

.je-guide__content ul,
.je-guide__content ol {
	padding-left: 1.3em;
}

.je-guide__content li {
	margin-bottom: 6px;
}

.je-guide__puzzles {
	margin: 12px 0 20px;
}

.je-guide__puzzles .jig-grid {
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

.je-guide__more h2 {
	font-size: 1.3rem;
	margin: 12px 0 0;
}

/* Footer */

/* Footer: a deep-teal band with the brand, a search box and three link
   columns, then a darker strip for the copyright and site pages. */
.je-footer {
	margin-top: 56px;
	background: linear-gradient(180deg, #0f4847, #0a3736);
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.9rem;
}

.je-footer__inner {
	display: grid;
	grid-template-columns: 1.6fr repeat(3, 1fr);
	gap: 32px;
	max-width: 1100px;
	margin: 0 auto;
	padding: 44px 16px 36px;
}

.je-footer .je-footer__logo {
	color: #fff;
}

/* The logo's brown is too dark for the teal band, so a light sand here. */
.je-footer__logo .je-logo__earth {
	color: #e3c49b;
}

.je-footer__brand p {
	margin: 12px 0 18px;
	line-height: 1.6;
	max-width: 340px;
}

.je-footer__search {
	display: flex;
	max-width: 340px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.18);
	overflow: hidden;
}

.je-footer__search:focus-within {
	border-color: rgba(255, 255, 255, 0.5);
}

.je-footer__search input {
	flex: 1;
	min-width: 0;
	padding: 9px 14px;
	border: none;
	background: none;
	color: #fff;
	font: inherit;
	font-size: 16px;
	-webkit-appearance: none;
	appearance: none;
}

.je-footer__search input::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

.je-footer__search input:focus {
	outline: none;
}

.je-footer__search button {
	padding: 0 16px;
	border: none;
	background: var(--je-accent);
	color: #fff;
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
}

.je-404__search {
	display: flex;
	max-width: 440px;
	margin: 0 0 32px;
	border-radius: 999px;
	background: var(--je-surface);
	border: 1px solid var(--je-border);
	overflow: hidden;
}

.je-404__search:focus-within {
	border-color: var(--je-primary);
}

.je-404__search input {
	flex: 1;
	min-width: 0;
	padding: 11px 16px;
	border: none;
	background: none;
	color: var(--je-text);
	font: inherit;
	font-size: 16px;
	-webkit-appearance: none;
	appearance: none;
}

.je-404__search input:focus {
	outline: none;
}

.je-404__search button {
	padding: 0 20px;
	border: none;
	background: var(--je-accent);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.je-footer__col {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.je-footer__col h2 {
	margin: 4px 0 6px;
	font-family: var(--je-font-heading);
	font-size: 1rem;
	color: #fff;
}

.je-footer a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
}

.je-footer a:hover {
	color: #fff;
}

.je-footer__consent {
	padding: 0;
	border: 0;
	background: none;
	color: rgba(255, 255, 255, 0.72);
	font: inherit;
	cursor: pointer;
}

.je-footer__consent:hover {
	color: #fff;
}

.je-footer__col a {
	width: fit-content;
}

.je-footer__bottom {
	background: rgba(0, 0, 0, 0.22);
}

.je-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	max-width: 1100px;
	margin: 0 auto;
	padding: 16px;
	font-size: 0.8rem;
}

.je-footer__bottom p {
	margin: 0;
}

.je-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
}

@media (max-width: 900px) {
	.je-footer__inner {
		grid-template-columns: repeat(3, 1fr);
	}

	.je-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {
	.je-footer__inner {
		grid-template-columns: 1fr 1fr;
		gap: 28px 20px;
		padding-top: 36px;
	}

	.je-footer__bottom-inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Generic page content */

.je-page {
	max-width: 760px;
	margin: 0 auto;
	padding: 32px 16px 60px;
}

.je-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 24px 0;
}

.je-pagination a,
.je-pagination span {
	border: 1px solid var(--je-border);
	border-radius: 8px;
	padding: 6px 12px;
	text-decoration: none;
	color: var(--je-text);
	font-size: 0.85rem;
}

.je-pagination .current {
	background: var(--je-primary);
	color: #fff;
	border-color: var(--je-primary);
}

/* Collection menu under the hero */

.je-quicknav {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
	margin: 24px 0 16px;
}

.je-quicknav a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 16px 8px;
	background: var(--je-surface);
	border: 1px solid var(--je-border);
	border-radius: 12px;
	color: var(--je-text);
	font-weight: 600;
	font-size: 0.95rem;
	text-align: center;
	text-decoration: none;
}

.je-quicknav a:hover {
	border-color: var(--je-primary);
	color: var(--je-primary);
}

.je-quicknav svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: var(--je-primary);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Puzzle of the day / week / most played */

.je-features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin: 0 0 12px;
}

.je-feature {
	display: flex;
	flex-direction: column;
	background: var(--je-surface);
	border: 1px solid var(--je-border);
	border-radius: 12px;
	overflow: hidden;
	color: var(--je-text);
	text-decoration: none;
}

.je-feature:hover {
	border-color: var(--je-primary);
}

.je-feature__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--je-tray-bg);
}

.je-feature__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.je-feature__badge {
	position: absolute;
	left: 10px;
	top: 10px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--je-accent);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 600;
}

.je-feature__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 14px 14px;
}

.je-feature__title {
	font-family: var(--je-font-heading);
	font-size: 1.15rem;
	font-weight: 600;
}

.je-feature__sub {
	color: var(--je-text-muted);
	font-size: 0.9rem;
}

/* Explore by place + Saved puzzles pages */

.je-explore__heading {
	margin: 28px 0 0;
	font-size: 1.15rem;
}

.je-explore__heading a {
	color: var(--je-text);
	text-decoration: none;
}

.je-explore__heading a:hover {
	color: var(--je-primary);
}

.je-tiles--compact {
	margin: 12px 0 8px;
}

.je-tile__count {
	margin-left: 6px;
	color: var(--je-text-muted);
	font-size: 0.8rem;
}

.je-empty {
	padding: 28px 20px;
	background: var(--je-surface);
	border: 1px dashed var(--je-border);
	border-radius: 12px;
	text-align: center;
	color: var(--je-text-muted);
}

@media (max-width: 800px) {
	.je-quicknav {
		grid-template-columns: repeat(2, 1fr);
	}

	.je-quicknav a:last-child {
		grid-column: 1 / -1;
	}

	.je-features {
		grid-template-columns: 1fr;
	}
}

/* Header "Puzzles" dropdown */

.je-header__inner {
	position: relative;
}

.je-nav {
	align-items: center;
}

.je-nav-drop {
	position: relative;
}

.je-nav-drop summary {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	cursor: pointer;
	color: var(--je-text);
	font-size: 0.92rem;
	font-weight: 500;
}

.je-nav-drop summary::-webkit-details-marker {
	display: none;
}

.je-nav-drop summary::after {
	content: '';
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.je-nav-drop[open] summary::after {
	margin-top: 3px;
	transform: rotate(-135deg);
}

.je-nav-drop summary:hover,
.je-nav-drop[open] summary {
	color: var(--je-primary);
}

.je-nav-drop__panel {
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 12px;
	min-width: 400px;
	padding: 10px;
	background: var(--je-surface);
	border: 1px solid var(--je-border);
	border-radius: 12px;
	box-shadow: 0 12px 30px rgba(15, 30, 35, 0.16);
	z-index: 100;
}

.je-nav-drop__group {
	display: flex;
	flex-direction: column;
}

.je-nav-drop__group + .je-nav-drop__group {
	padding-left: 12px;
	border-left: 1px solid var(--je-border);
}

.je-nav .je-nav-drop__panel a {
	padding: 8px 10px;
	border-radius: 8px;
	white-space: nowrap;
}

.je-nav .je-nav-drop__panel a:hover {
	background: var(--je-tray-bg);
}

.je-nav .je-nav-drop__panel .je-nav-drop__all {
	margin-top: 4px;
	color: var(--je-primary);
	font-weight: 600;
}

/* Third column: continents. */
.je-nav-drop__panel:has(.je-nav-drop__group:nth-child(3)) {
	grid-template-columns: 1fr 1fr auto;
	min-width: 560px;
}

.je-nav-drop__label {
	padding: 8px 10px 4px;
	color: var(--je-text-muted);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* The page you're on. */
.je-nav > a[aria-current='page'] {
	color: var(--je-primary);
	font-weight: 600;
}

@media (max-width: 700px) {
	.je-nav-drop__panel:has(.je-nav-drop__group:nth-child(3)) {
		grid-template-columns: 1fr 1fr;
		min-width: 0;
	}

	.je-nav-drop__group:nth-child(3) {
		grid-column: 1 / -1;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 8px 0 0 !important;
		border-left: 0 !important;
		border-top: 1px solid var(--je-border);
	}

	.je-nav-drop__group:nth-child(3) .je-nav-drop__label {
		width: 100%;
	}
}

@media (max-width: 700px) {
	.je-nav-drop {
		position: static;
	}

	.je-nav-drop__panel {
		left: 16px;
		right: 16px;
		top: 100%;
		transform: none;
		min-width: 0;
	}
}

/* Phones: the menu is one row that scrolls sideways instead of wrapping onto
   several lines, so pages (above all the puzzle table) keep their height. */
@media (max-width: 600px) {
	.je-header__inner {
		padding: 10px 16px 8px;
		gap: 6px;
	}

	.je-nav {
		flex-wrap: nowrap;
		width: 100%;
		gap: 18px;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 2px;
	}

	.je-nav::-webkit-scrollbar {
		display: none;
	}

	.je-nav > a,
	.je-nav-drop summary {
		white-space: nowrap;
		flex-shrink: 0;
	}
}

/* Header search */

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

/* Menu sits next to the search box on the right; the logo keeps the left. */
.je-nav {
	margin-left: auto;
}

.je-search {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 170px;
	max-width: 230px;
	min-width: 170px;
}

.je-search__icon {
	position: absolute;
	left: 12px;
	display: flex;
	color: var(--je-text-muted);
	pointer-events: none;
}

.je-search input[type='search'] {
	width: 100%;
	padding: 8px 14px 8px 38px;
	border: 1px solid var(--je-border);
	border-radius: 999px;
	background: var(--je-bg);
	color: var(--je-text);
	font: inherit;
	font-size: 0.9rem;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.je-search input[type='search']:focus {
	outline: none;
	border-color: var(--je-primary);
	background: var(--je-surface);
	box-shadow: 0 0 0 3px rgba(14, 124, 123, 0.15);
}

.je-search__results {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: max(100%, 340px);
	padding: 6px;
	background: var(--je-surface);
	border: 1px solid var(--je-border);
	border-radius: 12px;
	box-shadow: 0 12px 30px rgba(15, 30, 35, 0.16);
	z-index: 200;
}

.je-search__results[hidden] {
	display: none;
}

.je-search__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 8px;
	border-radius: 8px;
	text-decoration: none;
	color: var(--je-text);
}

.je-search__item:hover,
.je-search__item.is-active,
.je-search__all:hover,
.je-search__all.is-active {
	background: var(--je-tray-bg);
}

.je-search__thumb {
	flex: 0 0 auto;
	width: 52px;
	height: 40px;
	object-fit: cover;
	border-radius: 6px;
	background: var(--je-tray-bg);
}

.je-search__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.je-search__title {
	font-size: 0.92rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.je-search__place {
	font-size: 0.8rem;
	color: var(--je-text-muted);
}

.je-search__all {
	display: block;
	margin-top: 4px;
	padding: 9px 8px;
	border-top: 1px solid var(--je-border);
	border-radius: 0 0 8px 8px;
	color: var(--je-primary);
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none;
}

.je-search__none {
	margin: 0;
	padding: 12px 10px;
	color: var(--je-text-muted);
	font-size: 0.9rem;
}

.je-search-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--je-border);
	border-radius: 999px;
	background: var(--je-surface);
	color: var(--je-text);
	cursor: pointer;
}

.je-header.is-searching .je-search-toggle {
	border-color: var(--je-primary);
	color: var(--je-primary);
}

/* Laptops narrower than the full header: the search box folds behind its
   round button and opens as a row of its own under the header, so Sign in
   stays on the first row. */
@media (min-width: 901px) and (max-width: 1300px) {
	.je-search-toggle {
		display: inline-flex;
	}

	.je-search {
		display: none;
		order: 10;
		flex: 1 1 100%;
		max-width: none;
	}

	.je-header.is-searching .je-search {
		display: flex;
	}

	.je-search__results {
		width: 100%;
	}
}

/* Narrow screens: the box folds behind the round button and opens as a
   full-width row under the logo. */
@media (max-width: 900px) {
	.je-nav {
		margin-left: auto;
	}

	.je-search-toggle {
		display: inline-flex;
		order: 2;
	}

	.je-search {
		display: none;
		order: 3;
		flex: 1 1 100%;
	}

	.je-header.is-searching .je-search {
		display: flex;
	}

	.je-search__results {
		width: 100%;
	}
}

@media (max-width: 600px) {
	.je-search-toggle {
		order: 1;
		margin-left: auto;
		width: 34px;
		height: 34px;
	}

	.je-search {
		order: 2;
	}

	.je-nav {
		order: 3;
		margin-left: 0;
	}

	/* 16px keeps iPhones from zooming the page in when the box is tapped. */
	.je-search input[type='search'] {
		font-size: 16px;
	}
}

/* Homepage banner for "Create your own puzzle" */
.je-create-cta {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 26px 0 8px;
	padding: 18px 22px;
	border-radius: 14px;
	background: linear-gradient(120deg, #fff6ec, #eef7f6);
	border: 1px solid var(--je-border);
	color: var(--je-text);
	text-decoration: none;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.je-create-cta:hover {
	box-shadow: 0 10px 24px rgba(15, 30, 35, 0.12);
	transform: translateY(-2px);
}

.je-create-cta__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 50px;
	height: 50px;
	border-radius: 12px;
	background: var(--je-accent);
	color: #fff;
}

.je-create-cta__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.je-create-cta__text strong {
	font-family: var(--je-font-heading);
	font-size: 1.1rem;
}

.je-create-cta__text span {
	color: var(--je-text-muted);
	font-size: 0.9rem;
}

.je-create-cta__go {
	flex-shrink: 0;
	color: var(--je-primary);
	font-weight: 600;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.je-create-cta {
		flex-wrap: wrap;
	}

	.je-create-cta__go {
		width: 100%;
		padding-left: 66px;
	}
}

/* Fonts, served from this site (see fonts/README.txt). Each file is a
   variable font covering every weight; the browser downloads the
   extended-Latin file only when a page actually uses those letters. */
@font-face {
	font-family: 'Fredoka';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('fonts/fredoka-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Fredoka';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('fonts/fredoka-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Contact page: the email address as the page's main button. */
.je-contact-email a {
	display: inline-block;
	padding: 12px 24px;
	border-radius: 999px;
	background: var(--je-primary);
	color: #fff;
	font-weight: 600;
	font-size: 1.05rem;
	text-decoration: none;
}

.je-contact-email a:hover {
	background: var(--je-primary-dark);
}

/* Header passport button, with the number of country stamps collected. */
.je-passport-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 38px;
	height: 38px;
	border: 1px solid var(--je-border);
	border-radius: 999px;
	background: var(--je-surface);
	color: var(--je-primary-dark);
	text-decoration: none;
}

/* Language switch: the same page in the other language. */
.je-lang {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: none;
	height: 38px;
	padding: 0 9px;
	border: 1px solid var(--je-border);
	border-radius: 999px;
	background: var(--je-surface);
	color: var(--je-primary-dark);
	font-size: 0.8rem;
	font-weight: 700;
	text-decoration: none;
}

.je-lang:hover {
	border-color: var(--je-primary);
	color: var(--je-primary);
}

.je-passport-btn:hover,
.je-passport-page .je-passport-btn {
	border-color: var(--je-primary);
	color: var(--je-primary);
}

.je-passport-btn__count {
	position: absolute;
	top: -5px;
	right: -6px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--je-accent);
	color: #fff;
	font: 700 0.68rem/18px var(--je-font-body);
	text-align: center;
	box-shadow: 0 0 0 2px var(--je-surface);
}

.je-passport-btn__count[hidden] {
	display: none;
}

@media (max-width: 900px) {
	.je-passport-btn {
		order: 2;
	}
}

@media (max-width: 600px) {
	.je-passport-btn {
		order: 1;
		margin-left: auto;
		width: 34px;
		height: 34px;
	}

	.je-passport-btn + .je-search-toggle {
		margin-left: 0;
	}
}

/* Header Globe Coins button: the coins this visitor has, opening the shop. */
.je-coins-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: none;
	height: 38px;
	padding: 0 11px 0 9px;
	border: 1px solid #ecd28a;
	border-radius: 999px;
	background: #fff8e1;
	color: #7a5a0c;
	font: 700 0.85rem var(--je-font-body);
	text-decoration: none;
	white-space: nowrap;
}

.je-coins-btn:hover,
.je-shop-page .je-coins-btn {
	border-color: #c99a22;
	color: #5e4407;
}

.je-coins-btn[hidden] {
	display: none;
}

@media (max-width: 1099px) {
	.je-header__inner .je-coins-btn {
		order: 1;
	}
}

@media (max-width: 600px) {
	.je-coins-btn {
		height: 34px;
		padding: 0 8px 0 6px;
		font-size: 0.8rem;
	}
}

/* Narrow phones: a tighter pill, and the globe beside the site name steps
   aside to make room for it (only while the coins are showing). */
@media (max-width: 400px) {
	.je-coins-btn {
		padding: 0 7px 0 6px;
		gap: 3px;
	}

	.je-header__inner:has(.je-coins-btn:not([hidden])) .je-logo__mark {
		display: none;
	}
}

/* A drawn coin, used wherever coins are counted. */
.je-coin {
	display: inline-block;
	flex: none;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff3b8 0 18%, #f3c74f 45%, #c99a22 100%);
	box-shadow: inset 0 0 0 1px rgba(122, 90, 12, 0.45);
	vertical-align: -0.12em;
}

/* Header account button, after the search box: a "Sign in" pill, or a
   person icon once signed in. */
.je-account-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	flex: none;
	height: 38px;
	padding: 0 13px 0 10px;
	border: 1px solid var(--je-primary);
	border-radius: 999px;
	background: var(--je-primary);
	color: #fff;
	font: 600 0.85rem var(--je-font-body);
	text-decoration: none;
	white-space: nowrap;
}

.je-account-btn:hover {
	background: var(--je-primary-dark);
	border-color: var(--je-primary-dark);
	color: #fff;
}

.je-account-btn.is-signed-in {
	width: 38px;
	padding: 0;
	border-color: var(--je-border);
	background: var(--je-surface);
	color: var(--je-primary-dark);
}

.je-account-btn.is-signed-in:hover,
.je-account-page .je-account-btn {
	border-color: var(--je-primary);
	background: var(--je-surface);
	color: var(--je-primary);
}

.je-account-btn.is-signed-in .je-account-btn__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* Tablets, small laptops and phones: logo, passport, search and Sign in on
   the top row, the menu on its own row below (below about 1100px they no
   longer fit on one row). */
@media (max-width: 1099px) {
	.je-header__inner .je-nav {
		order: 3;
		margin-left: 0;
		flex-basis: 100%;
	}

	.je-header__inner .je-passport-btn {
		order: 1;
		margin-left: auto;
	}

	.je-header__inner .je-lang {
		order: 1;
		margin-left: auto;
		padding: 0 9px;
	}

	.je-header__inner .je-lang + .je-passport-btn {
		margin-left: 0;
	}

	.je-account-btn,
	.je-header__inner .je-search-toggle {
		order: 1;
	}

	.je-header__inner .je-search-toggle {
		margin-left: 0;
	}

	.je-header__inner .je-search {
		order: 4;
		max-width: none;
	}
}

@media (max-width: 600px) {
	.je-header__inner .je-logo {
		gap: 6px;
		font-size: 1.1rem;
	}

	.je-header__inner .je-logo__mark {
		width: 38px;
		height: 30px;
	}

	.je-header__inner {
		column-gap: 10px;
	}

	.je-account-btn {
		order: 1;
		height: 34px;
		padding: 0 10px 0 8px;
		font-size: 0.8rem;
	}

	.je-account-btn.is-signed-in {
		width: 34px;
		padding: 0;
	}

	.je-account-btn + .je-search-toggle {
		margin-left: 0;
	}
}

/* Phones: with the language switch the top row gets full, so the round
   buttons shrink a little, the language switch drops its globe and
   Sign in shows just the person icon. */
@media (max-width: 480px) {
	.je-header__inner {
		column-gap: 6px;
	}

	.je-header__inner .je-lang,
	.je-header__inner .je-passport-btn,
	.je-header__inner .je-search-toggle {
		height: 34px;
	}

	.je-header__inner .je-passport-btn,
	.je-header__inner .je-search-toggle {
		width: 34px;
	}

	.je-header__inner .je-lang {
		padding: 0 8px;
	}

	.je-header__inner .je-lang svg {
		display: none;
	}

	.je-account-btn {
		width: 34px;
		padding: 0;
	}

	.je-account-btn .je-account-btn__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}
}

/* The narrowest phones: just the person icon. */
@media (max-width: 360px) {
	.je-account-btn {
		width: 34px;
		padding: 0;
	}

	.je-account-btn .je-account-btn__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}
}

/* Homepage banner for the daily "Where on Earth?" game. */
.je-create-cta--daily {
	background: linear-gradient(120deg, #e8f5f2, #fdf3e3);
}

.je-create-cta--daily .je-create-cta__icon {
	background: var(--je-primary);
}

/* A section title with a "see all" link beside it. */
.je-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.je-section-head a {
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------
 * Home page: today's puzzle + daily game + journey, then Explore tabs
 * and journeys. One card style throughout.
 * ------------------------------------------------------------------- */

.je-home {
	padding-bottom: 64px;
}

.je-hub {
	padding-top: 32px;
}

.je-hub__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 24px;
	margin-bottom: 18px;
}

.je-hub__head h1 {
	margin: 0;
	font: 600 2.1rem / 1.1 var(--je-font-heading);
}

.je-hub__head .je-hub__tagline {
	margin: 4px 0 0;
	color: var(--je-primary);
	font: 600 1.3rem / 1.2 var(--je-font-heading);
}

.je-hub__head p {
	margin: 6px 0 0;
	color: var(--je-text-muted);
}

.je-hub__me[hidden] {
	display: none;
}

.je-hub__me a {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 12px;
	padding: 8px 14px;
	border: 1px solid var(--je-border);
	border-radius: 14px;
	background: var(--je-surface);
	color: var(--je-text);
	font-weight: 600;
	font-size: 0.88rem;
	text-decoration: none;
}

.je-hub__me i {
	width: 100px;
	height: 8px;
	border-radius: 99px;
	background: var(--je-tray-bg);
	overflow: hidden;
}

.je-hub__me b {
	display: block;
	height: 100%;
	border-radius: 99px;
	background: var(--je-primary);
}

.je-hub__grid {
	display: grid;
	grid-template-columns: 1.75fr 1fr;
	gap: 20px;
}

/* Today's puzzle: the photo itself, with size picker and Play. */
.je-hub__feat {
	position: relative;
	min-height: 460px;
	border-radius: 22px;
	overflow: hidden;
	background: #1c3a3a;
	color: #fff;
}

.je-hub__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

.je-hub__feat::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.75));
}

.je-hub__in {
	position: absolute;
	left: 28px;
	right: 28px;
	bottom: 26px;
	z-index: 2;
	display: flex;
	flex-direction: column;
}

.je-hub__in h2 {
	margin: 0 0 6px;
	font: 600 2rem / 1.1 var(--je-font-heading);
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
}

.je-hub__in h2 a {
	color: #fff;
	text-decoration: none;
}

.je-hub__in p {
	max-width: 560px;
	margin: 0 0 16px;
	font-size: 0.98rem;
	opacity: 0.92;
}

.je-hub__play {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
}

.je-hub__sizes {
	display: flex;
	align-items: center;
	gap: 6px;
}

.je-hub__sizes a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: #fff;
	font-weight: 700;
	font-size: 0.9rem;
	text-decoration: none;
}

.je-hub__sizes a:hover {
	background: rgba(255, 255, 255, 0.28);
	color: #fff;
}

.je-hub__sizes a.is-on {
	border-color: #fff;
	background: #fff;
	color: var(--je-text);
}

.je-hub__pcs {
	margin-left: 4px;
	font-size: 0.85rem;
	opacity: 0.85;
}

/* Side: Where on Earth and the journey. */
.je-hub__side {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 20px;
}

.je-hub__box {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 22px 24px;
	border-radius: 22px;
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.je-hub__box:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(20, 40, 40, 0.14);
}

.je-hub__box strong {
	position: relative;
	margin: 4px 0 6px;
	font: 600 1.45rem / 1.15 var(--je-font-heading);
}

.je-hub__eye {
	position: relative;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.je-hub__p {
	position: relative;
	font-size: 0.9rem;
	line-height: 1.45;
}

.je-hub__row {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin-top: auto;
	padding-top: 14px;
}

.je-hub__btn {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 16px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.9rem;
	white-space: nowrap;
}

.je-hub__where {
	background: var(--je-primary-dark);
	color: #fff;
}

.je-hub__where:hover {
	color: #fff;
}

.je-hub__where .je-hub__eye {
	color: #9fe0d8;
}

.je-hub__where .je-hub__p {
	color: #cfe7e4;
}

.je-hub__where .je-hub__btn {
	background: #fff;
	color: var(--je-primary-dark);
}

.je-hub__q {
	position: absolute;
	right: 22px;
	top: 4px;
	font: 600 6rem / 1 var(--je-font-heading);
	opacity: 0.16;
}

.je-hub__count {
	color: #b9dcd8;
	font-size: 0.82rem;
	font-variant-numeric: tabular-nums;
}

.je-hub__jr {
	border: 1px solid var(--je-border);
	background: var(--je-surface);
	color: var(--je-text);
}

.je-hub__jr:hover {
	color: var(--je-text);
}

.je-hub__jr .je-hub__eye {
	color: var(--je-primary);
}

.je-hub__jr strong,
.je-hub__jr .je-hub__p {
	max-width: calc(100% - 110px);
}

.je-hub__jr .je-hub__p {
	color: var(--je-text-muted);
}

.je-hub__jr .je-hub__btn {
	background: var(--je-primary);
	color: #fff;
}

.je-hub__thumb {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 92px;
	height: 92px;
	border-radius: 14px;
	overflow: hidden;
}

.je-hub__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.je-hub__bar {
	position: relative;
	height: 8px;
	margin-top: 12px;
	border-radius: 99px;
	background: var(--je-tray-bg);
	overflow: hidden;
}

.je-hub__bar[hidden] {
	display: none;
}

.je-hub__bar i {
	display: block;
	height: 100%;
	background: var(--je-accent);
}

/* Buttons. */
.je-home-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 24px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.98rem;
	text-decoration: none;
	white-space: nowrap;
}

.je-home-btn--accent {
	background: var(--je-accent);
	color: #fff;
}

.je-home-btn--accent:hover {
	background: #d8772b;
	color: #fff;
}

/* Its own name: the passport's badge cards are .je-badge. */
.je-home-badge {
	align-self: flex-start;
	margin-bottom: 8px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--je-accent);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Explore and journeys. */
.je-home-sec {
	margin-top: 56px;
}

.je-home-sec__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.je-home-sec__head h2 {
	margin: 0;
	font: 600 1.7rem var(--je-font-heading);
}

.je-home-sec__head a {
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.je-home-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 18px;
	overflow-x: auto;
	scrollbar-width: none;
}

.je-home-tabs::-webkit-scrollbar {
	display: none;
}

.je-home-tab {
	flex: none;
	padding: 8px 16px;
	border: 1px solid var(--je-border);
	border-radius: 999px;
	background: var(--je-surface);
	color: var(--je-text);
	font: 600 0.92rem var(--je-font-body);
	cursor: pointer;
}

.je-home-tab:hover {
	border-color: var(--je-text-muted);
}

.je-home-tab.is-on {
	border-color: var(--je-text);
	background: var(--je-text);
	color: #fff;
}

/* Phones: one scrolling row that fades at the right edge, so it is clear
   there are more tabs; the padding lets the last tab scroll clear of the fade. */
@media (max-width: 767px) {
	.je-home-tabs {
		padding-right: 28px;
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
	}
}

/* Wider screens: every tab in view (one line on a laptop, a second line
   only on narrower screens). */
@media (min-width: 768px) {
	.je-home-tabs {
		flex-wrap: wrap;
		gap: 6px;
		overflow: visible;
	}

	.je-home-tab {
		padding: 8px 12px;
	}
}

.je-home-panel[hidden] {
	display: none;
}

.je-home-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: start;
	gap: 20px;
}

.je-home-all {
	margin: 20px 0 0;
	text-align: center;
}

.je-home-all a {
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid var(--je-border);
	border-radius: 999px;
	background: var(--je-surface);
	font-weight: 700;
	font-size: 0.92rem;
	text-decoration: none;
}

.je-home-all a:hover {
	border-color: var(--je-primary);
}

.je-hc {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--je-border);
	border-radius: 16px;
	background: var(--je-surface);
	color: var(--je-text);
	text-decoration: none;
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.je-hc:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(20, 40, 40, 0.12);
	color: var(--je-text);
}

.je-hc__img {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	background: var(--je-tray-bg);
}

.je-hc__img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.je-hc__t {
	padding: 12px 16px 14px;
	font: 600 1.02rem / 1.25 var(--je-font-heading);
}

.je-hc__t small {
	display: block;
	margin-top: 3px;
	color: var(--je-text-muted);
	font: 500 0.85rem var(--je-font-body);
}

.je-hc__new {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--je-accent);
	color: #fff;
	font: 800 0.7rem / 1.2 var(--je-font-body);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.je-home-jr {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: start;
	gap: 20px;
}

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

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

	.je-hub__side {
		grid-template-rows: none;
		grid-template-columns: 1fr 1fr;
	}

	.je-home-grid {
		gap: 14px;
	}
}

@media (max-width: 700px) {
	.je-home-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.je-hub {
		padding-top: 20px;
	}

	.je-hub__head h1 {
		font-size: 1.7rem;
	}

	.je-hub__head p {
		font-size: 0.92rem;
	}

	.je-hub__feat {
		min-height: 440px;
		border-radius: 18px;
	}

	.je-hub__in {
		left: 18px;
		right: 18px;
		bottom: 18px;
	}

	.je-hub__in h2 {
		font-size: 1.5rem;
	}

	.je-hub__in p {
		font-size: 0.9rem;
	}

	.je-hub__sizes a {
		min-width: 44px;
		height: 38px;
		padding: 0 10px;
	}

	.je-hub__side {
		grid-template-columns: 1fr;
	}

	.je-home-sec {
		margin-top: 44px;
	}

	.je-home-sec__head h2 {
		font-size: 1.4rem;
	}

	.je-home-grid {
		gap: 12px;
	}

	.je-hc__t {
		padding: 10px 12px 12px;
		font-size: 0.95rem;
	}

	.je-home-jr {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
}

/* ---------------------------------------------------------------------
 * Ad places (includes/ads.php in the engine). Height is kept free before
 * the ad loads so the page doesn't jump; unfilled places disappear.
 * ------------------------------------------------------------------- */

.je-ad {
	max-width: 970px;
	min-height: 280px;
	margin: 48px auto 0;
	text-align: center;
}

.je-ad__label {
	display: block;
	margin-bottom: 6px;
	color: var(--je-text-muted);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.je-ad:has(ins[data-ad-status='unfilled']) {
	display: none;
}

.je-ad--preview {
	display: grid;
	place-items: center;
	padding: 16px;
	border: 2px dashed var(--je-accent);
	border-radius: 14px;
	background: rgba(232, 135, 58, 0.07);
	color: #b8601c;
	font-weight: 700;
}

/* Inside a puzzle grid: one full-width row; later cards fill any gap. */
.jig-grid.has-ad {
	grid-auto-flow: row dense;
}

.jig-grid > .je-ad {
	grid-column: 1 / -1;
	width: 100%;
	max-width: none;
	margin: 6px 0;
}

/* On the puzzle page the ad sits on the dark table. */
.jig-about .je-ad {
	margin-top: 28px;
}

.jig-about .je-ad__label {
	color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 600px) {
	.je-ad {
		min-height: 250px;
		margin-top: 36px;
	}
}

/* Spanish menu words run longer: a little less room between them. */
html[lang="es"] .je-nav {
	gap: 16px;
}

html[lang="es"] .je-search {
	min-width: 150px;
}

/* The site as an app: install button in the footer, a banner on phones and
   the "Add to Home Screen" help on iPhone (all shown by pwa.js). */
/* Install buttons are warm amber, so they stand out on the dark teal footer
   and next to the site's teal buttons. */
.je-footer__install,
.je-btn.je-app-cta__btn {
	border: 0;
	background: linear-gradient(180deg, #ffbe5c, #f39a2e);
	color: #3a1f04;
	box-shadow: 0 4px 14px rgba(243, 154, 46, 0.35);
	font-weight: 700;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.je-footer__install:hover,
.je-footer__install:focus-visible,
.je-btn.je-app-cta__btn:hover,
.je-btn.je-app-cta__btn:focus-visible {
	background: linear-gradient(180deg, #ffc977, #f5a540);
	box-shadow: 0 6px 18px rgba(243, 154, 46, 0.5);
	transform: translateY(-1px);
}

.je-footer__install {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	padding: 10px 20px;
	border-radius: 999px;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
}

.je-footer__install[hidden] {
	display: none;
}

/* The "Get the app" page: its install button. */
.je-app-cta {
	margin: 22px 0 30px;
}

.je-app-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	font-size: 1rem;
}

.je-app-cta__btn[hidden],
.je-app-cta__done[hidden] {
	display: none;
}

.je-app-cta__done {
	color: var(--je-primary-dark);
	font-weight: 600;
}

.je-app-help__how {
	display: block;
	margin: -4px 0 14px;
	color: var(--je-primary);
	font-weight: 600;
}

.je-app-banner {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: calc(12px + env(safe-area-inset-bottom));
	z-index: 9990;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	padding: 12px 14px;
	border: 1px solid var(--je-border);
	border-radius: 16px;
	background: var(--je-surface);
	color: var(--je-text);
	box-shadow: 0 10px 30px rgba(15, 40, 40, 0.22);
	transform: translateY(130%);
	transition: transform 0.35s ease;
}

.je-app-banner.is-open {
	transform: none;
}

.je-app-banner__icon {
	flex: none;
	border-radius: 12px;
}

.je-app-banner__text {
	flex: 1 1 200px;
	min-width: 0;
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--je-text-muted);
}

.je-app-banner__text strong {
	display: block;
	font-size: 0.95rem;
	color: var(--je-text);
}

.je-app-banner__actions {
	display: flex;
	gap: 8px;
	margin-left: auto;
}

.je-app-banner button,
.je-app-help button {
	padding: 8px 16px;
	border: none;
	border-radius: 999px;
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
}

.je-app-banner__install,
.je-app-help button {
	background: var(--je-primary);
	color: #fff;
}

.je-app-banner__later {
	background: var(--je-tray-bg);
	color: var(--je-text);
}

.je-app-help {
	position: fixed;
	inset: 0;
	z-index: 9995;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
	background: rgba(15, 30, 30, 0.45);
}

.je-app-help__box {
	width: 100%;
	max-width: 380px;
	padding: 22px 20px 18px;
	border-radius: 18px;
	background: var(--je-surface);
	color: var(--je-text);
	text-align: center;
}

.je-app-help__box img {
	border-radius: 14px;
}

.je-app-help__box strong {
	display: block;
	margin: 8px 0 6px;
	font-size: 1.05rem;
}

.je-app-help__box p {
	margin: 0 0 16px;
	color: var(--je-text-muted);
	line-height: 1.5;
}

.je-app-help__box svg {
	vertical-align: -5px;
	margin-right: 6px;
	color: var(--je-primary);
}

/* Wide screens: the header is on one row with the full search box. With the
   Quizzes link and a coin balance of three or four digits it needs a little
   more room than the 1240px page, or "Sign in" drops to a second row. */
@media (min-width: 1301px) {
	.je-header__inner {
		max-width: 1320px;
	}

	.je-search {
		max-width: 200px;
	}
}