/*
Theme Name: Zellige
Theme URI: https://www.tunisiatourism.org/
Author: Tunisia Tourism Guide
Author URI: https://www.tunisiatourism.org/
Description: A twelve-column tile grid in the spirit of Nabeul ceramic work — paper white, ink navy, cobalt, ochre, terracotta and tile green. Square corners, 1px hairlines, flat pattern tiles, no shadows. Built for an independent travel guide: category collections with live counts, a month-by-month "when to go" picker, and editorial article templates. Block theme for WordPress 6.5+.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zellige
Tags: blog, news, one-column, block-patterns, full-site-editing, block-styles, custom-colors, custom-menu, featured-images, editor-style, accessibility-ready, translation-ready
*/

/* ==========================================================================
   Zellige — front-end stylesheet
   Sections: 1 tokens · 2 base · 3 layout · 4 header · 5 grid & tiles
             6 search · 7 sections · 8 explore · 9 months · 10 cards
             11 footer · 12 bands · 13 article · 14 archives · 15 404
             16 blocks & plugins · 17 responsive · 18 motion & print
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */

:root {
	--tt-paper: var( --wp--preset--color--paper, #f6f1e8 );
	--tt-ink: var( --wp--preset--color--ink, #14213d );
	--tt-cobalt: var( --wp--preset--color--cobalt, #1e5ba8 );
	--tt-cobalt-deep: var( --wp--preset--color--cobalt-deep, #2b4e8c );
	--tt-ochre: var( --wp--preset--color--ochre, #d9a441 );
	--tt-terracotta: var( --wp--preset--color--terracotta, #c1502e );
	--tt-green: var( --wp--preset--color--tile-green, #2f6b4f );
	--tt-white: var( --wp--preset--color--white, #ffffff );
	--tt-muted: var( --wp--preset--color--muted, #5b6270 );

	--tt-display: var( --wp--preset--font-family--display, 'Space Grotesk', system-ui, sans-serif );
	--tt-body: var( --wp--preset--font-family--body, 'Schibsted Grotesk', system-ui, sans-serif );
	--tt-mono: var( --wp--preset--font-family--mono, 'DM Mono', ui-monospace, Menlo, monospace );

	--tt-gap: 12px;
	--tt-gap-tight: 8px;
	--tt-gutter: 40px;
	--tt-section: 56px;
	--tt-max: 1440px;
	--tt-row-hero: 250px;
	--tt-row-explore: 300px;
}

/* 2. Base ------------------------------------------------------------------ */

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

body {
	margin: 0;
	background: var( --tt-paper );
	color: var( --tt-ink );
	font: 400 16px/1.5 var( --tt-body );
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}

body.tt-menu-open {
	overflow: hidden;
}

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

button {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 3px solid var( --tt-ochre );
	outline-offset: 2px;
}

/* On ochre grounds the ochre focus ring is invisible — swap to ink. */
.tt-on-ochre :focus-visible,
.tt-cat__strip--ochre :focus-visible {
	outline-color: var( --tt-ink );
}

.tt-label {
	font: 500 12px/1 var( --tt-mono );
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0;
}

a.tt-label {
	text-decoration: none;
	transition: color 0.2s;
}

a.tt-label:hover {
	color: var( --tt-cobalt );
}

.tt-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

.tt-skip {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 200;
	background: var( --tt-ink );
	color: var( --tt-paper );
	padding: 14px 20px;
	font: 700 14px/1 var( --tt-display );
	text-decoration: none;
	clip-path: inset( 50% );
	white-space: nowrap;
}

.tt-skip:focus {
	clip-path: none;
}

/* 3. Layout ---------------------------------------------------------------- */

.tt-wrap {
	max-width: var( --tt-max );
	margin-inline: auto;
	padding-left: var( --tt-gutter );
	padding-right: var( --tt-gutter );
}

.tt-main {
	display: block;
}

/* Block-theme layout: keep the theme.json content/wide widths honest inside
   our own gutters, and never let a grid child force the page wider. */
.tt-main > .alignfull {
	margin-left: calc( var( --tt-gutter ) * -1 );
	margin-right: calc( var( --tt-gutter ) * -1 );
	max-width: none;
	width: auto;
}

/* 4. Header ---------------------------------------------------------------- */

.tt-header {
	position: relative;
	z-index: 60;
	background: var( --tt-paper );
}

.tt-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 76px;
	border-bottom: 1px solid var( --tt-ink );
}

.tt-logo {
	display: flex;
	align-items: center;
	flex: none;
	gap: 12px;
	font: 700 19px/1 var( --tt-display );
	letter-spacing: -0.01em;
	white-space: nowrap;
	color: inherit;
	text-decoration: none;
	min-width: 0;
}

.tt-logo em {
	font-style: normal;
	font-weight: 400;
}

.tt-logo__text {
	white-space: nowrap;
}

.tt-mark {
	width: 34px;
	height: 34px;
	flex: none;
	display: block;
}

.tt-nav {
	display: flex;
	flex-wrap: nowrap;
	gap: 26px;
	font: 500 13px/1 var( --tt-display );
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.tt-nav a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s;
}

.tt-nav__item--current > a,
.tt-nav a[ aria-current ] {
	color: var( --tt-cobalt );
}

.tt-pill {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var( --tt-ink );
	background: transparent;
	color: inherit;
	padding: 11px 16px;
	min-width: 200px;
	min-height: 44px;
	cursor: pointer;
	font: 500 12px/1 var( --tt-mono );
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
	flex: none;
}

.tt-pill svg {
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
}

.tt-header__tools {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: none;
}

.tt-pill--menu {
	display: none;
	min-width: 0;
}

.tt-pill__label {
	display: inline;
}

.tt-burger {
	display: block;
	width: 16px;
	height: 12px;
	position: relative;
	flex: none;
}

.tt-burger::before,
.tt-burger::after,
.tt-burger span {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 1.7px;
	background: currentColor;
}

.tt-burger::before {
	top: 0;
}

.tt-burger span {
	top: 5.15px;
}

.tt-burger::after {
	bottom: 0;
}

/* Mobile menu panel */
.tt-panel {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: var( --tt-paper );
	overflow-y: auto;
	overscroll-behavior: contain;
	display: flex;
	flex-direction: column;
}

.tt-panel[ hidden ] {
	display: none !important;
}

.tt-panel__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 76px;
	border-bottom: 1px solid var( --tt-ink );
	flex: none;
}

.tt-panel__body {
	padding-top: 24px;
	padding-bottom: 48px;
}

.tt-panel__grid {
	display: grid;
	grid-template-columns: repeat( 12, minmax( 0, 1fr ) );
	gap: var( --tt-gap );
	margin-top: var( --tt-gap );
	list-style: none;
	padding: 0;
}

.tt-panel__grid li {
	grid-column: span 6;
}

.tt-panel__link {
	display: flex;
	align-items: flex-end;
	min-height: 120px;
	padding: 16px 20px;
	color: var( --tt-white );
	text-decoration: none;
	font: 700 22px/1.1 var( --tt-display );
	letter-spacing: -0.01em;
	height: 100%;
}

.tt-panel__link--cobalt {
	background: var( --tt-cobalt );
}

.tt-panel__link--ochre {
	background: var( --tt-ochre );
	color: var( --tt-ink );
}

.tt-panel__link--terracotta {
	background: var( --tt-terracotta );
}

.tt-panel__link--green {
	background: var( --tt-green );
}

/* 5. Grid & tiles ---------------------------------------------------------- */

.tt-grid {
	display: grid;
	grid-template-columns: repeat( 12, minmax( 0, 1fr ) );
	gap: var( --tt-gap );
}

.tt-hero {
	padding-top: 24px;
	grid-auto-rows: var( --tt-row-hero );
}

.tt-tile {
	position: relative;
	overflow: hidden;
	background: var( --tt-ink );
	min-width: 0;
	color: var( --tt-white );
	text-decoration: none;
}

.tt-tile > img,
.tt-tile__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.tt-tile--hero {
	grid-column: span 6;
	grid-row: span 2;
	background: var( --tt-cobalt );
	color: var( --tt-white );
	padding: 36px 40px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
}

.tt-studs::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient( circle, rgba( 255, 255, 255, 0.16 ) 1.5px, transparent 2px ) 0 0 / 26px 26px;
	pointer-events: none;
}

.tt-tile--hero > * {
	position: relative;
}

.tt-hero__body {
	display: flex;
	flex-direction: column;
	gap: 22px;
	align-items: flex-start;
}

.tt-hero__title {
	margin: 0;
	font: 700 88px/0.95 var( --tt-display );
	letter-spacing: -0.035em;
	text-wrap: pretty;
	color: inherit;
}

.tt-hero__lede {
	margin: 0;
	max-width: 440px;
	font: 400 19px/1.45 var( --tt-body );
}

.tt-btn {
	display: inline-block;
	background: var( --tt-ink );
	color: var( --tt-paper );
	padding: 14px 20px;
	font: 700 14px/1 var( --tt-display );
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.tt-btn:hover {
	background: var( --tt-cobalt );
	color: var( --tt-white );
}

.tt-btn--reversed {
	background: var( --tt-paper );
	color: var( --tt-ink );
}

.tt-btn--reversed:hover {
	background: var( --tt-ochre );
	color: var( --tt-ink );
}

.tt-tile--photo {
	grid-column: span 3;
}

.tt-tile--pattern {
	grid-column: span 3;
}

.tt-checker {
	background-color: var( --tt-ochre );
	background-image: conic-gradient( var( --tt-ink ) 25%, transparent 0 50%, var( --tt-ink ) 0 75%, transparent 0 );
	background-size: 50px 50px;
	background-position: 0 0;
}

.tt-checker--cobalt {
	background-color: var( --tt-cobalt );
}

.tt-checker--terracotta {
	background-color: var( --tt-terracotta );
}

.tt-checker--green {
	background-color: var( --tt-green );
}

.tt-checker--ink {
	background-color: var( --tt-ink );
	background-image: conic-gradient( var( --tt-ochre ) 25%, transparent 0 50%, var( --tt-ochre ) 0 75%, transparent 0 );
}

.tt-tile--stat {
	grid-column: span 3;
	background: var( --tt-green );
	color: var( --tt-white );
	padding: 26px 28px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
}

.tt-stat__num {
	font: 700 64px/1 var( --tt-display );
	letter-spacing: -0.03em;
}

.tt-stat__txt {
	font: 400 15px/1.4 var( --tt-body );
}

@media ( hover: hover ) {
	.tt-tile:hover > img,
	.tt-tile:hover .tt-tile__img {
		transform: scale( 1.05 );
	}
}

/* 6. Search bar ------------------------------------------------------------ */

.tt-search {
	margin-top: 12px;
	display: flex;
	align-items: center;
	gap: 16px;
	border: 1px solid var( --tt-ink );
	background: var( --tt-white );
	height: 72px;
	padding: 0 24px;
}

.tt-search svg {
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
}

.tt-search input[ type='search' ] {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font: 400 18px/1.3 var( --tt-body );
	color: var( --tt-ink );
	-webkit-appearance: none;
	appearance: none;
	height: 100%;
}

.tt-search input[ type='search' ]::placeholder {
	color: var( --tt-ink );
	opacity: 0.5;
}

.tt-search:focus-within {
	outline: 3px solid var( --tt-ochre );
	outline-offset: -1px;
}

.tt-search__hint {
	font: 500 12px/1 var( --tt-mono );
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border: 0;
	border-left: 1px solid var( --tt-ink );
	padding: 14px 0 14px 16px;
	white-space: nowrap;
	background: none;
	color: inherit;
	cursor: pointer;
	flex: none;
	transition: color 0.2s;
}

.tt-search__hint:hover {
	color: var( --tt-cobalt );
}

/* 7. Sections -------------------------------------------------------------- */

.tt-section {
	margin-top: var( --tt-section );
}

.tt-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.tt-h2 {
	margin: 0;
	font: 700 40px/1 var( --tt-display );
	letter-spacing: -0.025em;
	color: inherit;
}

/* 8. Explore (category tiles) ---------------------------------------------- */

.tt-explore {
	grid-auto-rows: var( --tt-row-explore );
}

.tt-explore--short {
	grid-auto-rows: 200px;
}

.tt-cat {
	display: block;
}

.tt-cat--3 {
	grid-column: span 3;
}

.tt-cat--4 {
	grid-column: span 4;
}

.tt-cat--6 {
	grid-column: span 6;
}

.tt-cat > img,
.tt-cat > .tt-tile__img {
	position: absolute;
	inset: 0;
}

.tt-cat__strip {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 16px 20px;
	color: var( --tt-white );
}

.tt-cat__strip--cobalt {
	background: var( --tt-cobalt );
}

.tt-cat__strip--ochre {
	background: var( --tt-ochre );
	color: var( --tt-ink );
}

.tt-cat__strip--terracotta {
	background: var( --tt-terracotta );
}

.tt-cat__strip--green {
	background: var( --tt-green );
}

.tt-cat__title {
	font: 700 22px/1.1 var( --tt-display );
	letter-spacing: -0.01em;
	text-wrap: pretty;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.tt-cat__count {
	font: 500 12px/1 var( --tt-mono );
	letter-spacing: 0.06em;
	white-space: nowrap;
}

/* 9. When to go ------------------------------------------------------------ */

.tt-months {
	background: var( --tt-cobalt );
	color: var( --tt-white );
	padding: 40px;
}

.tt-months .tt-section__head {
	margin-bottom: 24px;
}

.tt-months__note {
	margin: 0;
	font: 400 17px/1.4 var( --tt-body );
}

.tt-months__grid {
	display: grid;
	grid-template-columns: repeat( 12, minmax( 0, 1fr ) );
	gap: var( --tt-gap-tight );
}

.tt-month {
	cursor: pointer;
	min-height: 150px;
	padding: 14px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	gap: 8px;
	border: 0;
	text-align: left;
	color: var( --tt-white );
	outline: 3px solid transparent;
	outline-offset: -5px;
	transition: transform 0.2s;
}

@media ( hover: hover ) {
	.tt-month:hover {
		transform: translateY( -4px );
	}
}

.tt-month[ aria-pressed='true' ] {
	outline-color: var( --tt-paper );
}

.tt-month:focus-visible {
	outline-color: var( --tt-ochre );
	outline-offset: -5px;
}

.tt-month[ data-tone='cool' ] {
	background: var( --tt-cobalt-deep );
}

.tt-month[ data-tone='mild' ] {
	background: var( --tt-green );
}

.tt-month[ data-tone='warm' ] {
	background: var( --tt-ochre );
	color: var( --tt-ink );
}

.tt-month[ data-tone='warm' ][ aria-pressed='true' ] {
	outline-color: var( --tt-ink );
}

.tt-month[ data-tone='warm' ]:focus-visible {
	outline-color: var( --tt-ink );
}

.tt-month[ data-tone='hot' ] {
	background: var( --tt-terracotta );
}

.tt-month__air {
	font: 700 40px/1 var( --tt-display );
	letter-spacing: -0.02em;
}

.tt-month__sea {
	font: 400 13px/1.2 var( --tt-body );
}

/* 10. Post cards ----------------------------------------------------------- */

.tt-posts {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: var( --tt-gap );
}

.tt-post {
	display: block;
	background: var( --tt-white );
	border: 1px solid var( --tt-ink );
	color: var( --tt-ink );
	text-decoration: none;
	min-width: 0;
}

.tt-post__media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var( --tt-ink );
}

.tt-post__media img,
.tt-post__media .tt-tile__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

@media ( hover: hover ) {
	.tt-post:hover .tt-post__media img {
		transform: scale( 1.05 );
	}
}

.tt-post__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px 20px 22px;
}

.tt-post__cat {
	font: 500 11px/1 var( --tt-mono );
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --tt-cobalt );
}

.tt-post__title {
	font: 700 22px/1.2 var( --tt-display );
	letter-spacing: -0.015em;
	text-wrap: pretty;
}

.tt-post__date {
	font: 400 13px/1.4 var( --tt-body );
	color: var( --tt-muted );
}

/* 11. Footer --------------------------------------------------------------- */

.tt-footer {
	margin-top: 64px;
	background: var( --tt-ink );
	color: var( --tt-paper );
}

.tt-footer__inner {
	padding-top: 48px;
	padding-bottom: 28px;
}

.tt-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 40px;
}

.tt-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
	min-width: 0;
}

.tt-footer__tag {
	margin: 0;
	max-width: 340px;
	font: 400 15px/1.5 var( --tt-body );
}

.tt-footer__h {
	margin-bottom: 14px;
	color: var( --tt-ochre );
}

.tt-footer__links {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font: 400 15px/1.5 var( --tt-body );
	list-style: none;
	margin: 0;
	padding: 0;
}

.tt-footer__links a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s;
	display: inline-block;
	padding: 3px 0;
}

.tt-footer__links a:hover {
	color: var( --tt-ochre );
}

.tt-footer__band {
	margin-top: 40px;
	height: 14px;
	background: conic-gradient( var( --tt-ochre ) 25%, var( --tt-cobalt ) 0 50%, var( --tt-terracotta ) 0 75%, var( --tt-green ) 0 ) 0 0 / 28px 28px;
}

.tt-footer__copy {
	margin-top: 16px;
	font: 400 12px/1.4 var( --tt-mono );
}

/* 12. Title bands ---------------------------------------------------------- */

.tt-band {
	position: relative;
	background: var( --tt-cobalt );
	color: var( --tt-white );
	padding-top: 56px;
	padding-bottom: 48px;
}

.tt-band--ink {
	background: var( --tt-ink );
}

.tt-band--cobalt {
	background: var( --tt-cobalt );
}

.tt-band--ochre {
	background: var( --tt-ochre );
	color: var( --tt-ink );
}

.tt-band--terracotta {
	background: var( --tt-terracotta );
}

.tt-band--green {
	background: var( --tt-green );
}

.tt-band__inner {
	position: relative;
	max-width: var( --tt-max );
	margin-inline: auto;
	padding-left: var( --tt-gutter );
	padding-right: var( --tt-gutter );
}

.tt-band__kicker {
	margin: 0 0 20px;
}

.tt-band__kicker a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.tt-band__kicker a:hover {
	border-bottom-color: currentColor;
}

.tt-band__title {
	margin: 0;
	font: 700 56px/1 var( --tt-display );
	letter-spacing: -0.03em;
	max-width: 900px;
	color: inherit;
	text-wrap: pretty;
}

.tt-band__desc {
	margin: 20px 0 0;
	max-width: 640px;
	font: 400 19px/1.45 var( --tt-body );
}

.tt-band__meta {
	margin: 20px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	font: 400 12px/1.6 var( --tt-mono );
	letter-spacing: 0.04em;
	color: inherit;
}

.tt-band__meta .sep {
	opacity: 0.6;
}

.tt-band__meta a {
	color: inherit;
}

/* 13. Article -------------------------------------------------------------- */

.tt-featured {
	margin-top: 12px;
}

.tt-featured__frame {
	display: block;
	border: 1px solid var( --tt-ink );
	background: var( --tt-ink );
	aspect-ratio: 2 / 1;
	overflow: hidden;
}

.tt-featured__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tt-featured__caption {
	margin: 8px 0 0;
	font: 400 12px/1.5 var( --tt-mono );
	color: var( --tt-muted );
}

.tt-article {
	margin-top: 48px;
}

.tt-article .wp-block-post-content,
.tt-prose {
	font: 400 18px/1.6 var( --tt-body );
	color: var( --tt-ink );
}

.tt-prose p {
	margin: 0 0 20px;
}

.tt-prose h2,
.tt-article h2 {
	font: 700 32px/1.1 var( --tt-display );
	letter-spacing: -0.02em;
	margin: 48px 0 16px;
}

.tt-prose h3,
.tt-article h3 {
	font: 700 24px/1.2 var( --tt-display );
	letter-spacing: -0.015em;
	margin: 36px 0 12px;
}

.tt-prose h4,
.tt-article h4 {
	font: 700 19px/1.3 var( --tt-display );
	margin: 28px 0 10px;
}

.tt-article :where( h2, h3, h4 ):first-child {
	margin-top: 0;
}

.tt-prose a,
.tt-article .wp-block-post-content a {
	color: var( --tt-cobalt );
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.tt-prose a:hover,
.tt-article .wp-block-post-content a:hover {
	color: var( --tt-ink );
}

.tt-prose ul,
.tt-prose ol,
.tt-article .wp-block-post-content ul,
.tt-article .wp-block-post-content ol {
	line-height: 1.6;
	padding-left: 1.2em;
	margin: 0 0 20px;
}

.tt-prose li,
.tt-article .wp-block-post-content li {
	margin-bottom: 8px;
}

.tt-prose li::marker,
.tt-article .wp-block-post-content li::marker {
	color: var( --tt-ink );
}

/* In-this-guide box */
.tt-toc {
	background: var( --tt-white );
	border: 1px solid var( --tt-ink );
	padding: 20px 24px;
	margin: 32px 0;
}

.tt-toc__h {
	margin: 0 0 12px;
}

.tt-toc ul,
.tt-toc ol {
	margin: 0;
	padding-left: 1.1em;
	font: 400 15px/1.6 var( --tt-body );
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.tt-toc a {
	color: var( --tt-cobalt );
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.tt-toc a:hover {
	color: var( --tt-ink );
}

/* Key facts mini grid */
.tt-facts {
	display: grid;
	grid-template-columns: repeat( 12, minmax( 0, 1fr ) );
	gap: var( --tt-gap-tight );
	margin: 32px 0;
}

.tt-fact {
	grid-column: span 3;
	min-height: 120px;
	padding: 14px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 8px;
	color: var( --tt-white );
	background: var( --tt-cobalt-deep );
}

.tt-fact--ochre {
	background: var( --tt-ochre );
	color: var( --tt-ink );
}

.tt-fact--green {
	background: var( --tt-green );
}

.tt-fact--terracotta {
	background: var( --tt-terracotta );
}

.tt-fact__value {
	font: 700 24px/1.1 var( --tt-display );
	letter-spacing: -0.02em;
}

/* Divider strip */
.tt-strip {
	height: 14px;
	margin-top: var( --tt-section );
}

/* 14. Archives ------------------------------------------------------------- */

.tt-archive {
	padding-top: 12px;
}

.tt-pagination {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 32px;
}

.tt-pagination a,
.tt-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 14px 20px;
	border: 1px solid var( --tt-ink );
	font: 500 12px/1 var( --tt-mono );
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var( --tt-ink );
	background: transparent;
	transition: background 0.2s, color 0.2s;
}

.tt-pagination .tt-page-num {
	padding: 0;
	width: 44px;
}

.tt-pagination a:hover {
	background: var( --tt-ink );
	color: var( --tt-paper );
}

.tt-pagination .current {
	background: var( --tt-ink );
	color: var( --tt-paper );
}

.tt-pagination .dots {
	border-color: transparent;
}

.tt-empty {
	margin: 32px 0 0;
	font: 400 19px/1.45 var( --tt-body );
}

/* 15. 404 ------------------------------------------------------------------ */

.tt-404 {
	grid-column: span 6;
	grid-row: span 2;
	background: var( --tt-terracotta );
	color: var( --tt-white );
	padding: 36px 40px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
}

.tt-404__num {
	font: 700 160px/0.85 var( --tt-display );
	letter-spacing: -0.04em;
	margin: 0;
}

.tt-404__txt {
	margin: 0;
	font: 400 19px/1.45 var( --tt-body );
	max-width: 440px;
}

.tt-404__pattern {
	grid-column: span 6;
	grid-row: span 2;
}

/* 16. Blocks, comments & plugin output ------------------------------------- */

.tt-article .wp-block-quote,
.tt-prose blockquote {
	border: 0;
	border-top: 8px solid var( --tt-ochre );
	padding: 20px 0 0;
	margin: 32px 0;
	font: 700 22px/1.3 var( --tt-display );
	letter-spacing: -0.01em;
}

.tt-article .wp-block-quote cite,
.tt-prose blockquote cite {
	display: block;
	margin-top: 12px;
	font: 400 13px/1.4 var( --tt-body );
	font-style: normal;
	color: var( --tt-muted );
}

.tt-article table,
.tt-prose table,
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
}

.tt-article table th,
.tt-article table td,
.wp-block-table th,
.wp-block-table td {
	border: 1px solid var( --tt-ink );
	padding: 10px 12px;
	text-align: left;
	vertical-align: top;
}

.tt-article table th,
.wp-block-table th {
	background: var( --tt-ink );
	color: var( --tt-paper );
	font: 500 12px/1.3 var( --tt-mono );
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.wp-block-table {
	overflow-x: auto;
}

.tt-article .wp-block-image img,
.tt-prose img {
	border: 1px solid var( --tt-ink );
	border-radius: 0;
}

.tt-article figcaption,
.wp-block-image figcaption {
	font: 400 12px/1.5 var( --tt-mono );
	color: var( --tt-muted );
	margin-top: 8px;
	text-align: left;
}

.tt-article .wp-block-separator {
	border: 0;
	border-top: 1px solid var( --tt-ink );
	margin: 40px 0;
	opacity: 1;
}

.tt-article .wp-block-code,
.tt-article pre {
	background: var( --tt-white );
	border: 1px solid var( --tt-ink );
	padding: 16px 20px;
	font: 400 14px/1.5 var( --tt-mono );
	overflow-x: auto;
}

/* Rank Math breadcrumbs + TOC */
.rank-math-breadcrumb,
.tt-band .rank-math-breadcrumb {
	font: 500 12px/1.6 var( --tt-mono );
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.rank-math-breadcrumb p {
	margin: 0;
}

.tt-band .rank-math-breadcrumb a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.tt-band .rank-math-breadcrumb a:hover {
	border-bottom-color: currentColor;
}

.tt-band .rank-math-breadcrumb .separator {
	opacity: 0.6;
	margin: 0 4px;
}

#rank-math-toc,
.wp-block-rank-math-toc-block {
	background: var( --tt-white );
	border: 1px solid var( --tt-ink );
	padding: 20px 24px;
	margin: 32px 0;
}

#rank-math-toc h2,
.wp-block-rank-math-toc-block h2,
#rank-math-toc h3,
.wp-block-rank-math-toc-block h3 {
	font: 500 12px/1 var( --tt-mono ) !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 0 12px !important;
}

#rank-math-toc ul,
.wp-block-rank-math-toc-block ul {
	margin: 0;
	padding-left: 1.1em;
	font: 400 15px/1.6 var( --tt-body );
}

#rank-math-toc li,
.wp-block-rank-math-toc-block li {
	margin-bottom: 6px;
}

/* Comments */
.tt-comments {
	margin-top: var( --tt-section );
}

.tt-comments .wp-block-comments-title,
.tt-comments .comment-reply-title {
	font: 700 32px/1.1 var( --tt-display );
	letter-spacing: -0.02em;
	margin: 0 0 20px;
}

.tt-comments .comment-form label,
.tt-comments .comment-notes,
.tt-comments .comment-form-cookies-consent label {
	font: 400 13px/1.4 var( --tt-body );
	color: var( --tt-muted );
	display: block;
	margin-bottom: 6px;
}

.tt-comments .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.tt-comments .comment-form-cookies-consent input {
	width: auto;
	margin-top: 2px;
	flex: none;
}

.tt-comments .comment-form-cookies-consent label {
	margin: 0;
}

.tt-comments .comment-form p {
	margin: 0 0 16px;
}

.tt-comments .wp-block-comment-author-name {
	font: 700 16px/1.3 var( --tt-display );
}

.tt-comments .wp-block-comment-date {
	font: 400 13px/1.4 var( --tt-body );
	color: var( --tt-muted );
}

.tt-comments input[ type='text' ],
.tt-comments input[ type='email' ],
.tt-comments input[ type='url' ],
.tt-comments textarea,
.wp-block-post-comments-form input[ type='text' ],
.wp-block-post-comments-form input[ type='email' ],
.wp-block-post-comments-form input[ type='url' ],
.wp-block-post-comments-form textarea {
	border: 1px solid var( --tt-ink );
	border-radius: 0;
	background: var( --tt-white );
	padding: 12px 16px;
	font: 400 16px/1.4 var( --tt-body );
	color: var( --tt-ink );
	width: 100%;
	max-width: 100%;
}

.wp-block-post-comments-form .wp-block-button__link,
.tt-comments input[ type='submit' ] {
	border-radius: 0;
	background: var( --tt-ink );
	color: var( --tt-paper );
	font: 700 14px/1 var( --tt-display );
	padding: 14px 20px;
	border: 0;
	cursor: pointer;
}

/* Screen-reader-friendly widget/plugin catch-alls */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* 17. Responsive ----------------------------------------------------------- */

@media ( min-width: 1200px ) and ( max-width: 1439px ) {
	.tt-nav {
		gap: 16px;
		font-size: 12px;
		letter-spacing: 0.05em;
	}

	.tt-pill {
		min-width: 0;
	}
}

@media ( max-width: 1199px ) {
	:root {
		--tt-gutter: 24px;
	}

	.tt-nav {
		display: none;
	}

	.tt-pill--menu {
		display: flex;
	}

	.tt-hero__title {
		font-size: clamp( 48px, 7vw, 80px );
	}

	.tt-cat--3,
	.tt-cat--4,
	.tt-cat--6 {
		grid-column: span 6;
	}

	.tt-months__grid {
		grid-template-columns: repeat( 6, minmax( 0, 1fr ) );
	}

	.tt-posts {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.tt-band__title {
		font-size: clamp( 40px, 5.6vw, 56px );
	}

	.tt-fact {
		grid-column: span 4;
	}

	.tt-404__num {
		font-size: clamp( 96px, 14vw, 160px );
	}
}

@media ( max-width: 767px ) {
	:root {
		--tt-gutter: 16px;
		--tt-section: 40px;
	}

	.tt-header__bar,
	.tt-panel__bar {
		height: 64px;
	}

	.tt-pill {
		min-width: 0;
		padding: 10px;
	}

	.tt-pill__label {
		display: none;
	}

	.tt-hero {
		grid-auto-rows: auto;
	}

	.tt-tile--hero,
	.tt-404 {
		grid-column: span 12;
		grid-row: span 1;
		min-height: 420px;
		padding: 28px 24px;
	}

	.tt-hero__title {
		font-size: clamp( 44px, 13vw, 64px );
	}

	.tt-tile--photo,
	.tt-tile--pattern,
	.tt-tile--stat,
	.tt-404__pattern {
		grid-column: span 6;
		grid-row: span 1;
		aspect-ratio: 1 / 1;
		min-height: 0;
	}

	.tt-stat__num {
		font-size: 48px;
	}

	.tt-search {
		height: 60px;
		padding: 0 16px;
	}

	.tt-search__hint {
		display: none;
	}

	.tt-h2 {
		font-size: 32px;
	}

	.tt-explore {
		grid-auto-rows: 220px;
	}

	.tt-cat--3,
	.tt-cat--4,
	.tt-cat--6 {
		grid-column: span 12;
	}

	.tt-months {
		padding: 24px 16px;
	}

	.tt-months .tt-section__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.tt-months__grid {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}

	.tt-month {
		min-height: 120px;
	}

	.tt-month__air {
		font-size: 32px;
	}

	.tt-posts {
		grid-template-columns: minmax( 0, 1fr );
	}

	.tt-footer__grid {
		grid-template-columns: minmax( 0, 1fr );
		gap: 28px;
	}

	.tt-band {
		padding-top: 40px;
		padding-bottom: 32px;
	}

	.tt-band__title {
		font-size: clamp( 32px, 9vw, 56px );
	}

	.tt-article {
		margin-top: 32px;
	}

	.tt-panel__grid li {
		grid-column: span 12;
	}

	/* Mono labels are 12px tall; on touch they need a real hit area. */
	.tt-band__kicker a,
	.tt-band__meta a,
	.tt-section__head a,
	.tt-footer__links a {
		display: inline-block;
		padding-top: 8px;
		padding-bottom: 8px;
	}

	.tt-section__head a {
		margin-top: -8px;
	}

	.tt-fact {
		grid-column: span 6;
	}

	.tt-404__num {
		font-size: clamp( 88px, 24vw, 120px );
	}
}

/* 18. Motion & print ------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.tt-header,
	.tt-footer,
	.tt-search,
	.tt-panel,
	.tt-strip {
		display: none !important;
	}

	body {
		background: #fff;
	}

	.tt-band {
		background: #fff !important;
		color: #000 !important;
		padding: 0;
	}
}

/* 19. Link reset for components that own their colour --------------------- */
/* theme.json's `elements.link` styles every <a> cobalt + underlined at
   (0,1,0) specificity. Component links carry their own colour, so re-assert
   it here with an element+class selector (0,1,1) — that wins whatever order
   the global-styles inline block lands in. */

a.tt-logo,
a.tt-post,
a.tt-cat,
a.tt-tile,
a.tt-btn,
a.tt-label,
a.tt-pill,
a.tt-panel__link,
.tt-nav a,
.tt-footer__links a,
.tt-pagination a,
.tt-band__kicker a,
.tt-band__meta a,
.tt-section__head a,
.tt-band .rank-math-breadcrumb a {
	text-decoration: none;
	color: inherit;
}

a.tt-btn {
	color: var( --tt-paper );
}

a.tt-btn--reversed,
a.tt-btn--reversed:hover {
	color: var( --tt-ink );
}

a.tt-btn:hover {
	color: var( --tt-white );
}

a.tt-post {
	color: var( --tt-ink );
}

a.tt-cat,
a.tt-tile,
a.tt-panel__link {
	color: var( --tt-white );
}

a.tt-panel__link--ochre {
	color: var( --tt-ink );
}

.tt-cat__strip--ochre .tt-cat__title,
.tt-cat__strip--ochre .tt-cat__count {
	color: var( --tt-ink );
}

.tt-pagination a {
	color: var( --tt-ink );
}

.tt-pagination a:hover {
	color: var( --tt-paper );
}