/* ============================================================
   Site chrome — header + footer styles, enqueued on every page.
   Keep this lean: it loads on every URL, so anything heavy goes
   in single-article.css or another conditional stylesheet.
   ============================================================ */

/* ------------------------------------------------------------
   Self-hosted Oswald (regular / weight 400). Used for headings
   site-wide. Single weight kept locally to remove the third-party
   Google Fonts DNS handshake from the critical path. CSS rules
   that ask for `font-weight: 600` will synthetic-bold on top of
   the 400 face — Oswald is a condensed display typeface so
   synthetic-bold reads fine. Drop a 600 woff2 next to this file
   and add a second @font-face block to use a real 600 if needed.
   font-display: swap → fallback renders immediately, swaps in
   when the font arrives, no FOIT.
   ------------------------------------------------------------ */
@font-face {
	font-family: 'Oswald';
	src: url('fonts/oswald-v57-latin-regular.woff2') format('woff2');
	font-weight: 400 700;  /* covers 400-700 via synthetic bold */
	font-style: normal;
	font-display: swap;
}

/* Skip link — visible only on keyboard focus, accessibility */
.uj-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: #B3421D;
	color: #fff;
	padding: 0.5rem 1rem;
	text-decoration: none;
	z-index: 100000;
	font: 600 0.9375rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.uj-skip-link:focus { left: 0; }

/* ------------------------------------------------------------
   Header — sticky on scroll, no JS required.
   ------------------------------------------------------------ */
.uj-site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: #ffffff;
	border-bottom: 1px solid #e5e7eb;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
	font: 0.9375rem/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.uj-site-header__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0.625rem 1.25rem;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

/* Logo */
.uj-site-header__logo {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	text-decoration: none;
	color: #B3421D;
	flex-shrink: 0;
}
.uj-site-header__logo img {
	width: 44px;
	height: 44px;
	border-radius: 6px;
	object-fit: cover;
	display: block;
}
.uj-site-header__logo-text {
	font: 800 1.0625rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* Primary nav */
.uj-site-header__nav {
	flex: 1 1 auto;
	min-width: 0;
}
.uj-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 1.25rem;
	flex-wrap: wrap;
}
.uj-nav li { margin: 0; }
.uj-nav a {
	color: #1f2937;
	text-decoration: none;
	font: 600 0.9375rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	letter-spacing: 0.01em;
	padding: 0.5rem 0;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
	display: inline-block;
}
.uj-nav a:hover,
.uj-nav .current-menu-item > a,
.uj-nav .current-menu-parent > a,
.uj-nav .current-menu-ancestor > a {
	color: #B3421D;
	border-color: #B3421D;
}

/* Header actions — search toggle + social icons + Insider CTA */
.uj-site-header__actions {
	display: inline-flex;
	gap: 0.875rem;
	align-items: center;
	flex-shrink: 0;
}

/* Search toggle (magnifying-glass icon button) */
.uj-site-header__search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: #6b7280;
	cursor: pointer;
	transition: color 0.15s ease, background 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}
.uj-site-header__search-toggle:hover,
.uj-site-header__search-toggle:focus-visible {
	color: #B3421D;
	background: #FFF5F0;
	outline: none;
}
.uj-site-header__search-toggle svg {
	width: 18px;
	height: 18px;
	display: block;
}
.uj-site-header__search-toggle[aria-expanded="true"] {
	color: #B3421D;
	background: #FFF5F0;
}

/* Social icons — minimal, neutral default, brand-red hover */
.uj-site-header__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-flex;
	gap: 0.375rem;
	align-items: center;
}
.uj-site-header__social a {
	display: inline-flex;
	width: 32px;
	height: 32px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	text-decoration: none;
	transition: background 0.15s ease, transform 0.15s ease;
}
.uj-site-header__social svg {
	display: block;
	max-width: 22px;
	max-height: 22px;
	width: auto;
	height: auto;
}
.uj-site-header__social a:hover,
.uj-site-header__social a:focus-visible {
	background: #FFF5F0;
	transform: translateY(-1px);
}

/* Header CTA — pill-shape, brand red, matches site CTA buttons */
.uj-site-header__cta {
	display: inline-block;
	padding: 0.5rem 1.25rem;
	background: #B3421D;
	color: #fff;
	text-decoration: none;
	border-radius: 999px;
	font: 600 0.9375rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	letter-spacing: 0.01em;
	transition: background 0.15s ease, transform 0.15s ease;
}
.uj-site-header__cta:hover {
	background: #8E331A;
	color: #fff;
	transform: translateY(-1px);
}

/* Mobile — no hamburger; nav wraps to a second line beneath logo+CTA */
@media (max-width: 720px) {
	.uj-site-header__inner {
		gap: 0.5rem;
		padding: 0.5rem 1rem;
	}
	.uj-site-header__logo img { width: 36px; height: 36px; }
	.uj-site-header__logo-text { font-size: 0.9375rem; }
	.uj-site-header__nav {
		order: 3;
		flex: 1 1 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		/* Cancel the inner row's 1rem side padding so the scroll
		   container reaches the viewport edges. Without this, the
		   last menu item ("Contact") clips behind the parent's
		   right padding before scrolling can reveal it. */
		margin: 0 -1rem;
		padding: 0 1rem;
	}
	.uj-nav {
		flex-wrap: nowrap;
		gap: 0.875rem;
		padding-bottom: 0.25rem;
	}
	.uj-nav a {
		font-size: 0.875rem;
		white-space: nowrap;
	}
	/* Ensure the rightmost item gets breathing room when the row
	   overflows and the user scrolls. */
	.uj-nav li:last-child a {
		padding-right: 0.5rem;
	}
	.uj-site-header__cta { padding: 0.4375rem 0.875rem; font-size: 0.875rem; }
	.uj-site-header__actions { gap: 0.375rem; }
	/* Compact social icons on mobile so they still fit alongside CTA */
	.uj-site-header__social { gap: 0.125rem; }
	.uj-site-header__social a { width: 28px; height: 28px; }
	.uj-site-header__social svg { max-width: 16px; max-height: 16px; }
	.uj-site-header__search-toggle { width: 28px; height: 28px; }
	.uj-site-header__search-toggle svg { width: 16px; height: 16px; }
}

/* Very small phones — drop the brand text so the action row breathes,
   and tighten the nav row so it fits in a single line on iPhones. */
@media (max-width: 480px) {
	.uj-site-header__logo-text { display: none; }
	.uj-nav { gap: 0.625rem; }
	.uj-nav a { font-size: 0.8125rem; }
}

/* Tablet — slightly smaller social icons so the row stays balanced */
@media (min-width: 721px) and (max-width: 900px) {
	.uj-site-header__social { gap: 0.25rem; }
	.uj-site-header__social a { width: 28px; height: 28px; }
	.uj-site-header__social svg { max-width: 18px; max-height: 18px; }
}

/* ------------------------------------------------------------
   Search bar — expandable strip below the header inner row.
   Animated via max-height so it slides down smoothly.
   ------------------------------------------------------------ */
.uj-site-header__search-bar {
	max-height: 0;
	overflow: hidden;
	background: #ffffff;
	border-top: 1px solid transparent;
	transition: max-height 0.2s ease, border-color 0.2s ease;
}
.uj-site-header__search-bar.is-open {
	max-height: 96px;
	border-top-color: #e5e7eb;
}
.uj-site-header__search-bar form {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0.75rem 1.25rem;
	display: flex;
	gap: 0.5rem;
	align-items: center;
}
.uj-site-header__search-bar input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.625rem 1rem;
	background: #f9fafb;
	border: 1px solid #d1d5db;
	border-radius: 999px;
	font: 1rem/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #1f2937;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}
.uj-site-header__search-bar input[type="search"]:focus {
	outline: none;
	border-color: #B3421D;
	background: #ffffff;
	box-shadow: 0 0 0 3px rgba(179, 66, 29, 0.12);
}
.uj-site-header__search-bar button[type="submit"] {
	flex-shrink: 0;
	padding: 0.625rem 1.5rem;
	background: #B3421D;
	color: #ffffff;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	font: 600 0.9375rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	transition: background 0.15s ease, transform 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}
.uj-site-header__search-bar button[type="submit"]:hover,
.uj-site-header__search-bar button[type="submit"]:focus-visible {
	background: #8E331A;
	outline: none;
	transform: translateY(-1px);
}

@media (max-width: 600px) {
	.uj-site-header__search-bar form { padding: 0.625rem 1rem; }
	.uj-site-header__search-bar button[type="submit"] {
		padding: 0.625rem 1.125rem;
		font-size: 0.875rem;
	}
}

/* Visually hidden — for the screen-reader-only label on the search input */
.uj-vh {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------
   Splash art — homepage hero + before-footer art band
   ------------------------------------------------------------ */
.uj-homepage-hero {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	line-height: 0;
	background: #1f2937;
	overflow: hidden;
}
/* Tagline overlay — centered, white Oswald with shadow for legibility
   over the busy art. A subtle darkening gradient at the bottom keeps
   the text readable against the lighter flag area. */
.uj-homepage-hero__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.35) 100%);
	pointer-events: none;
	line-height: 1.15;
}
.uj-homepage-hero__tagline {
	margin: 0;
	color: #ffffff;
	font: 600 clamp(1.5rem, 3.6vw, 2.75rem)/1.15 "Oswald", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
	letter-spacing: 0.01em;
	text-align: center;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65), 0 1px 2px rgba(0, 0, 0, 0.5);
	max-width: 22ch;
	text-wrap: balance;
}
.uj-homepage-hero img {
	width: 100% !important;
	height: 360px !important;
	max-height: 360px !important;
	display: block !important;
	object-fit: cover !important;
	/* Pull the lower portion of the art into view so the kimono walker
	   + Tokyo street detail are anchoring the hero. */
	object-position: center 90% !important;
}
@media (max-width: 900px) {
	.uj-homepage-hero img { height: 280px !important; max-height: 280px !important; }
}
@media (max-width: 600px) {
	.uj-homepage-hero img { height: 200px !important; max-height: 200px !important; }
}

.uj-footer-art-band {
	display: block;
	width: 100%;
	margin: 3rem 0 0;
	line-height: 0;
	background: #1f2937;
	overflow: hidden;
}
.uj-footer-art-band img {
	width: 100% !important;
	height: 220px !important;
	max-height: 220px !important;
	display: block !important;
	object-fit: cover !important;
	/* Same vertical anchor as the hero so the band reads as a slice
	   of the same composition. Tweak 65–80% to shift the crop. */
	object-position: center 75% !important;
}
@media (max-width: 720px) {
	.uj-footer-art-band { margin-top: 2rem; }
	.uj-footer-art-band img { height: 140px !important; max-height: 140px !important; }
}

/* When the art band is present, the dark footer should sit flush against
   it — kill the existing top margin to avoid a white seam. */
.uj-footer-art-band + .uj-site-footer {
	margin-top: 0;
}

/* ------------------------------------------------------------
   Unified card meta row — date · reading-time · animated arrow.
   Used on every card across the site (homepage rows, /latest/,
   category, author, search, 404, newsletter, related-posts grid).
   `!important` because some cards live inside .uj-article__body
   where the global body-link rule would otherwise inherit a brand-red
   color + underline into the meta children.
   ------------------------------------------------------------ */
.uj-card-meta {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0.625rem 0 0;
	padding: 0;
	font: 600 11.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #6b7280 !important;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none !important;
}
.uj-card-meta time {
	color: #6b7280 !important;
	white-space: nowrap;
	text-decoration: none !important;
}
.uj-card-meta__readtime {
	color: #6b7280 !important;
	white-space: nowrap;
	position: relative;
	padding-left: 0.75rem;
	text-decoration: none !important;
}
.uj-card-meta__readtime::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 3px;
	background: #9ca3af;
	border-radius: 50%;
}
.uj-card-meta__arrow {
	margin-left: auto;
	color: #B3421D !important;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1;
	transition: transform 0.2s ease;
	text-decoration: none !important;
}
.uj-front-card:hover .uj-card-meta__arrow,
.uj-front-card:focus-within .uj-card-meta__arrow,
.uj-related__card:hover .uj-card-meta__arrow,
.uj-related__card:focus-within .uj-card-meta__arrow {
	transform: translateX(4px);
}

/* ------------------------------------------------------------
   Newsletter CTA — used by the [uj_newsletter_inline] shortcode
   site-wide (homepage, tours, articles). These rules previously
   lived in single-article.css so they only worked on posts. Now
   they're chrome-level so the brand pill button + warm gradient
   show up wherever the shortcode renders.
   ------------------------------------------------------------ */
.uj-cta {
	margin: 0 0 2rem;
	padding: 1rem 1.5rem 1.5rem;
	background: #f8fafc;
	border-left: 4px solid #B3421D;
	border-radius: 4px;
}
.uj-cta__heading {
	font: 600 1.5rem/1.2 "Oswald", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif !important;
	color: #B3421D !important;
	letter-spacing: 0.01em;
	margin: 0 0 0.75rem !important;
}
.uj-cta__heading--small {
	font-size: 1.125rem !important;
	margin-bottom: 0.5rem !important;
}

/* Bare mode (shortcode chrome="false"): strip the box so a host
   container (e.g. the /newsletter/ hero card) is the single frame.
   Opt-in only — the default newsletter CTA keeps its box everywhere
   else (in-article, exit CTA, homepage, tours). Specificity beats
   plain .uj-cta and none of those props use !important, so this
   overrides cleanly. */
.uj-cta.uj-cta--bare {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Banner variant — the warm cream→peach gradient version used for
   the inline-before-H2 banner and the homepage newsletter slot. */
.uj-cta.uj-cta--newsletter--banner {
	background: linear-gradient(135deg, #FFF5F0 0%, #FCE9DF 100%) !important;
	border: 1px solid #F0C7B3 !important;
	border-left: 4px solid #B3421D !important;
	border-radius: 8px !important;
	padding: 1.5rem 1.75rem !important;
	margin: 2rem 0 !important;
	box-shadow: 0 2px 8px rgba(179, 66, 29, 0.06) !important;
}
.uj-cta--newsletter--banner .uj-cta__heading {
	font: 600 1.375rem/1.25 "Oswald", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif !important;
	color: #B3421D !important;
	margin: 0 0 1rem !important;
}

/* Newsletter submit button → pill, brand red, matches site CTA buttons.
   .forminator-button-submit kept for the few pages that still embed
   Forminator forms directly (/newsletter/, /subscribe/). */
.uj-cta--newsletter .forminator-button-submit,
.uj-cta--newsletter button[type="submit"],
.uj-cta--newsletter .uj-mc-form__submit {
	display: inline-block !important;
	padding: 0.75rem 1.75rem !important;
	background: #B3421D !important;
	color: #fff !important;
	font: 600 15px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	text-decoration: none !important;
	border-radius: 999px !important;
	border: 0 !important;
	cursor: pointer !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	min-height: 0 !important;
	transition: background 0.15s ease, transform 0.15s ease;
}
.uj-cta--newsletter .forminator-button-submit:hover,
.uj-cta--newsletter button[type="submit"]:hover,
.uj-cta--newsletter .uj-mc-form__submit:hover {
	background: #8E331A !important;
	color: #fff !important;
	transform: translateY(-1px);
}
.uj-cta--newsletter button[type="submit"]:disabled,
.uj-cta--newsletter .uj-mc-form__submit:disabled {
	opacity: 0.6;
	cursor: wait;
	transform: none;
}

/* Direct-to-Mailchimp inline newsletter form (replaces Forminator embed
   for the inline banner — Forminator still drives /newsletter/ and
   /subscribe/ where we need its richer features). */
/* The form is ONE grid. Each row (.uj-mc-form__row) is a subgrid that
   spans both columns, so the first-name input and the email input share
   the exact same column-1 track and align pixel-for-pixel with no spacer
   element and no width math. Column 1 = input; column 2 = the submit
   button at its natural width (white-space:nowrap) so the CTA label is
   never squished. The form's single row-gap is the only vertical space
   between lines, so spacing stays tight and predictable. Replaces a
   flex-wrap + invisible-placeholder hack that left the inputs uneven and
   the lines too far apart on the LP and the travel/food in-article CTA. */
.uj-mc-form {
	margin: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 0.5rem;
	row-gap: 0.5rem;
}
.uj-mc-form__row {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	align-items: center;
}
.uj-mc-form__email,
.uj-mc-form__name {
	grid-column: 1;
	width: 100%;
	box-sizing: border-box;
	min-width: 0;
	padding: 0.625rem 0.875rem;
	font: 1rem/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	background: #fff;
	color: #111827;
}
.uj-mc-form__email:focus,
.uj-mc-form__name:focus {
	outline: none;
	border-color: #B3421D;
	box-shadow: 0 0 0 3px rgba(179, 66, 29, 0.15);
}
.uj-mc-form__submit {
	grid-column: 2;
	white-space: nowrap;
}
/* MMERGE9 is type=hidden (no box) and the honeypot is positioned off
   screen, so neither is a grid item. The trust line and status message
   are direct form children: span them across both columns. */
.uj-mc-form__trust,
.uj-mc-form__msg {
	grid-column: 1 / -1;
}
/* Phones: single column. Submit drops full-width under the email
   input; the name row is just the input. */
@media (max-width: 480px) {
	.uj-mc-form {
		grid-template-columns: 1fr;
		row-gap: 0.375rem;
	}
	/* The row itself collapses to one column too, so the submit stacks
	   under its input. Give the row a row-gap so the button isn't flush
	   against the field above it. */
	.uj-mc-form__row {
		row-gap: 0.625rem;
	}
	.uj-mc-form__submit { grid-column: 1; }
}
.uj-mc-form__honeypot {
	position: absolute;
	left: -5000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.uj-mc-form__msg {
	margin: 0.625rem 0 0;
	font: 0.9375rem/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	min-height: 1.4em; /* reserves space; prevents layout shift on result */
}
.uj-mc-form__msg:empty { min-height: 0; margin: 0; }
.uj-mc-form__msg--pending { color: #4b5563; }
.uj-mc-form__msg--success { color: #047857; }
.uj-mc-form__msg--error   { color: #B91C1C; }
.uj-mc-form__trust {
	/* !important guards against the theme's generic `p { margin: ... }`
	   resetting our spacing and pulling the trust line back against the
	   form row above it. */
	margin: 1.75rem 0 0 !important;
	font: 0.8125rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #4b5563;
}
.uj-mc-form__trust a { color: inherit; text-decoration: underline; }
.uj-mc-form__trust a:hover { color: #B3421D; }

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.uj-site-footer {
	background: #1f2937;
	color: #d1d5db;
	margin-top: 4rem;
	padding: 2.5rem 1.25rem 1.5rem;
	font: 0.9375rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.uj-site-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr 2fr;
	gap: 2rem;
	align-items: start;
}

/* Brand block */
.uj-site-footer__logo {
	font: 800 1.25rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
}
.uj-site-footer__tagline {
	margin: 0.5rem 0 0;
	color: #9ca3af;
	font-size: 0.875rem;
}

/* Footer nav */
.uj-site-footer__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
}
.uj-site-footer__nav a {
	color: #d1d5db;
	text-decoration: none;
	transition: color 0.15s ease;
}
.uj-site-footer__nav a:hover { color: #fff; text-decoration: underline; }

/* Legal strip */
.uj-site-footer__legal {
	max-width: 1200px;
	margin: 1.5rem auto 0;
	padding-top: 1.25rem;
	border-top: 1px solid #374151;
	color: #9ca3af;
	text-align: center;
	font-size: 0.8125rem;
}

@media (max-width: 720px) {
	.uj-site-footer { padding: 2rem 1rem 1.25rem; margin-top: 2.5rem; }
	.uj-site-footer__inner {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

/* ============================================================
   Baseline typography for fallback pages (index.php) — generic
   pages without a custom template (privacy policy, terms,
   miscellaneous editorial pages) render inside .uj-article__body
   but don't load single-article.css. Without these defaults the
   browser's default p margin is missing, so paragraphs and lists
   butt up against each other.
   Posts get richer typography via single-article.css; these rules
   are a quiet baseline for everything else in the same shell.
   ============================================================ */
.uj-article__body p {
	margin: 0 0 1.25rem;
}
.uj-article__body p:last-child {
	margin-bottom: 0;
}
.uj-article__body ul,
.uj-article__body ol {
	margin: 0 0 1.25rem;
	/* padding-bottom: 0 cancels the wp-custom-css global ul,ol
	   padding-bottom: 25px which would otherwise stack on top of
	   the margin. */
	padding: 0 0 0 1.5rem;
}
.uj-article__body li {
	margin: 0 0 0.5rem;
}
.uj-article__body h2 {
	margin: 2rem 0 1rem;
}
.uj-article__body h3 {
	margin: 1.75rem 0 0.75rem;
}