/*
Theme Name: Azulejo Moderno
Theme URI: https://lisbontourism.org/
Author: Lisbon Tourism
Author URI: https://lisbontourism.org/
Description: Portuguese tile geometry reduced to pure CSS graphics - cobalt on chalk, editorial serif. A print-confident classic theme for travel-guide authority sites, with a generated azulejo tile wall, sticky article contents, an Essenciais fact card and Rank Math-aware breadcrumbs. No external assets beyond webfonts, which can be switched off entirely.
Version: 1.0.0
Requires at least: 6.2
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lisbon-tourism
Tags: blog, news, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, block-patterns, editor-style, translation-ready, accessibility-ready
*/

/* -------------------------------------------------------------------------
 * 1. Reset & base
 * ---------------------------------------------------------------------- */

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

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

body {
	margin: 0;
	background: var(--lt-chalk);
	color: var(--lt-body);
	font-family: var(--lt-font-body);
	font-size: var(--lt-size-body);
	line-height: var(--lt-leading-body);
	border-top: var(--lt-rule-top) solid var(--lt-cobalt);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

img,
svg,
video,
iframe {
	max-width: 100%;
	height: auto;
}

figure {
	margin: 0;
}

a {
	color: var(--lt-cobalt);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: var(--lt-transition);
}

a:hover,
a:focus {
	color: var(--lt-cobalt-deep);
}

:focus-visible {
	outline: 2px solid var(--lt-focus);
	outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--lt-font-display);
	font-weight: 400;
	color: var(--lt-ink);
	margin: 0;
	text-wrap: balance;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

.screen-reader-text {
	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;
}

.lt-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--lt-cobalt);
	color: var(--lt-chalk);
	padding: 12px 20px;
	font-family: var(--lt-font-mono);
	font-size: 12px;
	letter-spacing: var(--lt-track-mono);
	text-transform: uppercase;
	text-decoration: none;
}

.lt-skip:focus {
	left: var(--lt-gutter);
}

/* -------------------------------------------------------------------------
 * 2. Shared primitives
 * ---------------------------------------------------------------------- */

.lt-wrap {
	max-width: var(--lt-wide);
	margin-inline: auto;
	padding-inline: var(--lt-gutter);
}

.lt-wrap--body {
	max-width: var(--lt-body-wide);
}

.lt-wrap--measure {
	max-width: calc(var(--lt-measure) + var(--lt-gutter) * 2);
}

.lt-section {
	padding-block: var(--lt-s9);
}

/* Mono label - the theme's connective tissue. */
.lt-kicker,
.lt-mono {
	font-family: var(--lt-font-mono);
	font-size: var(--lt-size-mono);
	letter-spacing: var(--lt-track-mono);
	text-transform: uppercase;
	color: var(--lt-meta);
	line-height: 1.4;
	display: block;
}

.lt-kicker {
	letter-spacing: var(--lt-track-mono-wide);
	color: var(--lt-terracotta);
}

.lt-sechead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--lt-s5);
	margin-bottom: 28px;
	flex-wrap: wrap;
}

.lt-sechead h2 {
	font-size: var(--lt-size-section);
	margin-top: var(--lt-s2);
}

/* Buttons */
.lt-btn {
	display: inline-block;
	background: var(--lt-cobalt);
	color: var(--lt-chalk);
	border: 1px solid var(--lt-cobalt);
	padding: 14px 26px;
	font-family: var(--lt-font-body);
	font-size: var(--lt-size-small);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	border-radius: var(--lt-radius);
	transition: var(--lt-transition);
}

.lt-btn:hover,
.lt-btn:focus {
	background: var(--lt-cobalt-deep);
	border-color: var(--lt-cobalt-deep);
	color: var(--lt-chalk);
	text-decoration: none;
}

.lt-link {
	display: inline-block;
	color: var(--lt-cobalt);
	font-size: var(--lt-size-small);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid var(--lt-cobalt);
	padding-bottom: 2px;
}

.lt-link:hover,
.lt-link:focus {
	color: var(--lt-cobalt-deep);
	border-color: var(--lt-cobalt-deep);
}

/* Chips - tags, archive filters */
.lt-chips {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

.lt-chip {
	display: inline-block;
	border: 1px solid var(--lt-cobalt);
	color: var(--lt-cobalt);
	background: transparent;
	font-family: var(--lt-font-mono);
	font-size: var(--lt-size-mono);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 8px 14px;
	border-radius: var(--lt-radius);
}

.lt-chip:hover,
.lt-chip:focus {
	background: var(--lt-cobalt);
	color: var(--lt-chalk);
	text-decoration: none;
}

.lt-chip--on,
.lt-chip[aria-current="page"] {
	background: var(--lt-cobalt);
	color: var(--lt-chalk);
}

/* Featured-image frame with hatched fallback */
.lt-frame {
	display: block;
	position: relative;
	overflow: hidden;
	background: repeating-linear-gradient(45deg, var(--lt-hatch-a) 0 12px, var(--lt-hatch-b) 12px 24px);
}

.lt-frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lt-frame__note {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--lt-font-mono);
	font-size: var(--lt-size-mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lt-meta);
	text-align: center;
	padding: var(--lt-s4);
}

.lt-caption {
	font-family: var(--lt-font-mono);
	font-size: var(--lt-size-mono);
	color: var(--lt-meta);
	line-height: 1.5;
	margin-top: 10px;
}

/* -------------------------------------------------------------------------
 * 3. Azulejo tiles
 *
 * Nine cell types, drawn entirely with gradients. The PHP tile generator
 * emits `lt-tile lt-tile--NAME`; the wall itself only sets the grid.
 * ---------------------------------------------------------------------- */

.lt-tiles {
	display: grid;
	grid-template-columns: repeat(var(--lt-tiles-cols, 4), 1fr);
	grid-auto-rows: var(--lt-tiles-row, 122px);
	gap: var(--lt-tiles-gap, 6px);
}

.lt-tile {
	display: block;
}

.lt-tile--solid { background: var(--lt-cobalt); }
.lt-tile--ink { background: var(--lt-ink); }
.lt-tile--quarter { background: radial-gradient(circle at 0 100%, var(--lt-cobalt) 62%, var(--lt-chalk-dim) 62.5%); }
.lt-tile--quarter-br { background: radial-gradient(circle at 100% 100%, var(--lt-cobalt) 62%, var(--lt-chalk-dim) 62.5%); }
.lt-tile--terracotta { background: radial-gradient(circle at 100% 0, var(--lt-terracotta) 62%, var(--lt-chalk-dim) 62.5%); }
.lt-tile--diag { background: linear-gradient(45deg, var(--lt-cobalt) 50%, var(--lt-chalk-dim) 50%); }
.lt-tile--diag-135 { background: linear-gradient(135deg, var(--lt-cobalt) 50%, var(--lt-chalk-dim) 50%); }
.lt-tile--diag-315 { background: linear-gradient(315deg, var(--lt-cobalt) 50%, var(--lt-chalk-dim) 50%); }
.lt-tile--dot { background: radial-gradient(circle at 50% 50%, var(--lt-chalk-dim) 26%, var(--lt-cobalt) 27%); }
.lt-tile--frame { border: 6px solid var(--lt-cobalt); background: var(--lt-chalk); }

/* The one cell that carries the featured photo. */
.lt-tile--photo {
	grid-column: span 2;
	grid-row: span 2;
	min-width: 0;
}

.lt-tile--photo .lt-frame {
	width: 100%;
	height: 100%;
}

/* Smaller decorative wall on archive headers */
.lt-tiles--mini {
	--lt-tiles-cols: 3;
	--lt-tiles-row: 74px;
	--lt-tiles-gap: 5px;
}

.lt-tiles--mini .lt-tile--frame {
	border-width: 5px;
}

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

.lt-topbar {
	background: var(--lt-chalk);
	border-bottom: var(--lt-border);
}

.lt-topbar__inner {
	display: flex;
	align-items: center;
	gap: var(--lt-s6);
	padding-block: 18px;
	max-width: var(--lt-wide);
	margin-inline: auto;
	padding-inline: var(--lt-gutter);
}

.lt-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	flex-shrink: 0;
}

.lt-brand:hover,
.lt-brand:focus {
	text-decoration: none;
}

.lt-brand__mark {
	display: block;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.lt-brand__word {
	font-family: var(--lt-font-display);
	font-size: 17px;
	line-height: 1;
	letter-spacing: var(--lt-track-wordmark);
	text-transform: uppercase;
	color: var(--lt-cobalt);
}

.lt-brand img {
	max-height: 40px;
	width: auto;
}

.lt-nav {
	margin-left: auto;
}

.lt-nav ul {
	display: flex;
	gap: 26px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.lt-nav a {
	display: inline-block;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--lt-body);
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 2px solid transparent;
}

.lt-nav a:hover,
.lt-nav a:focus {
	color: var(--lt-cobalt);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.lt-nav .current-menu-item > a,
.lt-nav .current-menu-ancestor > a,
.lt-nav .current_page_item > a,
.lt-nav .current-menu-parent > a {
	color: var(--lt-cobalt);
	border-bottom-color: var(--lt-cobalt);
}

/* Sub-menus: plain drop panels, no animation. */
.lt-nav li {
	position: relative;
}

.lt-nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 30;
	flex-direction: column;
	gap: 0;
	min-width: 210px;
	background: var(--lt-white);
	border: var(--lt-border-heavy);
	padding: var(--lt-s2) 0;
}

.lt-nav li:hover > .sub-menu,
.lt-nav li:focus-within > .sub-menu {
	display: flex;
}

.lt-nav .sub-menu a {
	padding: 8px 16px;
	border-bottom: 0;
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--lt-size-small);
}

.lt-nav .sub-menu a:hover,
.lt-nav .sub-menu a:focus {
	background: var(--lt-chalk-dim);
	text-decoration: none;
}

.lt-iconbtn {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border: 1px solid var(--lt-cobalt);
	border-radius: 50%;
	background: transparent;
	color: var(--lt-cobalt);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition: var(--lt-transition);
}

.lt-iconbtn:hover,
.lt-iconbtn:focus {
	background: var(--lt-cobalt);
	color: var(--lt-chalk);
}

.lt-iconbtn svg {
	width: 15px;
	height: 15px;
	display: block;
}

.lt-burger {
	display: none;
	margin-left: auto;
}

/* -------------------------------------------------------------------------
 * 5. Overlays - search and mobile menu
 * ---------------------------------------------------------------------- */

.lt-overlay {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: var(--lt-chalk);
	display: flex;
	flex-direction: column;
	padding: var(--lt-gutter);
	overflow-y: auto;
}

.lt-overlay[hidden] {
	display: none;
}

.lt-overlay__close {
	align-self: flex-end;
	width: 44px;
	height: 44px;
	border: 1px solid var(--lt-cobalt);
	border-radius: 50%;
	background: transparent;
	color: var(--lt-cobalt);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	flex-shrink: 0;
}

.lt-overlay__close:hover,
.lt-overlay__close:focus {
	background: var(--lt-cobalt);
	color: var(--lt-chalk);
}

.lt-overlay__body {
	width: 100%;
	max-width: var(--lt-measure);
	margin: auto;
	padding-block: var(--lt-s8);
}

.lt-overlay .lt-kicker {
	margin-bottom: var(--lt-s4);
}

/* Search overlay input, scaled up from the newsletter input. */
.lt-overlay .search-form {
	display: flex;
	gap: 0;
}

.lt-overlay .search-field {
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid var(--lt-ink);
	border-right: 0;
	background: var(--lt-chalk);
	padding: 16px 20px;
	font-family: var(--lt-font-mono);
	font-size: 20px;
	color: var(--lt-ink);
	border-radius: var(--lt-radius);
}

.lt-overlay .search-submit {
	flex-shrink: 0;
}

.lt-menu-overlay ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--lt-s4);
}

.lt-menu-overlay a {
	font-family: var(--lt-font-display);
	font-size: var(--lt-size-minor);
	color: var(--lt-ink);
	text-decoration: none;
	display: block;
	padding-block: 6px;
	min-height: 44px;
}

.lt-menu-overlay a:hover,
.lt-menu-overlay a:focus {
	color: var(--lt-cobalt);
}

.lt-menu-overlay .sub-menu {
	margin-top: var(--lt-s3);
	margin-left: var(--lt-s4);
	gap: var(--lt-s2);
}

.lt-menu-overlay .sub-menu a {
	font-size: 19px;
	color: var(--lt-text-muted);
}

/* -------------------------------------------------------------------------
 * 6. Front page
 * ---------------------------------------------------------------------- */

.lt-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 520px;
	gap: var(--lt-s8);
	align-items: center;
	padding-block: var(--lt-s9) var(--lt-s8);
}

.lt-hero__text {
	display: flex;
	flex-direction: column;
	gap: 22px;
	min-width: 0;
}

.lt-hero h1 {
	font-size: var(--lt-size-display);
	line-height: var(--lt-leading-display);
}

.lt-hero__dek {
	font-size: var(--lt-size-body);
	line-height: 1.65;
	color: var(--lt-text-muted);
	margin: 0;
	max-width: 44ch;
}

.lt-hero__cta {
	display: flex;
	gap: var(--lt-s4);
	align-items: center;
	flex-wrap: wrap;
}

/* Category strip.
   Capped at the content frame rather than the viewport: its rules are meant
   to line up with the hero above, and full-bleed rules on a wide monitor
   leave the first label sitting outside the column everything else sits in.
   The cells carry the inset instead of the container, which is what puts the
   label 28px in - as drawn - rather than 68px. */
.lt-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: var(--lt-border);
	border-bottom: var(--lt-border);
	max-width: var(--lt-wide);
	margin-inline: auto;
}

.lt-strip__cell {
	padding: var(--lt-s5) 28px;
	border-right: var(--lt-border);
	text-decoration: none;
	display: block;
}

.lt-strip__cell:last-child {
	border-right: 0;
}

.lt-strip__cell:hover,
.lt-strip__cell:focus {
	background: var(--lt-chalk-dim);
	text-decoration: none;
}

.lt-strip__label {
	display: block;
	font-family: var(--lt-font-display);
	font-size: 20px;
	color: var(--lt-ink);
	margin-top: 6px;
	line-height: 1.25;
}

/* Neighbourhood band */
.lt-band {
	background: var(--lt-cobalt);
	padding-block: var(--lt-s9);
	color: var(--lt-chalk);
}

.lt-band .lt-kicker {
	color: var(--lt-cobalt-soft);
}

.lt-band h2 {
	color: var(--lt-chalk);
	font-size: var(--lt-size-section);
	margin-top: var(--lt-s2);
}

.lt-band__head {
	margin-bottom: 28px;
}

/* 1px hairlines drawn by the container showing through the gaps. */
.lt-band__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--lt-cobalt-line);
	border: 1px solid var(--lt-cobalt-line);
}

.lt-band__cell {
	background: var(--lt-cobalt);
	padding: 22px var(--lt-s5);
	text-decoration: none;
	display: block;
	min-width: 0;
}

.lt-band__cell:hover,
.lt-band__cell:focus {
	background: var(--lt-cobalt-deep);
	text-decoration: none;
}

.lt-band__name {
	display: block;
	font-family: var(--lt-font-display);
	font-size: 20px;
	color: var(--lt-chalk);
	line-height: 1.25;
}

.lt-band__cell .lt-mono {
	color: var(--lt-cobalt-soft);
	margin-top: var(--lt-s1);
	letter-spacing: 0.12em;
}

.lt-band__cell--all {
	background: var(--lt-chalk);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lt-s3);
}

.lt-band__cell--all:hover,
.lt-band__cell--all:focus {
	background: var(--lt-chalk-dim);
}

.lt-band__cell--all .lt-band__name {
	color: var(--lt-cobalt);
}

.lt-band__arrow {
	font-size: 20px;
	color: var(--lt-cobalt);
	line-height: 1;
}

/* Latest list */
.lt-list {
	display: flex;
	flex-direction: column;
}

.lt-list__row {
	display: grid;
	grid-template-columns: 150px 1fr auto;
	gap: var(--lt-s5);
	align-items: baseline;
	padding-block: 20px;
	padding-inline: var(--lt-s3);
	margin-inline: calc(var(--lt-s3) * -1);
	border-bottom: var(--lt-border);
	text-decoration: none;
}

.lt-list__row:hover,
.lt-list__row:focus {
	background: var(--lt-chalk-dim);
	text-decoration: none;
}

.lt-list__date {
	font-family: var(--lt-font-mono);
	font-size: 12px;
	color: var(--lt-meta);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lt-list__title {
	font-family: var(--lt-font-display);
	font-size: 21px;
	color: var(--lt-ink);
	line-height: 1.3;
}

.lt-list__cat {
	font-family: var(--lt-font-mono);
	font-size: var(--lt-size-mono);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lt-terracotta);
	white-space: nowrap;
}

/* Newsletter */
.lt-signup {
	border: var(--lt-border-heavy);
	background: var(--lt-white);
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--lt-s6);
	align-items: center;
	padding: var(--lt-s6) 36px;
	margin-bottom: var(--lt-s9);
}

.lt-signup__title {
	font-family: var(--lt-font-display);
	font-size: var(--lt-size-quote);
	color: var(--lt-ink);
	margin-top: 6px;
	line-height: 1.25;
}

.lt-signup__note {
	font-size: var(--lt-size-small);
	color: var(--lt-text-muted);
	margin: var(--lt-s1) 0 0;
}

.lt-signup__form {
	display: flex;
	gap: 0;
}

.lt-signup__form input[type="email"] {
	border: 1px solid var(--lt-ink);
	border-right: 0;
	background: var(--lt-chalk);
	padding: 14px 18px;
	font-family: var(--lt-font-mono);
	font-size: 13px;
	color: var(--lt-ink);
	width: 260px;
	max-width: 100%;
	border-radius: var(--lt-radius);
}

.lt-signup__done {
	font-family: var(--lt-font-mono);
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lt-cobalt);
}

/* -------------------------------------------------------------------------
 * 7. Cards
 * ---------------------------------------------------------------------- */

.lt-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--lt-gap-card);
}

.lt-card {
	display: flex;
	flex-direction: column;
	background: var(--lt-white);
	border: var(--lt-border);
	text-decoration: none;
	position: relative;
	min-width: 0;
}

.lt-card:hover,
.lt-card:focus-within {
	box-shadow: var(--lt-shadow-card);
	text-decoration: none;
}

.lt-card .lt-frame {
	height: 220px;
	flex-shrink: 0;
}

.lt-card__body {
	padding: 20px 22px var(--lt-s5);
	display: flex;
	flex-direction: column;
	gap: var(--lt-s2);
	flex: 1 1 auto;
}

.lt-card__title {
	font-family: var(--lt-font-display);
	font-size: var(--lt-size-h3);
	line-height: 1.25;
	color: var(--lt-ink);
	margin: 0;
}

.lt-card__title a {
	color: inherit;
	text-decoration: none;
}

/* The title link covers the whole card, so the card is one hit target
   without nesting interactive elements. */
.lt-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.lt-card__title a:hover,
.lt-card__title a:focus {
	color: var(--lt-cobalt);
}

.lt-card__excerpt {
	font-size: var(--lt-size-small);
	line-height: 1.6;
	color: var(--lt-text-muted);
	margin: 0;
}

.lt-card__foot {
	margin-top: auto;
	padding-top: var(--lt-s1);
	letter-spacing: 0.12em;
}

.lt-card__badge {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	background: var(--lt-cobalt);
	color: var(--lt-chalk);
	font-family: var(--lt-font-mono);
	font-size: var(--lt-size-mono);
	letter-spacing: 0.08em;
	padding: 6px 10px;
}

/* Compact variant - related posts */
.lt-card--compact .lt-frame {
	height: 160px;
}

.lt-card--compact .lt-card__body {
	padding: 16px 18px 20px;
}

.lt-card--compact .lt-card__title {
	font-size: 19px;
	line-height: 1.3;
}

/* -------------------------------------------------------------------------
 * 8. Article
 * ---------------------------------------------------------------------- */

.lt-crumbs {
	font-family: var(--lt-font-mono);
	font-size: var(--lt-size-mono);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lt-meta);
	line-height: 1.6;
}

.lt-crumbs a {
	color: var(--lt-meta);
	text-decoration: none;
}

.lt-crumbs a:hover,
.lt-crumbs a:focus {
	color: var(--lt-cobalt);
	text-decoration: underline;
}

.lt-crumbs .last,
.lt-crumbs [aria-current="page"] {
	color: var(--lt-terracotta);
}

.lt-crumbs__sep {
	margin-inline: 4px;
}

.lt-posthead {
	padding-top: 44px;
}

.lt-posthead h1 {
	font-size: var(--lt-size-h1);
	line-height: var(--lt-leading-h1);
	margin-top: 14px;
}

.lt-posthead .lt-kicker {
	margin-top: 28px;
}

.lt-posthead__dek {
	font-size: var(--lt-size-dek);
	line-height: 1.6;
	color: var(--lt-text-muted);
	margin: 18px 0 0;
}

.lt-byline {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 26px;
	padding-bottom: 28px;
	border-bottom: var(--lt-border);
	flex-wrap: wrap;
}

.lt-avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--lt-cobalt);
	color: var(--lt-chalk);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--lt-font-display);
	font-size: 16px;
	flex-shrink: 0;
	overflow: hidden;
}

.lt-avatar img {
	border-radius: 50%;
}

.lt-byline__who {
	font-size: var(--lt-size-small);
	color: var(--lt-ink);
}

.lt-byline__who a {
	color: inherit;
}

.lt-byline .lt-mono {
	margin-left: auto;
	letter-spacing: 0.1em;
	text-align: right;
}

.lt-posthero {
	margin-top: 36px;
}

.lt-posthero .lt-frame {
	height: 420px;
}

.lt-postbody {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: var(--lt-s9);
	align-items: start;
	margin-top: 44px;
	padding-bottom: var(--lt-s9);
}

/* No contents list, no Essenciais, no widgets: the article takes the full
   measure rather than leaving a 300px column of empty chalk. */
.lt-postbody--full {
	grid-template-columns: minmax(0, var(--lt-measure));
	justify-content: center;
}

.lt-article {
	min-width: 0;
}

/* --- Long-form content styles. Mirrored in editor-style.css. --------- */

.lt-content > * {
	margin-block: 18px;
}

.lt-content > *:first-child {
	margin-top: 0;
}

.lt-content p {
	font-size: var(--lt-size-body);
	line-height: var(--lt-leading-body);
	color: var(--lt-body);
}

.lt-content h2 {
	display: flex;
	align-items: baseline;
	gap: var(--lt-s3);
	font-size: var(--lt-size-h2);
	line-height: 1.2;
	margin-top: 44px;
	scroll-margin-top: var(--lt-s5);
}

/* The cobalt square that marks every H2. */
.lt-content h2::before {
	content: "";
	width: 12px;
	height: 12px;
	background: var(--lt-cobalt);
	flex-shrink: 0;
	transform: translateY(-2px);
}

.lt-content h3 {
	font-size: 23px;
	line-height: 1.3;
	margin-top: var(--lt-s6);
	scroll-margin-top: var(--lt-s5);
}

.lt-content h4 {
	font-size: 19px;
	margin-top: var(--lt-s5);
}

.lt-content a {
	color: var(--lt-cobalt);
	text-decoration: underline;
}

.lt-content ul,
.lt-content ol {
	padding-left: 1.3em;
}

.lt-content li {
	margin-block: var(--lt-s2);
	line-height: var(--lt-leading-body);
}

.lt-content li::marker {
	color: var(--lt-cobalt);
}

.lt-content blockquote {
	border-top: 2px solid var(--lt-ink);
	border-bottom: 2px solid var(--lt-ink);
	padding: 26px var(--lt-s2);
	margin-block: 36px;
	font-family: var(--lt-font-display);
	font-size: var(--lt-size-quote);
	line-height: 1.4;
	color: var(--lt-cobalt);
}

.lt-content blockquote p {
	font: inherit;
	color: inherit;
	margin: 0;
}

.lt-content blockquote cite {
	display: block;
	font-family: var(--lt-font-mono);
	font-size: var(--lt-size-mono);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lt-meta);
	font-style: normal;
	margin-top: var(--lt-s3);
}

.lt-content figure,
.lt-content .wp-block-image {
	margin-block: 36px;
}

.lt-content img {
	display: block;
	width: 100%;
	height: auto;
}

.lt-content figcaption,
.lt-content .wp-element-caption {
	font-family: var(--lt-font-mono);
	font-size: var(--lt-size-mono);
	color: var(--lt-meta);
	line-height: 1.5;
	margin-top: 10px;
	text-align: left;
}

.lt-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--lt-size-small);
}

.lt-content th,
.lt-content td {
	border: var(--lt-border);
	padding: 10px 14px;
	text-align: left;
}

.lt-content th {
	background: var(--lt-chalk-dim);
	font-family: var(--lt-font-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lt-meta);
	font-weight: 400;
}

.lt-content code,
.lt-content kbd {
	font-family: var(--lt-font-mono);
	font-size: 0.9em;
	background: var(--lt-chalk-dim);
	padding: 2px 5px;
}

.lt-content pre {
	background: var(--lt-ink);
	color: var(--lt-chalk);
	padding: var(--lt-s5);
	overflow-x: auto;
	font-family: var(--lt-font-mono);
	font-size: 13px;
	line-height: 1.6;
}

.lt-content pre code {
	background: none;
	color: inherit;
	padding: 0;
}

.lt-content hr,
.lt-content .wp-block-separator {
	border: 0;
	border-top: var(--lt-border);
	margin-block: 36px;
}

.lt-content .alignwide,
.lt-content .alignfull {
	width: 100%;
}

/* Boxed callout - the "Bom Saber" pattern, also a registered block style. */
.lt-facts {
	border: var(--lt-border-heavy);
	background: var(--lt-white);
	margin-block: 36px;
}

.lt-facts__head {
	background: var(--lt-ink);
	color: var(--lt-chalk);
	font-family: var(--lt-font-mono);
	font-size: var(--lt-size-mono);
	letter-spacing: var(--lt-track-mono-wide);
	text-transform: uppercase;
	padding: 10px 18px;
}

/* The Bom Saber pattern builds this from a core Columns block, which brings
   its own flex layout and gap; grid + zero gap gives the flush 1px dividers
   the design calls for whether the markup is hand-written or a pattern. */
.lt-facts__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	margin: 0;
}

.lt-facts__grid > .wp-block-column {
	flex-basis: auto !important;
}

/* Dividers are drawn as top and right borders, never bottom: the pattern
   stacks several Columns blocks inside one box, and only "no border on the
   first row" composes correctly across them. */
.lt-facts__cell {
	padding: var(--lt-s4) 18px;
	border-top: var(--lt-border);
	border-right: var(--lt-border);
	min-width: 0;
}

.lt-facts__grid > *:nth-child(2n) {
	border-right: 0;
}

.lt-facts__grid:first-of-type > *:nth-child(-n+2) {
	border-top: 0;
}

.lt-facts__label {
	font-family: var(--lt-font-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lt-meta);
}

.lt-facts__value {
	font-size: 15px;
	color: var(--lt-ink);
	margin-top: var(--lt-s1);
	line-height: 1.5;
}

/* Tags + author box */
.lt-tags {
	margin-top: 44px;
}

.lt-authorbox {
	border: var(--lt-border);
	background: var(--lt-white);
	display: flex;
	gap: 18px;
	align-items: center;
	padding: 22px var(--lt-s5);
	margin-top: var(--lt-s6);
}

.lt-authorbox .lt-avatar {
	width: 56px;
	height: 56px;
	font-size: 20px;
}

.lt-authorbox__text {
	font-size: var(--lt-size-small);
	line-height: 1.6;
	color: var(--lt-text-muted);
}

.lt-authorbox__text strong {
	color: var(--lt-ink);
}

.lt-authorbox__text a {
	color: var(--lt-cobalt);
	font-weight: 600;
	text-decoration: none;
}

.lt-authorbox__text a:hover,
.lt-authorbox__text a:focus {
	text-decoration: underline;
}

/* --- Sidebar --------------------------------------------------------- */

.lt-aside {
	display: flex;
	flex-direction: column;
	gap: var(--lt-s5);
	position: sticky;
	top: var(--lt-s5);
	min-width: 0;
}

.lt-panel {
	border: var(--lt-border-heavy);
	background: var(--lt-white);
}

.lt-panel__head {
	background: var(--lt-ink);
	color: var(--lt-chalk);
	font-family: var(--lt-font-mono);
	font-size: var(--lt-size-mono);
	letter-spacing: var(--lt-track-mono-wide);
	text-transform: uppercase;
	padding: 10px 18px;
	margin: 0;
	font-weight: 400;
}

.lt-toc ol {
	list-style: none;
	margin: 0;
	padding: var(--lt-s2) 0;
	counter-reset: lt-toc;
}

.lt-toc li {
	counter-increment: lt-toc;
	margin: 0;
}

.lt-toc a {
	display: flex;
	gap: var(--lt-s3);
	padding: 10px 18px;
	font-size: var(--lt-size-small);
	line-height: 1.45;
	color: var(--lt-cobalt);
	text-decoration: none;
}

.lt-toc a::before {
	content: counter(lt-toc, decimal-leading-zero);
	font-family: var(--lt-font-mono);
	font-size: 12px;
	color: var(--lt-terracotta);
	flex-shrink: 0;
}

.lt-toc a:hover,
.lt-toc a:focus {
	background: var(--lt-chalk-dim);
	text-decoration: none;
}

/* Collapsed contents list shown above the article on narrow screens. */
.lt-toc--mobile summary {
	cursor: pointer;
	list-style: none;
}

.lt-toc--mobile summary::-webkit-details-marker {
	display: none;
}

.lt-toc--mobile summary::after {
	content: "+";
	float: right;
}

.lt-toc--mobile[open] summary::after {
	content: "\2212";
}

.lt-essentials {
	background: var(--lt-cobalt);
	color: var(--lt-chalk);
	padding: var(--lt-s5);
}

.lt-essentials .lt-kicker {
	color: var(--lt-cobalt-soft);
}

.lt-essentials dl {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: var(--lt-s4) 0 0;
	font-size: var(--lt-size-small);
}

.lt-essentials__row {
	display: flex;
	justify-content: space-between;
	gap: var(--lt-s3);
	border-bottom: 1px solid var(--lt-cobalt-line);
	padding-bottom: var(--lt-s3);
}

.lt-essentials__row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.lt-essentials dt {
	color: var(--lt-cobalt-soft);
	flex-shrink: 0;
}

.lt-essentials dd {
	margin: 0;
	text-align: right;
}

.lt-aside .widget {
	border: var(--lt-border);
	background: var(--lt-white);
	padding: var(--lt-s5);
	font-size: var(--lt-size-small);
}

.lt-aside .widget-title {
	font-family: var(--lt-font-mono);
	font-size: var(--lt-size-mono);
	letter-spacing: var(--lt-track-mono-wide);
	text-transform: uppercase;
	color: var(--lt-meta);
	margin-bottom: var(--lt-s3);
}

.lt-aside .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lt-aside .widget li {
	padding-block: 6px;
	border-bottom: var(--lt-border);
}

.lt-aside .widget li:last-child {
	border-bottom: 0;
}

/* Related */
.lt-related {
	border-top: var(--lt-border);
	padding-top: var(--lt-s7);
	margin-bottom: var(--lt-s9);
}

.lt-related h2 {
	font-size: var(--lt-size-minor);
}

/* -------------------------------------------------------------------------
 * 9. Archives
 * ---------------------------------------------------------------------- */

.lt-archhead {
	display: grid;
	/* minmax(0, ...) rather than a bare 1fr: a grid track's automatic
	   minimum is its content's min-content width, so a long title would
	   otherwise push the track wider than the page. */
	grid-template-columns: minmax(0, 1fr) 240px;
	gap: var(--lt-s8);
	align-items: center;
	padding-block: 52px 36px;
	border-bottom: var(--lt-border);
}

.lt-archhead h1 {
	font-size: var(--lt-size-arch);
	line-height: 1.08;
	margin-top: var(--lt-s4);
}

.lt-archhead__desc {
	font-size: 16px;
	line-height: 1.65;
	color: var(--lt-text-muted);
	margin: 14px 0 0;
	max-width: 56ch;
}

.lt-archhead__desc p:last-child {
	margin-bottom: 0;
}

.lt-archhead__count {
	margin-top: var(--lt-s4);
	letter-spacing: 0.16em;
	color: var(--lt-terracotta);
}

.lt-filters {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-block: 20px;
	border-bottom: var(--lt-border);
	flex-wrap: wrap;
}

.lt-filters__sort {
	margin-left: auto;
	letter-spacing: 0.14em;
}

.lt-archive-grid {
	padding-block: 36px;
}

.lt-archive-grid .lt-card .lt-frame {
	height: 200px;
}

/* Pagination */
.lt-pagination {
	display: flex;
	justify-content: center;
	gap: var(--lt-s2);
	padding-block: var(--lt-s2) var(--lt-s8);
	flex-wrap: wrap;
}

.lt-pagination .page-numbers {
	width: 40px;
	height: 40px;
	border: 1px solid var(--lt-cobalt);
	color: var(--lt-cobalt);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--lt-font-mono);
	font-size: 13px;
	text-decoration: none;
	padding: 0;
}

.lt-pagination .page-numbers:hover,
.lt-pagination .page-numbers:focus {
	background: var(--lt-chalk-dim);
	text-decoration: none;
}

.lt-pagination .page-numbers.current {
	background: var(--lt-cobalt);
	color: var(--lt-chalk);
}

.lt-pagination .page-numbers.dots {
	border-color: transparent;
	color: var(--lt-meta);
}

.lt-pagination .prev,
.lt-pagination .next {
	width: auto;
	padding-inline: var(--lt-s4);
}

/* Empty states */
.lt-empty {
	padding-block: var(--lt-s9);
	max-width: 60ch;
}

.lt-empty h1 {
	font-size: var(--lt-size-h1);
	line-height: var(--lt-leading-h1);
	margin-bottom: var(--lt-s4);
}

.lt-empty__back {
	margin-top: var(--lt-s5);
}

.lt-empty .search-form {
	display: flex;
	margin-top: var(--lt-s5);
	max-width: 460px;
}

.lt-empty .search-field {
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid var(--lt-ink);
	border-right: 0;
	background: var(--lt-white);
	padding: 14px 18px;
	font-family: var(--lt-font-mono);
	font-size: 13px;
}

/* -------------------------------------------------------------------------
 * 10. Pages & comments
 * ---------------------------------------------------------------------- */

.lt-page {
	padding-block: 44px var(--lt-s9);
}

.lt-page h1 {
	font-size: var(--lt-size-h1);
	line-height: var(--lt-leading-h1);
	margin-bottom: var(--lt-s6);
}

.lt-comments {
	border-top: var(--lt-border);
	padding-top: var(--lt-s7);
	margin-bottom: var(--lt-s9);
}

.lt-comments h2 {
	font-size: var(--lt-size-minor);
	margin-bottom: var(--lt-s5);
}

.lt-comments ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lt-comments .children {
	list-style: none;
	margin-left: var(--lt-s5);
	padding-left: var(--lt-s5);
	border-left: var(--lt-border);
}

.lt-comments .comment-body {
	border-bottom: var(--lt-border);
	padding-block: var(--lt-s5);
	font-size: var(--lt-size-small);
	line-height: 1.7;
}

.lt-comments .comment-meta {
	font-family: var(--lt-font-mono);
	font-size: var(--lt-size-mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lt-meta);
	margin-bottom: var(--lt-s3);
}

.lt-comments .comment-author img {
	border-radius: 50%;
	vertical-align: middle;
	margin-right: var(--lt-s2);
}

.comment-form label {
	display: block;
	font-family: var(--lt-font-mono);
	font-size: var(--lt-size-mono);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lt-meta);
	margin-bottom: 6px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	border: var(--lt-border-heavy);
	background: var(--lt-white);
	padding: 12px 14px;
	font-size: var(--lt-size-small);
	border-radius: var(--lt-radius);
}

.comment-form .submit {
	background: var(--lt-cobalt);
	color: var(--lt-chalk);
	border: 1px solid var(--lt-cobalt);
	padding: 14px 26px;
	font-size: var(--lt-size-small);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
}

.comment-form .submit:hover,
.comment-form .submit:focus {
	background: var(--lt-cobalt-deep);
}

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

.lt-foot {
	background: var(--lt-ink);
	color: var(--lt-footer-text);
	padding-block: var(--lt-s9) var(--lt-s6);
}

.lt-foot a {
	color: var(--lt-footer-text);
	text-decoration: none;
}

.lt-foot a:hover,
.lt-foot a:focus {
	color: var(--lt-chalk);
	text-decoration: underline;
}

.lt-foot__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--lt-s8);
}

.lt-foot .lt-brand__word {
	color: var(--lt-chalk);
}

.lt-foot__mission {
	font-size: 13px;
	line-height: 1.7;
	margin: var(--lt-s4) 0 0;
	max-width: 34ch;
}

.lt-foot__col {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 13px;
	min-width: 0;
}

.lt-foot__col .lt-mono,
.lt-foot__col .widget-title {
	letter-spacing: 0.2em;
	color: var(--lt-meta-reversed);
	margin: 0;
	font-family: var(--lt-font-mono);
	font-size: var(--lt-size-mono);
	text-transform: uppercase;
	font-weight: 400;
}

.lt-foot__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* The bar is three parts: copyright, trust links, colophon. When the theme
   finds no About/Contact/Privacy/Terms pages the middle is simply absent and
   space-between still reads correctly with two. */
.lt-foot__legal ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--lt-s2) 18px;
}

.lt-foot__legal a {
	color: var(--lt-meta-reversed);
	text-decoration: none;
}

.lt-foot__legal a:hover,
.lt-foot__legal a:focus {
	color: var(--lt-chalk);
	text-decoration: underline;
}

.lt-foot__bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--lt-s4);
	border-top: 1px solid var(--lt-body);
	margin-top: 44px;
	padding-top: 20px;
	font-family: var(--lt-font-mono);
	font-size: var(--lt-size-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lt-meta-reversed);
	flex-wrap: wrap;
}

/* -------------------------------------------------------------------------
 * 12. Responsive
 *
 * The mocks are 1200px desktop. Breakpoints follow the handoff: 1024
 * collapses the two-column layouts, 768 the navigation.
 * ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.lt-hero {
		grid-template-columns: 1fr;
		gap: var(--lt-s6);
	}

	.lt-hero .lt-tiles {
		--lt-tiles-row: 90px;
	}

	.lt-strip,
	.lt-band__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.lt-strip__cell:nth-child(2n) {
		border-right: 0;
	}

	.lt-strip__cell:nth-child(-n+2) {
		border-bottom: var(--lt-border);
	}

	.lt-postbody {
		grid-template-columns: 1fr;
		gap: var(--lt-s7);
	}

	/* Sidebar content moves below the article; the contents list becomes a
	   collapsible block above it instead. */
	.lt-aside {
		position: static;
	}

	.lt-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.lt-archhead {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--lt-s6);
	}

	.lt-archhead .lt-tiles--mini {
		max-width: 240px;
	}

	.lt-posthero .lt-frame {
		height: 300px;
	}

	.lt-foot__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--lt-s6);
	}

	.lt-signup {
		grid-template-columns: 1fr;
		gap: var(--lt-s5);
	}
}

/* The two contents lists are mutually exclusive: desktop gets the sticky
   sidebar panel, narrow screens the collapsible one above the article. */
.lt-toc--mobile {
	display: none;
}

@media (max-width: 1024px) {
	.lt-toc--mobile {
		display: block;
		margin-bottom: var(--lt-s6);
	}

	.lt-toc--desktop {
		display: none;
	}
}

@media (max-width: 768px) {
	.lt-nav,
	.lt-topbar .lt-search-toggle {
		display: none;
	}

	.lt-burger {
		display: flex;
	}

	.lt-topbar__inner {
		gap: var(--lt-s4);
	}

	.lt-grid {
		grid-template-columns: 1fr;
	}

	.lt-strip,
	.lt-band__grid {
		grid-template-columns: 1fr;
	}

	.lt-strip__cell {
		border-right: 0;
		border-bottom: var(--lt-border);
	}

	.lt-strip__cell:last-child {
		border-bottom: 0;
	}

	.lt-list__row {
		grid-template-columns: 1fr;
		gap: var(--lt-s2);
	}

	.lt-list__cat {
		white-space: normal;
	}

	.lt-byline .lt-mono {
		margin-left: 0;
		text-align: left;
		width: 100%;
	}

	.lt-facts__grid {
		grid-template-columns: 1fr;
	}

	.lt-facts__grid > * {
		border-right: 0;
	}

	/* One column, so only the very first cell sits at the top of the box. */
	.lt-facts__grid:first-of-type > *:nth-child(-n+2) {
		border-top: var(--lt-border);
	}

	.lt-facts__grid:first-of-type > *:first-child {
		border-top: 0;
	}

	.lt-posthero .lt-frame {
		height: 220px;
	}

	.lt-authorbox {
		flex-direction: column;
		align-items: flex-start;
	}

	.lt-foot__grid {
		grid-template-columns: 1fr;
	}

	.lt-foot__bar {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--lt-s2);
	}

	.lt-foot__legal ul {
		gap: var(--lt-s1) 16px;
	}

	.lt-foot__legal a {
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	.lt-signup__form {
		flex-direction: column;
	}

	.lt-signup__form input[type="email"] {
		width: 100%;
		border-right: 1px solid var(--lt-ink);
		border-bottom: 0;
	}

	/* 44px minimum hit targets on touch. */
	.lt-btn,
	.lt-chip,
	.lt-pagination .page-numbers,
	.lt-iconbtn {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.lt-iconbtn {
		width: 44px;
	}

	.lt-toc a,
	.lt-foot__col a {
		min-height: 44px;
		display: flex;
		align-items: center;
	}
}

/* -------------------------------------------------------------------------
 * 13. Print
 * ---------------------------------------------------------------------- */

@media print {
	/* Print deliberately leaves the token palette: paper is white, and ink
	   coverage costs the reader money. These two literals are the only
	   hard-coded colours in the theme. */
	body {
		background: #fff;
		border-top: 0;
	}

	.lt-topbar,
	.lt-foot,
	.lt-aside,
	.lt-related,
	.lt-signup,
	.lt-overlay,
	.lt-tiles,
	.lt-comments {
		display: none !important;
	}

	.lt-postbody {
		grid-template-columns: 1fr;
	}

	.lt-content a::after {
		content: " (" attr(href) ")";
		font-size: 11px;
		color: #555;
	}
}