/* ============================================================
   Article surface — migration step 2 (2026-07-02).
   ONE reading experience for all posts (pipeline + editorial).
   Loads after magazine.css on single posts; rules here are the
   final design (not patches) — magazine.css's article rules
   migrate into this file and out of magazine.css at step 2b/5.
   Consumes tokens.css only; no raw hex (lint-enforced).
   ============================================================ */

/* ---- 0. Reading column width (user request 2026-07-02) --------
   magazine.css sets --tz-measure:720px sitewide; the article surface
   widens it. 860px ≈ 82ch at 19px Inter — right for these table/
   list-heavy guides. Loads only on singles, so archives unaffected. */
:root {
	--tz-measure: 860px;
}
@media (max-width: 1040px) {
	.tz-layout {
		grid-template-columns: minmax(0, 860px); /* magazine.css hardcodes 720px here */
	}
}

/* ---- 1. Layout unification ----------------------------------
   Travelfic styles every bare <article> as a floating card
   (travelfic-style.css:69 — white bg + 24px glow shadow).
   Pipeline posts embed <article class="tz-commercial-page"> in
   post_content and inherited that card; editorial posts didn't.
   Flat, quiet canvas for both: */
.tz-main article {
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* ---- 2. Byline: one, at the top ------------------------------ */
.tz-byline--top {
	font-family: var(--tz-font-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--tz-ink-soft);
	margin: var(--tz-s3) 0 0;
}
.tz-byline--top b {
	color: var(--tz-ink);
	font-weight: 600;
}
/* Content-embedded "Last updated" line (pipeline posts) duplicates
   the byline — hidden until the content sweep deletes it at source. */
.tz-prose .tz-updated {
	display: none;
}

/* ---- 3. Heading discipline -----------------------------------
   Kills the Customizer's faked title case (inline #tft-site rules
   at 44px/36px with capitalize + 1.15px letter-spacing). IDs beat
   classes, hence !important; the Customizer source fix is queued
   in /work/tasks.md — drop these overrides once it lands. */
.tz-title,
.tz-prose h2,
.tz-prose h3 {
	text-transform: none !important;
	letter-spacing: normal !important;
}
.tz-title {
	font-family: var(--tz-font-display);
	font-size: var(--tz-display-xl);
	line-height: 1.15;
	color: var(--tz-navy);
}
.tz-prose h2 {
	font-family: var(--tz-font-display);
	font-size: var(--tz-display);
	line-height: 1.2;
	color: var(--tz-navy);
}
.tz-prose h3 {
	font-family: var(--tz-font-body);
	font-size: 20px;
	font-weight: 600;
	color: var(--tz-navy);
}

/* ---- 4. Links: AA coral -------------------------------------- */
.tz-prose a {
	color: var(--tz-coral-text);
}
.tz-prose a:hover {
	color: var(--tz-coral-hover);
}

/* ---- 5. ONE table style (was two competing designs) ---------- */
.tz-prose table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--tz-font-body);
	font-size: 16px;
	line-height: 1.55;
	border: 1px solid var(--tz-hairline);
	margin: 0 0 var(--tz-s6);
}
.tz-prose th,
.tz-prose td {
	padding: var(--tz-s3) var(--tz-s4);
	border: 1px solid var(--tz-hairline);
	text-align: left;
	vertical-align: top;
	background: var(--tz-paper);
	color: var(--tz-ink);
}
.tz-prose thead th,
.tz-prose tbody th {
	background: var(--tz-cream);
	color: var(--tz-navy);
	font-weight: 600;
}

/* ---- 6. Hero: real <img>, no mobile sliver ------------------- */
.tz-hero .tz-photo-img {
	display: block;
	width: 100%;
	height: clamp(300px, 42vw, 540px);
	object-fit: cover;
}

/* ---- 7. CTA box: primary + ghost hierarchy -------------------
   .tz-prose prefix matches magazine.css's specificity (its
   `.tz-prose .tz-cta-box a` outranked single-class selectors). */
.tz-prose .tz-cta-box a {
	background: var(--tz-coral-600); /* AA for large/UI white text */
}
.tz-prose .tz-cta-box a:hover {
	background: var(--tz-coral-hover);
}
.tz-prose .tz-cta-box li + li a {
	background: transparent;
	border: 2px solid rgba(255, 255, 255, 0.65);
	color: var(--tz-paper);
}
.tz-prose .tz-cta-box li + li a:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--tz-paper);
}

/* ---- 8. (removed 2026-07-03) ----------------------------------
   The TEMP leak-hiding block is gone: the one-time content sweeps
   removed all internal notes from the DB (linter verified 0). */

/* ---- 9. Mobile ------------------------------------------------ */
@media (max-width: 640px) {
	.tz-prose table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.tz-prose th,
	.tz-prose td {
		min-width: 120px;
	}
	.tz-hero .tz-photo-img {
		height: 300px; /* was a ~150px background-crop sliver */
	}
}