/*
Theme Name:        Kadence Child
Theme URI:         https://www.animeroutesjapan.com/
Description:       Child theme of Kadence for Anime Routes Japan. Keep all customizations here so the parent theme can be updated safely.
Author:            Anime Routes Japan
Author URI:        https://www.animeroutesjapan.com/
Template:          kadence
Version:           1.8.3
Requires at least: 6.0
Requires PHP:      7.4
License:           GNU General Public License v3.0 (or later)
License URI:       https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:       kadence-child
*/

/* ==========================================================================
   Anime Routes Japan - home page sections

   Every rule below is namespaced under the .arj-* classes that the home page
   blocks carry, so no other page or theme element is affected. Colors live in
   custom properties on .arj-section and can be swapped for the Kadence global
   palette once the brand colors are decided.

   To add a hero photograph later, set the --arj-hero-image variable on the
   hero block (Advanced > Additional CSS class is not needed):
       .arj-hero { --arj-hero-image: url("/path/to/photo.jpg"); }
   The dark gradient above it keeps the headline readable.
   ========================================================================== */

.arj-section {
	--arj-ink: #16263a;
	--arj-text: #1f2a37;
	--arj-muted: #5c6b7a;
	--arj-accent: #c2553f;
	--arj-accent-dark: #a4432f;
	--arj-teal: #2f6f6b;
	--arj-ochre: #a8763a;
	--arj-sand: #f6f1e8;
	--arj-mist: #eef2f6;
	--arj-line: #dde3ea;
	--arj-radius: 12px;

	box-sizing: border-box;
	color: var(--arj-text);
	overflow-wrap: break-word;
	padding-block: clamp(3rem, 7vw, 5.5rem);
}

.arj-section.alignfull {
	padding-inline: clamp(1.1rem, 5vw, 2.5rem);
}

/* --- Shared section header ------------------------------------------------ */

.arj-section .arj-eyebrow {
	margin: 0 0 0.75rem;
	color: var(--arj-accent);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.arj-section .arj-section__title {
	margin: 0 0 0.75rem;
	color: var(--arj-ink);
	font-size: clamp(1.65rem, 4vw, 2.4rem);
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.arj-section .arj-lead {
	margin: 0 0 2.25rem;
	max-width: 44rem;
	color: var(--arj-muted);
	font-size: 1.0625rem;
	line-height: 1.75;
}

.arj-section .arj-note {
	margin: 1.75rem 0 0;
	color: var(--arj-muted);
	font-size: 0.85rem;
}

/* Equal-height cards inside the column grids. */
.arj-section .arj-grid > .wp-block-column {
	display: flex;
	flex-direction: column;
}

.arj-section .arj-grid > .wp-block-column > .arj-card,
.arj-section .arj-grid > .wp-block-column > .arj-tile,
.arj-section .arj-grid > .wp-block-column > .arj-dest {
	flex: 1 1 auto;
}

/* --- 1. Hero -------------------------------------------------------------- */

.arj-hero {
	background-color: var(--arj-ink);
	background-image:
		linear-gradient(135deg, rgba(26, 54, 84, 0.92) 0%, rgba(17, 33, 51, 0.94) 55%, rgba(11, 22, 36, 0.96) 100%),
		var(--arj-hero-image, none);
	background-position: center;
	background-size: cover;
	padding-block: clamp(3.25rem, 11vw, 7rem);
	text-align: center;
}

.arj-hero .arj-eyebrow {
	color: #e8bda9;
}

.arj-hero .arj-hero__title {
	margin: 0 0 0.6rem;
	color: #fff;
	font-size: clamp(2.25rem, 7vw, 4rem);
	letter-spacing: -0.02em;
	line-height: 1.08;
}

.arj-hero .arj-hero__tagline {
	margin: 0 0 1.25rem;
	color: #e8bda9;
	font-size: clamp(1.1rem, 2.6vw, 1.5rem);
	font-weight: 600;
}

.arj-hero .arj-hero__lead {
	margin: 0 auto 2rem;
	max-width: 42rem;
	color: rgba(255, 255, 255, 0.86);
	font-size: clamp(1rem, 1.5vw, 1.125rem);
	line-height: 1.75;
}

.arj-hero .arj-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	justify-content: center;
}

.arj-hero .wp-block-button__link {
	border: 2px solid var(--arj-accent);
	border-radius: 999px;
	background-color: var(--arj-accent);
	color: #fff;
	font-weight: 600;
	padding: 0.85rem 1.9rem;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.arj-hero .wp-block-button__link:hover,
.arj-hero .wp-block-button__link:focus {
	background-color: var(--arj-accent-dark);
	border-color: var(--arj-accent-dark);
	color: #fff;
}

.arj-hero .arj-btn-ghost .wp-block-button__link {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
}

.arj-hero .arj-btn-ghost .wp-block-button__link:hover,
.arj-hero .arj-btn-ghost .wp-block-button__link:focus {
	background-color: rgba(255, 255, 255, 0.12);
	border-color: #fff;
}

/* --- 2. Featured anime routes (cards) ------------------------------------- */

.arj-routes {
	background-color: #fff;
}

.arj-section .arj-card {
	display: flex;
	flex-direction: column;
	padding: 1.6rem 1.4rem 1.4rem;
	border: 1px solid var(--arj-line);
	border-top: 3px solid var(--arj-card-accent, var(--arj-accent));
	border-radius: var(--arj-radius);
	background-color: #fff;
	box-shadow: 0 1px 2px rgba(16, 32, 50, 0.05);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.arj-section .arj-card:hover {
	box-shadow: 0 12px 26px rgba(16, 32, 50, 0.1);
	transform: translateY(-3px);
}

.arj-card-a { --arj-card-accent: var(--arj-accent); }
.arj-card-b { --arj-card-accent: var(--arj-teal); }
.arj-card-c { --arj-card-accent: var(--arj-ochre); }

.arj-section .arj-card__title {
	margin: 0 0 0.35rem;
	color: var(--arj-ink);
	font-size: 1.2rem;
	line-height: 1.3;
}

.arj-section .arj-card__place {
	margin: 0 0 0.85rem;
	color: var(--arj-card-accent, var(--arj-accent));
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.arj-section .arj-card__desc {
	margin: 0 0 1.25rem;
	color: var(--arj-muted);
	font-size: 0.95rem;
	line-height: 1.65;
}

.arj-section .arj-card__note {
	align-self: flex-start;
	margin: auto 0 0;
	padding: 0.32rem 0.75rem;
	border-radius: 999px;
	background-color: var(--arj-mist);
	color: #64707e;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* --- 3. Explore Japan beyond the anime (tiles on sand) -------------------- */

.arj-beyond {
	background-color: var(--arj-sand);
}

.arj-section .arj-tile {
	display: flex;
	flex-direction: column;
	padding: 1.6rem 1.5rem;
	border: 1px solid rgba(22, 38, 58, 0.08);
	border-radius: var(--arj-radius);
	background-color: #fff;
	box-shadow: 0 1px 2px rgba(16, 32, 50, 0.04);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.arj-section .arj-tile:hover {
	box-shadow: 0 10px 22px rgba(16, 32, 50, 0.09);
	transform: translateY(-2px);
}

.arj-section .arj-tile__title {
	margin: 0;
	color: var(--arj-ink);
	font-size: 1.15rem;
	line-height: 1.3;
}

.arj-section .arj-tile__title::after {
	background-color: var(--arj-accent);
	border-radius: 2px;
	content: "";
	display: block;
	height: 3px;
	margin: 0.7rem 0 0;
	width: 2.25rem;
}

.arj-section .arj-tile__desc {
	margin: 0.9rem 0 0;
	color: var(--arj-muted);
	font-size: 0.95rem;
	line-height: 1.65;
}

/* --- 4. Explore by destination (region picker) ---------------------------- */

.arj-destinations {
	background-color: #fff;
}

.arj-destinations .arj-grid-dest {
	margin-bottom: 1rem;
}

.arj-section .arj-dest {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 5.25rem;
	padding: 1.1rem 1.2rem;
	border: 1px solid var(--arj-line);
	border-left: 4px solid var(--arj-ink);
	border-radius: 10px;
	background-color: #fff;
	transition: background-color 0.18s ease, border-left-color 0.18s ease;
}

.arj-section .arj-dest:hover {
	background-color: var(--arj-mist);
	border-left-color: var(--arj-accent);
}

.arj-section .arj-dest__name {
	margin: 0 0 0.3rem;
	color: var(--arj-ink);
	font-size: 1.05rem;
	line-height: 1.3;
}

.arj-section .arj-dest__desc {
	margin: 0;
	color: var(--arj-muted);
	font-size: 0.875rem;
	line-height: 1.55;
}

/* --- 5. Plan your anime trip (numbered list) ------------------------------ */

.arj-plan {
	background-color: var(--arj-mist);
	counter-reset: arj-step;
}

.arj-plan .arj-plan__grid {
	margin-bottom: 0;
}

.arj-section .arj-plan__item {
	counter-increment: arj-step;
	padding: 1.35rem 0;
	border-top: 1px solid rgba(22, 38, 58, 0.14);
}

.arj-section .arj-plan__item::before {
	color: var(--arj-accent);
	content: counter(arj-step, decimal-leading-zero);
	display: block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	margin-bottom: 0.4rem;
}

.arj-section .arj-plan__title {
	margin: 0 0 0.3rem;
	color: var(--arj-ink);
	font-size: 1.1rem;
	line-height: 1.3;
}

.arj-section .arj-plan__desc {
	margin: 0;
	color: var(--arj-muted);
	font-size: 0.95rem;
	line-height: 1.65;
}

/* --- 6. Why Anime Routes Japan -------------------------------------------- */

/* This band was dark navy with white text until 25 October 2026, when the home
   pages were given the Mount Fuji background and every section went
   transparent so the photograph could show through. The white text stayed
   behind and sat on a pale background until 29 October. The band carries no
   background of its own now, and the colours live in one place: the scoped
   block further down, which states every element rather than relying on
   inheritance. Nothing here sets a text colour. */

.arj-section .arj-pullquote {
	margin: 1.5rem 0 2rem;
	max-width: 36rem;
	padding-left: 1.15rem;
	border-left: 4px solid var(--arj-accent);
	font-size: clamp(1.35rem, 3.4vw, 2rem);
	font-weight: 700;
	line-height: 1.35;
}

.arj-section .arj-why__body {
	margin: 0 0 1.1rem;
	max-width: 44rem;
	line-height: 1.8;
}

/* --- 7. Latest guides ----------------------------------------------------- */

.arj-latest {
	background-color: #fff;
}

.arj-section .arj-latest__panel {
	padding: clamp(1.1rem, 3vw, 1.75rem);
	border: 1px solid var(--arj-line);
	border-radius: var(--arj-radius);
	background-color: #fff;
}

.arj-section .arj-latest__list {
	margin: 0;
	padding: 0;
}

.arj-section .arj-latest__list li {
	list-style: none;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--arj-line);
}

.arj-section .arj-latest__list li:first-child {
	padding-top: 0;
}

.arj-section .arj-latest__list li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.arj-section .arj-latest__list .wp-block-latest-posts__post-title {
	color: var(--arj-ink);
	font-size: 1.05rem;
	font-weight: 600;
}

.arj-section .arj-latest__list .wp-block-latest-posts__post-date {
	display: block;
	margin-top: 0.25rem;
	color: var(--arj-muted);
	font-size: 0.8rem;
}

/* Until a guide is published the Latest Posts block renders an empty list.
   Hide that list and the panel around it so only the note below is shown.
   As soon as one post exists in the selected categories the list is no
   longer empty, so both rules stop matching and the panel returns. */
.arj-section .arj-latest__list:empty {
	display: none;
}

.arj-section .arj-latest__panel:has(.arj-latest__list:empty) {
	display: none;
}

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

@media (max-width: 781px) {
	.arj-section .arj-lead {
		margin-bottom: 1.75rem;
	}

	/* Keep body copy at a comfortable reading size on phones. */
	.arj-section .arj-card__desc,
	.arj-section .arj-tile__desc,
	.arj-section .arj-plan__desc,
	.arj-section .arj-dest__desc {
		font-size: 1rem;
	}

	.arj-section .arj-dest {
		min-height: 0;
	}

	.arj-hero .arj-hero__actions .wp-block-button {
		width: 100%;
	}

	.arj-hero .wp-block-button__link {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {
	.arj-section .arj-card,
	.arj-section .arj-tile,
	.arj-section .arj-dest,
	.arj-hero .wp-block-button__link {
		transition: none;
	}

	.arj-section .arj-card:hover,
	.arj-section .arj-tile:hover {
		transform: none;
	}
}

/* ==========================================================================
   Anime Routes Japan - hub pages (Anime / Destinations)

   Scoped to the .arj-hub* classes used on those two pages only. These rules
   are independent from the .arj-section rules above, so editing one design
   never affects the other. Colors reuse the same brand tokens.
   ========================================================================== */

.arj-hub {
	--arj-hub-ink: #16263a;
	--arj-hub-text: #1f2a37;
	--arj-hub-muted: #5c6b7a;
	--arj-hub-accent: #c2553f;
	--arj-hub-teal: #2f6f6b;
	--arj-hub-ochre: #a8763a;
	--arj-hub-sand: #f6f1e8;
	--arj-hub-mist: #eef2f6;
	--arj-hub-line: #dde3ea;
	--arj-hub-radius: 12px;

	box-sizing: border-box;
	color: var(--arj-hub-text);
	overflow-wrap: break-word;
	padding-block: clamp(2.75rem, 6.5vw, 4.75rem);
}

.arj-hub.alignfull {
	padding-inline: clamp(1.1rem, 5vw, 2.5rem);
}

/* --- Shared type ---------------------------------------------------------- */

.arj-hub .arj-hub-eyebrow {
	margin: 0 0 0.7rem;
	color: var(--arj-hub-accent);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.arj-hub .arj-hub-h2 {
	margin: 0 0 0.7rem;
	color: var(--arj-hub-ink);
	font-size: clamp(1.55rem, 3.6vw, 2.2rem);
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.arj-hub .arj-hub-lead {
	margin: 0 0 2.25rem;
	max-width: 44rem;
	color: var(--arj-hub-muted);
	font-size: 1.0625rem;
	line-height: 1.75;
}

.arj-hub .arj-hub-note {
	margin: 1.6rem 0 0;
	color: var(--arj-hub-muted);
	font-size: 0.85rem;
}

/* Equal-height items inside the column grids. */
.arj-hub .arj-hub-grid > .wp-block-column {
	display: flex;
	flex-direction: column;
}

.arj-hub .arj-hub-grid > .wp-block-column > .arj-hub-card,
.arj-hub .arj-hub-grid > .wp-block-column > .arj-hub-tile,
.arj-hub .arj-hub-grid > .wp-block-column > .arj-hub-region {
	flex: 1 1 auto;
}

/* --- Hero ----------------------------------------------------------------- */

.arj-hub-hero {
	background-color: var(--arj-hub-ink);
	background-image:
		linear-gradient(135deg, rgba(26, 54, 84, 0.92) 0%, rgba(17, 33, 51, 0.94) 55%, rgba(11, 22, 36, 0.96) 100%),
		var(--arj-hub-hero-image, none);
	background-position: center;
	background-size: cover;
	padding-block: clamp(3rem, 9vw, 5.5rem);
	text-align: center;
}

.arj-hub-hero .arj-hub-eyebrow {
	color: #e8bda9;
}

.arj-hub .arj-hub-title {
	margin: 0 0 0.9rem;
	color: #fff;
	font-size: clamp(2rem, 6vw, 3.25rem);
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.arj-hub .arj-hub-lead-hero {
	margin: 0 auto;
	max-width: 44rem;
	color: rgba(255, 255, 255, 0.86);
}

/* --- Route cards ---------------------------------------------------------- */

.arj-hub-routes {
	background-color: #fff;
}

.arj-hub .arj-hub-card {
	display: flex;
	flex-direction: column;
	padding: 1.5rem 1.35rem 1.35rem;
	border: 1px solid var(--arj-hub-line);
	border-top: 3px solid var(--arj-hub-card-accent, var(--arj-hub-accent));
	border-radius: var(--arj-hub-radius);
	background-color: #fff;
	box-shadow: 0 1px 2px rgba(16, 32, 50, 0.05);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.arj-hub .arj-hub-card:hover {
	box-shadow: 0 12px 26px rgba(16, 32, 50, 0.1);
	transform: translateY(-3px);
}

.arj-hub-card-a { --arj-hub-card-accent: var(--arj-hub-accent); }
.arj-hub-card-b { --arj-hub-card-accent: var(--arj-hub-teal); }
.arj-hub-card-c { --arj-hub-card-accent: var(--arj-hub-ochre); }

.arj-hub .arj-hub-card-title {
	margin: 0 0 0.35rem;
	color: var(--arj-hub-ink);
	font-size: 1.15rem;
	line-height: 1.3;
}

.arj-hub .arj-hub-card-place {
	margin: 0 0 0.8rem;
	color: var(--arj-hub-card-accent, var(--arj-hub-accent));
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.arj-hub .arj-hub-card-desc {
	margin: 0 0 1.2rem;
	color: var(--arj-hub-muted);
	font-size: 0.95rem;
	line-height: 1.65;
}

.arj-hub .arj-hub-card-badge {
	align-self: flex-start;
	margin: auto 0 0;
	padding: 0.32rem 0.75rem;
	border-radius: 999px;
	background-color: var(--arj-hub-mist);
	color: #64707e;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* --- Category feed panel -------------------------------------------------- */

.arj-hub-browse {
	background-color: var(--arj-hub-sand);
}

.arj-hub .arj-hub-panel {
	padding: clamp(1.1rem, 3vw, 1.75rem);
	border: 1px solid var(--arj-hub-line);
	border-radius: var(--arj-hub-radius);
	background-color: #fff;
}

.arj-hub .arj-hub-feed {
	margin: 0;
	padding: 0;
}

/* With no posts yet the block renders an empty list; hide it so the panel
   shows only the explanatory line, and hide that line once posts exist. */
.arj-hub .arj-hub-feed:empty {
	display: none;
}

.arj-hub .arj-hub-feed:not(:empty) + .arj-hub-empty {
	display: none;
}

.arj-hub .arj-hub-feed li {
	list-style: none;
	padding: 0.8rem 0;
	border-bottom: 1px solid var(--arj-hub-line);
}

.arj-hub .arj-hub-feed li:first-child {
	padding-top: 0;
}

.arj-hub .arj-hub-feed li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.arj-hub .arj-hub-feed .wp-block-latest-posts__post-title {
	color: var(--arj-hub-ink);
	font-size: 1.05rem;
	font-weight: 600;
}

.arj-hub .arj-hub-feed .wp-block-latest-posts__post-date {
	display: block;
	margin-top: 0.25rem;
	color: var(--arj-hub-muted);
	font-size: 0.8rem;
}

.arj-hub .arj-hub-empty {
	margin: 0;
	color: var(--arj-hub-muted);
	font-size: 0.95rem;
	line-height: 1.7;
}

/* --- Beyond the pilgrimage (tiles) ---------------------------------------- */

.arj-hub-beyond {
	background-color: var(--arj-hub-mist);
}

.arj-hub .arj-hub-tile {
	display: flex;
	flex-direction: column;
	padding: 1.5rem 1.4rem;
	border: 1px solid rgba(22, 38, 58, 0.08);
	border-radius: var(--arj-hub-radius);
	background-color: #fff;
	box-shadow: 0 1px 2px rgba(16, 32, 50, 0.04);
}

.arj-hub .arj-hub-tile-title {
	margin: 0;
	color: var(--arj-hub-ink);
	font-size: 1.1rem;
	line-height: 1.3;
}

.arj-hub .arj-hub-tile-title::after {
	background-color: var(--arj-hub-accent);
	border-radius: 2px;
	content: "";
	display: block;
	height: 3px;
	margin: 0.65rem 0 0;
	width: 2.25rem;
}

.arj-hub .arj-hub-tile-desc {
	margin: 0.85rem 0 0;
	color: var(--arj-hub-muted);
	font-size: 0.95rem;
	line-height: 1.65;
}

/* --- Region picker -------------------------------------------------------- */

.arj-hub-regions {
	background-color: #fff;
}

.arj-hub-regions .arj-hub-grid {
	margin-bottom: 1rem;
}

.arj-hub .arj-hub-region {
	display: flex;
	flex-direction: column;
	padding: 1.15rem 1.25rem;
	border: 1px solid var(--arj-hub-line);
	border-left: 4px solid var(--arj-hub-ink);
	border-radius: 10px;
	background-color: #fff;
	transition: background-color 0.18s ease, border-left-color 0.18s ease;
}

.arj-hub .arj-hub-region:hover {
	background-color: var(--arj-hub-mist);
	border-left-color: var(--arj-hub-accent);
}

.arj-hub .arj-hub-region-name {
	margin: 0 0 0.35rem;
	color: var(--arj-hub-ink);
	font-size: 1.1rem;
	line-height: 1.3;
}

.arj-hub .arj-hub-region-desc {
	margin: 0;
	color: var(--arj-hub-muted);
	font-size: 0.9rem;
	line-height: 1.6;
}

/* --- Planning steps ------------------------------------------------------- */

.arj-hub-plan {
	background-color: var(--arj-hub-sand);
	counter-reset: arj-hub-step;
}

.arj-hub-plan .arj-hub-steps {
	margin-bottom: 0;
}

.arj-hub .arj-hub-step {
	counter-increment: arj-hub-step;
	padding: 1.3rem 0;
	border-top: 1px solid rgba(22, 38, 58, 0.14);
}

.arj-hub .arj-hub-step::before {
	color: var(--arj-hub-accent);
	content: counter(arj-hub-step, decimal-leading-zero);
	display: block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	margin-bottom: 0.35rem;
}

.arj-hub .arj-hub-step-title {
	margin: 0 0 0.3rem;
	color: var(--arj-hub-ink);
	font-size: 1.1rem;
	line-height: 1.3;
}

.arj-hub .arj-hub-step-desc {
	margin: 0;
	color: var(--arj-hub-muted);
	font-size: 0.95rem;
	line-height: 1.65;
}

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

@media (max-width: 781px) {
	.arj-hub .arj-hub-lead {
		margin-bottom: 1.75rem;
	}

	.arj-hub .arj-hub-card-desc,
	.arj-hub .arj-hub-tile-desc,
	.arj-hub .arj-hub-region-desc,
	.arj-hub .arj-hub-step-desc {
		font-size: 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.arj-hub .arj-hub-card,
	.arj-hub .arj-hub-region {
		transition: none;
	}

	.arj-hub .arj-hub-card:hover {
		transform: none;
	}
}

/* ==========================================================================
   Anime Routes Japan - in-page anchor offset

   The Kadence sticky header is fixed and 80px tall on both desktop and
   mobile, so a heading reached through an in-page "#anchor" link would stop
   directly underneath it. scroll-margin-top shifts only the scroll stop, it
   never changes layout, spacing or anything that is painted. The rule is
   limited to headings that actually carry an HTML anchor, inside the
   article body: Kadence prints .entry-content.single-content for singular
   posts and pages only, so archives, widgets, header and footer are not
   touched. Any future post or page gets the correct offset automatically.
   ========================================================================== */

.entry-content.single-content h2[id],
.entry-content.single-content h3[id],
.entry-content.single-content h4[id] {
	scroll-margin-top: 100px;
}

/* ==========================================================================
   Comparison tables (.arj-compare)
   Added 12 October 2026 with the Attack on Titan guide's comparison tables.

   A four column comparison squeezed into a 375px phone gives 78px columns and
   rows nearly 300px tall, which is technically inside the viewport and useless
   to read. Below the tablet breakpoint the table keeps a readable minimum width
   and scrolls inside its own figure instead. WordPress core already sets
   overflow-x:auto on figure.wp-block-table, so the page itself never gains a
   horizontal scrollbar; only the table does, and only on narrow screens.
   ========================================================================== */

.entry-content .wp-block-table.arj-compare {
	margin-block: 1.5em;
}

.entry-content .wp-block-table.arj-compare table {
	font-size: 0.95rem;
}

.entry-content .wp-block-table.arj-compare th,
.entry-content .wp-block-table.arj-compare td {
	padding: 0.6em 0.75em;
	vertical-align: top;
	line-height: 1.5;
}

.entry-content .wp-block-table.arj-compare thead th {
	font-weight: 600;
}

.entry-content .wp-block-table.arj-compare tbody th,
.entry-content .wp-block-table.arj-compare tbody td:first-child {
	font-weight: 600;
}

.entry-content .wp-block-table.arj-compare figcaption {
	font-size: 0.85rem;
}

@media (max-width: 767px) {

	.entry-content .wp-block-table.arj-compare {
		/* The scroll affordance: a hairline that only appears while the table
		   has somewhere left to scroll is not worth the JavaScript, so use a
		   static edge shadow instead. */
		background:
			linear-gradient(to right, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0)) 100% 0 / 12px 100% no-repeat;
	}

	.entry-content .wp-block-table.arj-compare table {
		table-layout: auto;
		min-width: 560px;
		font-size: 0.9rem;
	}

	.entry-content .wp-block-table.arj-compare th,
	.entry-content .wp-block-table.arj-compare td {
		padding: 0.55em 0.65em;
	}
}

@media (max-width: 767px) {

	/* The label column is the one the reader scans down, so it must not be
	   allowed to shrink until words break mid-syllable ("Whic / h trip"). */
	.entry-content .wp-block-table.arj-compare th:first-child,
	.entry-content .wp-block-table.arj-compare td:first-child {
		min-width: 6.5em;
	}

	.entry-content .wp-block-table.arj-compare th,
	.entry-content .wp-block-table.arj-compare td {
		overflow-wrap: normal;
	}
}

/* ==========================================================================
   Anime Routes Japan - home page palette and brand mark
   Added 13 October 2026.

   Everything below is scoped to the two home pages, English 954 and
   Traditional Chinese 1038, so the guides, the Anime and Destinations hubs
   and the standing pages keep the colors they already had. The rules work by
   redefining the custom properties the home blocks already consume and then
   restating only the handful of declarations that carried a hard-coded color,
   which is why no !important is needed anywhere: a page-id prefix always
   outranks the unprefixed rule it overrides.

   To revert, delete this block. Nothing above it was edited.

   Palette
     #21344C  headings and body text
     #526071  secondary copy
     #A63E68  primary action, #893253 on hover/focus
     #FFF0F5  pale sakura      #F6F2FA  pale wisteria
     #FFFAFC  warm white       #EAD7DF  hairline
     #356E6B  supporting teal  #866027  supporting ochre
   ========================================================================== */

body.arj-page-home .arj-section {
	--arj-ink: #21344C;
	--arj-text: #21344C;
	--arj-muted: #526071;
	--arj-accent: #A63E68;
	--arj-accent-dark: #893253;
	--arj-teal: #356E6B;
	--arj-ochre: #866027;
	--arj-sand: #FFF0F5;
	--arj-mist: #F6F2FA;
	--arj-line: #EAD7DF;
	--arj-radius: 16px;

	/* New in this block. */
	--arj-paper: #FFFAFC;
	--arj-sakura: #FFF0F5;
	--arj-deep: #21344C;
}

/* --- Section backgrounds -------------------------------------------------- */

body.arj-page-home .arj-routes,
body.arj-page-home .arj-destinations,
body.arj-page-home .arj-latest {
	background-color: var(--arj-paper);
}

/* --- 1. Hero -------------------------------------------------------------- */

body.arj-page-home .arj-hero {
	background-color: var(--arj-sakura);
	background-image: linear-gradient(162deg, #FFF6F9 0%, #FFF0F5 44%, #F6F2FA 100%);
	border-bottom: 1px solid var(--arj-line);
	padding-block: clamp(3.5rem, 11vw, 7.25rem);
}

body.arj-page-home .arj-hero .arj-eyebrow {
	color: var(--arj-accent);
}

body.arj-page-home .arj-hero .arj-hero__title {
	color: var(--arj-ink);
}

body.arj-page-home .arj-hero .arj-hero__tagline {
	color: var(--arj-accent);
}

body.arj-page-home .arj-hero .arj-hero__lead {
	color: var(--arj-muted);
}

/* The lead carries the one link in the hero: the way through to the comparison
   panel on /anime/. It takes the brand action colour and an underline so it
   reads as a link on the pale gradient rather than as emphasis. */
body.arj-page-home .arj-hero .arj-hero__lead a {
	color: #893253;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

body.arj-page-home .arj-hero .arj-hero__lead a:hover,
body.arj-page-home .arj-hero .arj-hero__lead a:focus {
	color: #A63E68;
	text-decoration-thickness: 2px;
}

body.arj-page-home .arj-hero .arj-hero__lead a:focus-visible {
	outline-color: #893253;
}

/* --- 2. The brand mark beside the site name ------------------------------- */

/* The icon and the wordmark read as one unit: a flex row that stays a row at
   every width, so when the name wraps to two lines on a phone the icon keeps
   its place beside them instead of being left alone on a line of its own. */
body.arj-page-home .arj-hero .arj-hero__brand {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: clamp(0.65rem, 2.2vw, 1.15rem);
	margin: 0 0 0.6rem;
}

body.arj-page-home .arj-hero .arj-hero__mark {
	flex: 0 0 auto;
	margin: 0;
	line-height: 0;
}

body.arj-page-home .arj-hero .arj-hero__mark img {
	display: block;
	/* 46px on a 375px phone, 76px from 1000px up. The source is a circle on a
	   square canvas, so clipping to a circle removes the white corners
	   without cropping any of the artwork. */
	width: clamp(46px, 7.6vw, 76px);
	height: auto;
	border-radius: 50%;
}

body.arj-page-home .arj-hero .arj-hero__brand .arj-hero__title {
	margin: 0;
	text-align: left;
}

/* --- 3. Buttons ----------------------------------------------------------- */

body.arj-page-home .arj-hero .wp-block-button__link {
	border-color: var(--arj-accent);
	background-color: var(--arj-accent);
	color: #fff;
}

body.arj-page-home .arj-hero .wp-block-button__link:hover,
body.arj-page-home .arj-hero .wp-block-button__link:focus {
	border-color: var(--arj-accent-dark);
	background-color: var(--arj-accent-dark);
	color: #fff;
}

/* The second button is an outline on paper, not a tint of the background, so
   it is still obviously a button on a phone where nothing is ever hovered. */
body.arj-page-home .arj-hero .arj-btn-ghost .wp-block-button__link {
	border-color: var(--arj-accent);
	background-color: var(--arj-paper);
	color: var(--arj-accent);
}

body.arj-page-home .arj-hero .arj-btn-ghost .wp-block-button__link:hover,
body.arj-page-home .arj-hero .arj-btn-ghost .wp-block-button__link:focus {
	border-color: var(--arj-accent-dark);
	background-color: var(--arj-sakura);
	color: var(--arj-accent-dark);
}

/* --- 4. Section headings -------------------------------------------------- */

body.arj-page-home .arj-section .arj-section__title::after {
	content: "";
	display: block;
	width: 2.75rem;
	height: 3px;
	margin: 0.6rem 0 0;
	border-radius: 2px;
	background-image: linear-gradient(90deg, #A63E68 0%, #F0B9CE 100%);
}

/* --- 5. Cards, tiles and rows --------------------------------------------- */

body.arj-page-home .arj-section .arj-tile,
body.arj-page-home .arj-section .arj-latest__panel {
	border-color: var(--arj-line);
	background-color: #fff;
	box-shadow: 0 1px 2px rgba(33, 52, 76, 0.05);
}

/* The card keeps its 3px top edge in the series color, so only the other
   three sides are restated here. A border-color shorthand would flatten the
   top edge to the hairline and take the rose / teal / ochre coding with it. */
body.arj-page-home .arj-section .arj-card {
	border-right-color: var(--arj-line);
	border-bottom-color: var(--arj-line);
	border-left-color: var(--arj-line);
	background-color: #fff;
	box-shadow: 0 1px 2px rgba(33, 52, 76, 0.05);
}

body.arj-page-home .arj-section .arj-card:hover {
	box-shadow: 0 12px 26px rgba(33, 52, 76, 0.1);
}

body.arj-page-home .arj-section .arj-tile:hover {
	box-shadow: 0 10px 22px rgba(33, 52, 76, 0.09);
}

/* "Read the guide" is the only affordance on a card once hover is gone, so it
   carries the action color rather than the neutral grey it had. */
body.arj-page-home .arj-section .arj-card__note {
	background-color: var(--arj-sakura);
	color: var(--arj-accent-dark);
}

body.arj-page-home .arj-section .arj-dest {
	border-color: var(--arj-line);
	border-left-color: var(--arj-ink);
	background-color: #fff;
}

body.arj-page-home .arj-section .arj-dest:hover {
	background-color: var(--arj-mist);
	border-left-color: var(--arj-accent);
}

body.arj-page-home .arj-section .arj-plan__item {
	border-top-color: var(--arj-line);
}

body.arj-page-home .arj-section .arj-latest__list li {
	border-bottom-color: var(--arj-line);
}

/* --- 6. Why Anime Routes Japan, on the light home page --------------------- */

/* Every piece of ordinary text in this section is the site's dark navy. The
   colours are set element by element rather than once on the parent, because
   the title, the pull quote and the body each carried their own declaration
   and a parent `color` would have left all three white.

   Checked against the darkest part of the Fuji layer at 20% over white, about
   #D1D8DE: #21344C gives about 8.6:1 and #893253 about 6.3:1, so both clear
   4.5:1 with room. No opacity is applied to any text. */

body.arj-page-home .arj-why .arj-eyebrow,
body.arj-page-home .arj-why .arj-section__title,
body.arj-page-home .arj-section .arj-pullquote,
body.arj-page-home .arj-section .arj-why__body,
body.arj-page-home .arj-why h3,
body.arj-page-home .arj-why h4,
body.arj-page-home .arj-why p,
body.arj-page-home .arj-why li,
body.arj-page-home .arj-why strong,
body.arj-page-home .arj-why em,
body.arj-page-home .arj-why blockquote {
	color: #21344C;
}

/* The two accents that marked the section are pale pink, which disappears on a
   light band. They become the brand action colour so the structure still
   reads. */
body.arj-page-home .arj-why .arj-section__title::after {
	background-image: linear-gradient(90deg, #A63E68 0%, rgba(166, 62, 104, 0.2) 100%);
}

body.arj-page-home .arj-section .arj-pullquote {
	border-left-color: #A63E68;
}

/* Links in this section: underlined, and obvious on hover and from the
   keyboard. */
body.arj-page-home .arj-why a {
	color: #21344C;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

body.arj-page-home .arj-why a:hover,
body.arj-page-home .arj-why a:focus {
	color: #893253;
	text-decoration-thickness: 2px;
}

/* --- 7. Keyboard focus ---------------------------------------------------- */

body.arj-page-home .arj-section a:focus-visible {
	outline: 3px solid var(--arj-accent-dark);
	outline-offset: 3px;
}

body.arj-page-home .arj-why a:focus-visible {
	outline-color: #893253;
}

/* ==========================================================================
   Anime Routes Japan - Destinations pages as a region index
   Added 13 October 2026. Scope: Destinations 958 (English) and 1041
   (Traditional Chinese) only; the Anime hubs and the home pages are untouched.

   Each region card now lists the route guides in that region as ordinary
   links. The card itself is still a plain box, so its hover tint is switched
   off here: a whole card that lights up on hover reads as one big link, and
   it is not. The links carry the underline instead, so they read as links on
   a phone where nothing is hovered.

   To revert, delete this block.
   ========================================================================== */

body.arj-page-dest .arj-hub .arj-hub-region:hover {
	background-color: #fff;
	border-left-color: var(--arj-hub-ink);
}

body.arj-page-dest .arj-hub .arj-hub-grid > .wp-block-column > .arj-hub-region {
	/* Cards keep their own height here. Stretched to match a neighbour with
	   five guides, a region with none became a tall empty box. */
	flex: 0 0 auto;
}

body.arj-page-dest .arj-hub .arj-hub-region-guides {
	margin: 0.85rem 0 0;
	padding: 0;
	list-style: none;
}

body.arj-page-dest .arj-hub .arj-hub-region-guides li {
	margin: 0;
	padding: 0.6rem 0;
	border-top: 1px solid var(--arj-hub-line);
	color: var(--arj-hub-muted);
	font-size: 0.9rem;
	line-height: 1.55;
}

body.arj-page-dest .arj-hub .arj-hub-region-guides a {
	color: var(--arj-hub-ink);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

body.arj-page-dest .arj-hub .arj-hub-region-guides a:hover {
	color: #a4432f;
}

body.arj-page-dest .arj-hub a:focus-visible {
	outline: 3px solid var(--arj-hub-ink);
	outline-offset: 2px;
	border-radius: 2px;
}

body.arj-page-dest .arj-hub .arj-hub-region-choose,
body.arj-page-dest .arj-hub .arj-hub-region-empty {
	margin: 0.75rem 0 0;
	color: var(--arj-hub-muted);
	font-size: 0.85rem;
	line-height: 1.55;
}

@media (max-width: 781px) {
	body.arj-page-dest .arj-hub .arj-hub-region-guides li,
	body.arj-page-dest .arj-hub .arj-hub-region-choose,
	body.arj-page-dest .arj-hub .arj-hub-region-empty {
		font-size: 1rem;
	}
}

/* ==========================================================================
   Anime Routes Japan - in-page navigation inside the route guides
   Added 13 October 2026. Scope: single posts. Every rule is namespaced under
   the arj-toc-* classes that the guide bodies carry, so the home pages, the
   hubs and the static pages are untouched.

   The contents list stays a plain list of links to the eleven main sections.
   Under each one a native <details> holds that section's sub-headings, closed
   by default so a phone does not open on a wall of links. The two controls
   are deliberately separate: the summary opens the list, the links move the
   page. No JavaScript is involved.

   To revert, delete this block.
   ========================================================================== */

body.single-post .entry-content .arj-toc {
	margin: 0 0 1.75rem;
	padding: 1.1rem 1.25rem;
	background-color: var(--global-palette8, #f7fafc);
	border: 1px solid var(--global-palette7, #edf2f7);
	border-left: 3px solid var(--global-palette1, #2b6cb0);
	border-radius: 3px;
}

body.single-post .entry-content .arj-toc-help {
	margin: 0 0 0.85rem;
	color: var(--global-palette5, #4a5568);
	font-size: 0.9rem;
	line-height: 1.6;
}

body.single-post .entry-content .arj-toc-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.single-post .entry-content .arj-toc-item {
	margin: 0;
	padding: 0.45rem 0;
	border-top: 1px solid var(--global-palette7, #edf2f7);
}

body.single-post .entry-content .arj-toc-item:first-child {
	padding-top: 0;
	border-top: 0;
}

body.single-post .entry-content .arj-toc-top {
	display: inline-block;
	padding: 0.2rem 0;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

/* The toggle. It opens the list of sub-headings and nothing else: it is not a
   link, and it never moves the page on its own. */
body.single-post .entry-content .arj-toc-sub {
	margin: 0.15rem 0 0;
}

body.single-post .entry-content .arj-toc-sub > summary {
	display: list-item;
	width: fit-content;
	padding: 0.3rem 0.5rem;
	border-radius: 3px;
	color: var(--global-palette5, #4a5568);
	font-size: 0.85rem;
	cursor: pointer;
	list-style-position: inside;
}

body.single-post .entry-content .arj-toc-sub > summary:hover {
	background-color: var(--global-palette7, #edf2f7);
	color: var(--global-palette2, #215387);
}

body.single-post .entry-content .arj-toc-sublist {
	margin: 0.4rem 0 0.35rem 1.4rem;
	padding: 0;
	list-style: disc;
}

body.single-post .entry-content .arj-toc-sublist li {
	margin: 0;
	padding: 0.25rem 0;
	font-size: 0.95rem;
	line-height: 1.5;
}

body.single-post .entry-content .arj-toc-sublist a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

body.single-post .entry-content .arj-toc-back {
	margin: 1.5rem 0 0;
	font-size: 0.85rem;
}

body.single-post .entry-content .arj-toc-back a {
	display: inline-block;
	padding: 0.35rem 0;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

/* The theme hides focus rings site-wide, so the keyboard path through the
   contents list needs its own. */
body.single-post .entry-content .arj-toc a:focus-visible,
body.single-post .entry-content .arj-toc summary:focus-visible,
body.single-post .entry-content .arj-toc-back a:focus-visible {
	outline: 3px solid var(--global-palette1, #2b6cb0);
	outline-offset: 2px;
	border-radius: 2px;
}

/* On a desktop the main header stays on screen as you scroll, so a heading
   arrived at from the contents list has to clear it: the header row is 80px
   high. Below 782px the header is not sticky, and the same gap would waste a
   fifth of a phone screen, so the margin there is only breathing room. If the
   header is ever made sticky on phones too, raise the second value to match
   its height. */
body.single-post .entry-content :is(h2, h3)[id] {
	scroll-margin-top: 6rem;
}

@media (prefers-reduced-motion: no-preference) {
	html:has(body.single-post) {
		scroll-behavior: smooth;
	}
}

/* Phones: the same list, with text and tap targets at reading size. */
@media (max-width: 781px) {
	body.single-post .entry-content .arj-toc {
		padding: 1rem;
	}

	body.single-post .entry-content .arj-toc-help,
	body.single-post .entry-content .arj-toc-sub > summary,
	body.single-post .entry-content .arj-toc-sublist li,
	body.single-post .entry-content .arj-toc-back {
		font-size: 1rem;
	}

	body.single-post .entry-content .arj-toc-item {
		padding: 0.6rem 0;
	}

	body.single-post .entry-content .arj-toc-sub > summary {
		padding: 0.5rem 0.5rem;
	}

	body.single-post .entry-content .arj-toc-sublist li {
		padding: 0.35rem 0;
	}

	body.single-post .entry-content :is(h2, h3)[id] {
		scroll-margin-top: 1.5rem;
	}
}

/* ==========================================================================
   Anime Routes Japan - the shared look: a quiet travel magazine
   Added 14 October 2026 (phase 3). Child theme 1.3.3 -> 1.4.0.

   Phases 1 and 2 gave the two home pages a sakura and indigo palette and left
   the rest of the site on the older terracotta one. This block makes the whole
   site speak the same language:

     #21344C  deep indigo, headings and the brand
     #A63E68  rose, links and anything you act on (#893253 on hover)
     #FFFBF7  warm white, the surface you read on
     #FFF0F5  pale sakura, thin bands and panels only
     #E8DCE3  hairline     #566273 secondary copy    #27323F body copy
     #356E6B  supporting teal   #866027 supporting ochre

   The photographs carry the travel feeling. Nothing here puts a landscape
   behind running text, and no decoration is added to make a page look richer
   than its content.

   Scope: the arj-* classes, the site header and footer, and the body of a
   single post. No bare a / button / h2 selector, no !important.

   To revert: delete this block and set the version back to 1.3.3.
   ========================================================================== */

:root {
	--arj-indigo: #21344C;
	--arj-indigo-soft: #37485E;
	--arj-rose: #A63E68;
	--arj-rose-dark: #893253;
	--arj-warm: #FFFBF7;
	--arj-petal: #FFF0F5;
	--arj-hair: #E8DCE3;
	--arj-copy: #27323F;
	--arj-second: #566273;
}

/* --- The page surface ----------------------------------------------------- */

body.wp-singular,
body.blog,
body.archive,
body.search,
body.error404 {
	background-color: var(--arj-warm);
	color: var(--arj-copy);
}

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

.site-header #main-header {
	background-color: var(--arj-warm);
	border-bottom: 1px solid var(--arj-hair);
}

.site-header .site-main-header-wrap.item-is-stuck {
	box-shadow: 0 1px 10px rgba(33, 52, 76, 0.08);
}

/* The brand mark from the home hero, repeated small beside the site name so
   the site is recognisable on every page. Decoration beside the wordmark, not
   a picture of the name: the name itself stays live text. */
.site-header .site-branding .site-title {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--arj-indigo);
	letter-spacing: -0.01em;
}

.site-header .site-branding .site-title::before {
	content: "";
	flex: 0 0 auto;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	background-image: url("/wp-content/uploads/2026/10/arj-site-icon-512-150x150.png");
	background-size: cover;
	background-position: center;
}

.site-header .header-navigation .menu > li > a {
	color: var(--arj-indigo-soft);
}

.site-header .header-navigation .menu > li > a:hover,
.site-header .header-navigation .menu > li > a:focus {
	color: var(--arj-rose);
}

/* The language in use is marked, so the switcher reads as a pair rather than
   as two more menu items. */
.site-header .header-navigation .menu > li.lang-item > a {
	font-size: 0.95em;
}

.site-header .header-navigation .menu > li.current-lang > a {
	color: var(--arj-indigo);
	text-decoration: underline;
	text-decoration-color: var(--arj-rose);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
}

/* Search stays where it was and keeps working; it is only made visible as a
   control instead of a grey glyph. */
.site-header .search-toggle-open {
	color: var(--arj-indigo-soft);
	border: 1px solid var(--arj-hair);
	border-radius: 999px;
	padding: 0.3rem 0.55rem;
	background-color: #fff;
}

.site-header .search-toggle-open:hover,
.site-header .search-toggle-open:focus {
	color: var(--arj-rose);
	border-color: var(--arj-rose);
}

.site-header a:focus-visible,
.site-header button:focus-visible,
.site-footer a:focus-visible,
.site-footer button:focus-visible {
	outline: 3px solid var(--arj-rose);
	outline-offset: 2px;
	border-radius: 3px;
}

/* --- Footer --------------------------------------------------------------- */

.site-footer {
	background-color: var(--arj-petal);
	border-top: 1px solid var(--arj-hair);
	/* the analytics line below is printed after the footer and carries its own
	   margin inline, so the footer reaches down under it and the band reads as
	   one surface rather than two with a stripe between */
	margin-bottom: -1rem;
	padding-bottom: 1rem;
}

.site-footer .site-middle-footer-wrap {
	padding-top: 2.25rem;
}

.site-footer .footer-navigation .menu {
	gap: 0.35rem 1.6rem;
}

.site-footer .footer-navigation .menu > li > a {
	color: var(--arj-indigo);
	font-size: 1rem;
	text-decoration: underline;
	text-decoration-color: rgba(166, 62, 104, 0.35);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.site-footer .footer-navigation .menu > li > a:hover,
.site-footer .footer-navigation .menu > li > a:focus {
	color: var(--arj-rose-dark);
	text-decoration-color: var(--arj-rose);
}

.site-footer .site-info {
	color: var(--arj-second);
}

.site-footer .site-info .footer-html p {
	margin-bottom: 0.6rem;
	font-size: 0.95rem;
	line-height: 1.65;
}

.site-footer .site-info .footer-html strong {
	color: var(--arj-indigo);
}

.site-footer .site-bottom-footer-wrap {
	padding-bottom: 0.75rem;
}

/* The analytics chooser's permanent entry point is printed at the end of the
   document by the GA4 plugin, after the footer. Giving it the footer surface
   makes it the last item of the footer instead of a stray line below it. The
   plugin, the button and what it does are untouched. */
.arj-consent-settings {
	margin: 0;
	padding: 0 1rem 2rem;
	background-color: var(--arj-petal);
}

.arj-consent-settings .arj-consent-link {
	color: var(--arj-indigo);
	font-size: 0.95rem;
	text-decoration: underline;
	text-decoration-color: rgba(166, 62, 104, 0.35);
	text-underline-offset: 0.25em;
	background: none;
	border: 0;
	cursor: pointer;
}

.arj-consent-settings .arj-consent-link:hover,
.arj-consent-settings .arj-consent-link:focus {
	color: var(--arj-rose-dark);
	text-decoration-color: var(--arj-rose);
}

/* --- The Anime and Destinations hubs -------------------------------------- */

/* The hub blocks already read their colours from these properties, so the two
   hubs join the rest of the site by redefining them. Nothing below restates a
   rule that only needed a colour. */
.arj-hub {
	--arj-hub-ink: #21344C;
	--arj-hub-text: #27323F;
	--arj-hub-muted: #566273;
	--arj-hub-accent: #A63E68;
	--arj-hub-teal: #356E6B;
	--arj-hub-ochre: #866027;
	--arj-hub-sand: #FFF0F5;
	--arj-hub-mist: #F6F2FA;
	--arj-hub-line: #EAD7DF;
	--arj-hub-radius: 16px;
}

/* The two rules in the hub blocks that carry a colour of their own. */
body.arj-page-dest .arj-hub .arj-hub-region-guides a:hover {
	color: var(--arj-rose-dark);
}

.arj-hub .arj-hub-card:hover {
	border-color: var(--arj-hub-accent);
}

/* --- A guide, as something to read ---------------------------------------- */

body.single-post .entry-content {
	color: var(--arj-copy);
	font-size: clamp(1.0625rem, 0.35vw + 1rem, 1.125rem);
	line-height: 1.75;
}

body.single-post .entry-content > p,
body.single-post .entry-content > ul,
body.single-post .entry-content > ol {
	margin-bottom: 1.4em;
}

body.single-post .entry-content :is(h2, h3, h4) {
	color: var(--arj-indigo);
}

body.single-post .entry-content h2 {
	margin-top: 2.6em;
	font-size: clamp(1.5rem, 1.1vw + 1.2rem, 1.75rem);
	line-height: 1.35;
}

/* A hairline above each main section, so the eye can see where one part of
   the guide ends and the next begins without a box around anything. */
body.single-post .entry-content h2[id]:not(#on-this-page) {
	padding-top: 1.5rem;
	border-top: 1px solid var(--arj-hair);
}

body.single-post .entry-content h3 {
	margin-top: 1.9em;
	font-size: clamp(1.2rem, 0.5vw + 1.05rem, 1.35rem);
	line-height: 1.4;
}

body.single-post .entry-content h4 {
	font-size: 1.05rem;
}

body.single-post .entry-content strong {
	color: var(--arj-indigo);
}

body.single-post .entry-content li {
	margin-bottom: 0.45em;
}

body.single-post .entry-content > p a,
body.single-post .entry-content li a,
body.single-post .entry-content td a,
body.single-post .entry-content figcaption a {
	color: var(--arj-rose-dark);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

body.single-post .entry-content > p a:hover,
body.single-post .entry-content li a:hover,
body.single-post .entry-content td a:hover,
body.single-post .entry-content figcaption a:hover {
	color: var(--arj-rose);
}

body.single-post .entry-content a:focus-visible {
	outline: 3px solid var(--arj-rose);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Photographs: full width of the column, caption directly under them in the
   smaller secondary size, so a credit never reads as body text. */
body.single-post .entry-content figure.wp-block-image {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

body.single-post .entry-content figure.wp-block-image img {
	border-radius: 6px;
}

body.single-post .entry-content figcaption {
	margin-top: 0.6rem;
	color: var(--arj-second);
	font-size: 0.875rem;
	line-height: 1.6;
}

/* The credit for the picture at the top of the page sits on its own, small. */
body.single-post .entry-content p.arj-photo-credit {
	margin-top: -0.4rem;
	margin-bottom: 1.6rem;
	color: var(--arj-second);
	font-size: 0.85rem;
	line-height: 1.6;
}

/* Tables: a sakura header band, hairlines, and the same scrolling behaviour
   inside the figure that the guides already rely on at phone width. */
body.single-post .entry-content .wp-block-table table {
	border-color: var(--arj-hair);
}

body.single-post .entry-content .wp-block-table :is(th, td) {
	border-color: var(--arj-hair);
	padding: 0.6rem 0.7rem;
	font-size: 0.95rem;
	line-height: 1.55;
}

body.single-post .entry-content .wp-block-table thead th {
	background-color: var(--arj-petal);
	color: var(--arj-indigo);
}

/* The quick facts box at the top of every guide. */
body.single-post .entry-content .arj-quick-guide {
	border: 1px solid var(--arj-hair);
	border-left: 3px solid var(--arj-rose);
	border-radius: 8px;
	background-color: #fff;
}

body.single-post .entry-content .arj-quick-guide h2 {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
	font-size: 1.1rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

body.single-post .entry-content .arj-affiliate-disclosure {
	border: 1px solid var(--arj-hair);
	border-radius: 8px;
}

/* The picture at the top of a guide, with the title card over it. */
.post-thumbnail.article-post-thumbnail .post-thumbnail-inner img {
	max-height: 60vh;
	object-fit: cover;
}

body.single-post .entry-title {
	color: var(--arj-indigo);
}

body.single-post .entry-meta {
	color: var(--arj-second);
}

/* --- The contents list, in the new colours -------------------------------- */

body.single-post .entry-content .arj-toc {
	background-color: #fff;
	border-color: var(--arj-hair);
	border-left-color: var(--arj-rose);
}

body.single-post .entry-content .arj-toc-title {
	margin: 0 0 0.5rem;
	padding: 0;
	border: 0;
	font-size: 1.05rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

body.single-post .entry-content .arj-toc-help {
	color: var(--arj-second);
}

body.single-post .entry-content .arj-toc-item {
	border-top-color: var(--arj-hair);
}

body.single-post .entry-content .arj-toc-top {
	color: var(--arj-indigo);
}

body.single-post .entry-content .arj-toc-top:hover,
body.single-post .entry-content .arj-toc-sublist a:hover {
	color: var(--arj-rose-dark);
}

body.single-post .entry-content .arj-toc-sublist a {
	color: var(--arj-indigo-soft);
}

body.single-post .entry-content .arj-toc-sub > summary {
	color: var(--arj-second);
}

body.single-post .entry-content .arj-toc-sub > summary:hover {
	background-color: var(--arj-petal);
	color: var(--arj-rose-dark);
}

body.single-post .entry-content .arj-toc-back a {
	color: var(--arj-rose-dark);
}

body.single-post .entry-content .arj-toc a:focus-visible,
body.single-post .entry-content .arj-toc summary:focus-visible,
body.single-post .entry-content .arj-toc-back a:focus-visible {
	outline-color: var(--arj-rose);
}

/* Wide screens have room beside the text for the same contents list to follow
   the reader down the page. It is the one in the article, moved into the left
   margin: there is no second copy, nothing is pinned over the text, and below
   1300px it goes back to being a block at the top of the guide. */
@media (min-width: 1300px) {
	body.single-post .entry-content .arj-toc {
		float: left;
		width: 15.5rem;
		margin-left: -17.5rem;
		margin-top: 0.25rem;
		position: sticky;
		top: 6.5rem;
		max-height: calc(100vh - 9rem);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0.9rem 1rem 1rem;
		font-size: 0.9rem;
	}

	body.single-post .entry-content .arj-toc-help {
		font-size: 0.8rem;
	}

	body.single-post .entry-content .arj-toc-sublist li {
		font-size: 0.85rem;
	}
}

/* --- Photographs on the home pages and the hubs --------------------------- */

/* The hero photograph is shown whole. The subject of the current one is a gate
   that fills the frame from top to bottom, so a letterbox crop would cut off
   its roof and its feet. On a phone the picture is the full frame; on a
   desktop it sits centred in a wider band over a blurred copy of itself - the
   same file, already downloaded, so the band is filled without a second
   request and without inventing scenery the photograph does not contain. */
.arj-hero__photo {
	position: relative;
	margin: 0;
	overflow: hidden;
	line-height: 0;
	background-color: #d9c7ae;
}

.arj-hero__photo img {
	display: block;
	width: 100%;
	height: auto;
}

.arj-hero__credit {
	margin: 0.5rem 0 0;
	padding-inline: clamp(1.1rem, 5vw, 2.5rem);
	color: var(--arj-second);
	font-size: 0.78rem;
	line-height: 1.5;
	text-align: right;
}

.arj-hero__credit a {
	color: inherit;
}

/* Wide and shallow on a desktop, so the site name, the line under it and the
   two buttons are all on the first screen rather than below the photograph. */
@media (min-width: 782px) {
	.arj-hero__photo {
		/* the width has to be stated: with a ratio and a capped height the
		   browser would otherwise narrow the band to match */
		width: 100%;
		aspect-ratio: 2.6 / 1;
		max-height: 40vh;
	}

	.arj-hero__photo::before {
		content: "";
		position: absolute;
		inset: -6%;
		background-image: var(--arj-hero-bg);
		background-size: cover;
		background-position: center 42%;
		filter: blur(34px) saturate(1.05);
	}

	.arj-hero__photo img {
		position: relative;
		width: auto;
		max-width: 100%;
		height: 100%;
		margin-inline: auto;
		object-fit: contain;
	}
}

/* With a photograph above it the sakura band does not need the full height it
   had when it was the top of the page: the name, the line under it and both
   buttons should still be on the first screen. */
.arj-herophoto + .arj-section.arj-hero {
	padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* A card is a photograph with the guide under it. The picture is inside the
   card's own link; the credit under it is not, so a reader can reach the
   photographer's page without leaving through the card. */
.arj-card__photo,
.arj-hub-card__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 10px 10px 0 0;
	margin-bottom: 0.9rem;
	background-color: var(--arj-petal);
}

.arj-card__credit,
.arj-hub-card__credit,
.arj-hub-region__credit {
	margin: 0.4rem 0 0;
	color: var(--arj-second);
	/* 0.72rem rendered at 11.5px, measured at 1280px on 23 October 2026. A photo credit is small
	   type by nature, but not below 12px. */
	font-size: max(0.76rem, 12px);
	line-height: 1.5;
}

.arj-card__credit a,
.arj-hub-card__credit a,
.arj-hub-region__credit a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* The card keeps its own padding, so the picture is pulled out to the card's
   edges and the card clips it to its corner radius. The coloured rule along
   the top of the card stays above the photograph. */
.arj-section .arj-card:has(.arj-card__photo),
.arj-hub .arj-hub-card:has(.arj-hub-card__photo) {
	padding-top: 0;
	overflow: hidden;
}

.arj-section .arj-card:has(.arj-card__photo) .arj-card__photo {
	margin: 0 -1.4rem 1rem;
	/* the theme caps every image at the width of its box, which is the card
	   minus its padding; this picture is meant to reach the card's edges */
	width: calc(100% + 2.8rem);
	max-width: none;
	border-radius: 0;
}

.arj-hub .arj-hub-card:has(.arj-hub-card__photo) .arj-hub-card__photo {
	margin: 0 -1.35rem 1rem;
	width: calc(100% + 2.7rem);
	max-width: none;
	border-radius: 0;
}

.arj-hub-region__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 8px;
	margin: 0 0 0.9rem;
}

/* --- Phones --------------------------------------------------------------- */

@media (max-width: 781px) {
	.site-header .site-branding .site-title {
		font-size: 1.25rem;
	}

	body.single-post .entry-content h2 {
		margin-top: 2.1em;
	}

	.arj-card__credit,
	.arj-hub-card__credit,
	.arj-hub-region__credit {
		font-size: 0.78rem;
	}

	.arj-hero__credit {
		font-size: 0.72rem;
		text-align: left;
	}
}

/* ==========================================================================
   Anime Routes Japan - the region links on the home pages
   Added 14 October 2026. Five of the nine regions have guides; each of those
   cards now carries a link into that region on the Destinations page, and the
   four without one say so in plain words.
   ========================================================================== */

.arj-section .arj-dest__go {
	margin: 0.7rem 0 0;
	font-size: 0.92rem;
	line-height: 1.5;
}

.arj-section .arj-dest__go a {
	color: var(--arj-rose-dark);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.arj-section .arj-dest__go a:hover,
.arj-section .arj-dest__go a:focus {
	color: var(--arj-rose);
}

.arj-section .arj-dest__go a::after {
	content: " \2192";
}

.arj-section .arj-dest__empty {
	margin: 0.7rem 0 0;
	color: var(--arj-second);
	font-size: 0.86rem;
	line-height: 1.5;
}

/* ==========================================================================
   Anime Routes Japan - phones
   Added 14 October 2026. The desktop stays as it is; this block only changes
   what a page does below 768px, where the problems were: a 24px gutter eating
   a line of text, a title set at desktop size over six lines, the quick facts
   running label into value, and tap targets the size of the text they sit on.

   To revert, delete this block.
   ========================================================================== */

@media (max-width: 767px) {
	/* A line of text gets the width of the phone, less a 16px gutter. The
	   article box sits inside the container, so both are trimmed. */
	.content-container.site-container,
	.site-header .site-container,
	.site-footer .site-container {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	body.single-post .entry-content-wrap {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	/* A long English guide title is a block of words, not a column of them. */
	body.single-post .entry-title {
		font-size: 1.7rem;
		line-height: 1.25;
	}

	body.single-post .entry-meta {
		font-size: 0.85rem;
	}

	/* The picture credit stays complete and legible, but compact enough that
	   the lead is still near the top of the page. */
	.arj-hero__credit {
		margin-top: 0.45rem;
		font-size: 0.7rem;
		line-height: 1.5;
	}

	.arj-section.arj-hero .arj-eyebrow {
		font-size: 0.68rem;
		letter-spacing: 0.1em;
	}

	/* Centred text is harder to read down a narrow column. */
	.arj-section .arj-hero__lead,
	.arj-section .arj-lead {
		text-align: left;
	}

	.arj-hero__actions .wp-block-button__link {
		padding-block: 0.8rem;
	}

	/* Quick facts: the label above the value, one row per fact. */
	body.single-post .entry-content .arj-quick-guide {
		padding: 1rem;
	}

	body.single-post .entry-content .arj-quick-guide ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	body.single-post .entry-content .arj-quick-guide li {
		margin: 0;
		padding: 0.6rem 0;
		border-top: 1px solid var(--arj-hair);
	}

	body.single-post .entry-content .arj-quick-guide li:first-child {
		padding-top: 0.2rem;
		border-top: 0;
	}

	body.single-post .entry-content .arj-quick-guide li > strong:first-child {
		display: block;
		margin-bottom: 0.1rem;
		color: var(--arj-rose-dark);
		font-size: 0.78rem;
		font-weight: 700;
		letter-spacing: 0.05em;
		text-transform: uppercase;
	}

	/* Things you tap get something to tap. */
	.site-header .menu-toggle-open {
		padding: 0.5rem;
	}

	.site-header .search-toggle-open {
		padding: 0.45rem 0.7rem;
	}

	.site-footer .footer-navigation .menu > li > a {
		display: inline-block;
		padding: 0.55rem 0;
	}

	.arj-card__credit a,
	.arj-hub-card__credit a,
	.arj-hub-region__credit a,
	.arj-hero__credit a {
		display: inline-block;
		padding: 0.2rem 0;
	}

	.arj-section .arj-dest__go a {
		display: inline-block;
		padding: 0.25rem 0;
	}
}

@media (max-width: 480px) {
	.arj-hero__title {
		font-size: 2.1rem;
		line-height: 1.15;
	}

	body.single-post .entry-content h2 {
		font-size: 1.4rem;
	}

	body.single-post .entry-content h3 {
		font-size: 1.15rem;
	}
}

/* --- Language switch: where the link goes when there is no translation ----- */

/* Polylang adds .no-translation to the switcher item on a page that has no
   counterpart, and sends it to the other edition's home page. functions.php
   appends a note to that item's label; it is set small so the header keeps its
   single line of menu items and reads as a note rather than a second link. */
.lang-item.no-translation > a .arj-lang-note {
	display: block;
	font-size: 0.78em;
	line-height: 1.3;
	font-weight: 400;
	max-width: 14em;
}

.site-header .header-navigation .menu > li.lang-item.no-translation > a {
	line-height: 1.25;
}

/* ==========================================================================
   Phase 6 (18 October 2026): the work finder, featured cards, breadcrumbs,
   the phone language switch, and shared controls. Appended; nothing above
   was edited except the version in the header. It reads the site palette
   defined above (--arj-indigo, --arj-rose, --arj-warm, --arj-petal,
   --arj-hair, --arj-copy, --arj-second) and adds a few shared measures.
   To revert: delete from here to the end and set the version back to 1.4.4.
   ========================================================================== */

:root {
	--arj-radius-ui: 16px;
	--arj-radius-pill: 999px;
	--arj-tap: 44px;
	--arj-gap: 1.25rem;
	--arj-focus: 0 0 0 3px rgba(166, 62, 104, 0.35);
}

/* --- Shared controls: one look for a button, a chip and a text field ----- */

.arj-finder__submit,
.arj-chip,
.arj-finder__reset,
.arj-finder__all > summary {
	font: inherit;
	cursor: pointer;
}

.arj-finder__submit {
	min-height: var(--arj-tap);
	padding: 0.55rem 1.3rem;
	border: 0;
	border-radius: var(--arj-radius-pill);
	background-color: var(--arj-rose);
	color: #fff;
	font-weight: 700;
}

.arj-finder__submit:hover {
	background-color: var(--arj-rose-dark);
}

.arj-finder :is(button, input, summary, a):focus-visible,
.arj-featured a:focus-visible,
.arj-breadcrumbs a:focus-visible,
.arj-langbar a:focus-visible {
	outline: 2px solid var(--arj-rose-dark);
	outline-offset: 2px;
	box-shadow: var(--arj-focus);
}

/* --- The finder ------------------------------------------------------------ */

.arj-finder {
	margin: 0 0 2rem;
	color: var(--arj-copy);
}

.arj-finder__form {
	margin: 0 0 1.25rem;
	padding: 1.25rem 1.25rem 1rem;
	border: 1px solid var(--arj-hair);
	border-radius: var(--arj-radius-ui);
	background-color: #fff;
}

.arj-finder__label {
	display: block;
	margin: 0 0 0.5rem;
	color: var(--arj-indigo);
	font-size: 1.05rem;
	font-weight: 700;
}

.arj-finder__row {
	display: flex;
	gap: 0.5rem;
}

.arj-finder__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: var(--arj-tap);
	padding: 0.55rem 0.9rem;
	border: 1px solid #c9b7c0;
	border-radius: 12px;
	background-color: var(--arj-warm);
	color: var(--arj-copy);
	font-size: 1rem; /* 16px keeps phones from zooming in on focus */
}

.arj-finder__input:focus {
	border-color: var(--arj-rose);
	outline: none;
	box-shadow: var(--arj-focus);
}

.arj-finder__hint {
	margin: 0.5rem 0 0;
	color: var(--arj-second);
	font-size: 0.9rem;
}

.arj-finder__filters {
	margin-top: 0.9rem;
}

.arj-finder__group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 0.6rem;
}

.arj-finder__group-label {
	margin-right: 0.25rem;
	color: var(--arj-second);
	font-size: 0.85rem;
	font-weight: 700;
}

.arj-chip {
	min-height: 36px;
	padding: 0.3rem 0.85rem;
	border: 1px solid var(--arj-hair);
	border-radius: var(--arj-radius-pill);
	background-color: var(--arj-warm);
	color: var(--arj-indigo-soft);
	font-size: 0.9rem;
	line-height: 1.3;
}

.arj-chip--index {
	min-width: 36px;
	padding: 0.3rem 0.55rem;
}

.arj-chip:hover {
	border-color: var(--arj-rose);
	color: var(--arj-rose-dark);
}

.arj-chip[aria-pressed="true"] {
	border-color: var(--arj-rose);
	background-color: var(--arj-rose);
	color: #fff;
}

.arj-finder__statusbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin-top: 0.4rem;
}

.arj-finder__status {
	margin: 0;
	color: var(--arj-second);
	font-size: 0.9rem;
}

.arj-finder__reset {
	min-height: 36px;
	padding: 0.2rem 0;
	border: 0;
	background: none;
	color: var(--arj-rose-dark);
	font-size: 0.9rem;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.arj-finder__empty {
	margin: 0 0 1rem;
	padding: 0.9rem 1rem;
	border-radius: 12px;
	background-color: var(--arj-petal);
	color: var(--arj-indigo);
}

.arj-finder__all > summary {
	display: inline-flex;
	align-items: center;
	min-height: var(--arj-tap);
	padding: 0.4rem 1.1rem;
	border: 1px solid var(--arj-rose);
	border-radius: var(--arj-radius-pill);
	color: var(--arj-rose-dark);
	font-weight: 700;
	list-style: none;
}

.arj-finder__all > summary::-webkit-details-marker {
	display: none;
}

.arj-finder__all > summary::after {
	content: "▾";
	margin-left: 0.5rem;
}

.arj-finder__all[open] > summary::after {
	content: "▴";
}

/* Rows: name, then place and the guide's languages. */
.arj-finder__list {
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--arj-hair);
}

.arj-work--row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.15rem 1rem;
	padding: 0.75rem 0.25rem;
	border-bottom: 1px solid var(--arj-hair);
}

.arj-work--row .arj-work__link {
	grid-column: 1 / -1;
	color: var(--arj-indigo);
	font-weight: 700;
	text-decoration: none;
}

.arj-work--row .arj-work__link:hover .arj-work__name {
	color: var(--arj-rose-dark);
	text-decoration: underline;
}

.arj-work__second {
	color: var(--arj-second);
	font-size: 0.85em;
	font-weight: 400;
}

.arj-work__place,
.arj-work--row .arj-work__meta {
	color: var(--arj-second);
	font-size: 0.85rem;
}

.arj-work__fallback {
	margin-left: 0.5rem;
	padding: 0.05rem 0.5rem;
	border-radius: var(--arj-radius-pill);
	background-color: var(--arj-petal);
	color: var(--arj-rose-dark);
	font-size: 0.8rem;
}

/* Cards: the same card as the hubs used before, wherever it appears. */
.arj-finder__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.arj-work--card {
	display: flex;
	flex-direction: column;
	margin: 0;
}

:is(.arj-finder, .arj-featured) .arj-hub-card {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	overflow: hidden;
	padding: 0 0 1.25rem;
	border: 1px solid var(--arj-hair);
	border-top: 3px solid var(--arj-card-edge, var(--arj-rose));
	border-radius: var(--arj-radius-ui);
	background-color: #fff;
	color: inherit;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(16, 32, 50, 0.05);
	transition: box-shadow 0.18s ease;
}

:is(.arj-finder, .arj-featured) .arj-hub-card:hover {
	box-shadow: 0 10px 24px rgba(16, 32, 50, 0.1);
}

:is(.arj-finder, .arj-featured) .arj-hub-card-a { --arj-card-edge: var(--arj-rose); }
:is(.arj-finder, .arj-featured) .arj-hub-card-b { --arj-card-edge: #356E6B; }
:is(.arj-finder, .arj-featured) .arj-hub-card-c { --arj-card-edge: #866027; }

:is(.arj-finder, .arj-featured) .arj-hub-card__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	margin: 0 0 1rem;
	background-color: var(--arj-petal);
}

:is(.arj-finder, .arj-featured) .arj-hub-card > :not(img) {
	margin-left: 1.25rem;
	margin-right: 1.25rem;
}

:is(.arj-finder, .arj-featured) .arj-hub-card-title {
	margin-top: 0;
	margin-bottom: 0.15rem;
	color: var(--arj-indigo);
	font-size: 1.15rem;
	line-height: 1.3;
}

:is(.arj-finder, .arj-featured) .arj-work__second {
	margin-top: 0;
	margin-bottom: 0.35rem;
}

:is(.arj-finder, .arj-featured) .arj-hub-card-place {
	margin-top: 0;
	margin-bottom: 0.6rem;
	color: var(--arj-card-edge, var(--arj-rose));
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

:is(.arj-finder, .arj-featured) .arj-hub-card-desc {
	margin-top: 0;
	margin-bottom: 0.75rem;
	color: var(--arj-second);
	font-size: 0.95rem;
	line-height: 1.65;
}

:is(.arj-finder, .arj-featured) .arj-work__meta {
	margin-top: 0;
	margin-bottom: 0.9rem;
	color: var(--arj-second);
	font-size: 0.82rem;
}

:is(.arj-finder, .arj-featured) .arj-hub-card-badge {
	align-self: flex-start;
	margin-top: auto;
	margin-bottom: 0;
	padding: 0.35rem 0.85rem;
	border-radius: var(--arj-radius-pill);
	background-color: var(--arj-petal);
	color: var(--arj-rose-dark);
	font-size: 0.85rem;
	font-weight: 700;
}

:is(.arj-finder, .arj-featured) .arj-hub-card__credit {
	margin: 0.45rem 0.25rem 0;
	color: var(--arj-second);
	font-size: 0.75rem;
	line-height: 1.5;
}

:is(.arj-finder, .arj-featured) .arj-hub-card__credit a {
	color: inherit;
}

.arj-finder__grid > .arj-work[hidden],
.arj-finder__list > .arj-work[hidden] {
	display: none; /* outranks .arj-work--card's display:flex without !important */
}

@media (max-width: 1024px) {
	.arj-finder__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.arj-finder__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.25rem;
	}

	.arj-finder__form {
		padding: 1rem;
	}

	.arj-finder__group {
		gap: 0.35rem;
	}

	.arj-work--row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Search results: works first ------------------------------------------ */

.arj-search-works {
	max-width: 52rem;
	margin: 0 auto 2rem;
	padding: 1.25rem 1.25rem 0.5rem;
	border: 1px solid var(--arj-hair);
	border-radius: var(--arj-radius-ui);
	background-color: #fff;
}

.arj-search-works__title {
	margin: 0 0 0.35rem;
	color: var(--arj-indigo);
	font-size: 1.25rem;
}

.arj-search-works__note {
	margin: 0;
	color: var(--arj-second);
	font-size: 0.9rem;
}

/* --- Breadcrumbs ----------------------------------------------------------- */

.arj-breadcrumbs {
	margin: 0 0 0.9rem;
	font-size: 0.85rem;
}

.arj-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.arj-breadcrumbs li {
	color: var(--arj-second);
}

.arj-breadcrumbs li + li::before {
	content: "›";
	margin: 0 0.45rem;
	color: #9a8a92;
}

.arj-breadcrumbs a {
	color: var(--arj-indigo-soft);
	text-decoration: underline;
	text-decoration-color: rgba(166, 62, 104, 0.35);
	text-underline-offset: 0.2em;
}

.arj-breadcrumbs [aria-current="page"] {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	max-width: 32rem;
}

/* --- Language switch in the phone header, and the one-line notice --------- */

.mobile-html .arj-langbar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.15rem;
	font-size: 0.78rem;
	line-height: 1.2;
	white-space: nowrap;
}

.arj-langbar__item {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 0.4rem;
	border-radius: var(--arj-radius-pill);
	color: var(--arj-indigo-soft);
	text-decoration: none;
}

a.arj-langbar__item {
	text-decoration: underline;
	text-decoration-color: rgba(166, 62, 104, 0.35);
	text-underline-offset: 0.2em;
}

.arj-langbar__item.is-current {
	background-color: var(--arj-petal);
	color: var(--arj-indigo);
	font-weight: 700;
}

.arj-lang-auto {
	margin: 0;
	padding: 0.6rem 1rem;
	background-color: var(--arj-petal);
	color: var(--arj-indigo);
	font-size: 0.9rem;
	text-align: center;
}

.arj-lang-auto a {
	color: var(--arj-rose-dark);
}

/* --- Readable standing pages (About, Contact, Privacy, Disclosure) -------- */

body.page:not(.home) .entry-content > p a,
body.page:not(.home) .entry-content li a {
	color: var(--arj-rose-dark);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

body.page .wpcf7 input:not([type="submit"]):not([type="checkbox"]),
body.page .wpcf7 textarea {
	min-height: var(--arj-tap);
	border: 1px solid #c9b7c0;
	border-radius: 12px;
	background-color: #fff;
	font-size: 1rem;
}

body.page .wpcf7 input[type="submit"] {
	min-height: var(--arj-tap);
	padding: 0.55rem 1.4rem;
	border: 0;
	border-radius: var(--arj-radius-pill);
	background-color: var(--arj-rose);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

body.page .wpcf7 input[type="submit"]:hover {
	background-color: var(--arj-rose-dark);
}

/* The theme indents lists inside the content; the finder's lists are layout, not prose. */
.entry-content .arj-finder__grid,
.entry-content .arj-finder__list,
.arj-search-works .arj-finder__list {
	margin-left: 0;
	padding-left: 0;
}

.entry-content .arj-finder__grid > li,
.entry-content .arj-finder__list > li {
	margin-left: 0;
	list-style: none;
}

/* Korean edition (18 October 2026): break lines between words, not inside them, and keep headings tidy. */
:lang(ko) {
	word-break: keep-all;
	overflow-wrap: break-word;
}
:lang(ko) h1, :lang(ko) h2, :lang(ko) h3 {
	line-height: 1.35;
	letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------------------
   Minimum legible type on phones.
   Measured on 23 October 2026 in headless Chrome at 375 x 812: Kadence reduces
   the root font size on small screens, so the hero eyebrow (0.75rem) resolved to
   10.9px and the photo credits (0.85rem / 0.7rem) to 11.2px. Both are secondary
   type, but under 12px is too small to read comfortably on a phone. These floors
   apply below 768px only and change nothing at desktop width.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {

	.arj-section .arj-eyebrow {
		font-size: max(0.75rem, 12px);
	}

	/* the hero has its own smaller mobile size (0.68rem) and a more specific selector */
	.arj-section.arj-hero .arj-eyebrow {
		font-size: max(0.68rem, 12px);
	}

	.arj-hero__credit,
	.arj-photo-credit,
	body.single-post .entry-content p.arj-photo-credit {
		font-size: max(0.85rem, 12.5px);
	}
}

/* ---------------------------------------------------------------------------
   [arj_trip_shapes] — "choose by the shape of the trip" on the Anime hubs.
   Three columns on a desktop, one on a phone. Nothing here changes any other block.
   Added 23 October 2026.
   --------------------------------------------------------------------------- */
.arj-shapes__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.75rem;
	margin-top: 1.5rem;
}

.arj-shape__title {
	margin: 0 0 0.6rem;
	color: var(--arj-ink);
	font-size: 1.05rem;
	line-height: 1.35;
}

.arj-shape__list {
	margin: 0 0 1.1rem;
	padding-left: 1.1rem;
	line-height: 1.65;
}

.arj-shape__list li {
	margin-bottom: 0.35rem;
}

.arj-shape__from {
	color: var(--arj-second);
	font-size: max(0.85rem, 12.5px);
	white-space: nowrap;
}

@media (max-width: 900px) {

	.arj-shapes__grid {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
}

/* ==========================================================================
   Home background: Mount Fuji from Lake Motosu
   Added 25 October 2026. Replaces the large photograph that used to sit above
   the site name. The name is now the first thing on the page and the
   photograph is a faint background behind the whole home page.

   How it works, and why this way:

   - One fixed layer, `body.arj-page-home::before`, covers the viewport and
     carries the photograph. `position: fixed` is used instead of
     `background-attachment: fixed`, which iOS Safari does not paint reliably.
   - Only that layer is transparent. Text, buttons and cards sit above it at
     full opacity, so nothing readable is faded.
   - The layer is sized with `cover` and centred. Fuji is in the middle of the
     frame, so a portrait phone crops the sides and keeps the mountain. The
     image is never stretched to the length of the page and never tiled.
   - `--arj-home-bg-opacity` is the one number to turn. 0.2 is the starting
     point asked for; the blue of the lake and the shape of Fuji read at that
     value and body text stays above 10:1 against it.
   - The home sections lose their own background so the photograph shows
     through their padding and between the cards. Cards keep their white face.
   - The band that carries the site name was dark navy, which would have hidden
     the photograph completely. It is now transparent with ink-coloured text.
     The brand colours and the site icon are unchanged.
   ========================================================================== */

body.arj-page-home {
	--arj-home-bg-opacity: 0.2;
	background-color: #fff;
}

body.arj-page-home::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background-image: url("/wp-content/uploads/2026/10/out-bg-fuji-motosu-1024x683.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: var(--arj-home-bg-opacity);
	pointer-events: none;
}

@media (min-width: 1025px) {

	body.arj-page-home::before {
		background-image: url("/wp-content/uploads/2026/10/out-bg-fuji-motosu.jpg");
	}
}

/* Kadence paints the whole page container white. On the home pages that white
   sits between the fixed layer and the content, so the photograph never shows.
   The container goes transparent and `body` keeps the white base underneath. */
body.arj-page-home .site.wp-site-blocks,
body.arj-page-home .site-container,
body.arj-page-home .content-area,
body.arj-page-home .site-main,
body.arj-page-home .entry-content {
	background-color: transparent;
}

/* The sections stop painting over the photograph. Their own text is ink on a
   pale background and stays well clear of 4.5:1; the cards inside keep #fff. */
body.arj-page-home .arj-section,
body.arj-page-home .arj-section.arj-routes,
body.arj-page-home .arj-section.arj-find,
body.arj-page-home .arj-section.arj-hero {
	background-color: transparent;
	background-image: none;
}

/* The name band: same layout, readable on a light page. */
body.arj-page-home .arj-hero {
	padding-block: clamp(2rem, 5vw, 3.25rem);
}

body.arj-page-home .arj-hero .arj-eyebrow {
	color: var(--arj-accent);
}

body.arj-page-home .arj-hero .arj-hero__title {
	color: var(--arj-ink);
}

body.arj-page-home .arj-hero .arj-hero__tagline {
	color: var(--arj-accent-dark);
}

body.arj-page-home .arj-hero .arj-hero__lead {
	color: var(--arj-text);
}

body.arj-page-home .arj-hero .arj-btn-ghost .wp-block-button__link {
	border-color: var(--arj-ink);
	color: var(--arj-ink);
	background-color: rgba(255, 255, 255, 0.72);
}

body.arj-page-home .arj-hero .arj-btn-ghost .wp-block-button__link:hover,
body.arj-page-home .arj-hero .arj-btn-ghost .wp-block-button__link:focus {
	background-color: var(--arj-ink);
	border-color: var(--arj-ink);
	color: #fff;
}

/* Anything that holds a paragraph of reading keeps a white face of its own. */
body.arj-page-home .arj-section .arj-card,
body.arj-page-home .arj-section .arj-hub-card,
body.arj-page-home .arj-finder,
body.arj-page-home .arj-shape {
	background-color: #fff;
}

/* The photograph credit, at the foot of the page. */
.arj-bgcredit {
	margin: 0;
	padding: 1rem clamp(1.1rem, 5vw, 2.5rem) 2rem;
	color: var(--arj-muted, #5c6b7a);
	font-size: max(0.8rem, 12px);
	line-height: 1.6;
	text-align: center;
}

.arj-bgcredit a {
	color: inherit;
	text-decoration: underline;
}

/* The three groups now carry four labelled figures per work, which needs the
   full column width to stay comparable. They stack instead of sitting in three
   narrow columns. */
.arj-shapes__grid {
	grid-template-columns: 1fr;
	gap: 2.25rem;
}

/* ==========================================================================
   Trip-shape rows: the four figures that make the works comparable.
   Added 26 October 2026 with [arj_trip_shapes]'s detail data.

   The row is a definition list so the label travels with its value for a
   screen reader. On a phone each pair stacks; from 560px the label sits in a
   narrow first column so the values line up down the list and can be compared
   at a glance. Nothing is truncated and nothing scrolls sideways.
   ========================================================================== */

.arj-shape__item {
	margin-bottom: 1.15rem;
}

.arj-shape__item:last-child {
	margin-bottom: 0;
}

.arj-shape__head {
	display: block;
	font-weight: 600;
}

.arj-shape__detail {
	margin: 0.35rem 0 0.3rem;
	padding: 0.55rem 0.7rem;
	border-left: 3px solid var(--arj-line, #dde3ea);
	background-color: rgba(255, 255, 255, 0.6);
	border-radius: 0 6px 6px 0;
	font-size: max(0.84rem, 12.5px);
	line-height: 1.55;
}

.arj-shape__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 0.6rem;
	margin-bottom: 0.3rem;
}

.arj-shape__row:last-child {
	margin-bottom: 0;
}

.arj-shape__detail dt {
	margin: 0;
	color: var(--arj-second, #5c6b7a);
	font-weight: 600;
}

.arj-shape__detail dd {
	margin: 0;
	color: var(--arj-text, #1f2a37);
}

.arj-shape__plan {
	display: inline-block;
	font-size: max(0.84rem, 12.5px);
	font-weight: 600;
}

@media (min-width: 560px) {

	.arj-shape__row {
		grid-template-columns: minmax(7.5rem, 11rem) 1fr;
	}
}