/* Self-hosted Roboto: the face tezadlar.az already runs on, served from
   this server instead of Google's. Two subsets per weight, so a page of
   Azerbaijani text downloads the accented glyphs and nothing else. */

@font-face {
	font-family: "Roboto";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/roboto-400-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Roboto";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/roboto-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Roboto";
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/roboto-500-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Roboto";
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/roboto-500-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Roboto";
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/roboto-700-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Roboto";
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/roboto-700-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Roboto";
	font-weight: 900;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/roboto-900-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Roboto";
	font-weight: 900;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/roboto-900-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Tezadlar — design tokens
   Structure measured on report.az; brand colours are this newsroom's own.
   ========================================================================== */

:root {
	--tz-shell: 1248px;

	--tz-ink: #353535;
	--tz-ink-strong: #202020;
	--tz-ink-muted: #8e8e8e;
	--tz-line: #c9c9c9;
	--tz-line-soft: #e9e9e9;
	--tz-surface: #ffffff;
	--tz-surface-alt: #f1f1f1;
	--tz-surface-sunken: #f6f6f6;

	--tz-brand: #cf2e2e;
	--tz-brand-ink: #ffffff;
	--tz-accent: #ff6900;
	--tz-bar: #353535;
	--tz-bar-ink: #f1f1f1;
	--tz-bar-ink-hover: #fdfdfd;

	--tz-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	--tz-header-top-h: 81px;
	--tz-nav-h: 56px;

	--tz-ink-meta: #6b6b6b;
	--tz-up: #1a7f4b;

	--tz-sky: #eaf4fb;
	--tz-sky-line: #d8e8f3;
	--tz-sun: #f0a018;
	--tz-scrim: rgba(0, 0, 0, 0.45);
	--tz-on-media: rgba(255, 255, 255, 0.85);
	--tz-on-brand-soft: rgba(255, 255, 255, 0.18);
	--tz-on-brand-soft-hover: rgba(255, 255, 255, 0.32);

	/* Share buttons wear the destination's own colour, as the reference does.
	   The follow bar cannot: white on Facebook blue is 4.2:1 and 16px bold text
	   needs 4.5:1, so the bar takes the deeper blue (6.1:1). */
	--tz-fb: #1877f2;
	--tz-fb-bar: #145fc4;
	--tz-fb-bar-hover: #0f4c9e;
	--tz-wa: #25d366;
	--tz-tg: #0088cc;
	--tz-x: #0e0e0e;
	--tz-in: #2867b2;

	--tz-sidebar: 400px;
	--tz-col-gap: 24px;

	--tz-radius: 4px;
	--tz-gap: 20px;

	--tz-ease: cubic-bezier(0.2, 0, 0, 1);
	--tz-speed: 0.2s;
	--tz-focus: 2px solid var(--tz-brand);
	--tz-focus-offset: 2px;
}

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--tz-font);
	font-size: 15px;
	line-height: 1.5;
	color: var(--tz-ink);
	background: var(--tz-surface);
}

img { max-width: 100%; height: auto; display: block; }

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--tz-speed) var(--tz-ease);
}
a:hover { color: var(--tz-brand); }

.tz-shell {
	width: 100%;
	max-width: var(--tz-shell);
	margin-inline: auto;
	padding-inline: 16px;
}

.tz-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--tz-brand);
	color: var(--tz-brand-ink);
	padding: 10px 16px;
}
.tz-skip:focus { left: 0; }

/* ==========================================================================
   Header — top bar
   ========================================================================== */

.tz-header { background: var(--tz-surface); }

.tz-header__top-inner {
	height: var(--tz-header-top-h);
	display: flex;
	align-items: center;
	gap: 24px;
}

.tz-logo {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	height: 40px;
}

/* the_custom_logo() brings its own anchor; it must not be nested in another. */
.tz-logo .custom-logo-link,
.tz-logo__fallback {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 40px;
}

.tz-logo img {
	width: auto;
	height: 40px;
	max-width: 200px;
	object-fit: contain;
}

.tz-logo__mark {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 26%, var(--tz-surface) 0 5px, transparent 5px),
		radial-gradient(circle at 50% 74%, var(--tz-ink-strong) 0 5px, transparent 5px),
		linear-gradient(90deg, var(--tz-ink-strong) 0 50%, var(--tz-surface) 50% 100%);
	border: 1px solid var(--tz-ink-strong);
}

.tz-logo__text {
	font-size: 26px;
	font-weight: 900;
	letter-spacing: -0.02em;
	color: var(--tz-brand);
	line-height: 1;
}
.tz-logo__dot { color: var(--tz-ink-strong); }

.tz-trending {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

/* inline-block, not inline-flex: text-overflow has no effect on a flex
   container, so a long headline was being cut mid-word instead of ellipsised. */
.tz-trending__chip {
	display: inline-block;
	height: 29px;
	line-height: 29px;
	padding: 0 12px;
	background: var(--tz-surface-alt);
	color: var(--tz-ink-strong);
	font-size: 14px;
	font-weight: 500;
	border-radius: var(--tz-radius);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 33%;
	transition: background-color var(--tz-speed) var(--tz-ease), color var(--tz-speed) var(--tz-ease);
}
.tz-trending__chip:hover { background: var(--tz-line-soft); color: var(--tz-brand); }

.tz-header__tools {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

.tz-iconbtn {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 1px solid var(--tz-line-soft);
	border-radius: var(--tz-radius);
	background: var(--tz-surface);
	color: var(--tz-ink-strong);
	cursor: pointer;
	padding: 0;
	transition: border-color var(--tz-speed) var(--tz-ease), color var(--tz-speed) var(--tz-ease);
}
.tz-iconbtn:hover { border-color: var(--tz-line); color: var(--tz-brand); }
.tz-iconbtn svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

/* Search drawer */

.tz-searchbar {
	border-top: 1px solid var(--tz-line-soft);
	background: var(--tz-surface-sunken);
	padding: 12px 0;
}
.tz-searchbar[hidden] { display: none; }

.tz-searchform { display: flex; gap: 8px; }
.tz-searchform input[type="search"] {
	flex: 1 1 auto;
	height: 39px;
	padding: 0 12px;
	border: 1px solid var(--tz-line);
	border-radius: var(--tz-radius);
	background: #f4f3f3;
	font: inherit;
	font-size: 14px;
}
.tz-searchform button {
	height: 39px;
	padding: 0 18px;
	border: 0;
	border-radius: var(--tz-radius);
	background: var(--tz-brand);
	color: var(--tz-brand-ink);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

/* ==========================================================================
   Header — navigation strip
   ========================================================================== */

.tz-nav { background: var(--tz-bar); }

.tz-nav__inner {
	height: var(--tz-nav-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.tz-nav__list {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
	/* No overflow clipping: the priority-nav script keeps the strip in bounds,
	   and the overflow panel is positioned outside this box. */
}

.tz-nav__list > li > a,
.tz-nav__item > a {
	display: inline-flex;
	align-items: center;
	height: var(--tz-nav-h);
	padding: 0 14px;
	color: var(--tz-bar-ink);
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
	transition: color var(--tz-speed) var(--tz-ease), background-color var(--tz-speed) var(--tz-ease);
}

.tz-nav__list > li > a:hover,
.tz-nav__item > a:hover { color: var(--tz-bar-ink-hover); background: rgba(255, 255, 255, 0.08); }

.tz-nav__item.is-active > a,
.tz-nav__list > li.current-menu-item > a {
	color: var(--tz-bar-ink-hover);
	box-shadow: inset 0 -3px 0 var(--tz-brand);
}

.tz-social {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	flex: 0 0 auto;
}
.tz-social a {
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: var(--tz-bar-ink);
	background: rgba(255, 255, 255, 0.1);
	transition: background-color var(--tz-speed) var(--tz-ease), color var(--tz-speed) var(--tz-ease);
}
.tz-social a:hover { background: var(--tz-brand); color: var(--tz-brand-ink); }
.tz-social svg { width: 15px; height: 15px; fill: currentColor; }

/* ==========================================================================
   Main
   ========================================================================== */

.tz-main { padding-block: 20px 40px; }

/* ==========================================================================
   Footer + stage-1 list
   ========================================================================== */

.tz-footer {
	margin-top: 40px;
	padding-top: 32px;
	background: var(--tz-surface-sunken);
	color: var(--tz-ink);
}

.tz-plainlist { list-style: none; margin: 0; padding: 0; }
.tz-plainlist li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--tz-line-soft);
}
.tz-plainlist time { color: var(--tz-ink-muted); font-size: 13px; white-space: nowrap; }

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ==========================================================================
   Keyboard focus — every interactive element must show it
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
	outline: var(--tz-focus);
	outline-offset: var(--tz-focus-offset);
	border-radius: var(--tz-radius);
}

.tz-nav__list > li > a:focus-visible,
.tz-nav__item > a:focus-visible,
.tz-social a:focus-visible {
	outline-color: var(--tz-bar-ink-hover);
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   Navigation overflow menu
   ========================================================================== */

.tz-nav__item--more { position: relative; }

.tz-nav__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: var(--tz-nav-h);
	padding: 0 14px;
	border: 0;
	background: none;
	color: var(--tz-bar-ink);
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: color var(--tz-speed) var(--tz-ease), background-color var(--tz-speed) var(--tz-ease);
}
.tz-nav__more:hover { color: var(--tz-bar-ink-hover); background: rgba(255, 255, 255, 0.08); }

.tz-nav__caret {
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--tz-speed) var(--tz-ease);
}
.tz-nav__more[aria-expanded="true"] .tz-nav__caret { transform: rotate(-135deg) translate(-2px, -2px); }

.tz-nav__submenu {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 40;
	min-width: 200px;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: var(--tz-surface);
	border: 1px solid var(--tz-line-soft);
	border-radius: var(--tz-radius);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	display: none;
}
.tz-nav__item--more.is-open .tz-nav__submenu { display: block; }

.tz-nav__submenu a {
	display: block;
	padding: 9px 16px;
	color: var(--tz-ink);
	font-size: 14px;
	font-weight: 500;
	transition: background-color var(--tz-speed) var(--tz-ease), color var(--tz-speed) var(--tz-ease);
}
.tz-nav__submenu a:hover { background: var(--tz-surface-alt); color: var(--tz-brand); }

.tz-nav__item--more.is-active > .tz-nav__more {
	color: var(--tz-bar-ink-hover);
	box-shadow: inset 0 -3px 0 var(--tz-brand);
}

/* ==========================================================================
   Homepage — two-column shell
   Reference measurements: docs/REFERENCE-REPORT-AZ.md
   ========================================================================== */

.tz-front {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--tz-sidebar);
	gap: var(--tz-col-gap);
}

.tz-front__main { min-width: 0; }
.tz-front__side { min-width: 0; }

/* The feed runs to the foot of the story column. It is queried longer than it
   needs to be and the column clips what does not fit, so the two sides always
   end level however much the left one grows. */
@media (min-width: 1024px) {
	.tz-front__side {
		display: flex;
		flex-direction: column;
	}

	.tz-latest {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0;
	}

	.tz-latest__list {
		flex: 1 1 auto;
		min-height: 0;
		overflow: hidden;
		-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), transparent 100%);
		mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), transparent 100%);
	}

	.tz-latest__all { flex: 0 0 auto; }
}

.tz-section-title {
	margin: 0 0 24px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--tz-ink);
}

/* Shared media frame: the image fills a fixed ratio, so a missing thumbnail
   never collapses the layout. */
.tz-media__placeholder {
	display: block;
	background: linear-gradient(135deg, var(--tz-surface-alt), var(--tz-line-soft));
}

/* ==========================================================================
   Slider — one component for the hero and the breaking strip
   ========================================================================== */

.tz-slider {
	position: relative;
	padding-bottom: var(--tz-slider-pad, 0px);
}

.tz-slider__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.tz-slider__track::-webkit-scrollbar { display: none; }

.tz-slider__track > * {
	flex: 0 0 100%;
	scroll-snap-align: start;
}

/* Arrows and dots do nothing without the script, so they stay out of the
   document until it marks the slider live. */
.tz-slider__arrow,
.tz-slider__dots { display: none; }

.tz-slider.is-live .tz-slider__arrow { display: grid; }
.tz-slider.is-live .tz-slider__dots { display: flex; }

.tz-slider__arrow {
	position: absolute;
	top: 0;
	bottom: var(--tz-slider-pad, 0px);
	margin-block: auto;
	z-index: 2;
	width: 40px;
	height: 40px;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--tz-scrim);
	color: var(--tz-brand-ink);
	cursor: pointer;
	transition: background-color var(--tz-speed) var(--tz-ease), opacity var(--tz-speed) var(--tz-ease);
}
.tz-slider__arrow:hover { background: var(--tz-brand); }
.tz-slider__arrow--prev { left: 10px; }
.tz-slider__arrow--next { right: 10px; }

.tz-slider__arrow svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tz-slider__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--tz-slider-pad, 0px);
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.tz-slider__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--tz-line);
	cursor: pointer;
	transition: background-color var(--tz-speed) var(--tz-ease), transform var(--tz-speed) var(--tz-ease);
}
.tz-slider__dot:hover { background: var(--tz-ink-muted); }
.tz-slider__dot.is-active {
	background: var(--tz-brand);
	transform: scale(1.2);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.tz-slider--hero { --tz-slider-pad: 28px; }

.tz-slide {
	position: relative;
	display: block;
	aspect-ratio: 33 / 20;
	overflow: hidden;
	border-radius: var(--tz-radius);
	color: var(--tz-brand-ink);
	background: var(--tz-ink-strong);
}
.tz-slide:hover { color: var(--tz-brand-ink); }

.tz-slide__media {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
}
.tz-slide__media img,
.tz-slide__media .tz-media__placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s var(--tz-ease);
}
.tz-slide:hover .tz-slide__media img { transform: scale(1.03); }

/* Legible text over any photograph. */
.tz-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.45) 38%, rgba(0, 0, 0, 0) 68%);
}

.tz-slide__body {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 24px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.tz-slide__title {
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	line-height: 34px;
	color: var(--tz-brand-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tz-slide .tz-meta { font-size: 14px; color: var(--tz-on-media); }

/* Category label */

.tz-label {
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--tz-brand);
}

.tz-label--onmedia {
	height: 24px;
	padding: 0 8px;
	border-radius: 2px;
	background: var(--tz-brand);
	color: var(--tz-brand-ink);
}

/* Printed ahead of a pinned-breaking post's title everywhere but the breaking
   strip itself, which already carries its own label above the row. A filled
   pill rather than coloured text: the title sits on a white card here, a dark
   strip on the video block, a photo there -- one background/text pairing
   keeps the contrast fixed instead of failing on whichever of those is dark.
   inline-block, not inline-flex, so it does not interfere with the
   -webkit-line-clamp truncation used on card and slide titles. */
.tz-badge-breaking {
	display: inline-block;
	margin-right: 4px;
	padding: 1px 5px;
	border-radius: 2px;
	background: var(--tz-brand);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--tz-brand-ink);
	vertical-align: 1px;
}

.tz-meta {
	display: flex;
	gap: 12px;
	font-size: 12px;
	color: var(--tz-ink-meta);
}

/* ==========================================================================
   Four cards
   ========================================================================== */

.tz-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--tz-col-gap);
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

/* A column with the date pushed to the bottom: without this a two-line
   headline and a four-line one leave their dates at different heights and the
   whole row looks ragged. */
.tz-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.tz-card .tz-meta { margin-top: auto; padding-top: 8px; }

.tz-cards__item,
.tz-block__rest > li { display: flex; }

.tz-card__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	margin-bottom: 12px;
	overflow: hidden;
	border-radius: var(--tz-radius);
}
.tz-card__media img,
.tz-card__media .tz-media__placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s var(--tz-ease);
}
.tz-card:hover .tz-card__media img { transform: scale(1.04); }

.tz-card__title {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	color: var(--tz-ink);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color var(--tz-speed) var(--tz-ease);
}
.tz-card:hover .tz-card__title { color: var(--tz-brand); }

/* ==========================================================================
   Breaking strip
   ========================================================================== */

.tz-breaking {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-bottom: 24px;
	padding-left: 24px;
	border-radius: var(--tz-radius);
	background: var(--tz-brand);
	color: var(--tz-brand-ink);
}

.tz-breaking__label {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.tz-breaking__label svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tz-breaking .tz-slider {
	flex: 1 1 auto;
	min-width: 0;
}

.tz-breaking__item {
	display: block;
	padding: 16px 88px 16px 0;
	color: var(--tz-brand-ink);
}
.tz-breaking__item:hover { color: var(--tz-brand-ink); }

.tz-breaking__title {
	display: -webkit-box;
	margin-bottom: 4px;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.tz-breaking__item:hover .tz-breaking__title { text-decoration: underline; }

/* Full white, not the 85% wash used over photographs: at 13px on the brand
   red anything lighter drops under the 4.5:1 contrast floor. */
.tz-breaking .tz-meta { font-size: 13px; color: var(--tz-brand-ink); }

.tz-breaking .tz-slider__arrow {
	width: 28px;
	height: 28px;
	background: var(--tz-on-brand-soft);
}
.tz-breaking .tz-slider__arrow:hover { background: var(--tz-on-brand-soft-hover); }
.tz-breaking .tz-slider__arrow svg { width: 16px; height: 16px; }
.tz-breaking .tz-slider__arrow--prev { left: auto; right: 44px; }
.tz-breaking .tz-slider__arrow--next { right: 8px; }

/* ==========================================================================
   Sidebar widgets — currency and weather
   Both are links; the reference site's rate box is not. Values are live
   (tz_currency_rates, tz_weather_now).
   ========================================================================== */

.tz-widgets {
	display: grid;
	gap: 12px;
	margin-bottom: 24px;
}

.tz-widget {
	display: block;
	padding: 12px 14px;
	border: 1px solid var(--tz-line-soft);
	border-radius: var(--tz-radius);
	background: var(--tz-surface);
	transition: border-color var(--tz-speed) var(--tz-ease), background-color var(--tz-speed) var(--tz-ease);
}
/* Border and tint only. A transitioned box-shadow renders at sub-pixel widths
   while it animates, which the contract check reads as a mismatch. */
.tz-widget:hover {
	border-color: var(--tz-line);
	background-color: var(--tz-surface-sunken);
	color: inherit;
}

.tz-widget__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 10px;
}

.tz-widget__name {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tz-ink-strong);
}

.tz-widget__more {
	font-size: 12px;
	font-weight: 500;
	color: var(--tz-brand);
}

.tz-rates {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.tz-rate {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-left: 10px;
	border-left: 2px solid var(--tz-line-soft);
}
.tz-rate--up { border-left-color: var(--tz-up); }
.tz-rate--down { border-left-color: var(--tz-brand); }

.tz-rate__code {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--tz-ink-meta);
}

.tz-rate__value {
	font-size: 15px;
	font-weight: 700;
	color: var(--tz-ink-strong);
	font-variant-numeric: tabular-nums;
}

.tz-widget--weather {
	display: flex;
	align-items: center;
	gap: 12px;
	border-color: var(--tz-sky-line);
	background: linear-gradient(135deg, var(--tz-sky), var(--tz-surface) 70%);
}
.tz-widget--weather:hover { background: var(--tz-sky); }

.tz-weather__icon {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, var(--tz-sun) 0 11px, color-mix(in srgb, var(--tz-sun) 22%, transparent) 11px 18px);
}

.tz-weather__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

.tz-weather__temp {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--tz-ink-strong);
}

.tz-weather__place {
	font-size: 13px;
	color: var(--tz-ink-meta);
}

.tz-weather__range {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	color: var(--tz-ink-meta);
}

/* ==========================================================================
   Live feed
   ========================================================================== */

.tz-latest__list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.tz-latest__item {
	display: flex;
	gap: 16px;
	padding: 14px 12px;
	border-radius: var(--tz-radius);
	transition: background-color var(--tz-speed) var(--tz-ease);
}
.tz-latest__item:hover { background: var(--tz-surface-sunken); color: inherit; }

.tz-latest__time {
	flex: 0 0 auto;
	font-size: 15px;
	font-weight: 700;
	line-height: 24px;
	color: var(--tz-brand);
	font-variant-numeric: tabular-nums;
}

.tz-latest__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.tz-latest__title {
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	color: var(--tz-ink);
	transition: color var(--tz-speed) var(--tz-ease);
}
.tz-latest__item:hover .tz-latest__title { color: var(--tz-brand); }

.tz-latest__category {
	font-size: 13px;
	font-weight: 500;
	color: var(--tz-ink-meta);
}

.tz-latest__all {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 16px;
	padding: 13px 16px;
	border-radius: var(--tz-radius);
	background: var(--tz-surface-sunken);
	font-size: 15px;
	font-weight: 500;
	transition: background-color var(--tz-speed) var(--tz-ease), color var(--tz-speed) var(--tz-ease);
}
.tz-latest__all:hover { background: var(--tz-brand); color: var(--tz-brand-ink); }
.tz-latest__all svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Headlines carry unbroken tokens such as "Tvente"(Niderland)-10-, which
   overflow the clamp box sideways instead of wrapping. */
.tz-slide__title,
.tz-card__title,
.tz-breaking__title,
.tz-latest__title { overflow-wrap: anywhere; }

/* ==========================================================================
   Aktual xəbərlər — three-up carousel
   ========================================================================== */

.tz-actual { margin-top: 40px; }

.tz-slider--cards .tz-slider__track { gap: var(--tz-col-gap); }

.tz-slider--cards .tz-slider__cell {
	flex: 0 0 calc((100% - 2 * var(--tz-col-gap)) / 3);
}

/* Over the cards rather than over a photograph, so the arrow needs its own
   surface to stay legible. */
.tz-slider--cards .tz-slider__arrow {
	width: 32px;
	height: 32px;
	background: var(--tz-ink-strong);
}
.tz-slider--cards .tz-slider__arrow svg { width: 16px; height: 16px; }
.tz-slider--cards .tz-slider__arrow--prev { left: -6px; }
.tz-slider--cards .tz-slider__arrow--next { right: -6px; }

/* ==========================================================================
   Category blocks
   ========================================================================== */

.tz-blocks {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px var(--tz-col-gap);
	margin-top: 40px;
}

.tz-block { min-width: 0; }

.tz-block__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 24px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--tz-line-soft);
}
.tz-block__head .tz-section-title {
	margin: 0;
	transition: color var(--tz-speed) var(--tz-ease);
}
.tz-block__head:hover .tz-section-title { color: var(--tz-brand); }

.tz-block__more {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 500;
	color: var(--tz-brand);
}

.tz-block__rest {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--tz-col-gap);
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.tz-footer__top {
	display: flex;
	gap: 48px;
	padding-bottom: 32px;
	margin-bottom: 32px;
	border-bottom: 1px solid var(--tz-line-soft);
}

.tz-footer__brand { flex: 0 0 260px; }

.tz-footer__name {
	display: block;
	font-size: 26px;
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--tz-brand);
}
.tz-footer__dot { color: var(--tz-ink-strong); }

.tz-footer__tagline {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--tz-ink-meta);
}

.tz-footer__col { flex: 0 0 auto; }
.tz-footer__col--wide { flex: 1 1 auto; }

.tz-footer__heading {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tz-ink-strong);
}

.tz-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
}
.tz-footer__list li { margin-bottom: 8px; }
.tz-footer__list a { color: var(--tz-ink); }
.tz-footer__list a:hover { color: var(--tz-brand); }

.tz-footer__list--cols {
	columns: 3;
	column-gap: 24px;
}

.tz-footer__center {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding-bottom: 32px;
}

.tz-footer__legal {
	max-width: 640px;
	margin: 0;
	font-size: 13px;
	line-height: 20px;
	color: var(--tz-ink-meta);
}

.tz-footer__social {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	flex: 0 0 auto;
}
.tz-footer__social a {
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--tz-surface-alt);
	color: var(--tz-ink-strong);
	transition: background-color var(--tz-speed) var(--tz-ease), color var(--tz-speed) var(--tz-ease);
}
.tz-footer__social a:hover { background: var(--tz-brand); color: var(--tz-brand-ink); }
.tz-footer__social svg { width: 17px; height: 17px; fill: currentColor; }

.tz-footer__bottom {
	padding-block: 16px;
	background: var(--tz-bar);
	color: var(--tz-bar-ink);
}
.tz-footer__bottom p { margin: 0; font-size: 12px; }

/* ==========================================================================
   Yazarlar — the paper's columnists
   ========================================================================== */

.tz-authors { margin-top: 40px; }

.tz-authors__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--tz-col-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tz-author {
	display: flex;
	flex-direction: column;
	padding: 16px;
	border: 1px solid var(--tz-line-soft);
	border-top: 3px solid var(--tz-brand);
	border-radius: var(--tz-radius);
	background: var(--tz-surface);
}

.tz-author__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

/* The paper keeps no portraits, so the columnist gets a monogram rather than
   a stand-in silhouette. */
.tz-author__mark {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--tz-surface-alt);
	color: var(--tz-brand);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
}
.tz-author__head:hover .tz-author__mark { background: var(--tz-brand); color: var(--tz-brand-ink); }

.tz-author__name {
	font-size: 15px;
	font-weight: 700;
	line-height: 20px;
	color: var(--tz-ink-strong);
	min-width: 0;
}

.tz-author__piece {
	display: -webkit-box;
	font-size: 14px;
	line-height: 21px;
	color: var(--tz-ink);
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}
.tz-author__piece:hover { color: var(--tz-brand); }

.tz-author .tz-meta { margin-top: auto; padding-top: 10px; }

/* ==========================================================================
   Foto xəbərlər — a mosaic, not another row of cards
   ========================================================================== */

.tz-photos { margin-top: 40px; }

.tz-photos__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 148px;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tz-photos__item--lead {
	grid-column: span 2;
	grid-row: span 2;
}

.tz-photo {
	position: relative;
	display: block;
	height: 100%;
	overflow: hidden;
	border-radius: var(--tz-radius);
	background: var(--tz-ink-strong);
	color: var(--tz-brand-ink);
}
.tz-photo:hover { color: var(--tz-brand-ink); }

.tz-photo__media {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
}
.tz-photo__media img,
.tz-photo__media .tz-media__placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s var(--tz-ease);
}
.tz-photo:hover .tz-photo__media img { transform: scale(1.05); }

.tz-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.2) 45%, rgba(0, 0, 0, 0) 70%);
}

.tz-photo__badge {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 1;
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--tz-brand);
}
.tz-photo__badge svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: var(--tz-brand-ink);
	stroke-width: 1.6;
	stroke-linejoin: round;
}

.tz-photo__body {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 10px;
	z-index: 1;
}

.tz-photo__title {
	display: -webkit-box;
	font-size: 13px;
	font-weight: 500;
	line-height: 19px;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}
.tz-photos__item--lead .tz-photo__title { font-size: 18px; line-height: 26px; font-weight: 700; }
.tz-photos__item--lead .tz-photo__body { left: 20px; right: 20px; bottom: 18px; }

/* ==========================================================================
   Video xəbərlər — its own dark band
   ========================================================================== */

.tz-videos {
	margin-top: 40px;
	padding: 24px;
	border-radius: var(--tz-radius);
	background: var(--tz-ink-strong);
	color: var(--tz-brand-ink);
}

.tz-videos__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
}

.tz-videos__title {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
}

.tz-videos__count {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tz-line);
}

.tz-videos__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--tz-col-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
.tz-videos__grid > li { display: flex; }

.tz-video {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: var(--tz-brand-ink);
}
.tz-video:hover { color: var(--tz-brand-ink); }

.tz-video__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	margin-bottom: 12px;
	overflow: hidden;
	border-radius: var(--tz-radius);
	background: #000000;
}
.tz-video__media img,
.tz-video__media .tz-media__placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.85;
	transition: opacity var(--tz-speed) var(--tz-ease), transform 0.4s var(--tz-ease);
}
.tz-video:hover .tz-video__media img { opacity: 1; transform: scale(1.04); }

.tz-video__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--tz-brand);
	transition: transform var(--tz-speed) var(--tz-ease);
}
.tz-video:hover .tz-video__play { transform: scale(1.1); }
.tz-video__play svg { width: 22px; height: 22px; fill: var(--tz-brand-ink); }

.tz-video__title {
	display: -webkit-box;
	font-size: 15px;
	font-weight: 500;
	line-height: 22px;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}
.tz-videos .tz-meta { margin-top: auto; padding-top: 8px; color: var(--tz-line); }

/* A breaking post's whole headline carries the red fill, not just the badge
   word in front of it -- higher-specificity than the hover/dark-band colour
   rules above so it wins regardless of state or source order. */
.tz-card__title.is-breaking,
.tz-slide__title.is-breaking,
.tz-latest__title.is-breaking,
.tz-photo__title.is-breaking,
.tz-video__title.is-breaking {
	background: var(--tz-brand);
	color: var(--tz-brand-ink);
	padding: 2px 8px;
	border-radius: 2px;
}

.tz-card:hover .tz-card__title.is-breaking,
.tz-latest__item:hover .tz-latest__title.is-breaking { color: var(--tz-brand-ink); }

/* The title fill and the badge's own fill are the same red-on-white pair, so
   on a breaking title the badge used to vanish into the background it sat on.
   Inverting it here keeps the pill visible against the solid red behind it. */
.is-breaking .tz-badge-breaking {
	background: var(--tz-brand-ink);
	color: var(--tz-brand);
}

/* ==========================================================================
   Xəbər təqvimi
   ========================================================================== */

.tz-calendar { margin-top: 40px; }

.tz-calendar__hint {
	margin: -16px 0 20px;
	font-size: 14px;
	color: var(--tz-ink-meta);
}

.tz-calendar table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 6px;
	table-layout: fixed;
}

.tz-calendar caption {
	margin-bottom: 12px;
	font-size: 16px;
	font-weight: 700;
	color: var(--tz-ink-strong);
	text-align: left;
}

.tz-calendar th {
	padding-bottom: 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tz-ink-meta);
}

.tz-calendar td {
	height: 44px;
	text-align: center;
	vertical-align: middle;
	font-size: 15px;
	/* A day with no stories is still text on a tinted cell, so it has to clear
	   the contrast floor like everything else. */
	color: var(--tz-ink-meta);
	background: var(--tz-surface-sunken);
	border-radius: var(--tz-radius);
}
.tz-calendar td.pad { background: none; }

/* A day with stories behind it is a target; an empty one is just a number. */
.tz-calendar td:has(a) { background: var(--tz-surface-alt); }

.tz-calendar td a {
	display: grid;
	place-items: center;
	height: 44px;
	font-weight: 700;
	color: var(--tz-ink-strong);
	border-radius: var(--tz-radius);
	transition: background-color var(--tz-speed) var(--tz-ease), color var(--tz-speed) var(--tz-ease);
}
.tz-calendar td a:hover { background: var(--tz-brand); color: var(--tz-brand-ink); }

.tz-calendar td#today,
.tz-calendar td.today { box-shadow: inset 0 0 0 2px var(--tz-brand); }

.tz-calendar .wp-calendar-nav {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px;
	font-size: 14px;
	font-weight: 500;
}
.tz-calendar .wp-calendar-nav a { color: var(--tz-brand); }
.tz-calendar .wp-calendar-nav-next { margin-left: auto; }

/* ==========================================================================
   Archive and day listings
   ========================================================================== */

.tz-archive { padding-block: 8px 24px; }

.tz-archive__head {
	padding-bottom: 16px;
	margin-bottom: 24px;
	border-bottom: 2px solid var(--tz-line-soft);
}

.tz-archive__title {
	margin: 0;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--tz-ink-strong);
}

.tz-archive__intro {
	margin-top: 8px;
	font-size: 15px;
	color: var(--tz-ink-meta);
}

/* Section prose, printed under the listing rather than above it. */
.tz-archive__about {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 2px solid var(--tz-line-soft);
	font-size: 15px;
	line-height: 1.7;
	color: var(--tz-ink-meta);
}

.tz-archive__about h2 {
	margin: 24px 0 8px;
	font-size: 18px;
	font-weight: 700;
	color: var(--tz-ink-strong);
}

.tz-archive__about h3 {
	margin: 16px 0 6px;
	font-size: 16px;
	font-weight: 500;
	color: var(--tz-ink-strong);
}

.tz-archive__about p,
.tz-archive__about ul {
	margin: 0 0 12px;
}

.tz-archive__about ul {
	padding-left: 20px;
	list-style: disc;
}

.tz-archive__subtitle {
	margin: 0 0 16px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--tz-ink-strong);
}

/* The 404 page repeats the search field outside the header drawer. */
.tz-archive__head .tz-searchform {
	margin-top: 16px;
	max-width: 480px;
}

.tz-archive__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px var(--tz-col-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
.tz-archive__grid > li { display: flex; }

.tz-archive__empty { font-size: 16px; color: var(--tz-ink-meta); }

.tz-pager {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 32px;
	flex-wrap: wrap;
}
.tz-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 14px;
	border-radius: var(--tz-radius);
	background: var(--tz-surface-sunken);
	font-size: 15px;
	font-weight: 500;
	transition: background-color var(--tz-speed) var(--tz-ease), color var(--tz-speed) var(--tz-ease);
}
.tz-pager .page-numbers:hover { background: var(--tz-line-soft); color: var(--tz-brand); }
.tz-pager .page-numbers.current { background: var(--tz-brand); color: var(--tz-brand-ink); }

/* ==========================================================================
   Static pages
   ========================================================================== */

.tz-page {
	max-width: 856px;
	padding-block: 8px 40px;
}

.tz-page__head {
	padding-bottom: 16px;
	margin-bottom: 24px;
	border-bottom: 2px solid var(--tz-line-soft);
}

.tz-page__title {
	margin: 0;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--tz-ink-strong);
}

/* The four static pages still render through the old plugin's shortcode, so
   these rules only set what it leaves alone: reading measure and type. */
.tz-page__body {
	font-size: 16px;
	line-height: 1.6;
	color: var(--tz-ink);
}

.tz-page__body > *:last-child { margin-bottom: 0; }
.tz-page__body p { margin: 0 0 16px; }

.tz-page__body h2 {
	margin: 28px 0 12px;
	font-size: 20px;
	font-weight: 700;
	color: var(--tz-ink-strong);
}

.tz-page__body h3 {
	margin: 24px 0 10px;
	font-size: 18px;
	font-weight: 700;
	color: var(--tz-ink-strong);
}

.tz-page__body a {
	color: var(--tz-brand);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.tz-page__body a:hover { color: var(--tz-ink-strong); }

.tz-page__body ul,
.tz-page__body ol {
	margin: 0 0 16px;
	padding-left: 22px;
}
.tz-page__body li { margin-bottom: 8px; }

.tz-page__body img {
	max-width: 100%;
	height: auto;
	border-radius: 2px;
}

/* Masthead facts: label and value on one line while there is room, stacked
   once the label would squeeze the value. */
.tz-page__facts {
	display: grid;
	grid-template-columns: minmax(0, 15em) minmax(0, 1fr);
	gap: 0;
	margin: 0 0 16px;
	border-top: 1px solid var(--tz-line-soft);
}

.tz-page__facts dt,
.tz-page__facts dd {
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid var(--tz-line-soft);
}

.tz-page__facts dt {
	padding-right: 16px;
	font-weight: 500;
	color: var(--tz-ink-meta);
}

@media (max-width: 599px) {
	.tz-page__facts { grid-template-columns: minmax(0, 1fr); }
	.tz-page__facts dt { padding-bottom: 0; border-bottom: 0; }
	.tz-page__facts dd { padding-top: 2px; }
}

/* ==========================================================================
   Weather forecast page — district list left, selection right
   ========================================================================== */

.tz-forecast { padding-block: 8px 40px; }

.tz-forecast__title {
	margin: 0 0 24px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--tz-ink-strong);
}

.tz-forecast__layout {
	display: grid;
	grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
	gap: var(--tz-col-gap);
	align-items: start;
}

.tz-forecast__list {
	max-height: 640px;
	overflow-y: auto;
	border: 1px solid var(--tz-line-soft);
	border-radius: var(--tz-radius);
}
.tz-forecast__list ul { margin: 0; padding: 0; list-style: none; }

.tz-forecast__region {
	display: block;
	padding: 10px 16px;
	font-size: 15px;
	font-weight: 500;
	color: var(--tz-ink);
	border-bottom: 1px solid var(--tz-line-soft);
	transition: background-color var(--tz-speed) var(--tz-ease), color var(--tz-speed) var(--tz-ease);
}
.tz-forecast__list li:last-child .tz-forecast__region { border-bottom: 0; }
.tz-forecast__region:hover,
.tz-forecast__region:focus-visible { background: var(--tz-surface-sunken); color: var(--tz-brand); }
.tz-forecast__region.is-active {
	background: var(--tz-sky);
	color: var(--tz-ink-strong);
	font-weight: 700;
	box-shadow: inset 3px 0 0 var(--tz-brand);
}

.tz-forecast__error { font-size: 15px; color: var(--tz-ink-meta); padding: 24px; }

/* Card measurements (padding, gap, border, radius) match report.az's own
   forecast page -- this project's established design reference -- but the
   colour values are this theme's own tokens, not report.az's raw ones:
   their card border (#c9c9c9) and radius (2px) already equal our
   --tz-line/--tz-radius, so no new value needed there either. */
.tz-forecast__main { display: flex; flex-direction: column; gap: 24px; }

.tz-forecast__card {
	padding: 32px;
	border: 1px solid var(--tz-line);
	border-radius: var(--tz-radius);
	background: var(--tz-surface-sunken);
}

.tz-forecast__card__title {
	margin: 0 0 20px;
	font-size: 20px;
	font-weight: 700;
	color: var(--tz-ink-strong);
}

/* --- Current conditions card ---------------------------------------------- */

.tz-forecast__now__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
	font-size: 14px;
	color: var(--tz-ink-meta);
}

.tz-forecast__now__body {
	display: flex;
	align-items: center;
	gap: 16px;
}

.tz-wicon { flex: 0 0 auto; }

.tz-forecast__now__temp {
	font-size: 56px;
	font-weight: 700;
	line-height: 1;
	color: var(--tz-ink-strong);
}

.tz-forecast__now__state {
	align-self: center;
	margin-left: -4px;
	font-size: 16px;
	font-weight: 500;
	color: var(--tz-ink-meta);
}

.tz-forecast__now__range {
	margin: 20px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--tz-line-soft);
	font-size: 18px;
	font-weight: 600;
	color: var(--tz-ink);
}

/* --- Details card: feels-like, sunrise/sunset, metric grid ---------------- */

.tz-forecast__details__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}

.tz-forecast__details__label {
	display: block;
	font-size: 13px;
	color: var(--tz-ink-meta);
}

.tz-forecast__details__feels {
	font-size: 36px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--tz-ink-strong);
}

.tz-forecast__sun {
	display: flex;
	gap: 16px;
	font-size: 14px;
	font-weight: 500;
	color: var(--tz-ink-meta);
	font-variant-numeric: tabular-nums;
}
.tz-forecast__sun span { display: inline-flex; align-items: center; gap: 4px; }
.tz-forecast__sun .tz-micon { fill: var(--tz-sun); }

.tz-forecast__info {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tz-forecast__info li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding-top: 16px;
	border-top: 1px solid var(--tz-line-soft);
	font-size: 15px;
	font-weight: 700;
	color: var(--tz-ink-strong);
	font-variant-numeric: tabular-nums;
}

.tz-forecast__info__type {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--tz-ink-meta);
}
.tz-forecast__info__type .tz-micon { fill: var(--tz-ink-meta); flex: 0 0 auto; }

.tz-micon { width: 18px; height: 18px; }

/* --- Weekly forecast card --------------------------------------------------- */

.tz-forecast__week__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tz-forecast__week__grid li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 16px 4px;
	border-radius: var(--tz-radius);
	background: var(--tz-surface);
	text-align: center;
}

.tz-forecast__week__day {
	font-size: 12px;
	font-weight: 600;
	color: var(--tz-ink-meta);
}

.tz-forecast__week__range {
	font-size: 14px;
	font-weight: 700;
	color: var(--tz-ink-strong);
	font-variant-numeric: tabular-nums;
}

.tz-forecast__week__precip {
	font-size: 12px;
	font-weight: 500;
	color: var(--tz-in);
}

/* --- About paragraph -------------------------------------------------------- */

.tz-forecast__about p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--tz-ink);
}

@media (max-width: 1023px) {
	.tz-forecast__layout { grid-template-columns: minmax(0, 1fr); }
	.tz-forecast__list { max-height: 320px; }
	.tz-forecast__info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
	.tz-forecast__card { padding: 20px; }
	.tz-forecast__now__head { flex-direction: column; align-items: flex-start; gap: 4px; }
	.tz-forecast__now__temp { font-size: 44px; }
	.tz-forecast__details__head { flex-direction: column; align-items: flex-start; gap: 12px; }
	.tz-forecast__info { grid-template-columns: minmax(0, 1fr); }
	.tz-forecast__week__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   Currency calculator — two fields either side of a swap button, a daily
   rate table below. Card padding (32px) and border/radius match
   .tz-forecast__card; the calculator grid, table and trend icons are this
   page's own layout, not copied from the reference site.
   ========================================================================== */

.tz-currency { padding-block: 8px 40px; }

.tz-currency__title {
	margin: 0 0 24px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--tz-ink-strong);
}

.tz-currency__error { font-size: 15px; color: var(--tz-ink-meta); }

.tz-currency__calc {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: end;
	gap: 24px;
	padding: 32px;
	margin-bottom: 40px;
	border: 1px solid var(--tz-line);
	border-radius: var(--tz-radius);
	background: var(--tz-surface-sunken);
}

.tz-currency__field { display: flex; flex-direction: column; gap: 8px; }

.tz-currency__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--tz-ink-meta);
}

.tz-currency__select,
.tz-currency__amount {
	width: 100%;
	height: 47px;
	padding: 0 14px;
	border: 1px solid var(--tz-line);
	border-radius: var(--tz-radius);
	background: var(--tz-surface);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	color: var(--tz-ink);
	transition: border-color var(--tz-speed) var(--tz-ease);
}

.tz-currency__select:hover,
.tz-currency__amount:hover { border-color: var(--tz-ink-meta); }
.tz-currency__select:focus-visible,
.tz-currency__amount:focus-visible { outline: var(--tz-focus); outline-offset: var(--tz-focus-offset); }

.tz-currency__amount { font-variant-numeric: tabular-nums; font-weight: 700; }

/* A real flag image over the closed <select>, kept in sync with the current
   selection by main.js -- <option> text alone cannot carry an image, and
   Unicode flag emoji render as bare two-letter codes on Windows. */
.tz-currency__select-wrap { position: relative; }
.tz-currency__select-wrap .tz-currency__select { padding-left: 42px; }

.tz-currency__select-flag {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 15px;
	object-fit: cover;
	border-radius: 2px;
	box-shadow: 0 0 0 1px var(--tz-line-soft);
	pointer-events: none;
}

.tz-currency__swap {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 47px;
	height: 47px;
	border: 1px solid var(--tz-line);
	border-radius: 50%;
	background: var(--tz-surface);
	color: var(--tz-brand);
	cursor: pointer;
	transition: background-color var(--tz-speed) var(--tz-ease), border-color var(--tz-speed) var(--tz-ease);
}
.tz-currency__swap svg { width: 20px; height: 20px; }
.tz-currency__swap:hover { background: var(--tz-surface-alt); border-color: var(--tz-ink-meta); }
.tz-currency__swap:focus-visible { outline: var(--tz-focus); outline-offset: var(--tz-focus-offset); }

.tz-currency__table-wrap { margin-bottom: 32px; }

.tz-currency__table-title {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 700;
	color: var(--tz-ink-strong);
}

.tz-currency__source {
	margin: 0 0 20px;
	font-size: 13px;
	color: var(--tz-ink-meta);
}

.tz-currency__table { width: 100%; border-collapse: collapse; }

.tz-currency__table th {
	padding: 0 8px 10px;
	border-bottom: 1px solid var(--tz-line);
	text-align: left;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tz-ink-meta);
}
.tz-currency__table th:first-child { padding-left: 0; }
.tz-currency__table th:last-child { padding-right: 0; text-align: right; }

.tz-currency__table td {
	padding: 14px 8px;
	border-bottom: 1px solid var(--tz-line-soft);
	font-size: 15px;
	color: var(--tz-ink);
}
.tz-currency__table td:first-child { padding-left: 0; }
.tz-currency__table td:last-child { padding-right: 0; }
.tz-currency__table tbody tr { transition: background-color var(--tz-speed) var(--tz-ease); }
.tz-currency__table tbody tr:hover { background: var(--tz-surface-alt); }
.tz-currency__table tr:last-child td { border-bottom: 0; }
.tz-currency__table td:nth-child(2) { color: var(--tz-ink-meta); font-weight: 600; }
.tz-currency__table td:nth-child(3) { font-weight: 700; color: var(--tz-ink-strong); font-variant-numeric: tabular-nums; }
.tz-currency__table td:last-child { text-align: right; }

.tz-currency__flag {
	display: inline-block;
	width: 20px;
	height: 15px;
	margin-right: 10px;
	object-fit: cover;
	border-radius: 2px;
	box-shadow: 0 0 0 1px var(--tz-line-soft);
	vertical-align: -2px;
}

.tz-currency__trend { display: inline-flex; }
.tz-currency__trend-icon { width: 18px; height: 18px; }
.tz-currency__trend--up { color: var(--tz-up); }
.tz-currency__trend--down { color: var(--tz-brand); }
.tz-currency__trend--flat { color: var(--tz-ink-meta); }

/* Only the five headline currencies show open; the rest sit behind this
   native disclosure so the page reads as a curated list, not a full
   36-row bulletin dump. */
.tz-currency__more { margin-top: 4px; }
.tz-currency__more .tz-currency__table { margin-top: 20px; }
.tz-currency__more[open] .tz-currency__more__toggle { margin-bottom: 4px; }

.tz-currency__more__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 4px;
	list-style: none;
	font-size: 14px;
	font-weight: 600;
	color: var(--tz-brand);
	cursor: pointer;
}
.tz-currency__more__toggle::-webkit-details-marker { display: none; }

.tz-currency__more__toggle::before {
	content: "";
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform var(--tz-speed) var(--tz-ease);
}
.tz-currency__more[open] .tz-currency__more__toggle::before { transform: rotate(45deg); }

.tz-currency__more__toggle:hover { color: var(--tz-ink-strong); }
.tz-currency__more__toggle:focus-visible { outline: var(--tz-focus); outline-offset: var(--tz-focus-offset); }

.tz-currency__more__count { color: var(--tz-ink-meta); font-weight: 500; }

.tz-currency__about p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--tz-ink);
}

@media (max-width: 599px) {
	.tz-currency__calc { grid-template-columns: minmax(0, 1fr); padding: 20px; }
	.tz-currency__swap { justify-self: center; }
	.tz-currency__table th:nth-child(2),
	.tz-currency__table td:nth-child(2) { display: none; }
}

/* ==========================================================================
   Footer — what this paper is
   ========================================================================== */

.tz-footer__about {
	padding-bottom: 32px;
	margin-bottom: 32px;
	border-bottom: 1px solid var(--tz-line-soft);
}

.tz-footer__about h2 {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 700;
	color: var(--tz-ink-strong);
}

.tz-footer__about p {
	max-width: 70ch;
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 22px;
	color: var(--tz-ink-meta);
}
.tz-footer__about p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Homepage — narrower viewports
   ========================================================================== */

@media (max-width: 1023px) {
	.tz-front { grid-template-columns: minmax(0, 1fr); }
	.tz-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tz-slide__title { font-size: 22px; line-height: 30px; }
	.tz-blocks { grid-template-columns: minmax(0, 1fr); }
	.tz-authors__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tz-videos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tz-archive__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.tz-slider--cards .tz-slider__cell { flex-basis: calc((100% - var(--tz-col-gap)) / 2); }
	.tz-footer__top { flex-wrap: wrap; gap: 32px; }
	.tz-footer__brand { flex-basis: 100%; }
}

@media (max-width: 599px) {
	.tz-cards { grid-template-columns: minmax(0, 1fr); }
	.tz-block__rest { grid-template-columns: minmax(0, 1fr); }
	.tz-authors__list,
	.tz-videos__grid { grid-template-columns: minmax(0, 1fr); }
	.tz-archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tz-photos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 130px; }
	.tz-photos__item--lead { grid-column: span 2; grid-row: span 2; }
	.tz-slider--cards .tz-slider__cell { flex-basis: 100%; }
	.tz-footer__list--cols { columns: 2; }
	.tz-footer__center { flex-direction: column; align-items: flex-start; gap: 20px; }
	.tz-breaking { flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px; }
	.tz-breaking__item { padding-right: 0; }
	.tz-breaking .tz-slider__arrow { display: none !important; }
	.tz-slide__body { left: 16px; right: 16px; bottom: 16px; }
	.tz-slide__title { font-size: 18px; line-height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
	.tz-slider__track { scroll-behavior: auto; }
}

/* Set by ?tz-freeze=1 only. Nothing in normal browsing reaches these rules. */
.tz-frozen .tz-slider__track {
	overflow-x: clip;
	scroll-snap-type: none;
	scroll-behavior: auto;
}

/* ==========================================================================
   Article page
   Reference measurements: docs/REFERENCE-REPORT-AZ.md (article section)
   ========================================================================== */

.tz-single {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--tz-sidebar);
	gap: var(--tz-col-gap);
	padding-block: 8px 24px;
}

.tz-single__main { min-width: 0; }
.tz-single__side { min-width: 0; }

.tz-article {
	padding-bottom: 32px;
	margin-bottom: 32px;
	border-bottom: 1px solid var(--tz-line-soft);
}

.tz-article__title {
	margin: 0 0 24px;
	font-size: 24px;
	font-weight: 700;
	line-height: 28.8px;
	color: var(--tz-ink-strong);
}

.tz-article__head {
	margin-bottom: 24px;
}

.tz-article__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.tz-article__cat {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 10px;
	border: 1px solid var(--tz-line);
	border-radius: 2px;
	font-size: 13px;
	font-weight: 500;
	color: var(--tz-ink);
	transition: border-color var(--tz-speed) var(--tz-ease), color var(--tz-speed) var(--tz-ease);
}
.tz-article__cat:hover,
.tz-article__cat:focus-visible {
	border-color: var(--tz-brand);
	color: var(--tz-brand);
}

.tz-article__meta .tz-meta { font-size: 14px; }

.tz-article__figure {
	margin: 0 0 24px;
}

/* The lead picture is the largest paint on the page; a fixed ratio keeps the
   text below it from jumping while it loads. */
.tz-article__media {
	display: block;
	aspect-ratio: 3 / 2;
	border-radius: 2px;
	overflow: hidden;
	background: var(--tz-surface-alt);
}

.tz-article__media img,
.tz-article__media .tz-media__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tz-article__caption {
	margin-top: 8px;
	font-size: 13px;
	line-height: 18px;
	color: var(--tz-ink-meta);
}

/* --- The body the desk writes ------------------------------------------- */

.tz-article__body {
	font-size: var(--tz-read, 16px);
	line-height: 1.5;
	color: var(--tz-ink);
}

.tz-article__body > *:last-child { margin-bottom: 0; }

.tz-article__body p {
	margin: 0 0 16px;
}

.tz-article__body a {
	color: var(--tz-brand);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.tz-article__body a:hover { color: var(--tz-ink-strong); }

.tz-article__body h2,
.tz-article__body h3,
.tz-article__body h4 {
	margin: 24px 0 12px;
	line-height: 1.3;
	color: var(--tz-ink-strong);
}
.tz-article__body h2 { font-size: 20px; font-weight: 700; }
.tz-article__body h3 { font-size: 18px; font-weight: 700; }
.tz-article__body h4 { font-size: 16px; font-weight: 500; }

.tz-article__body ul,
.tz-article__body ol {
	margin: 0 0 16px;
	padding-left: 22px;
}
.tz-article__body li { margin-bottom: 8px; }

.tz-article__body blockquote {
	margin: 0 0 16px;
	padding: 4px 0 4px 16px;
	border-left: 3px solid var(--tz-brand);
	color: var(--tz-ink-strong);
}

.tz-article__body img,
.tz-article__body iframe,
.tz-article__body video {
	max-width: 100%;
	height: auto;
	border-radius: 2px;
}

/* The desk emphasises in pure red, which is 4.0:1 on white and fails AA at
   body size. The house red says the same thing at 5.1:1. Inline styles come
   from the imported posts, so the override has to outrank them. */
.tz-article__body [style*="color: #ff0000" i],
.tz-article__body [style*="color:#ff0000" i],
.tz-article__body [style*="color: red" i],
.tz-article__body [style*="color:red" i] {
	color: var(--tz-brand) !important;
}

.tz-article__body figure { margin: 0 0 16px; }

.tz-article__body figcaption {
	margin-top: 8px;
	font-size: 13px;
	line-height: 18px;
	color: var(--tz-ink-meta);
}

.tz-article__body table {
	width: 100%;
	margin-bottom: 16px;
	border-collapse: collapse;
	font-size: 15px;
}
.tz-article__body th,
.tz-article__body td {
	padding: 8px 10px;
	border: 1px solid var(--tz-line-soft);
	text-align: start;
}
.tz-article__body th { background: var(--tz-surface-sunken); font-weight: 500; }

/* --- Reader controls ----------------------------------------------------- */

.tz-tools {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 16px;
	padding-bottom: 16px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--tz-line-soft);
}

.tz-fontsize {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.tz-fontsize__label {
	font-size: 13px;
	color: var(--tz-ink-meta);
}

.tz-fontsize__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 1px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--tz-line);
	border-radius: 2px;
	background: transparent;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	color: var(--tz-ink);
	cursor: pointer;
	transition: border-color var(--tz-speed) var(--tz-ease), color var(--tz-speed) var(--tz-ease);
}
.tz-fontsize__btn:hover,
.tz-fontsize__btn:focus-visible {
	border-color: var(--tz-brand);
	color: var(--tz-brand);
}
.tz-fontsize__btn[disabled] {
	border-color: var(--tz-line-soft);
	color: var(--tz-ink-meta);
	cursor: default;
}

.tz-like {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 0 14px;
	border: 1px solid var(--tz-line);
	border-radius: 2px;
	background: transparent;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	color: var(--tz-ink);
	cursor: pointer;
	transition: border-color var(--tz-speed) var(--tz-ease), color var(--tz-speed) var(--tz-ease);
}

.tz-like svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
}

.tz-like__count {
	padding-left: 8px;
	border-left: 1px solid var(--tz-line-soft);
	font-variant-numeric: tabular-nums;
	color: var(--tz-ink-meta);
}

.tz-like:hover,
.tz-like:focus-visible {
	border-color: var(--tz-brand);
	color: var(--tz-brand);
}

/* Liking is one-way: the reader has said the thing, and the button stops
   being a control and becomes a statement. */
.tz-like.is-liked {
	border-color: var(--tz-brand);
	color: var(--tz-brand);
	cursor: default;
}
.tz-like.is-liked svg { fill: currentColor; }
.tz-like.is-liked .tz-like__count { color: inherit; }

/* --- Tags ---------------------------------------------------------------- */

.tz-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin: 20px 0 24px;
}

.tz-tags__item {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 5px 16px;
	border: 1px solid var(--tz-line);
	border-radius: 2px;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	color: var(--tz-ink);
	transition: border-color var(--tz-speed) var(--tz-ease), color var(--tz-speed) var(--tz-ease);
}
.tz-tags__item:hover,
.tz-tags__item:focus-visible {
	border-color: var(--tz-brand);
	color: var(--tz-brand);
}

/* --- Follow bar ---------------------------------------------------------- */

.tz-follow {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 64px;
	padding: 16px;
	margin-top: 32px;
	margin-bottom: 32px;
	border-radius: 2px;
	background: var(--tz-fb-bar);
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	color: #ffffff;
	transition: background-color var(--tz-speed) var(--tz-ease);
}
.tz-follow:hover,
.tz-follow:focus-visible { background: var(--tz-fb-bar-hover); color: #ffffff; }

.tz-follow svg {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	fill: currentColor;
}

/* --- Share ----------------------------------------------------------------- */

.tz-share__title {
	margin: 0 0 24px;
	font-size: 18px;
	font-weight: 700;
	line-height: 21.6px;
	color: var(--tz-ink-strong);
}

.tz-share {
	padding-top: 20px;
	border-top: 1px solid var(--tz-line-soft);
}

.tz-share__list {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	flex-wrap: wrap;
}

.tz-share__btn {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: var(--tz-surface-alt);
	color: var(--tz-ink);
	cursor: pointer;
	transition: opacity var(--tz-speed) var(--tz-ease), background-color var(--tz-speed) var(--tz-ease);
}
.tz-share__btn svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}
.tz-share__btn:hover,
.tz-share__btn:focus-visible { opacity: 0.82; }

.tz-share__btn--fb { background: var(--tz-fb); color: #ffffff; }
.tz-share__btn--wa { background: var(--tz-wa); color: #ffffff; }
.tz-share__btn--tg { background: var(--tz-tg); color: #ffffff; }
.tz-share__btn--x  { background: var(--tz-x);  color: #ffffff; }
.tz-share__btn--in { background: var(--tz-in); color: #ffffff; }
.tz-share__btn--plain:hover { background: var(--tz-line-soft); }

.tz-share__copy { position: relative; }

.tz-share__note {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 8px);
	transform: translateX(-50%);
	padding: 4px 8px;
	border-radius: 2px;
	background: var(--tz-ink-strong);
	font-size: 12px;
	white-space: nowrap;
	color: #ffffff;
}

/* --- Read next ----------------------------------------------------------- */

.tz-related__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px var(--tz-col-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
.tz-related__grid > li { display: flex; }

/* --- Article page, narrower viewports ------------------------------------ */

@media (max-width: 1023px) {
	.tz-single { grid-template-columns: minmax(0, 1fr); }
	.tz-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
	.tz-article__title { font-size: 21px; line-height: 27px; }
	.tz-tools { justify-content: flex-start; }
	.tz-related__grid { grid-template-columns: minmax(0, 1fr); }
	.tz-follow { align-items: flex-start; font-size: 15px; }
}