/* ==========================================================================
   Marvelous City Rio — chrome.css
   Masthead (full + compact), primary nav, and site footer for
   "The Traveller" design. Shared foundation tokens live here too.

   Adapted 1:1 from the approved prototypes (values preserved exactly):
     workspace/design/2026-07-17-masthead-explorations/header-conde.html
       .proto-conde .mast/.over/.wordmark/.nav  ->  .mc-mast/.mc-mast-over/
       .mc-wordmark/.mc-nav
     workspace/design/2026-07-17-page-templates/page-article.html
       .proto-article .mast/.mast-row/.nav      ->  .mc-mast-compact/
       .mc-mast-row/.mc-nav
     workspace/design/2026-07-17-page-templates/page-home.html (+ identical
       article copy)  .footer/.ft-*             ->  .mc-footer/.mc-ft-*
   ========================================================================== */

/* --------------------------------------------------------------------------
   Foundation tokens
   Bridge to theme.json presets when present; fall back to the approved
   brand constants so the chrome renders correctly on its own.
   -------------------------------------------------------------------------- */

:root {
	--mc-paper: var(--wp--preset--color--paper, #FAF8F4);
	--mc-ink: var(--wp--preset--color--ink, #1E1E1C);
	--mc-body: var(--wp--preset--color--body, #4A4843);
	--mc-teal: var(--wp--preset--color--teal, #0F6E56);
	--mc-gold: var(--wp--preset--color--gold, #C29B4E);
	--mc-font-display: var(--wp--preset--font-family--display, "Fraunces", Georgia, "Times New Roman", serif);
	--mc-font-text: var(--wp--preset--font-family--text, "Inter", "Helvetica Neue", Arial, sans-serif);

	/* Hairlines + soft inks — the shared rule weights of the whole design */
	--mc-hair: rgba(30, 30, 28, 0.16);          /* ink hairline on paper   */
	--mc-hair-strong: rgba(30, 30, 28, 0.18);   /* kicker flank hairline   */
	--mc-ink-soft: rgba(30, 30, 28, 0.62);      /* soft ink for labels     */
	--mc-paper-hair: rgba(250, 248, 244, 0.16); /* paper hairline on ink   */
}

/* Shared centered wrapper — the 72rem magazine measure */
.mc-wrap {
	max-width: 72rem;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 3rem);
}

/* --------------------------------------------------------------------------
   Shared label spec
   Small uppercase Inter 600 — the one voice used by the over-title, nav
   links, and footer tag/labels. Per-context letterspacing follows below.
   -------------------------------------------------------------------------- */

.mc-mast-over,
.mc-nav a,
.mc-ft-tag,
.mc-ft-label {
	font-family: var(--mc-font-text);
	font-weight: 600;
	font-size: 0.875rem;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Focus (square, brand-colored; gold on the dark footer band)
   -------------------------------------------------------------------------- */

.mc-mast a:focus-visible,
.mc-mast-compact a:focus-visible {
	outline: 2px solid var(--mc-teal);
	outline-offset: 3px;
}

.mc-footer a:focus-visible {
	outline: 2px solid var(--mc-gold);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Wordmark (shared base; sized per masthead context)
   -------------------------------------------------------------------------- */

.mc-wordmark {
	margin: 0;
	font-family: var(--mc-font-display);
	font-weight: 600;
	letter-spacing: 0.005em;
	color: var(--mc-ink);
}

.mc-wordmark a {
	color: inherit;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Full masthead — centered stacked print grammar (header-conde)
   -------------------------------------------------------------------------- */

.mc-mast {
	padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3rem) 0;
	text-align: center;
	font-family: var(--mc-font-text);
	color: var(--mc-ink);
}

.mc-mast-over {
	margin: 0 auto clamp(0.9rem, 2vw, 1.3rem);
	max-width: 34rem;
	line-height: 1.6;
	letter-spacing: 0.3em;
	text-indent: 0.3em; /* recenters letterspaced text */
	color: rgba(30, 30, 28, 0.64);
	text-wrap: balance;
}

.mc-mast .mc-wordmark {
	margin: 0 auto;
	font-size: clamp(2rem, 0.9rem + 4.8vw, 4.25rem);
	line-height: 1.05;
}

/* --------------------------------------------------------------------------
   Primary nav (shared base; both mastheads use nav.mc-nav > a)
   -------------------------------------------------------------------------- */

.mc-nav {
	display: flex;
	align-items: center;
}

.mc-nav a {
	display: inline-block;
	line-height: 1;
	text-decoration: none;
	color: var(--mc-ink);
	transition: color 140ms ease;
}

.mc-nav a:hover {
	color: var(--mc-teal);
}

/* Pure-CSS collapse: the Menu link is hidden until the per-variant media
   queries below reveal it (3-class selectors outweigh this 2-class hide). */
.mc-nav .mc-nav-menu {
	display: none;
}

/* Full-masthead nav: hairline-ruled, centered */
.mc-mast .mc-nav {
	margin-top: clamp(1.2rem, 2.6vw, 1.75rem);
	border-top: 1px solid var(--mc-hair);
	border-bottom: 1px solid var(--mc-hair);
	justify-content: center;
	gap: clamp(0.9rem, 2.4vw, 2.3rem);
}

.mc-mast .mc-nav a {
	padding: 0.95rem 0.2rem;
	letter-spacing: 0.22em;
}

/* --------------------------------------------------------------------------
   Compact masthead — one-row wordmark + nav (page-article)
   -------------------------------------------------------------------------- */

.mc-mast-compact {
	padding: clamp(1rem, 2.5vw, 1.4rem) clamp(1.25rem, 4vw, 3rem);
	border-bottom: 1px solid var(--mc-hair);
	font-family: var(--mc-font-text);
	color: var(--mc-ink);
}

.mc-mast-row {
	max-width: 72rem;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
}

.mc-mast-compact .mc-wordmark {
	font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.7rem);
	line-height: 1.1;
	white-space: nowrap;
}

.mc-mast-compact .mc-nav {
	align-items: baseline;
	gap: clamp(0.9rem, 1.8vw, 1.6rem);
}

.mc-mast-compact .mc-nav a {
	padding: 0.4rem 0.1rem;
	letter-spacing: 0.18em;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Footer — the charcoal band (page-home / page-article, identical)
   -------------------------------------------------------------------------- */

.mc-footer {
	background: var(--mc-ink);
	color: rgba(250, 248, 244, 0.92);
	font-family: var(--mc-font-text);
	padding-block: clamp(3.25rem, 7vw, 5rem) clamp(2.25rem, 5vw, 3rem);
}

/* Defensive zero — every footer text block sets its own margins below */
.mc-footer p {
	margin: 0;
}

.mc-footer .mc-ft-mast {
	text-align: center;
}

.mc-footer .mc-ft-wordmark {
	margin: 0;
	font-family: var(--mc-font-display);
	font-weight: 600;
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
	line-height: 1.1;
	color: var(--mc-paper);
}

.mc-footer .mc-ft-tag {
	margin: 0.9rem 0 0;
	line-height: 1.6;
	letter-spacing: 0.26em;
	text-indent: 0.26em;
	color: rgba(250, 248, 244, 0.6);
}

.mc-footer .mc-ft-rule {
	border: 0;
	width: 100%;
	max-width: none;
	height: 1px;
	background: var(--mc-paper-hair);
	margin-block: clamp(2rem, 4.5vw, 2.75rem);
	opacity: 1;
}

.mc-footer .mc-ft-cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(2rem, 4vw, 3rem);
}

.mc-footer .mc-ft-label {
	margin: 0 0 1.1rem;
	line-height: 1;
	letter-spacing: 0.22em;
	color: rgba(250, 248, 244, 0.55);
}

.mc-footer .mc-ft-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mc-footer .mc-ft-list li + li {
	margin-top: 0.65rem;
}

.mc-footer .mc-ft-list a,
.mc-footer .mc-ft-mail {
	font: 400 0.9375rem/1.5 var(--mc-font-text);
	color: rgba(250, 248, 244, 0.78);
	text-decoration: none;
	transition: color 140ms ease;
}

.mc-footer .mc-ft-list a:hover,
.mc-footer .mc-ft-mail:hover {
	color: var(--mc-gold);
}

.mc-footer .mc-ft-copy {
	margin: 0;
	max-width: 34ch;
	font: 400 0.9375rem/1.7 var(--mc-font-text);
	color: rgba(250, 248, 244, 0.72);
}

.mc-footer .mc-ft-sub {
	margin-top: 0.6rem;
}

.mc-footer .mc-ft-disclosure,
.mc-footer .mc-ft-legal {
	margin: 0;
	text-align: center;
	font: 400 0.875rem/1.6 var(--mc-font-text);
	color: rgba(250, 248, 244, 0.66);
}

.mc-footer .mc-ft-legal {
	margin-top: 1.1rem;
}

.mc-footer .mc-ft-links {
	margin: 1.1rem 0 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.9rem;
	font: 400 0.875rem/1 var(--mc-font-text);
}

.mc-footer .mc-ft-links a {
	color: rgba(250, 248, 244, 0.78);
	text-decoration: none;
	transition: color 140ms ease;
}

.mc-footer .mc-ft-links a:hover {
	color: var(--mc-gold);
}

.mc-footer .mc-ft-dot {
	color: var(--mc-gold);
}

/* --------------------------------------------------------------------------
   Responsive — full masthead (header-conde breakpoints)
   -------------------------------------------------------------------------- */

@media (max-width: 759px) {
	.mc-mast .mc-nav a {
		letter-spacing: 0.16em;
	}
	.mc-mast .mc-nv-d,
	.mc-mast .mc-nv-x,
	.mc-mast .mc-nv-e,
	.mc-mast .mc-nv-p {
		display: none;
	}
	.mc-mast .mc-nav .mc-nav-menu {
		display: inline-block;
	}
}

@media (max-width: 479px) {
	.mc-mast .mc-nav a {
		letter-spacing: 0.13em;
	}
	.mc-mast .mc-nv-b {
		display: none;
	}
	.mc-mast .mc-mast-over {
		letter-spacing: 0.2em;
		text-indent: 0.2em;
	}
}

/* --------------------------------------------------------------------------
   Responsive — compact masthead (page-article breakpoints)
   -------------------------------------------------------------------------- */

@media (max-width: 1099px) {
	.mc-mast-compact .mc-nv-d,
	.mc-mast-compact .mc-nv-x,
	.mc-mast-compact .mc-nv-e,
	.mc-mast-compact .mc-nv-p {
		display: none;
	}
	.mc-mast-compact .mc-nav .mc-nav-menu {
		display: inline-block;
	}
}

@media (max-width: 759px) {
	.mc-mast-compact {
		padding-bottom: 0;
	}
	.mc-mast-compact .mc-mast-row {
		flex-direction: column;
		align-items: center;
		gap: 0.9rem;
	}
	.mc-mast-compact .mc-nav {
		width: 100%;
		justify-content: center;
		border-top: 1px solid var(--mc-hair);
	}
	.mc-mast-compact .mc-nav a {
		padding: 0.85rem 0.1rem;
		letter-spacing: 0.15em;
	}
}

@media (max-width: 519px) {
	.mc-mast-compact .mc-nv-b {
		display: none;
	}
	.mc-mast-compact .mc-nav a {
		letter-spacing: 0.13em;
	}
}

/* --------------------------------------------------------------------------
   Responsive — footer (shared breakpoint from both page prototypes)
   -------------------------------------------------------------------------- */

@media (max-width: 759px) {
	.mc-footer .mc-ft-cols {
		grid-template-columns: minmax(0, 1fr);
		text-align: center;
	}
	.mc-footer .mc-ft-copy {
		margin-inline: auto;
	}
	.mc-footer .mc-ft-label {
		margin-bottom: 0.9rem;
	}
}

/* --------------------------------------------------------------------------
   Fraunces axis correction (Alex, 2026-07-27)

   Fraunces ships two defaults that are wrong for display use:
     WONK 1  — the axis is literally named for quirk; it swaps in the hooked
               descending J and other decorative alternates. Reads as an error.
     opsz 14 — a TEXT optical size. Rendering it at 56px stretches the
               thick/thin contrast and makes headlines look spindly.

   Pinned here for every element set in the display face. Deliberately NOT set
   globally: Inter also carries an opsz axis, and inheriting opsz 144 would push
   body copy onto display letterforms.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.mc-wordmark,
.mc-ft-wordmark,
.mc-ft-mast,
.mc-headline,
.mc-lead-hed,
.mc-card-hed,
.mc-news-hed,
.mc-ev-name,
.mc-sec-label,
.mc-sa-label,
.mc-entry-no,
.mc-pull p,
.mc-faq-q,
.mc-rel-title {
	font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
}