/* ─────────────────────────────────────────────────────────────────────────
   Mobile nav fit — for pages that carry their own page CSS and never linked
   article.css, so they inherited none of its mobile nav rules. At 390px the
   bar measured 531px wide and the whole page slid sideways under a thumb.
   This is the article.css nav ladder reduced to only what the bar needs.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
	nav[aria-label="Main navigation"] {
		padding: 14px;
		gap: 8px
	}

	nav[aria-label="Main navigation"] .nav-hide-mobile {
		display: none
	}

	nav[aria-label="Main navigation"] .nav-links {
		display: flex;
		gap: 12px;
		align-items: center;
		flex-shrink: 0
	}

	nav[aria-label="Main navigation"] .nav-links a {
		white-space: nowrap
	}

	nav[aria-label="Main navigation"] .nav-links a:not(.nav-cta-pink):not(.nav-cta) {
		font-size: 12px;
		padding: 4px 6px
	}

	nav[aria-label="Main navigation"] .nav-cta-pink,
	nav[aria-label="Main navigation"] .nav-cta {
		padding: 7px 12px !important;
		font-size: 12px !important
	}

	/* The logo is the only item that can give. object-fit:contain means a
	   squeezed box scales it instead of stretching it out of shape. */
	nav[aria-label="Main navigation"] .nav-logo {
		min-width: 0;
		flex-shrink: 1
	}

	nav[aria-label="Main navigation"] .nav-logo img {
		height: 48px;
		max-width: 100%;
		object-fit: contain;
		object-position: left center
	}

	/* Home is redundant on a phone — the logo is already a home link — and it
	   is the cheapest 62px to hand back to the logo, which otherwise renders
	   at an unreadable 82px wide. */
	nav[aria-label="Main navigation"] .nav-links > li:first-child,
	nav[aria-label="Main navigation"] .nav-links > a:first-child {
		display: none
	}
}