/*
Theme Name: Turtle Life 2026
Author: Kayelless
Author URI: https://www.kayelless.net
Description: A dark, photo-friendly weblog theme. Text posts open with a full-width featured image and a wide 960px reading column. Picture posts skip the featured image and size each picture to the screen (portraits by height, landscapes by width). Gallery posts show exactly the layout you build. Includes a self-hiding header, a footer that stays put, keyboard arrow keys for previous/next post, and a Pictures_ contact-sheet call-out.
Version: 1.0.14
Requires at least: 6.6
Tested up to: 7.1
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: turtle-life-2026
Tags: blog, photography, dark, full-site-editing, block-patterns, one-column, wide-blocks
*/

/* ==========================================================
   1. BASICS
   --tl-header-h is measured by turtle.js (the header's real height).
   ========================================================== */
:root {
	--tl-header-h: 64px;
	--tl-bar-tint: var(--wp--custom--bar-tint, rgba(0, 0, 0, 0.35));
	--tl-bar-solid: var(--wp--custom--bar-solid, rgba(12, 12, 12, 0.92));
	--tl-line: var(--wp--preset--color--line, #2a2a2a);
	--tl-muted: var(--wp--preset--color--muted, #999);
	--tl-amber: var(--wp--preset--color--highlight, #c9a46a);
	/* The tallest a picture may be: the screen minus the header and a little air. */
	--tl-pic-max-h: calc(100vh - var(--tl-header-h) - 3.5rem);
	--tl-pic-max-h: calc(100svh - var(--tl-header-h) - 3.5rem);
}

html {
	/* Keyboard (Tab) focus never lands hidden under the header. */
	scroll-padding-top: calc(var(--tl-header-h) + 1.5rem);
}

body {
	background-color: #111;
	background-image: linear-gradient(185deg, #212121 0%, #1a1a1a 40%, #121212 100%);
	background-attachment: fixed;
	-webkit-font-smoothing: antialiased;
}

/* Footer stays at the bottom of the page, even on short pages. */
.wp-site-blocks {
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
}
.wp-site-blocks > * { margin-block-start: 0; }
.wp-site-blocks > .tl-footer { margin-top: auto; }

/* Pages without a big photo at the top start below the header. */
body:not(.tl-overlay) .wp-site-blocks { padding-top: var(--tl-header-h); }

/* Visible keyboard focus everywhere. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.wp-element-button:focus-visible {
	outline: 2px solid var(--tl-amber);
	outline-offset: 4px;
}

/* ==========================================================
   2. HEADER — fixed, hides while scrolling down, returns on the way up
   ========================================================== */
.tl-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	gap: 1.75rem;
	padding: 1.1rem clamp(1.25rem, 4vw, 3rem);
	background: var(--tl-bar-solid);
	transition: transform 0.35s ease, background-color 0.35s ease;
}
.admin-bar .tl-bar { top: var(--wp-admin--admin-bar--height, 32px); }
.tl-overlay .tl-bar { background: var(--tl-bar-tint); }
.tl-overlay .tl-bar.is-scrolled { background: var(--tl-bar-solid); }
.tl-bar.is-hidden { transform: translateY(calc(-100% - var(--wp-admin--admin-bar--height, 0px))); }

.tl-brand { gap: 1.25rem; flex: 1 1 auto; min-width: 0; }
.tl-bar .wp-block-site-title a { text-decoration: none; color: #fff; }
.tl-bar .wp-block-site-tagline { font-size: 0.8125rem; color: #bbb; margin: 0; }
.tl-bar .wp-block-navigation a { text-decoration: none; }
.tl-bar .wp-block-navigation .wp-block-navigation__container { gap: 1.5rem; }

/* Submenus and the phone menu overlay: dark to match. */
.tl-bar .wp-block-navigation__submenu-container {
	background: #151515 !important;
	border: 1px solid var(--tl-line) !important;
	color: #eee !important;
}

/* ---- Phone menu (the full-screen list that opens from the ☰ button) ---- */
.wp-block-navigation__responsive-container.is-menu-open {
	background: #111 !important;
	color: #eee !important;
	padding: 0.85rem clamp(1.25rem, 4vw, 3rem) 2.5rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 0.2rem;
	right: 0;
	color: #eee;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 3.75rem !important;
	align-items: stretch !important;
	text-align: center;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: 0 !important;
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: center !important;
	justify-content: center;
	border-bottom: 1px solid var(--tl-line);
	padding: 0.9rem 0;
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:first-child { border-top: 1px solid var(--tl-line); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 800;
	font-size: clamp(1.75rem, 1.2rem + 3vw, 2.25rem);
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: #eee !important;
	padding: 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content { color: var(--tl-amber) !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent !important;
	border: 0 !important;
	padding: 0.5rem 0 0 !important;
	gap: 0.5rem !important;
	align-items: center !important;
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	border: 0;
	padding: 0.2rem 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 1.1rem;
	font-weight: 600;
	color: #bbb !important;
}

/* ==========================================================
   3. FOOTER — stays put, never hides
   ========================================================== */
/* Desktop: menu on the left, logo in the exact middle, copyright on the right. */
.tl-foot {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem 2rem;
	border-top: 1px solid var(--tl-line);
	padding: 1.25rem clamp(1.25rem, 4vw, 3rem);
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.8125rem;
	color: var(--tl-muted);
}
.tl-foot > * { margin: 0 !important; }
.tl-foot .tl-foot-nav { justify-self: start; }
.tl-foot .tl-foot-logo { justify-self: center; line-height: 0; }
.tl-foot .tl-foot-logo img { width: 35px; height: 35px; border-radius: 9999px; }
.tl-foot .tl-copyright { justify-self: end; }
.tl-foot a { color: var(--tl-muted); text-decoration: none; }
.tl-foot a:hover { color: var(--tl-amber); }
.tl-foot .wp-block-navigation__submenu-container,
.tl-foot .wp-block-navigation-submenu__toggle,
.tl-foot .wp-block-navigation__submenu-icon { display: none !important; }

/* ==========================================================
   4. MAIN AREA
   ========================================================== */
.tl-main {
	padding-top: 3rem;
	padding-bottom: 4rem;
}
.tl-overlay .tl-main.tl-single,
.tl-overlay .tl-main.tl-page { padding-top: 2.75rem; }

/* Date · Category line */
.tl-meta { gap: 0.5rem; font-size: 0.8125rem; color: var(--tl-muted); margin-bottom: 0.5rem; }
.tl-meta > * { margin: 0 !important; }
.tl-meta .wp-block-post-terms a { color: var(--tl-muted); text-decoration: none; }
.tl-meta .wp-block-post-terms a:hover { color: var(--tl-amber); }
.tl-meta .wp-block-post-date + .wp-block-post-terms::before { content: "·"; margin-right: 0.5rem; }

.tl-single .wp-block-post-title { margin-top: 0.25rem; margin-bottom: 1.75rem; }

/* ==========================================================
   5. LEAD IMAGE (text posts and pages with a featured image)
   ========================================================== */
.tl-lead {
	margin: 0 !important;
	height: 62vh;
	min-height: 320px;
	max-height: 760px;
}
.tl-lead img { width: 100%; height: 100% !important; object-fit: cover; }

/* ==========================================================
   6. HOME PAGE HEADLINE
   ========================================================== */
.tl-hero { margin: 0 !important; padding: 0 clamp(1.25rem, 4vw, 3rem) 2.25rem !important; }
.tl-hero-words {
	font-weight: 900 !important;
	font-size: clamp(2.75rem, 1.5rem + 5vw, 5.5rem) !important;
	line-height: 0.95 !important;
	letter-spacing: -0.03em !important;
	text-shadow: 0 2px 30px rgba(0, 0, 0, 0.6);
	margin: 0;
	color: #fff;
}

/* ==========================================================
   7. POST ROWS (home page, blog, archives)
   Picture | date · category, title, excerpt | Read post
   ========================================================== */
.tl-rows .wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.tl-rows .wp-block-post-template > li { margin: 0; }
.tl-row {
	display: grid;
	grid-template-columns: minmax(180px, 280px) 1fr auto;
	gap: 2rem;
	align-items: center;
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--tl-line);
}
.tl-row > * { margin: 0 !important; }
.tl-row:not(:has(.tl-row-img)) { grid-template-columns: 1fr auto; }
.tl-row-img img { width: 100%; }
.tl-row .wp-block-post-title { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem); margin: 0.2rem 0 0.4rem; }
.tl-row .wp-block-post-title a { text-decoration: none; }
.tl-row .wp-block-post-excerpt { margin: 0; }
.tl-row .wp-block-post-excerpt__excerpt { color: #aaa; font-size: 1rem; margin: 0; }
.tl-row .wp-block-read-more,
.tl-btn {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.875rem;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	border: 1px solid #555;
	padding: 0.65rem 1rem;
	white-space: nowrap;
}
.tl-row .wp-block-read-more:hover { border-color: var(--tl-amber); color: var(--tl-amber); }
.tl-list-title { margin-bottom: 1rem; }
.tl-more { margin-top: 1.5rem; }
/* Blog page: "← Newer posts" / "Older posts →" */
.tl-rows .wp-block-query-pagination { margin-top: 2rem; font-family: var(--wp--preset--font-family--archivo); }
.tl-rows .wp-block-query-pagination a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 0.75rem;
	margin: -0.6rem -0.75rem;
	text-decoration: none;
	font-weight: 700;
	font-size: 1.05rem;
	color: #fff;
	transition: color 0.2s ease;
}
.tl-rows .wp-block-query-pagination-previous-arrow,
.tl-rows .wp-block-query-pagination-next-arrow {
	display: inline-block;
	font-weight: 400;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--tl-muted);
	margin: 0 !important;
	transition: color 0.2s ease, transform 0.2s ease;
}
.tl-rows .wp-block-query-pagination a:hover,
.tl-rows .wp-block-query-pagination a:focus-visible { color: var(--tl-amber); }
.tl-rows .wp-block-query-pagination a:hover span[class*="-arrow"] { color: var(--tl-amber); }
.tl-rows .wp-block-query-pagination-previous:hover .wp-block-query-pagination-previous-arrow { transform: translateX(-4px); }
.tl-rows .wp-block-query-pagination-next:hover .wp-block-query-pagination-next-arrow { transform: translateX(4px); }

/* ==========================================================
   8. POST CONTENT
   ========================================================== */
/* No picture in a post is ever taller than the screen. */
.wp-block-post-content .wp-block-image img {
	max-height: var(--tl-pic-max-h);
	width: auto;
	max-width: 100%;
	height: auto;
}
.wp-block-post-content .wp-block-image:not(.alignleft):not(.alignright) { text-align: center; }
.wp-block-post-content .wp-block-image.alignfull img,
.wp-block-post-content .wp-block-image.alignwide img { width: 100%; object-fit: cover; }
/* Galleries and tiled galleries keep their own sizing. */
.wp-block-post-content .wp-block-gallery .wp-block-image img,
.wp-block-post-content .wp-block-jetpack-tiled-gallery img { max-height: none; width: 100%; height: 100%; }

a.tl-lightbox-link { cursor: zoom-in; display: inline-block; max-width: 100%; }
.wp-block-image figcaption { text-align: center; }

/* Verse keeps line breaks but uses the body font (no typewriter/serif). */
.wp-block-verse { font-family: inherit; white-space: pre-wrap; }

/* Media & Text (picture beside text) */
.wp-block-media-text { gap: 2rem; }

/* ---- Pull quotes: bold wide Archivo, one amber quotation mark ---- */
.wp-block-quote,
.wp-block-pullquote {
	position: relative;
	margin: 2.5rem 0 !important;
	padding: 0 0 0 3.6rem !important;
	border: 0 !important;
	background: none !important;
	text-align: left !important;
	color: #fff;
}
.wp-block-pullquote blockquote { margin: 0; padding: 0; border: 0; }
.wp-block-quote::before,
.wp-block-pullquote::before {
	content: "\201C";
	position: absolute;
	left: 0;
	top: -0.08em;
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 900;
	font-stretch: 125%;
	font-size: 4.4rem;
	line-height: 1;
	color: var(--tl-amber);
}
.wp-block-quote p,
.wp-block-pullquote p {
	font-family: var(--wp--preset--font-family--archivo) !important;
	font-weight: 800 !important;
	font-stretch: 125%;
	font-size: clamp(1.2rem, 1rem + 0.6vw, 1.45rem) !important;
	line-height: 1.3 !important;
	font-style: normal !important;
	letter-spacing: -0.005em;
	margin: 0 0 0.5rem;
}
.wp-block-quote cite,
.wp-block-pullquote cite,
.wp-block-quote .wp-block-quote__citation {
	display: block;
	font-family: var(--wp--preset--font-family--public-sans);
	font-size: 0.875rem;
	font-weight: 400;
	font-style: normal;
	color: var(--tl-muted);
	margin-top: 0.5rem;
}

/* ---- Tags ---- */
.tl-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; font-size: 0.8125rem; }
.tl-tags .wp-block-post-terms__separator { display: none; }
.tl-tags a { text-decoration: none; border: 1px solid #3a3a3a; padding: 0.3rem 0.8rem; border-radius: 999px; color: #bbb; }
.tl-tags a:hover { border-color: var(--tl-amber); color: var(--tl-amber); }

/* ---- Jetpack Share buttons ---- */
.sharedaddy { margin-top: 1.5rem; }
.sharedaddy h3.sd-title { font-family: var(--wp--preset--font-family--archivo); font-size: 0.8125rem; color: var(--tl-muted); font-weight: 500; }
.sharedaddy h3.sd-title::before { display: none; }
.sharedaddy .sd-content ul li a.sd-button,
.sharedaddy .sd-social-icon-text .sd-content ul li a.sd-button {
	background: transparent !important;
	color: #bbb !important;
	border: 1px solid #3a3a3a !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-family: var(--wp--preset--font-family--archivo) !important;
	font-weight: 500 !important;
	text-shadow: none !important;
}
.sharedaddy .sd-content ul li a.sd-button:hover,
.sharedaddy .sd-content ul li a.sd-button:focus-visible {
	color: var(--tl-amber) !important;
	border-color: var(--tl-amber) !important;
}
.sharedaddy .sd-content ul li a.sd-button::before,
.sharedaddy .sd-content ul li a.sd-button > span::before { color: inherit !important; }
.sharedaddy .sd-content ul li a.sd-button svg { fill: currentColor !important; }

/* ---- Previous / Next (single posts) ----
   Small "← Previous" / "Next →" label above the post title.
   The whole link (label + title) is clickable, with a little extra room. */
.tl-pn {
	margin-top: 2.5rem;
	padding: 1.25rem 0;
	border-top: 1px solid var(--tl-line);
	border-bottom: 1px solid var(--tl-line);
	gap: 2rem;
	align-items: flex-start;
}
.tl-pn > div { flex: 1 1 0; }
.tl-pn .post-navigation-link-next { text-align: right; }
.tl-pn a {
	display: inline-block;
	padding: 0.6rem 0.75rem;
	margin: -0.6rem -0.75rem;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 700;
	font-size: 1.1rem;
	color: #fff;
	transition: color 0.2s ease;
}
.tl-pn a:hover,
.tl-pn a:focus-visible { color: var(--tl-amber); }
.tl-pn .post-navigation-link__label {
	display: block;
	font-weight: 400;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	color: var(--tl-muted);
	margin-bottom: 0.25rem;
}
.tl-pn .post-navigation-link__title { display: block; }

/* ---- Comments ---- */
.tl-comments { margin-top: 2.5rem; }
.tl-comment { padding: 1rem 0; border-bottom: 1px solid var(--tl-line); }
.tl-comment .wp-block-comment-author-name { font-family: var(--wp--preset--font-family--archivo); font-weight: 700; }
.tl-comment .wp-block-comment-date { font-size: 0.8125rem; color: var(--tl-muted); }
.tl-comments .comment-reply-title { font-family: var(--wp--preset--font-family--archivo); font-weight: 800; font-size: 1.5rem; }
.tl-comments .comment-notes,
.tl-comments .logged-in-as { font-size: 0.875rem; color: var(--tl-muted); }
.tl-comments label { display: block; font-size: 0.8125rem; color: var(--tl-muted); margin-bottom: 0.35rem; }
.tl-comments input[type="text"],
.tl-comments input[type="email"],
.tl-comments textarea {
	width: 100%;
	background: #151515;
	border: 1px solid #3a3a3a;
	color: #eee;
	font: inherit;
	font-size: 1rem;
	padding: 0.6rem 0.75rem;
}
.tl-comments .form-submit input[type="submit"] {
	background: transparent;
	color: #fff;
	border: 1px solid #555;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.875rem;
	font-weight: 600;
	padding: 0.65rem 1rem;
	cursor: pointer;
}
.tl-comments .form-submit input[type="submit"]:hover { border-color: var(--tl-amber); color: var(--tl-amber); }

/* ==========================================================
   9. PICTURE POSTS
   Portraits fill the screen height; landscapes fill the width but are
   never taller than the screen.
   ========================================================== */
.tl-picture {
	padding-top: 1rem !important;
	/* Leave room for the header plus the padding your groups add around a picture. */
	--tl-pic-max-h: calc(100vh - var(--tl-header-h) - 7rem);
	--tl-pic-max-h: calc(100svh - var(--tl-header-h) - 7rem);
}
/* Date · category, then the title, then your content exactly as built. */
.tl-picture .tl-meta { margin-top: 0; }
.tl-picture .tl-picture-title { margin-bottom: 1.5rem !important; }
.tl-picture-content { margin-top: 0 !important; }
/* Let the groups in a picture post use the wide area so pictures can be big;
   text inside a group still keeps to the 960px column. */
.tl-picture-content .wp-block-group { max-width: var(--wp--style--global--wide-size) !important; }
.tl-picture-content .wp-block-group > p,
.tl-picture-content .wp-block-group > .wp-block-heading,
.tl-picture-content .wp-block-group > .wp-block-quote,
.tl-picture-content .wp-block-group > .wp-block-list { max-width: var(--wp--style--global--content-size); width: 100%; margin-left: auto; margin-right: auto; }
.tl-picture-content .wp-block-image { text-align: center; margin-left: auto; margin-right: auto; }
.tl-picture-content .wp-block-image.tl-pic-portrait,
.tl-picture-content .wp-block-image.tl-pic-landscape { max-width: var(--wp--style--global--wide-size) !important; }

.tl-picture .wp-block-image.tl-pic-portrait img {
	height: var(--tl-pic-max-h) !important;
	width: auto !important;
	max-width: 100%;
	max-height: none;
	object-fit: contain;
}
.tl-picture .wp-block-image.tl-pic-landscape img {
	width: auto !important;
	height: auto !important;
	max-width: 100%;
	max-height: var(--tl-pic-max-h);
}
.tl-picture .wp-block-image.tl-pic-portrait,
.tl-picture .wp-block-image.tl-pic-landscape { max-width: var(--wp--style--global--wide-size); }
.tl-picture .wp-block-image.is-resized img { aspect-ratio: auto !important; }

/* ==========================================================
   10. PICTURES_ CONTACT SHEET
   The strip of three pictures is exactly as tall as the text + button.
   ========================================================== */
.tl-callout { margin: 0; }
.tl-sheet-wrap { padding-top: 1rem; padding-bottom: 3rem; }
.tl-sheet {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: 2.25rem;
	align-items: stretch;
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
	padding: 1.75rem 0;
}
.tl-sheet > * { margin: 0 !important; }
.tl-sheet-text { align-self: start; }
.tl-sheet-text .tl-eyebrow {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.2;
	color: var(--tl-amber);
	margin: 0 0 0.5rem;
}
.tl-sheet-text h2 { font-weight: 900; font-size: clamp(2rem, 1.5rem + 1.5vw, 2.5rem); margin: 0; }
.tl-sheet-text p { color: #aaa; font-size: 1rem; line-height: 1.6; margin: 0.6rem 0 1.1rem; }
.tl-sheet-text .wp-block-buttons { margin: 0; }
.tl-strip {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
	background: #050505;
	padding: 12px 10px 24px;
	counter-reset: frame;
	position: relative;
}
.tl-strip > * { margin: 0 !important; }
.tl-strip .wp-block-image { position: relative; height: 100%; min-height: 0; counter-increment: frame; }
.tl-strip .wp-block-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.05);
	border-radius: 0;
}
.tl-strip .wp-block-image::after {
	content: counter(frame, decimal-leading-zero);
	position: absolute;
	left: 0;
	bottom: -18px;
	font: 600 10px/1 var(--wp--preset--font-family--archivo);
	letter-spacing: 0.1em;
	color: var(--tl-amber);
}
.tl-strip .wp-block-image figcaption { display: none; }

/* ==========================================================
   11. GALLERY POSTS — shown exactly as built; nothing extra here.
   ========================================================== */

/* ==========================================================
   13. LINKS: A LITTLE BREATHING ROOM AROUND EACH ONE
   Padding makes the clickable area bigger than the text itself; the
   matching negative margin keeps everything in exactly the same place.
   ========================================================== */
.tl-bar a { transition: color 0.2s ease; }
.tl-bar .wp-block-site-title a,
.tl-bar .wp-block-navigation-item__content {
	display: inline-block;
	padding: 0.55rem 0.45rem;
	margin: -0.55rem -0.45rem;
}
/* Header links change colour on hover (and when reached with Tab). */
.tl-bar .wp-block-site-title a:hover,
.tl-bar .wp-block-navigation-item__content:hover,
.tl-bar .wp-block-site-title a:focus-visible,
.tl-bar .wp-block-navigation-item__content:focus-visible,
.tl-bar .current-menu-item > .wp-block-navigation-item__content { color: var(--tl-amber) !important; }

.tl-foot a { display: inline-block; padding: 0.5rem 0.4rem; margin: -0.5rem -0.4rem; transition: color 0.2s ease; }
.tl-foot .tl-foot-logo a { padding: 0.4rem; margin: -0.4rem; }

.tl-meta .wp-block-post-terms a { display: inline-block; padding: 0.35rem 0.3rem; margin: -0.35rem -0.3rem; }

/* Post list: the whole title line is clickable, not just the letters. */
.tl-row .wp-block-post-title a { display: block; padding: 0.25rem 0; margin: -0.25rem 0; transition: color 0.2s ease; }
.tl-row .wp-block-post-title a:hover { color: var(--tl-amber); }

/* Links inside your writing. */
.wp-block-post-content p a:not(:has(img)),
.wp-block-post-content li a:not(:has(img)) {
	padding: 0.15em 0.12em;
	margin: -0.15em -0.12em;
	border-radius: 2px;
}

/* ==========================================================
   12. PHONES, SMALL TABLETS, AND ANY TABLET HELD UPRIGHT
   The phone layout is used when the screen is narrower than 782px OR
   taller than it is wide (portrait). So an iPad held upright looks like
   the phone version, and switches to the desktop layout when turned
   sideways. (A tall, narrow desktop browser window also counts as
   portrait.)
   ========================================================== */
@media (max-width: 781px), (orientation: portrait) {
	/* Always use the ☰ menu button, even on a wide tablet held upright. */
	.tl-bar .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
	.tl-bar .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; }

	/* Footer: stacked and centred — menu, copyright, then the logo. */
	.tl-foot { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 0.9rem; padding-top: 1.75rem; padding-bottom: 2rem; }
	.tl-foot .tl-foot-nav { order: 1; justify-self: center; }
	.tl-foot .tl-foot-nav .wp-block-navigation__container { justify-content: center !important; }
	.tl-foot .tl-copyright { order: 2; justify-self: center; }
	.tl-foot .tl-foot-logo { order: 3; }
	.tl-foot a { display: inline-block; padding: 0.6rem 0.5rem; }

	.tl-bar { flex-wrap: wrap !important; gap: 0.75rem; padding: 0.85rem 1.25rem; }
	.tl-bar .wp-block-site-tagline { display: none; }

	.tl-row { grid-template-columns: 1fr; gap: 0.9rem; }
	.tl-row:not(:has(.tl-row-img)) { grid-template-columns: 1fr; }
	.tl-row .wp-block-read-more { justify-self: start; }

	.tl-lead { height: 42vh; min-height: 220px; }
	.tl-hero { min-height: 60vh !important; }

	.tl-picture .wp-block-image.tl-pic-portrait img,
	.tl-picture .wp-block-image.tl-pic-landscape img {
		width: 100% !important;
		height: auto !important;
		max-height: none;
	}
	.wp-block-post-content .wp-block-image img { max-height: none; width: 100%; }

	.tl-pn { flex-direction: column; gap: 1rem; }
	.tl-pn .post-navigation-link-next { text-align: left; }

	.tl-sheet { grid-template-columns: 1fr; }
	.tl-strip .wp-block-image { height: auto; aspect-ratio: 3 / 4; }
}