/*
Theme Name: Tank & Tap
Theme URI: https://tankandtap.com
Author: Arjun Mehta
Author URI: https://tankandtap.com
Description: A premium, magazine-style, featured-image-forward editorial theme for Tank & Tap, a publication about private wells and home water systems. Fast, accessible, and image-forward.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tank-and-tap
Tags: blog, magazine, editorial, one-column, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
*/

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
	--tt-primary: #0E6BA8;
	--tt-primary-dark: #0B547F;
	--tt-secondary: #073B4C;
	--tt-accent: #00A896;
	--tt-text: #1a1a1a;
	--tt-muted: #5a6472;
	--tt-border: #e2e6ea;
	--tt-bg: #ffffff;
	--tt-surface: #f6f8fa;

	--tt-font-head: "Poppins", system-ui, "Segoe UI", Arial, sans-serif;
	--tt-font-body: "Inter", system-ui, "Segoe UI", Arial, sans-serif;

	--tt-radius: 10px;
	--tt-radius-sm: 6px;
	--tt-reading: 720px;
	--tt-maxw: 1180px;

	--tt-shadow-sm: 0 1px 2px rgba(7, 59, 76, 0.06), 0 1px 3px rgba(7, 59, 76, 0.08);
	--tt-shadow-md: 0 4px 12px rgba(7, 59, 76, 0.08), 0 2px 4px rgba(7, 59, 76, 0.06);
	--tt-shadow-lg: 0 12px 32px rgba(7, 59, 76, 0.12), 0 4px 8px rgba(7, 59, 76, 0.06);

	--tt-space: 1rem;
	--tt-header-h: 68px;
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background: var(--tt-bg);
	color: var(--tt-text);
	font-family: var(--tt-font-body);
	font-size: 1.0625rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

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

a {
	color: var(--tt-primary);
	text-decoration: none;
}

a:hover {
	color: var(--tt-primary-dark);
	text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--tt-font-head);
	color: var(--tt-secondary);
	line-height: 1.2;
	margin: 0 0 0.6em;
	font-weight: 700;
	letter-spacing: -0.01em;
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.15rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; }

p { margin: 0 0 1.2em; }

ul, ol { margin: 0 0 1.2em; padding-left: 1.4em; }
li { margin-bottom: 0.4em; }

hr {
	border: 0;
	border-top: 1px solid var(--tt-border);
	margin: 2.5rem 0;
}

figure { margin: 0 0 1.5rem; }
figcaption {
	font-size: 0.875rem;
	color: var(--tt-muted);
	text-align: center;
	margin-top: 0.5rem;
}

code, pre {
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 0.9em;
}
code {
	background: var(--tt-surface);
	padding: 0.15em 0.4em;
	border-radius: var(--tt-radius-sm);
}
pre {
	background: var(--tt-secondary);
	color: #eef4f7;
	padding: 1.25rem;
	border-radius: var(--tt-radius);
	overflow-x: auto;
}
pre code { background: none; padding: 0; color: inherit; }

/* ==========================================================================
   3. LAYOUT HELPERS
   ========================================================================== */
.tt-container {
	max-width: var(--tt-maxw);
	margin-inline: auto;
	padding-inline: 1.5rem;
}

.tt-section {
	padding-block: 4rem;
}

.tt-reading {
	max-width: var(--tt-reading);
	margin-inline: auto;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}

.tt-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	background: var(--tt-secondary);
	color: #fff;
	padding: 0.75rem 1.25rem;
	border-radius: 0 0 var(--tt-radius) 0;
	font-weight: 600;
}
.tt-skip-link:focus {
	left: 0;
	color: #fff;
	text-decoration: none;
}

/* Focus visibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--tt-accent);
	outline-offset: 2px;
	border-radius: 3px;
}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.tt-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--tt-font-head);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	padding: 0.85rem 1.6rem;
	border-radius: var(--tt-radius);
	border: 2px solid transparent;
	background: var(--tt-primary);
	color: #fff;
	cursor: pointer;
	transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
	text-decoration: none;
}
.tt-btn:hover {
	background: var(--tt-primary-dark);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: var(--tt-shadow-md);
}
.tt-btn--ghost {
	background: transparent;
	border-color: rgba(255,255,255,0.7);
	color: #fff;
}
.tt-btn--ghost:hover {
	background: rgba(255,255,255,0.12);
	border-color: #fff;
	color: #fff;
}
.tt-btn--outline {
	background: transparent;
	border-color: var(--tt-primary);
	color: var(--tt-primary);
}
.tt-btn--outline:hover {
	background: var(--tt-primary);
	color: #fff;
}

/* ==========================================================================
   5. HEADER
   ========================================================================== */
.tt-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255,255,255,0.96);
	backdrop-filter: saturate(180%) blur(8px);
	border-bottom: 1px solid var(--tt-border);
}
.tt-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: var(--tt-header-h);
	max-width: var(--tt-maxw);
	margin-inline: auto;
	padding: 0.5rem 1.5rem;
}
.tt-branding {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
.tt-branding .custom-logo-link { display: inline-flex; }
.tt-branding img {
	max-height: 46px;
	width: auto;
}
.tt-wordmark {
	font-family: var(--tt-font-head);
	font-weight: 700;
	font-size: 1.4rem;
	color: var(--tt-secondary);
	letter-spacing: -0.02em;
	text-decoration: none;
}
.tt-wordmark:hover { color: var(--tt-primary); text-decoration: none; }
.tt-wordmark span { color: var(--tt-accent); }

.tt-primary-nav ul {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
}
.tt-primary-nav li { margin: 0; }
.tt-primary-nav a {
	display: block;
	font-family: var(--tt-font-head);
	font-weight: 500;
	font-size: 0.98rem;
	color: var(--tt-text);
	padding: 0.55rem 0.85rem;
	border-radius: var(--tt-radius-sm);
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}
.tt-primary-nav a:hover,
.tt-primary-nav .current-menu-item > a,
.tt-primary-nav .current_page_item > a {
	background: var(--tt-surface);
	color: var(--tt-primary);
}

.tt-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 1px solid var(--tt-border);
	border-radius: var(--tt-radius-sm);
	cursor: pointer;
	padding: 0 10px;
}
.tt-nav-toggle span {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--tt-secondary);
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ==========================================================================
   6. HERO
   ========================================================================== */
.tt-hero {
	position: relative;
	color: #fff;
	background-color: var(--tt-secondary);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
.tt-hero--fallback {
	background-image: linear-gradient(135deg, var(--tt-secondary) 0%, var(--tt-primary) 100%);
}
.tt-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(7,59,76,0.55) 0%, rgba(7,59,76,0.78) 100%);
}
.tt-hero__inner {
	position: relative;
	max-width: var(--tt-maxw);
	margin-inline: auto;
	padding: 6rem 1.5rem;
	max-width: 860px;
}
.tt-hero__eyebrow {
	display: inline-block;
	font-family: var(--tt-font-head);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.8rem;
	color: #7fe3d6;
	margin-bottom: 1rem;
}
.tt-hero h1 {
	color: #fff;
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	line-height: 1.08;
	margin-bottom: 1rem;
	max-width: 16ch;
}
.tt-hero__intro {
	font-size: 1.2rem;
	color: rgba(255,255,255,0.92);
	max-width: 60ch;
	margin-bottom: 2rem;
}

/* ==========================================================================
   7. SECTION HEADINGS
   ========================================================================== */
.tt-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 2rem;
}
.tt-section-head h2 {
	font-size: 2rem;
	margin: 0;
}
.tt-section-head p {
	color: var(--tt-muted);
	margin: 0.35rem 0 0;
}
.tt-section-head__link {
	font-family: var(--tt-font-head);
	font-weight: 600;
	white-space: nowrap;
}
.tt-eyebrow {
	display: block;
	font-family: var(--tt-font-head);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.8rem;
	color: var(--tt-accent);
	margin-bottom: 0.5rem;
}

/* ==========================================================================
   8. CATEGORY GRID
   ========================================================================== */
.tt-cat-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}
.tt-cat-card {
	position: relative;
	display: block;
	border-radius: var(--tt-radius);
	overflow: hidden;
	min-height: 240px;
	color: #fff;
	background-color: var(--tt-secondary);
	background-size: cover;
	background-position: center;
	box-shadow: var(--tt-shadow-sm);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	text-decoration: none;
}
.tt-cat-card--fallback {
	background-image: linear-gradient(135deg, var(--tt-primary) 0%, var(--tt-accent) 100%);
}
.tt-cat-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--tt-shadow-lg);
	text-decoration: none;
	color: #fff;
}
.tt-cat-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(7,59,76,0.15) 30%, rgba(7,59,76,0.85) 100%);
}
.tt-cat-card__body {
	position: absolute;
	inset: auto 0 0 0;
	padding: 1.5rem;
	z-index: 2;
}
.tt-cat-card__body h3 {
	color: #fff;
	font-size: 1.3rem;
	margin: 0 0 0.35rem;
}
.tt-cat-card__body p {
	margin: 0;
	font-size: 0.92rem;
	color: rgba(255,255,255,0.9);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ==========================================================================
   9. POST CARD GRID
   ========================================================================== */
.tt-card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}
.tt-card {
	display: flex;
	flex-direction: column;
	background: var(--tt-bg);
	border: 1px solid var(--tt-border);
	border-radius: var(--tt-radius);
	overflow: hidden;
	box-shadow: var(--tt-shadow-sm);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.tt-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--tt-shadow-md);
	border-color: #cdd6dd;
}
.tt-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--tt-surface);
	overflow: hidden;
}
.tt-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.tt-card:hover .tt-card__media img { transform: scale(1.04); }
.tt-card__media--fallback {
	background-image: linear-gradient(135deg, var(--tt-primary) 0%, var(--tt-accent) 100%);
}
.tt-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.25rem 1.35rem 1.4rem;
}
.tt-chip {
	display: inline-block;
	align-self: flex-start;
	font-family: var(--tt-font-head);
	font-weight: 600;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--tt-primary);
	background: rgba(14,107,168,0.08);
	padding: 0.3rem 0.7rem;
	border-radius: 100px;
	margin-bottom: 0.75rem;
	text-decoration: none;
}
.tt-chip:hover { background: rgba(14,107,168,0.16); color: var(--tt-primary-dark); text-decoration: none; }
.tt-card__title {
	font-size: 1.2rem;
	line-height: 1.3;
	margin: 0 0 0.6rem;
}
.tt-card__title a {
	color: var(--tt-secondary);
	text-decoration: none;
}
.tt-card__title a:hover { color: var(--tt-primary); }
.tt-card__excerpt {
	color: var(--tt-muted);
	font-size: 0.95rem;
	margin: 0 0 1.1rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.tt-card__meta {
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	color: var(--tt-muted);
}
.tt-card__meta img.avatar {
	border-radius: 50%;
	width: 28px;
	height: 28px;
}
.tt-card__meta .sep { opacity: 0.5; }

/* ==========================================================================
   10. PAGE / ARCHIVE HEADERS
   ========================================================================== */
.tt-page-header {
	background: var(--tt-surface);
	border-bottom: 1px solid var(--tt-border);
	padding-block: 3rem;
}
.tt-page-header h1 {
	font-size: 2.4rem;
	margin: 0 0 0.5rem;
}
.tt-page-header p { color: var(--tt-muted); margin: 0; max-width: 65ch; }

/* Archive banner with image */
.tt-archive-banner {
	position: relative;
	color: #fff;
	background-color: var(--tt-secondary);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
.tt-archive-banner--fallback {
	background-image: linear-gradient(135deg, var(--tt-secondary) 0%, var(--tt-primary) 100%);
}
.tt-archive-banner__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(7,59,76,0.5) 0%, rgba(7,59,76,0.8) 100%);
}
.tt-archive-banner__inner {
	position: relative;
	max-width: var(--tt-maxw);
	margin-inline: auto;
	padding: 4rem 1.5rem;
}
.tt-archive-banner h1 { color: #fff; font-size: 2.6rem; margin: 0 0 0.6rem; }
.tt-archive-banner p { color: rgba(255,255,255,0.92); max-width: 65ch; margin: 0; font-size: 1.1rem; }

/* ==========================================================================
   11. BREADCRUMBS
   ========================================================================== */
.tt-breadcrumbs {
	font-size: 0.85rem;
	color: var(--tt-muted);
	margin-bottom: 1.25rem;
}
.tt-breadcrumbs a { color: var(--tt-muted); text-decoration: none; }
.tt-breadcrumbs a:hover { color: var(--tt-primary); text-decoration: underline; }
.tt-breadcrumbs .separator { margin-inline: 0.4rem; opacity: 0.6; }
.tt-archive-banner .tt-breadcrumbs,
.tt-archive-banner .tt-breadcrumbs a { color: rgba(255,255,255,0.85); }

/* ==========================================================================
   12. SINGLE POST
   ========================================================================== */
.tt-single { padding-block: 3rem; }
.tt-article__header { max-width: var(--tt-reading); margin-inline: auto; margin-bottom: 1.5rem; }
.tt-article__header .tt-chip { margin-bottom: 1rem; }
.tt-article__title {
	font-size: clamp(2rem, 4.5vw, 2.75rem);
	line-height: 1.12;
	margin: 0 0 1rem;
}
.tt-article-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6rem;
	color: var(--tt-muted);
	font-size: 0.95rem;
	margin-bottom: 0;
}
.tt-article-meta img.avatar { border-radius: 50%; width: 34px; height: 34px; }
.tt-article-meta a { color: var(--tt-text); font-weight: 600; }
.tt-article-meta .sep { opacity: 0.5; }

.tt-article__featured {
	max-width: 1100px;
	margin: 2rem auto 2.5rem;
}
.tt-article__featured img {
	width: 100%;
	border-radius: var(--tt-radius);
	box-shadow: var(--tt-shadow-md);
}
.tt-article__featured figcaption { margin-top: 0.6rem; }

.tt-article__body {
	max-width: var(--tt-reading);
	margin-inline: auto;
	font-size: 1.0625rem;
}
.tt-article__body > * { max-width: 100%; }
.tt-article__body h2 { font-size: 1.7rem; margin-top: 2.2rem; }
.tt-article__body h3 { font-size: 1.35rem; margin-top: 1.8rem; }
.tt-article__body img { border-radius: var(--tt-radius); margin-block: 1rem; }
.tt-article__body a { text-decoration: underline; text-underline-offset: 2px; }

/* Wide alignment inside reading column */
.tt-article__body .alignwide {
	width: min(1000px, 92vw);
	margin-inline: calc(50% - min(500px, 46vw));
}
.tt-article__body .alignfull {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	border-radius: 0;
}

/* Tables */
.tt-article__body table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
	font-size: 0.95rem;
	box-shadow: var(--tt-shadow-sm);
	border-radius: var(--tt-radius);
	overflow: hidden;
}
.tt-article__body th,
.tt-article__body td {
	padding: 0.85rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--tt-border);
}
.tt-article__body thead th {
	background: var(--tt-secondary);
	color: #fff;
	font-family: var(--tt-font-head);
	font-weight: 600;
}
.tt-article__body tbody tr:nth-child(even) { background: var(--tt-surface); }

/* Blockquote */
.tt-article__body blockquote {
	margin: 1.75rem 0;
	padding: 1rem 1.5rem;
	border-left: 4px solid var(--tt-accent);
	background: var(--tt-surface);
	border-radius: 0 var(--tt-radius) var(--tt-radius) 0;
	font-size: 1.15rem;
	font-style: italic;
	color: var(--tt-secondary);
}
.tt-article__body blockquote p:last-child { margin-bottom: 0; }
.tt-article__body blockquote cite {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.9rem;
	font-style: normal;
	color: var(--tt-muted);
}

/* Lists spacing */
.tt-article__body ul li::marker { color: var(--tt-accent); }
.tt-article__body ol li::marker { color: var(--tt-primary); font-weight: 600; }

/* In-post callouts */
.is-style-callout,
.tt-callout {
	position: relative;
	margin: 1.75rem 0;
	padding: 1.25rem 1.5rem 1.25rem 3.25rem;
	border-radius: var(--tt-radius);
	border: 1px solid var(--tt-border);
	background: var(--tt-surface);
}
.is-style-callout::before,
.tt-callout::before {
	content: "i";
	position: absolute;
	left: 1rem;
	top: 1.25rem;
	width: 1.6rem;
	height: 1.6rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	font-family: var(--tt-font-head);
	font-weight: 700;
	font-size: 0.9rem;
	color: #fff;
	background: var(--tt-primary);
}
.is-style-callout p:last-child,
.tt-callout p:last-child { margin-bottom: 0; }

.is-style-callout.key-takeaways,
.tt-callout.key-takeaways {
	background: rgba(14,107,168,0.06);
	border-color: rgba(14,107,168,0.25);
}
.is-style-callout.key-takeaways::before,
.tt-callout.key-takeaways::before { content: "\2605"; background: var(--tt-primary); }

.is-style-callout.tip,
.tt-callout.tip {
	background: rgba(0,168,150,0.07);
	border-color: rgba(0,168,150,0.3);
}
.is-style-callout.tip::before,
.tt-callout.tip::before { content: "\2713"; background: var(--tt-accent); }

.is-style-callout.warning,
.tt-callout.warning {
	background: rgba(214,69,65,0.06);
	border-color: rgba(214,69,65,0.3);
}
.is-style-callout.warning::before,
.tt-callout.warning::before { content: "\0021"; background: #d64541; }

/* Details / FAQ */
.tt-article__body details {
	border: 1px solid var(--tt-border);
	border-radius: var(--tt-radius);
	padding: 0 1.25rem;
	margin: 0.75rem 0;
	background: var(--tt-bg);
	transition: box-shadow 0.2s ease;
}
.tt-article__body details[open] { box-shadow: var(--tt-shadow-sm); }
.tt-article__body summary {
	font-family: var(--tt-font-head);
	font-weight: 600;
	color: var(--tt-secondary);
	cursor: pointer;
	padding: 1rem 0;
	list-style: none;
	position: relative;
	padding-right: 2rem;
}
.tt-article__body summary::-webkit-details-marker { display: none; }
.tt-article__body summary::after {
	content: "+";
	position: absolute;
	right: 0.25rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5rem;
	color: var(--tt-primary);
	font-weight: 400;
}
.tt-article__body details[open] summary::after { content: "\2212"; }
.tt-article__body details > *:not(summary) { padding-bottom: 1rem; margin-top: 0; }

/* Tags */
.tt-tags {
	max-width: var(--tt-reading);
	margin: 2.5rem auto 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}
.tt-tags__label { font-weight: 600; color: var(--tt-muted); font-size: 0.9rem; margin-right: 0.25rem; }
.tt-tags a {
	font-size: 0.85rem;
	background: var(--tt-surface);
	color: var(--tt-muted);
	padding: 0.3rem 0.75rem;
	border-radius: 100px;
	border: 1px solid var(--tt-border);
	text-decoration: none;
}
.tt-tags a:hover { background: var(--tt-primary); color: #fff; border-color: var(--tt-primary); }

/* ==========================================================================
   13. AUTHOR BOX
   ========================================================================== */
.tt-author-box {
	max-width: var(--tt-reading);
	margin: 3rem auto 0;
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
	padding: 1.75rem;
	background: var(--tt-surface);
	border: 1px solid var(--tt-border);
	border-radius: var(--tt-radius);
}
.tt-author-box img.avatar {
	border-radius: 50%;
	width: 72px;
	height: 72px;
	flex-shrink: 0;
}
.tt-author-box__name {
	font-family: var(--tt-font-head);
	font-size: 1.2rem;
	color: var(--tt-secondary);
	margin: 0 0 0.15rem;
}
.tt-author-box__role {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--tt-accent);
	font-weight: 600;
	margin: 0 0 0.6rem;
}
.tt-author-box__bio { margin: 0; color: var(--tt-muted); font-size: 0.97rem; }

/* ==========================================================================
   14. RELATED POSTS
   ========================================================================== */
.tt-related {
	background: var(--tt-surface);
	border-top: 1px solid var(--tt-border);
	margin-top: 3.5rem;
	padding-block: 3.5rem;
}
.tt-related h2 { font-size: 1.6rem; margin-bottom: 1.75rem; }

/* ==========================================================================
   15. PAGINATION
   ========================================================================== */
.tt-pagination {
	margin-top: 3rem;
	display: flex;
	justify-content: center;
}
.tt-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
}
.tt-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 0.85rem;
	border-radius: var(--tt-radius-sm);
	border: 1px solid var(--tt-border);
	color: var(--tt-text);
	font-family: var(--tt-font-head);
	font-weight: 500;
	text-decoration: none;
	background: var(--tt-bg);
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tt-pagination .page-numbers:hover {
	background: var(--tt-surface);
	border-color: var(--tt-primary);
	color: var(--tt-primary);
}
.tt-pagination .page-numbers.current {
	background: var(--tt-primary);
	border-color: var(--tt-primary);
	color: #fff;
}
.tt-pagination .page-numbers.dots { border: 0; background: transparent; }

/* ==========================================================================
   16. COMMENTS
   ========================================================================== */
.tt-comments { max-width: var(--tt-reading); margin: 3.5rem auto 0; }
.tt-comments h2 { font-size: 1.5rem; margin-bottom: 1.5rem; }
.tt-comments .comment-list { list-style: none; padding: 0; margin: 0; }
.tt-comments .comment-list ol.children { list-style: none; padding-left: 1.5rem; }
.tt-comments .comment-body {
	padding: 1.25rem;
	border: 1px solid var(--tt-border);
	border-radius: var(--tt-radius);
	margin-bottom: 1.25rem;
	background: var(--tt-bg);
}
.tt-comments .comment-author { font-weight: 600; font-family: var(--tt-font-head); }
.tt-comments .comment-author img.avatar { border-radius: 50%; margin-right: 0.5rem; vertical-align: middle; }
.tt-comments .comment-meta { font-size: 0.82rem; color: var(--tt-muted); margin-bottom: 0.5rem; }
.tt-comments .reply a {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--tt-primary);
}
.tt-comment-respond {
	margin-top: 2rem;
	padding: 1.75rem;
	background: var(--tt-surface);
	border: 1px solid var(--tt-border);
	border-radius: var(--tt-radius);
}
.tt-comment-respond label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.tt-comment-respond input[type="text"],
.tt-comment-respond input[type="email"],
.tt-comment-respond input[type="url"],
.tt-comment-respond textarea {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--tt-border);
	border-radius: var(--tt-radius-sm);
	font-family: inherit;
	font-size: 1rem;
	margin-bottom: 1rem;
	background: #fff;
}

/* ==========================================================================
   17. FORMS / SEARCH
   ========================================================================== */
.tt-search-form {
	display: flex; align-items: center; gap: .5rem; width: 100%; max-width: 640px;
	background: #fff; border: 1.5px solid var(--tt-border); border-radius: 100px;
	padding: .3rem .3rem .3rem 1.15rem;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.tt-search-form:focus-within { border-color: var(--tt-primary); box-shadow: 0 0 0 4px rgba(14,107,168,.12); }
.tt-search-form__icon { display: flex; flex-shrink: 0; color: var(--tt-muted); transition: color .2s ease; }
.tt-search-form:focus-within .tt-search-form__icon { color: var(--tt-primary); }
.tt-search-form__input {
	flex: 1; min-width: 0; border: 0; background: transparent;
	-webkit-appearance: none; appearance: none;
	font-family: inherit; font-size: 1rem; color: var(--tt-text); padding: .7rem .2rem;
}
/* The pill's :focus-within is the focus indicator, so suppress the input's own
   (global) focus-visible outline that otherwise draws a second inner ring. */
.tt-search-form__input:focus,
.tt-search-form__input:focus-visible { outline: none; box-shadow: none; }
.tt-search-form__input::placeholder { color: var(--tt-muted); }
.tt-search-form__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.tt-search-form__submit { flex-shrink: 0; border-radius: 100px; display: inline-flex; align-items: center; gap: .4rem; padding-inline: 1.25rem; }
.tt-search-form__submit svg { flex-shrink: 0; }
@media (max-width: 520px) {
	.tt-search-form__submit { padding-inline: .85rem; }
	.tt-search-form__submit span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
}
.tt-page-header__search { margin-top: 1.5rem; }
.tt-none__topics { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; margin-top: 1.75rem; }
.tt-none__topics .tt-search-panel__label { flex-basis: 100%; text-align: center; margin: 0 0 .25rem; }

/* ==========================================================================
   18. FOOTER
   ========================================================================== */
.tt-footer {
	position: relative;
	background: radial-gradient(120% 90% at 15% 0%, #0a5063 0%, transparent 55%), var(--tt-secondary);
	color: rgba(255,255,255,0.82);
}
.tt-footer a { color: rgba(255,255,255,0.80); text-decoration: none; }
.tt-footer a:hover { color: #fff; text-decoration: none; }
.tt-footer a:focus-visible,
.tt-footer button:focus-visible { outline: 2px solid #7fe3d6; outline-offset: 3px; border-radius: 4px; }

/* Rising wave transition (overlaps the bright CTA above) */
.tt-footer__wave { position: absolute; top: 0; left: 0; right: 0; height: clamp(46px, 7vw, 92px); transform: translateY(-99%); line-height: 0; pointer-events: none; z-index: 2; }
.tt-footer__wave svg { display: block; width: 100%; height: 100%; }

/* Decorative layer: aurora blobs + oversized watermark wordmark */
.tt-footer__decor { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.tt-footer__decor i { position: absolute; border-radius: 50%; filter: blur(72px); opacity: 0.4; }
.tt-footer__decor i:nth-child(1) { width: 32vw; height: 32vw; left: -6vw; top: -8vw; background: radial-gradient(circle, #00a896, transparent 68%); animation: tt-footer-aurora 20s ease-in-out infinite; }
.tt-footer__decor i:nth-child(2) { width: 30vw; height: 30vw; right: -8vw; top: 8%; background: radial-gradient(circle, #0e6ba8, transparent 68%); animation: tt-footer-aurora 24s ease-in-out infinite; animation-delay: -7s; }
.tt-footer__decor i:nth-child(3) { width: 26vw; height: 26vw; left: 42%; bottom: -14vw; background: radial-gradient(circle, #7fe3d6, transparent 68%); opacity: 0.28; animation: tt-footer-aurora 22s ease-in-out infinite; animation-delay: -12s; }
.tt-footer__watermark { position: absolute; left: 50%; bottom: 34%; transform: translateX(-50%); font-family: var(--tt-font-head); font-weight: 800; font-size: clamp(6rem, 22vw, 18rem); line-height: 0.8; letter-spacing: -0.03em; color: rgba(255,255,255,0.04); white-space: nowrap; }
@keyframes tt-footer-aurora { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(2vw,-1vw) scale(1.06); } }

.tt-footer__inner { position: relative; z-index: 1; padding-block: clamp(3rem, 6vw, 4.5rem) 0; }
.tt-footer ul { list-style: none; margin: 0; padding: 0; }

/* Masthead */
.tt-footer__masthead { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem 3rem; flex-wrap: wrap; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,0.10); }
.tt-footer__brand { max-width: 48ch; }
.tt-footer__brandmark { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.tt-footer__mark { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(150deg, rgba(0,168,150,0.38), rgba(14,107,168,0.30)); border: 1px solid rgba(255,255,255,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.tt-footer__wordmark { font-family: var(--tt-font-head); font-weight: 700; font-size: 1.6rem; color: #fff; letter-spacing: -0.01em; }
.tt-footer__wordmark span { background: linear-gradient(100deg, #7fe3d6, #34e0c6 45%, #8fd3ff); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 0.04em; }
.tt-footer__mission { color: rgba(255,255,255,0.72); margin: 1rem 0 1.25rem; font-size: 1rem; line-height: 1.6; }
.tt-footer__chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.tt-footer__chips li { margin: 0; }
.tt-footer__chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.85rem; border-radius: 100px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 0.82rem; color: rgba(255,255,255,0.82); }
.tt-footer__chip b { font-family: var(--tt-font-head); font-weight: 800; background: linear-gradient(100deg, #7fe3d6, #8fd3ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tt-footer__chip svg { color: #34e0c6; flex-shrink: 0; }
.tt-footer__totop { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.1rem; border-radius: 100px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-family: var(--tt-font-head); font-weight: 600; font-size: 0.88rem; flex-shrink: 0; transition: background 0.2s ease, border-color 0.2s ease; }
.tt-footer__totop:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.28); }
.tt-footer__totop svg { transition: transform 0.2s ease; }
.tt-footer__totop:hover svg { transform: translateY(-3px); }

/* Link grid */
.tt-footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; padding-block: 2.75rem; }
.tt-footer__col-title { font-family: var(--tt-font-head); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: #8fe8db; margin: 0 0 1.15rem; position: relative; padding-bottom: 0.6rem; }
.tt-footer__col-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #34e0c6, #8fd3ff); }
.tt-footer__grid li { margin-bottom: 0.55rem; }
.tt-footer__link { position: relative; display: inline-block; padding-bottom: 2px; transition: transform 0.2s ease; }
.tt-footer__link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: linear-gradient(90deg, #34e0c6, #8fd3ff); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; }
.tt-footer__link:hover { transform: translateX(3px); }
.tt-footer__link:hover::after { transform: scaleX(1); }

/* Credits bar */
.tt-footer__credits { border-top: 1px solid rgba(255,255,255,0.10); padding-block: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.88rem; color: rgba(255,255,255,0.64); }
.tt-footer__credits p { margin: 0; }
.tt-footer__credits nav { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.tt-footer__credits a { color: rgba(255,255,255,0.72); }
.tt-footer__cookiebtn { border: 0; background: transparent; color: rgba(255,255,255,0.72); font-family: var(--tt-font-body); font-size: 0.88rem; line-height: inherit; cursor: pointer; padding: 0; }
.tt-footer__cookiebtn:hover { color: #fff; text-decoration: underline; }

@media (max-width: 900px) {
	.tt-footer__masthead { flex-direction: column; }
	.tt-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
}
@media (max-width: 600px) {
	.tt-footer__grid { grid-template-columns: 1fr; gap: 1.5rem 1.25rem; }
	.tt-footer__wordmark { font-size: 1.4rem; }
	.tt-footer__watermark { font-size: 34vw; }
}
@media (prefers-reduced-motion: reduce) {
	.tt-footer__decor i { animation: none; }
	.tt-footer__link, .tt-footer__link::after, .tt-footer__totop, .tt-footer__totop svg { transition: none; }
}

/* ==========================================================================
   19. 404
   ========================================================================== */
.tt-404 { text-align: center; padding-block: 5rem; }
.tt-404 .tt-code {
	font-family: var(--tt-font-head);
	font-size: clamp(4rem, 14vw, 8rem);
	font-weight: 700;
	color: var(--tt-primary);
	line-height: 1;
	margin: 0;
}
.tt-404 .tt-search-form { margin: 2rem auto; }
.tt-404 .tt-404-cats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin-top: 1.5rem;
}

/* Nothing found */
.tt-none {
	max-width: var(--tt-reading);
	margin-inline: auto;
	text-align: center;
	padding-block: 2rem;
}

/* ==========================================================================
   20. RESPONSIVE
   ========================================================================== */
/* Collapse the primary nav to a toggle at <=1180px. The 9-item menu needs a ~1136px
   header row to fit; the header content maxes at 1180px, so only showing the full nav
   above that guarantees it never overflows / clips the logo. */
@media (max-width: 1180px) {
	.tt-nav-toggle { display: flex; }
	.tt-primary-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		margin-left: 0;
		background: #fff;
		border-bottom: 1px solid var(--tt-border);
		box-shadow: var(--tt-shadow-md);
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.28s ease;
	}
	.tt-primary-nav.is-open { max-height: 80vh; overflow-y: auto; }
	.tt-primary-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0.5rem 1.5rem 1rem;
	}
	.tt-primary-nav a { padding: 0.85rem 0.5rem; border-bottom: 1px solid var(--tt-surface); }
	.tt-header__inner { position: relative; }
}

@media (max-width: 900px) {
	h1 { font-size: 1.9rem; }
	.tt-section { padding-block: 3rem; }

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

@media (max-width: 600px) {
	body { font-size: 1rem; }
	.tt-container { padding-inline: 1.15rem; }
	.tt-section { padding-block: 2.5rem; }

	.tt-hero__inner { padding: 4rem 1.15rem; }
	.tt-hero__intro { font-size: 1.05rem; }

	.tt-section-head { flex-direction: column; align-items: flex-start; }
	.tt-section-head h2 { font-size: 1.6rem; }

	.tt-cat-grid { grid-template-columns: 1fr; }
	.tt-card-grid { grid-template-columns: 1fr; gap: 1.5rem; }

	.tt-archive-banner__inner { padding: 3rem 1.15rem; }
	.tt-archive-banner h1 { font-size: 1.9rem; }

	.tt-article__body .alignwide,
	.tt-article__body .alignfull {
		width: 100%;
		margin-inline: 0;
	}

	.tt-author-box { flex-direction: column; text-align: left; }

	.tt-footer__credits { flex-direction: column; align-items: flex-start; }
}

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

/* ==========================================================================
   21. v2 DESIGN ENHANCEMENTS (header, hero, home sections)
   ========================================================================== */

/* ---- Scroll reveal (only hide when JS is active) ---- */
.tt-js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.tt-js [data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal]:nth-child(2) { transition-delay: .06s; }
[data-reveal]:nth-child(3) { transition-delay: .12s; }
[data-reveal]:nth-child(4) { transition-delay: .18s; }

/* ---- Modern header: logo icon + wordmark ---- */
.tt-header.is-scrolled { box-shadow: 0 6px 20px rgba(7,59,76,.08); }
.tt-logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.tt-logo:hover { text-decoration: none; }
.tt-logo__icon {
	display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
	background: linear-gradient(140deg, var(--tt-primary), var(--tt-accent));
	box-shadow: 0 6px 14px rgba(14,107,168,.30); flex-shrink: 0;
	transition: transform .25s ease;
}
.tt-logo:hover .tt-logo__icon { transform: translateY(-1px) rotate(-4deg); }
.tt-logo__text { font-family: var(--tt-font-head); font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; color: var(--tt-secondary); display: inline-flex; gap: .14em; }
.tt-logo__text span { color: var(--tt-accent); }

/* Nav pushed right; animated underline; no pill */
.tt-primary-nav { margin-left: auto; }
.tt-primary-nav a { position: relative; font-weight: 600; }
.tt-primary-nav a::after {
	content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .32rem; height: 2px;
	background: var(--tt-primary); border-radius: 2px; transform: scaleX(0); transform-origin: left;
	transition: transform .22s ease;
}
.tt-primary-nav a:hover,
.tt-primary-nav .current-menu-item > a,
.tt-primary-nav .current_page_item > a { background: transparent; color: var(--tt-primary); }
.tt-primary-nav a:hover::after,
.tt-primary-nav .current-menu-item > a::after,
.tt-primary-nav .current_page_item > a::after { transform: scaleX(1); }

/* Header actions + search */
.tt-header__actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; margin-left: .75rem; }
.tt-search-toggle {
	display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
	-webkit-appearance: none; appearance: none;
	border: 1px solid var(--tt-border); background: #fff; color: var(--tt-secondary); cursor: pointer;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.tt-search-toggle:hover { color: var(--tt-primary); border-color: var(--tt-primary); background: var(--tt-surface); }
.tt-search-toggle > svg { grid-area: 1 / 1; transition: transform .2s ease; }
.tt-search-toggle__close { display: none; }
.tt-search-toggle[aria-expanded="true"] { background: var(--tt-primary); border-color: var(--tt-primary); color: #fff; }
.tt-search-toggle[aria-expanded="true"] .tt-search-toggle__open { display: none; }
.tt-search-toggle[aria-expanded="true"] .tt-search-toggle__close { display: block; }

.tt-search-panel { border-top: 1px solid var(--tt-border); background: #fff; padding: 1.5rem 0; animation: tt-slidedown .25s ease; box-shadow: 0 16px 30px -18px rgba(7,59,76,.28); }
.tt-search-panel[hidden] { display: none; }
.tt-search-panel__inner { display: flex; flex-direction: column; gap: 1rem; }
.tt-search-panel .tt-search-form { max-width: 100%; }
.tt-search-panel__suggest { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.tt-search-panel__label { font-family: var(--tt-font-head); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tt-muted); margin-right: .15rem; }
@keyframes tt-slidedown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---- Next-level HERO ---- */
.tt-hero__inner { padding: 6.5rem 1.5rem 7.5rem; max-width: 830px; }
.tt-hero h1 { font-size: clamp(2.4rem, 5.6vw, 3.9rem); max-width: 18ch; }
.tt-hero__accent { display: block; background: linear-gradient(90deg, #7fe3d6, #bfeee7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tt-hero__overlay { background: linear-gradient(120deg, rgba(7,59,76,.82) 0%, rgba(7,59,76,.55) 55%, rgba(11,84,127,.55) 100%); }
.tt-hero__search {
	display: flex; align-items: center; gap: .5rem; background: #fff; border-radius: 14px;
	padding: .35rem .35rem .35rem 1rem; box-shadow: 0 24px 60px rgba(7,59,76,.4); max-width: 560px; margin-bottom: 1.5rem;
}
.tt-hero__search-icon { color: var(--tt-muted); display: flex; flex-shrink: 0; }
.tt-hero__search input { flex: 1; border: 0; background: transparent; font-family: var(--tt-font-body); font-size: 1.02rem; padding: .75rem .4rem; color: var(--tt-text); outline: none; min-width: 0; }
.tt-hero__actions { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.tt-hero__scroll { color: #fff; font-family: var(--tt-font-head); font-weight: 600; font-size: .95rem; text-decoration: none; opacity: .9; display: inline-flex; align-items: center; gap: .4rem; }
.tt-hero__scroll:hover { color: #fff; opacity: 1; }
.tt-hero__scroll span { animation: tt-bob 1.6s ease-in-out infinite; }
@keyframes tt-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* Floating water drops */
.tt-hero__drops { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.tt-hero__drops i { position: absolute; width: 14px; height: 14px; border-radius: 50% 50% 50% 0; transform: rotate(45deg); background: rgba(127,227,214,.18); animation: tt-drift 11s linear infinite; }
.tt-hero__drops i:nth-child(1) { left: 10%; top: 30%; animation-delay: 0s; }
.tt-hero__drops i:nth-child(2) { left: 82%; top: 22%; width: 20px; height: 20px; animation-delay: 2.5s; }
.tt-hero__drops i:nth-child(3) { left: 65%; top: 60%; width: 9px; height: 9px; animation-delay: 4s; }
.tt-hero__drops i:nth-child(4) { left: 28%; top: 68%; width: 16px; height: 16px; animation-delay: 1.2s; }
.tt-hero__drops i:nth-child(5) { left: 48%; top: 18%; width: 8px; height: 8px; animation-delay: 5.5s; }
@keyframes tt-drift { 0% { transform: translateY(0) rotate(45deg); opacity: 0; } 15% { opacity: .55; } 85% { opacity: .45; } 100% { transform: translateY(-70px) rotate(45deg); opacity: 0; } }

/* Wave divider */
.tt-hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; z-index: 2; }
.tt-hero__wave svg { width: 100%; height: 90px; display: block; }

/* ---- Stats bar ---- */
.tt-stats { background: linear-gradient(120deg, var(--tt-secondary), #0a3547); color: #fff; padding-block: 2.75rem; }
.tt-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.tt-stat { padding: .25rem; }
.tt-stat__num { display: block; font-family: var(--tt-font-head); font-weight: 800; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1; color: #7fe3d6; }
.tt-stat__label { display: block; margin-top: .45rem; color: rgba(255,255,255,.82); font-size: .95rem; }

/* ---- Section variant ---- */
.tt-section--surface { background: var(--tt-surface); }

/* ---- Category card CTA + polish ---- */
.tt-cat-card { min-height: 260px; }
.tt-cat-card__overlay { background: linear-gradient(180deg, rgba(7,59,76,.10) 25%, rgba(7,59,76,.9) 100%); transition: background .25s ease; }
.tt-cat-card:hover .tt-cat-card__overlay { background: linear-gradient(180deg, rgba(7,59,76,.25) 15%, rgba(7,59,76,.92) 100%); }
.tt-cat-card__cta { display: inline-block; margin-top: .7rem; font-family: var(--tt-font-head); font-weight: 600; font-size: .82rem; color: #7fe3d6; letter-spacing: .02em; }

/* ---- Author feature ---- */
.tt-author-feature { background: linear-gradient(135deg, var(--tt-secondary) 0%, #0a2e3b 100%); color: #fff; padding-block: 4.5rem; }
.tt-author-feature__grid { display: grid; grid-template-columns: 300px 1fr; gap: 3rem; align-items: center; }
.tt-author-feature__photo { position: relative; }
.tt-author-feature__photo::before { content: ""; position: absolute; inset: -14px -14px auto auto; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(0,168,150,.35), transparent 70%); z-index: 0; }
.tt-author-feature img.avatar,
.tt-author-feature__img { width: 300px; height: 300px; border-radius: 22px; object-fit: cover; box-shadow: var(--tt-shadow-lg); border: 4px solid rgba(255,255,255,.12); position: relative; z-index: 1; }
.tt-author-feature h2 { color: #fff; font-size: 2.2rem; margin: .25rem 0 .75rem; }
.tt-author-feature__bio { color: rgba(255,255,255,.85); font-size: 1.1rem; max-width: 54ch; }
.tt-author-feature__facts { list-style: none; padding: 0; margin: 1.25rem 0 1.75rem; display: flex; gap: 2.5rem; flex-wrap: wrap; }
.tt-author-feature__facts li { color: rgba(255,255,255,.8); font-size: .92rem; max-width: 18ch; line-height: 1.45; }
.tt-author-feature__facts strong { display: block; font-family: var(--tt-font-head); font-size: 1.9rem; color: #7fe3d6; margin-bottom: .1rem; }
.tt-author-feature .tt-eyebrow { color: #7fe3d6; }
.tt-author-feature .tt-btn--outline { border-color: rgba(255,255,255,.7); color: #fff; }
.tt-author-feature .tt-btn--outline:hover { background: #fff; color: var(--tt-secondary); }

/* ---- CTA band ---- */
.tt-cta { background: linear-gradient(135deg, var(--tt-primary), var(--tt-accent)); color: #fff; padding-block: 4rem; text-align: center; }
.tt-cta__inner { max-width: 660px; margin-inline: auto; }
.tt-cta h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.5rem); margin-bottom: .5rem; }
.tt-cta p { color: rgba(255,255,255,.92); font-size: 1.12rem; margin-bottom: 0; }
.tt-cta__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.75rem; }
.tt-cta .tt-btn { background: #fff; color: var(--tt-primary); }
.tt-cta .tt-btn:hover { background: rgba(255,255,255,.92); color: var(--tt-primary-dark); }
.tt-cta .tt-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.8); }
.tt-cta .tt-btn--ghost:hover { background: rgba(255,255,255,.16); color: #fff; }

/* ---- Archive banner: eyebrow + count (fixes the <span> bug too) ---- */
.tt-archive-banner__eyebrow { display: inline-block; font-family: var(--tt-font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; color: #7fe3d6; margin-bottom: .6rem; }
.tt-archive-banner__count { display: inline-block; margin-top: 1rem; background: rgba(255,255,255,.16); color: #fff; padding: .4rem 1rem; border-radius: 100px; font-family: var(--tt-font-head); font-size: .85rem; font-weight: 600; }
.tt-archive-banner__inner { padding-block: 4.5rem; }

/* ---- Enhanced author box (single) ---- */
.tt-author-box { gap: 1.5rem; padding: 1.9rem; border-radius: 16px; box-shadow: var(--tt-shadow-sm); }
.tt-author-box__avatar { flex-shrink: 0; display: block; }
.tt-author-box img.avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.tt-author-box__eyebrow { display: block; font-family: var(--tt-font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; color: var(--tt-accent); margin-bottom: .2rem; }
.tt-author-box__name { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; font-family: var(--tt-font-head); font-size: 1.25rem; color: var(--tt-secondary); margin: 0 0 .5rem; }
.tt-author-box__name a { color: var(--tt-secondary); text-decoration: none; }
.tt-author-box__name a:hover { color: var(--tt-primary); }
.tt-author-box__badge { display: inline-flex; align-items: center; gap: .28rem; font-family: var(--tt-font-head); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--tt-accent); background: rgba(0,168,150,.11); padding: .22rem .6rem; border-radius: 100px; }
.tt-author-box__more { display: inline-block; margin-top: .7rem; font-family: var(--tt-font-head); font-weight: 600; font-size: .9rem; }

/* ---- v2 responsive ---- */
@media (max-width: 900px) {
	.tt-primary-nav { margin-left: 0; }
	.tt-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; }
	.tt-author-feature__grid { grid-template-columns: 1fr; text-align: center; gap: 1.75rem; }
	.tt-author-feature__photo { justify-self: center; }
	.tt-author-feature__bio { margin-inline: auto; }
	.tt-author-feature__facts { justify-content: center; }
	.tt-hero__inner { padding: 5.5rem 1.5rem 6.5rem; }
}
@media (max-width: 600px) {
	.tt-header__actions { margin-left: auto; }
	.tt-logo__text { font-size: 1.12rem; }
	.tt-logo__icon { width: 34px; height: 34px; }
	.tt-stats__grid { grid-template-columns: repeat(2, 1fr); }
	.tt-hero__search { flex-wrap: wrap; padding: .5rem; }
	.tt-hero__search input { width: 100%; padding: .7rem .75rem; }
	.tt-hero__search .tt-btn { width: 100%; justify-content: center; }
	.tt-author-feature img.avatar,
	.tt-author-feature__img { width: 220px; height: 220px; }
	.tt-author-box { flex-direction: row; }
	.tt-author-box img.avatar { width: 64px; height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
	.tt-js [data-reveal] { opacity: 1 !important; transform: none !important; }
	.tt-hero__drops, .tt-hero__scroll span { display: none; }
}

/* ==========================================================================
   22. COOKIE CONSENT POPUP
   ========================================================================== */
.tt-cookie {
	position: fixed; right: 20px; bottom: 20px; z-index: 1200;
	width: min(400px, calc(100vw - 32px));
	max-height: calc(100vh - 40px); overflow-y: auto;
	background: #fff; color: var(--tt-text);
	border: 1px solid var(--tt-border); border-radius: 16px;
	box-shadow: 0 18px 50px rgba(7,59,76,.22);
	padding: 1.5rem 1.4rem 1.3rem;
	animation: tt-cookiein .35s cubic-bezier(.2,.7,.2,1);
}
.tt-cookie[hidden] { display: none; }
@keyframes tt-cookiein { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.tt-cookie__close {
	position: absolute; top: 12px; right: 12px; width: 30px; height: 30px;
	border: 0; background: transparent; color: var(--tt-muted); font-size: 1.5rem; line-height: 1;
	cursor: pointer; border-radius: 8px;
}
.tt-cookie__close:hover { background: var(--tt-surface); color: var(--tt-secondary); }
.tt-cookie__title { font-family: var(--tt-font-head); font-size: 1.2rem; color: var(--tt-secondary); margin: 0 0 .5rem; padding-right: 1.75rem; }
.tt-cookie__text { font-size: .9rem; color: var(--tt-muted); line-height: 1.55; margin: 0 0 1rem; }
.tt-cookie__text a { color: var(--tt-primary); text-decoration: underline; }
.tt-cookie__text a:hover { color: var(--tt-primary-dark); }

/* Preferences panel */
.tt-cookie__prefs { margin: 0 0 1rem; border: 1px solid var(--tt-border); border-radius: 12px; overflow: hidden; }
.tt-cookie__prefs[hidden] { display: none; }
.tt-cookie__pref { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: .8rem .95rem; margin: 0; cursor: pointer; }
.tt-cookie__pref + .tt-cookie__pref { border-top: 1px solid var(--tt-border); }
.tt-cookie__pref-info { display: flex; flex-direction: column; gap: .12rem; }
.tt-cookie__pref-name { font-family: var(--tt-font-head); font-weight: 600; font-size: .9rem; color: var(--tt-secondary); }
.tt-cookie__pref-desc { font-size: .78rem; color: var(--tt-muted); line-height: 1.4; }
/* Switch knob is drawn with the input's own background so it renders in Blink, Gecko and WebKit
   (generated content on form inputs is a Chrome-only quirk). State is shown by knob position, not colour alone. */
.tt-cookie__toggle {
	flex-shrink: 0; margin: 2px 0 0; width: 42px; height: 24px; border-radius: 100px; cursor: pointer;
	-webkit-appearance: none; appearance: none;
	border: 1px solid #97a2ad; background-color: #aeb8c2;
	background-image: radial-gradient(circle 9px at 12px 11px, #fff 97%, rgba(255,255,255,0) 100%);
	background-repeat: no-repeat; background-position: 0 0;
	transition: background-color .2s ease, background-position .2s ease, border-color .2s ease;
}
.tt-cookie__toggle:checked { background-color: var(--tt-accent); border-color: var(--tt-accent); background-position: 18px 0; }
.tt-cookie__toggle:disabled { opacity: .55; cursor: not-allowed; }
.tt-cookie__toggle:focus-visible { outline: 2px solid var(--tt-accent); outline-offset: 2px; }

/* Actions */
.tt-cookie__accept, .tt-cookie__save {
	display: block; width: 100%; border: 0; font-family: var(--tt-font-head); font-weight: 700; font-size: 1rem;
	padding: .8rem 1rem; border-radius: 10px; cursor: pointer; transition: background .15s ease, transform .15s ease;
}
.tt-cookie__accept { background: var(--tt-accent); color: #fff; }
.tt-cookie__accept:hover { background: #00907f; transform: translateY(-1px); }
.tt-cookie__save { background: var(--tt-secondary); color: #fff; margin-top: .6rem; }
.tt-cookie__save[hidden] { display: none; }
.tt-cookie__save:hover { background: #0a3547; transform: translateY(-1px); }
.tt-cookie__row { display: flex; align-items: stretch; gap: .6rem; margin-top: .75rem; }
.tt-cookie__deny, .tt-cookie__prefs-toggle {
	flex: 1; border: 1px solid var(--tt-border); background: #fff; color: var(--tt-secondary);
	font-family: var(--tt-font-head); font-weight: 600; font-size: .9rem; padding: .7rem .8rem;
	border-radius: 10px; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.tt-cookie__deny:hover, .tt-cookie__prefs-toggle:hover { border-color: var(--tt-primary); color: var(--tt-primary); background: var(--tt-surface); }
.tt-cookie a:focus-visible, .tt-cookie button:focus-visible { outline: 2px solid var(--tt-accent); outline-offset: 2px; border-radius: 8px; }
@media (max-width: 600px) { .tt-cookie { right: 12px; left: 12px; bottom: 12px; width: auto; } }

/* ==========================================================================
   23. CATEGORIES HUB + TABLE OF CONTENTS
   ========================================================================== */
.tt-hub-hero { background: linear-gradient(135deg, var(--tt-secondary), #0a3547); color: #fff; padding-block: 3.5rem; }
.tt-hub-hero .tt-eyebrow { color: #7fe3d6; }
.tt-hub-hero h1 { color: #fff; font-size: clamp(2rem, 4.5vw, 2.8rem); margin: 0 0 .6rem; }
.tt-hub-hero p { color: rgba(255,255,255,.85); max-width: 62ch; margin: 0; font-size: 1.1rem; }
.tt-hub-hero .tt-breadcrumbs, .tt-hub-hero .tt-breadcrumbs a { color: rgba(255,255,255,.85); }
.tt-cat-grid--hub { gap: 1.75rem; }
.tt-cat-card--tall { min-height: 320px; }
.tt-cat-card--tall .tt-cat-card__body h2 { color: #fff; font-size: 1.5rem; margin: 0 0 .4rem; }

.tt-toc { margin: 1.75rem 0; background: var(--tt-surface); border: 1px solid var(--tt-border); border-left: 4px solid var(--tt-primary); border-radius: var(--tt-radius); padding: 1.1rem 1.4rem; }
.tt-toc__title { font-family: var(--tt-font-head); font-weight: 700; color: var(--tt-secondary); margin: 0 0 .5rem; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }
.tt-toc ol { margin: 0; padding-left: 1.3rem; columns: 2; column-gap: 2rem; }
.tt-toc li { margin: .3rem 0; break-inside: avoid; }
.tt-toc a { color: var(--tt-primary); text-decoration: none; font-size: .95rem; }
.tt-toc a:hover { text-decoration: underline; }
@media (max-width: 600px) { .tt-toc ol { columns: 1; } }

/* Sticky "In this guide" sidebar layout for single posts */
/* align-items: stretch (default) keeps the aside as tall as the article so the sticky
   TOC inside it has room to travel; align-items:start would collapse it and kill the stick. */
.tt-single__layout { display: grid; grid-template-columns: 1fr minmax(0, var(--tt-reading)) 1fr; gap: 0 2rem; align-items: stretch; }
.tt-single__main { grid-column: 2; min-width: 0; }
.tt-single__main .tt-article__body { max-width: none; margin-inline: 0; }
.tt-toc-sidebar { grid-column: 1; justify-self: end; width: 100%; max-width: 230px; }
.tt-toc-sidebar__inner { position: sticky; top: calc(var(--tt-header-h) + 1.5rem); max-height: calc(100vh - var(--tt-header-h) - 3rem); overflow-y: auto; overscroll-behavior: contain; }
.tt-toc-sidebar .tt-toc { margin: 0; background: transparent; border: 0; border-left: 2px solid var(--tt-border); border-radius: 0; padding: .1rem 0; }
.tt-toc-sidebar .tt-toc__title { font-size: .72rem; color: var(--tt-muted); margin: 0 0 .75rem 1.1rem; }
.tt-toc-sidebar .tt-toc ol { columns: 1; margin: 0; padding: 0; list-style: none; }
.tt-toc-sidebar .tt-toc li { margin: 0; break-inside: auto; }
.tt-toc-sidebar .tt-toc a { display: block; font-size: .9rem; line-height: 1.35; color: var(--tt-muted); padding: .35rem 0 .35rem 1.1rem; border-left: 2px solid transparent; margin-left: -2px; transition: color .15s ease, border-color .15s ease; }
.tt-toc-sidebar .tt-toc a:hover { color: var(--tt-primary); text-decoration: none; }
.tt-toc-sidebar .tt-toc a.is-active { color: var(--tt-secondary); font-weight: 600; border-left-color: var(--tt-accent); }
@media (max-width: 1040px) {
	.tt-single__layout { grid-template-columns: minmax(0, var(--tt-reading)); justify-content: center; }
	.tt-single__main { grid-column: 1; }
	.tt-toc-sidebar { grid-column: 1; justify-self: stretch; max-width: none; margin-bottom: 1.75rem; }
	.tt-toc-sidebar__inner { position: static; max-height: none; overflow: visible; }
	.tt-toc-sidebar .tt-toc { background: var(--tt-surface); border: 1px solid var(--tt-border); border-left: 4px solid var(--tt-primary); border-radius: var(--tt-radius); padding: 1.1rem 1.4rem; }
	.tt-toc-sidebar .tt-toc__title { color: var(--tt-secondary); margin-left: 0; }
	.tt-toc-sidebar .tt-toc ol { columns: 2; column-gap: 2rem; }
	.tt-toc-sidebar .tt-toc a { border-left: 0; margin-left: 0; padding-left: 0; }
	.tt-toc-sidebar .tt-toc a.is-active { border-left: 0; }
}
@media (max-width: 600px) { .tt-toc-sidebar .tt-toc ol { columns: 1; } }

/* ==========================================================================
   24. MOST-READ / MINI-FAQ / NEWSLETTER / BLOG
   ========================================================================== */
/* Most read list */
.tt-toplist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; }
.tt-toplist__item { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 0; border-bottom: 1px solid var(--tt-border); }
.tt-toplist__num { font-family: var(--tt-font-head); font-weight: 800; font-size: 1.6rem; color: var(--tt-accent); line-height: 1; min-width: 1.4ch; }
.tt-toplist__title { display: block; font-family: var(--tt-font-head); font-weight: 600; color: var(--tt-secondary); text-decoration: none; font-size: 1.05rem; line-height: 1.35; }
.tt-toplist__title:hover { color: var(--tt-primary); }
.tt-toplist__meta { display: block; color: var(--tt-muted); font-size: .82rem; margin-top: .25rem; }
.tt-toplist__meta .sep { opacity: .5; }
@media (max-width: 768px) { .tt-toplist { grid-template-columns: 1fr; gap: 0; } }

/* Mini FAQ */
.tt-faq-wrap { max-width: 820px; }
.tt-faq__item { border: 1px solid var(--tt-border); border-radius: var(--tt-radius); margin-bottom: .75rem; background: #fff; padding: 0 1.35rem; transition: box-shadow .2s ease; }
.tt-faq__item[open] { box-shadow: var(--tt-shadow-sm); }
.tt-faq__item summary { font-family: var(--tt-font-head); font-weight: 600; color: var(--tt-secondary); cursor: pointer; padding: 1.1rem 0; list-style: none; position: relative; padding-right: 2rem; font-size: 1.05rem; }
.tt-faq__item summary::-webkit-details-marker { display: none; }
.tt-faq__item summary::after { content: "+"; position: absolute; right: .1rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--tt-primary); font-weight: 400; }
.tt-faq__item[open] summary::after { content: "\2212"; }
.tt-faq__answer { padding-bottom: 1.1rem; color: var(--tt-muted); }
.tt-faq__answer p { margin: 0; }

/* Newsletter */
.tt-newsletter { background: linear-gradient(135deg, #0a3547, var(--tt-secondary)); color: #fff; padding-block: 3.25rem; }
.tt-newsletter__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items: center; }
.tt-newsletter .tt-eyebrow { color: #7fe3d6; }
.tt-newsletter__text h2 { color: #fff; font-size: 1.8rem; margin: 0 0 .4rem; }
.tt-newsletter__text p { color: rgba(255,255,255,.82); margin: 0; }
.tt-newsletter__form { display: flex; gap: .6rem; flex-wrap: wrap; }
.tt-newsletter__form input[type="email"] { flex: 1; min-width: 180px; padding: .85rem 1rem; border: 0; border-radius: 10px; font: inherit; font-size: 1rem; color: var(--tt-text); }
.tt-newsletter__form .tt-btn { background: var(--tt-accent); }
.tt-newsletter__form .tt-btn:hover { background: #00907f; }
.tt-newsletter__msg { flex-basis: 100%; margin: .25rem 0 0; font-size: .9rem; color: #bfeee7; min-height: 1.2em; }
@media (max-width: 768px) { .tt-newsletter__inner { grid-template-columns: 1fr; gap: 1.25rem; } }

/* Blog head + tools */
.tt-blog-head { background: var(--tt-surface); border-bottom: 1px solid var(--tt-border); padding-block: 3rem 2.25rem; }
.tt-blog-head h1 { font-size: clamp(2rem, 4vw, 2.6rem); margin: .3rem 0 .5rem; }
.tt-blog-head > .tt-container > p { color: var(--tt-muted); max-width: 60ch; margin: 0 0 1.5rem; }
.tt-blog-tools { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.tt-filter-chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.tt-filter-chip { font-family: var(--tt-font-head); font-weight: 600; font-size: .85rem; color: var(--tt-text); background: #fff; border: 1px solid var(--tt-border); padding: .45rem .9rem; border-radius: 100px; text-decoration: none; transition: color .15s ease, border-color .15s ease, background .15s ease; }
.tt-filter-chip:hover { border-color: var(--tt-primary); color: var(--tt-primary); text-decoration: none; }
.tt-filter-chip.is-active { background: var(--tt-primary); border-color: var(--tt-primary); color: #fff; }
.tt-blog-search { display: flex; gap: .4rem; }
.tt-blog-search input[type="search"] { padding: .55rem .85rem; border: 1px solid var(--tt-border); border-radius: 10px; font: inherit; min-width: 170px; }
.tt-blog-search .tt-btn { padding: .55rem .9rem; }

/* Featured blog card */
.tt-feature-card { display: grid; grid-template-columns: 1.15fr 1fr; background: #fff; border: 1px solid var(--tt-border); border-radius: 16px; overflow: hidden; box-shadow: var(--tt-shadow-sm); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.tt-feature-card:hover { transform: translateY(-3px); box-shadow: var(--tt-shadow-lg); text-decoration: none; }
.tt-feature-card__media { display: block; overflow: hidden; }
.tt-feature-card__media img { width: 100%; height: 100%; object-fit: cover; min-height: 300px; }
.tt-feature-card__body { padding: 2rem; display: flex; flex-direction: column; gap: .55rem; justify-content: center; }
.tt-feature-card__flag { font-family: var(--tt-font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; color: var(--tt-accent); }
.tt-feature-card .tt-chip { align-self: flex-start; }
.tt-feature-card__title { font-family: var(--tt-font-head); font-weight: 700; color: var(--tt-secondary); font-size: 1.7rem; line-height: 1.2; }
.tt-feature-card:hover .tt-feature-card__title { color: var(--tt-primary); }
.tt-feature-card__excerpt { color: var(--tt-muted); }
.tt-feature-card__meta { display: flex; align-items: center; gap: .5rem; color: var(--tt-muted); font-size: .85rem; margin-top: .3rem; }
.tt-feature-card__meta img.avatar { width: 30px; height: 30px; border-radius: 50%; }
.tt-feature-card__meta .sep { opacity: .5; }
@media (max-width: 768px) { .tt-feature-card { grid-template-columns: 1fr; } .tt-feature-card__media img { min-height: 200px; } }

/* ==========================================================================
   25. FORMS (Fluent Forms / native) styled to match the theme
   ========================================================================== */
.fluentform .ff-el-input--content input[type="text"],
.fluentform .ff-el-input--content input[type="email"],
.fluentform .ff-el-input--content input[type="tel"],
.fluentform .ff-el-input--content input[type="url"],
.fluentform .ff-el-input--content select,
.fluentform .ff-el-input--content textarea,
.tt-article__body input[type="text"],
.tt-article__body input[type="email"],
.tt-article__body textarea {
	width: 100%; padding: .8rem 1rem; border: 1px solid var(--tt-border); border-radius: 10px;
	font: inherit; font-size: 1rem; background: #fff; color: var(--tt-text); line-height: 1.5;
}
.fluentform .ff-el-input--content input:focus,
.fluentform .ff-el-input--content select:focus,
.fluentform .ff-el-input--content textarea:focus { outline: 3px solid var(--tt-accent); outline-offset: 1px; border-color: var(--tt-primary); }
.fluentform .ff-el-input--label label { font-family: var(--tt-font-head); font-weight: 600; color: var(--tt-secondary); margin-bottom: .35rem; display: inline-block; }
.fluentform .ff-el-group { margin-bottom: 1.1rem; }
.fluentform .ff-btn-submit,
.fluentform button[type="submit"] {
	background: var(--tt-primary); color: #fff; border: 0; border-radius: 10px;
	font-family: var(--tt-font-head); font-weight: 600; padding: .85rem 1.8rem; font-size: 1rem;
	cursor: pointer; transition: background .15s ease, transform .15s ease;
}
.fluentform .ff-btn-submit:hover { background: var(--tt-primary-dark); transform: translateY(-1px); }
.ff-message-success, .ff_submit_success { background: rgba(0,168,150,.08); border: 1px solid rgba(0,168,150,.35); color: var(--tt-secondary); padding: 1rem 1.25rem; border-radius: 10px; }
.error.text-danger, .ff-el-is-error .text-danger { color: #d64541; font-size: .85rem; }

/* Wide tables scroll inside their own container on small screens (no page overflow) */
.tt-article__body figure.wp-block-table { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.tt-article__body figure.wp-block-table table { min-width: 480px; }
/* In-content images sit centered in the reading column */
.tt-inpost { margin: 1.75rem 0; }
.tt-inpost__img, .tt-inpost img { width: 100%; height: auto; border-radius: var(--tt-radius); box-shadow: var(--tt-shadow-sm); }

/* ==========================================================================
   26. MODERN HOMEPAGE (hero, showcase, bento, split, author card)
   ========================================================================== */

/* ---- Reusable glass pill ---- */
.tt-pill {
	display: inline-flex; align-items: center; gap: .55rem;
	font-family: var(--tt-font-head); font-weight: 600; font-size: .78rem;
	letter-spacing: .05em; text-transform: uppercase; color: #eaf7f4;
	background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.20);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	padding: .5rem 1rem; border-radius: 100px;
}
.tt-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: #34e0c6; box-shadow: 0 0 0 4px rgba(52,224,198,.22); animation: tt-pulse 2.4s ease-in-out infinite; }
@keyframes tt-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* ---- Hero ---- */
.tt-hero2 {
	position: relative; isolation: isolate; overflow: hidden;
	min-height: min(90vh, 800px); display: flex; align-items: center;
	padding: calc(var(--tt-header-h) + 3.5rem) 0 6rem;
	background: var(--tt-secondary);
}
.tt-hero2--nobg { background: linear-gradient(140deg, #062b38 0%, #0b4a6b 55%, #0e6ba8 100%); }
.tt-hero2__photo { position: absolute; inset: 0; z-index: -3; background-image: var(--tt-hero-img); background-size: cover; background-position: center; transform: scale(1.05); }
.tt-hero2__scrim {
	position: absolute; inset: 0; z-index: -2;
	background:
		linear-gradient(120deg, rgba(4,26,34,.94) 0%, rgba(6,42,58,.80) 42%, rgba(11,84,127,.60) 100%),
		radial-gradient(120% 120% at 82% 8%, rgba(0,168,150,.28), transparent 55%);
}
.tt-hero2__aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.tt-hero2__aurora i { position: absolute; border-radius: 50%; filter: blur(64px); opacity: .5; mix-blend-mode: screen; animation: tt-aurora 18s ease-in-out infinite; }
.tt-hero2__aurora i:nth-child(1) { width: 46vw; height: 46vw; left: -8vw; top: -12vw; background: radial-gradient(circle, #00a896, transparent 68%); }
.tt-hero2__aurora i:nth-child(2) { width: 38vw; height: 38vw; right: -6vw; top: 16%; background: radial-gradient(circle, #2ea3e0, transparent 68%); animation-delay: -6s; }
.tt-hero2__aurora i:nth-child(3) { width: 30vw; height: 30vw; left: 32%; bottom: -16vw; background: radial-gradient(circle, #7fe3d6, transparent 68%); animation-delay: -11s; opacity: .38; }
@keyframes tt-aurora { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(3vw,-2vw) scale(1.08); } 66% { transform: translate(-2vw,2vw) scale(.95); } }

.tt-hero2__inner { position: relative; z-index: 1; max-width: 920px; margin-inline: auto; text-align: center; color: #fff; }
.tt-hero2__eyebrow { margin-bottom: 0; }
.tt-hero2__title { color: #fff; font-size: clamp(2.4rem, 6vw, 4.5rem); line-height: 1.05; letter-spacing: -0.02em; max-width: 17ch; margin: 1.4rem auto 1rem; }
.tt-hero2__accent { display: block; background: linear-gradient(100deg, #7fe3d6, #34e0c6 42%, #8fd3ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tt-hero2__intro { color: rgba(255,255,255,.86); font-size: clamp(1.05rem, 1.6vw, 1.28rem); max-width: 58ch; margin: 0 auto 2rem; }

.tt-hero2__search {
	display: flex; align-items: center; gap: .5rem; max-width: 560px; margin: 0 auto;
	background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.26);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	border-radius: 100px; padding: .4rem .4rem .4rem 1.15rem;
	box-shadow: 0 24px 50px -22px rgba(0,0,0,.55);
}
.tt-hero2__search-icon { color: rgba(255,255,255,.75); display: flex; flex-shrink: 0; }
.tt-hero2__search input { flex: 1; border: 0; background: transparent; color: #fff; font-family: var(--tt-font-body); font-size: 1rem; padding: .7rem .3rem; outline: none; min-width: 0; }
.tt-hero2__search input::placeholder { color: rgba(255,255,255,.62); }
.tt-hero2__search .tt-btn { border-radius: 100px; flex-shrink: 0; }

.tt-hero2__actions { display: flex; align-items: center; justify-content: center; gap: 1.4rem; flex-wrap: wrap; margin-top: 1.6rem; }
.tt-btn--glass { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.32); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.tt-btn--glass:hover { background: rgba(255,255,255,.22); color: #fff; }
.tt-hero2__link { color: #fff; font-family: var(--tt-font-head); font-weight: 600; font-size: .98rem; opacity: .9; display: inline-flex; align-items: center; gap: .4rem; }
.tt-hero2__link:hover { color: #fff; opacity: 1; text-decoration: none; }
.tt-hero2__link span { display: inline-block; animation: tt-bob 1.6s ease-in-out infinite; }

.tt-hero2__stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 3rem; }
.tt-glass-stat {
	display: flex; flex-direction: column; align-items: center; gap: .15rem; min-width: 120px;
	padding: 1rem 1.4rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 16px;
}
.tt-glass-stat b { font-family: var(--tt-font-head); font-weight: 800; font-size: 1.9rem; color: #fff; line-height: 1; }
.tt-glass-stat i { font-style: normal; font-size: .78rem; color: rgba(255,255,255,.72); text-transform: uppercase; letter-spacing: .04em; }

.tt-hero2__wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 0; line-height: 0; }
.tt-hero2__wave svg { width: 100%; height: 100px; display: block; }

/* ==========================================================================
   26b. HERO ANIMATIONS ("First Light on Water"): entrance + material + water.
   Compositor-only (transform/opacity/filter/background-position). The global
   prefers-reduced-motion rule disables all CSS motion; JS layers are guarded.
   ========================================================================== */

/* ---- Entrance primitives: masked word rise + accent line rise + sheen ---- */
.tt-fx-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.tt-fx-word { display: inline-block; will-change: transform, opacity, filter; transition: transform .9s cubic-bezier(.22,1,.36,1), opacity .7s ease, filter .7s ease; }
.tt-fx-linemask { display: block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em; }
/* Hidden states for the split words + accent line are gated below (no-preference + .tt-js),
   so enabling Reduce Motion at any time drops them in the same query as their reveal. */
.tt-fx-linemask > .tt-hero2__accent { will-change: transform, opacity; transition: transform 1s cubic-bezier(.22,1,.36,1), opacity .8s ease; }
/* Accent keeps its mint gradient; a translucent sheen layer rides above it, parked off-glyph at rest. */
.tt-hero2 .tt-hero2__accent {
	background:
		linear-gradient(115deg, transparent 34%, rgba(255,255,255,.82) 50%, transparent 66%),
		linear-gradient(100deg, #7fe3d6, #34e0c6 42%, #8fd3ff);
	background-size: 220% 100%, 100% 100%; background-position: -60% 0, 0 0; background-repeat: no-repeat;
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
@keyframes tt-accent-sheen { 0% { background-position: 150% 0, 0 0; } 100% { background-position: -60% 0, 0 0; } }

/* ---- Rising bubbles (the single water motif; nodes built by JS) ---- */
.tt-fx-bubbles {
	position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
	transform: translate3d(calc(var(--tt-mx,0) * 10px), calc(var(--tt-my,0) * 6px), 0);
	transition: transform .35s ease-out;
}
.tt-fx-bubbles i {
	position: absolute; bottom: -8%; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%;
	background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.9), rgba(190,240,255,.35) 42%, rgba(120,200,220,.08) 70%, transparent 72%);
	box-shadow: inset 0 0 6px rgba(255,255,255,.25); filter: blur(var(--blur)); opacity: 0; will-change: transform;
	animation: tt-fx-rise var(--dur) linear var(--delay) infinite;
}
@keyframes tt-fx-rise {
	0% { transform: translate3d(0,0,0) scale(.9); opacity: 0; }
	12% { opacity: var(--op); }
	50% { transform: translate3d(var(--drift), -55vh, 0) scale(1); }
	88% { opacity: var(--op); }
	100% { transform: translate3d(calc(var(--drift) * -1), -102vh, 0) scale(1.05); opacity: 0; }
}

/* ---- Cursor spotlight (follows pointer) + subtle photo parallax ---- */
/* Fixed-size sprite moved by transform (compositor-only); avoids repainting/re-blending a
   full-hero gradient each pointermove. JS writes --tt-spx/--tt-spy in px. */
.tt-hero2__spotlight {
	position: absolute; top: 0; left: 0; width: 680px; height: 680px; z-index: 0; pointer-events: none; opacity: 0;
	transition: opacity .6s ease; mix-blend-mode: screen;
	transform: translate3d(var(--tt-spx, 50%), var(--tt-spy, 22%), 0) translate(-50%, -50%);
	background: radial-gradient(circle 340px at center, rgba(127,227,214,.20), rgba(52,224,198,.11) 42%, transparent 70%);
}
.tt-hero2.tt-fx-spot .tt-hero2__spotlight { opacity: 1; will-change: transform; }
.tt-hero2 .tt-hero2__photo { transform: scale(1.05) translate3d(calc(var(--tt-mx,0) * -6px), calc(var(--tt-my,0) * -4px), 0); transition: transform .4s ease-out; }

/* ---- Micro-interactions: magnetic CTAs, count settle-pop, focus/hover ---- */
.tt-hero2__actions .tt-btn, .tt-hero2__actions .tt-hero2__link, .tt-hero2__search .tt-btn { transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, filter .3s ease; }
.tt-hero2__actions .tt-btn:hover, .tt-hero2__search .tt-btn:hover { will-change: transform; filter: brightness(1.06); }
.tt-glass-stat b { display: inline-block; }
@keyframes tt-fx-pop { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(-3px) scale(1.07); } 100% { transform: translateY(0) scale(1); } }
.tt-glass-stat.tt-fx-settled b { animation: tt-fx-pop .5s cubic-bezier(.34,1.56,.64,1) both; }
.tt-hero2__search { transition: border-color .3s ease, box-shadow .3s ease, background .3s ease; }
.tt-hero2__search:focus-within { border-color: rgba(127,227,214,.7); background: rgba(255,255,255,.17); box-shadow: 0 24px 50px -22px rgba(0,0,0,.55), 0 0 0 3px rgba(52,224,198,.28); }
.tt-glass-stat { transition: transform .35s cubic-bezier(.22,.61,.36,1), border-color .35s ease, background .35s ease; }
.tt-glass-stat:hover { transform: translateY(-4px); border-color: rgba(127,227,214,.38); background: rgba(255,255,255,.12); }

/* ---- Entrance choreography (only when the user allows motion) ---- */
@media (prefers-reduced-motion: no-preference) {
	.tt-js .tt-hero2 .tt-hero2__inner > [data-reveal] {
		opacity: 0; transform: translateY(20px); filter: blur(8px);
		transition: opacity .7s ease, transform .9s cubic-bezier(.22,1,.36,1), filter .7s ease;
		transition-delay: var(--tt-d, 0s);
	}
	.tt-js .tt-hero2 .tt-hero2__eyebrow { --tt-d: .05s; }
	.tt-js .tt-hero2 .tt-hero2__title { --tt-d: .12s; }
	.tt-js .tt-hero2 .tt-hero2__intro { --tt-d: .50s; }
	.tt-js .tt-hero2 .tt-hero2__search { --tt-d: .62s; }
	.tt-js .tt-hero2 .tt-hero2__actions { --tt-d: .74s; }
	.tt-js .tt-hero2 .tt-hero2__stats { --tt-d: .84s; }
	.tt-js .tt-hero2 .tt-hero2__inner > .tt-hero2__title,
	.tt-js .tt-hero2 .tt-hero2__inner > .tt-hero2__stats { transform: none; filter: none; }
	.tt-js .tt-hero2.is-hero-in .tt-hero2__inner > [data-reveal] { opacity: 1; transform: none; filter: none; }
	/* Split-text hidden states (gated so mid-session Reduce Motion cannot strand the headline) */
	.tt-js .tt-hero2 .tt-fx-word { transform: translateY(110%); opacity: 0; filter: blur(6px); }
	.tt-js .tt-hero2 .tt-fx-linemask > .tt-hero2__accent { transform: translateY(112%); opacity: 0; }
	.tt-js .tt-hero2.is-hero-in .tt-fx-word { transform: none; opacity: 1; filter: none; transition-delay: calc(.20s + var(--i,0) * .055s); }
	.tt-js .tt-hero2.is-hero-in .tt-fx-linemask > .tt-hero2__accent { transform: none; opacity: 1; transition-delay: .5s; }
	.tt-js .tt-hero2.is-hero-in .tt-hero2__accent { animation: tt-accent-sheen 1.15s cubic-bezier(.4,0,.2,1) .82s both; }
	.tt-js .tt-hero2 .tt-hero2__stats .tt-glass-stat { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .7s cubic-bezier(.22,1,.36,1); }
	.tt-js .tt-hero2.is-hero-in .tt-hero2__stats .tt-glass-stat { opacity: 1; transform: none; }
	.tt-js .tt-hero2.is-hero-in .tt-hero2__stats .tt-glass-stat:nth-child(1) { transition-delay: .90s; }
	.tt-js .tt-hero2.is-hero-in .tt-hero2__stats .tt-glass-stat:nth-child(2) { transition-delay: .98s; }
	.tt-js .tt-hero2.is-hero-in .tt-hero2__stats .tt-glass-stat:nth-child(3) { transition-delay: 1.06s; }
	.tt-js .tt-hero2.is-hero-in .tt-hero2__stats .tt-glass-stat:nth-child(4) { transition-delay: 1.14s; }
	/* keep the hover lift working after entrance sets a resting transform */
	.tt-js .tt-hero2.is-hero-in .tt-hero2__stats .tt-glass-stat:hover { transform: translateY(-4px); }
	.tt-js .tt-hero2.is-hero-done .tt-fx-word,
	.tt-js .tt-hero2.is-hero-done .tt-fx-linemask > .tt-hero2__accent { will-change: auto; }
}

/* ---- Featured showcase (magazine) ---- */
.tt-section--tight { padding-block: clamp(2.75rem, 5vw, 4.25rem); }
.tt-showcase { display: grid; grid-template-columns: 1.55fr 1fr; gap: 1.5rem; }
.tt-showcase__hero { position: relative; isolation: isolate; display: block; overflow: hidden; border-radius: 20px; min-height: 460px; box-shadow: var(--tt-shadow-md); }
.tt-showcase__hero:hover { text-decoration: none; }
.tt-showcase__media { position: absolute; inset: 0; z-index: -2; }
.tt-showcase__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.tt-showcase__hero:hover .tt-showcase__media img { transform: scale(1.06); }
.tt-showcase__grad { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(4,26,34,.94) 0%, rgba(4,26,34,.45) 46%, rgba(4,26,34,.04) 78%); }
.tt-showcase__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem; display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.tt-showcase__title { font-family: var(--tt-font-head); font-weight: 700; color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.15rem); line-height: 1.15; }
.tt-showcase__excerpt { color: rgba(255,255,255,.82); font-size: 1rem; margin: 0; max-width: 52ch; }
.tt-showcase__meta { display: flex; align-items: center; gap: .5rem; color: rgba(255,255,255,.85); font-size: .85rem; margin-top: .2rem; }
.tt-showcase__meta img.avatar { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); }
.tt-showcase__meta .sep { opacity: .5; }
.tt-chip--light { background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tt-chip--light:hover { background: rgba(255,255,255,.28); color: #fff; }
.tt-showcase__side { display: grid; grid-auto-rows: 1fr; gap: 1.25rem; }

/* ---- Mini horizontal card ---- */
.tt-mini { display: grid; grid-template-columns: 116px 1fr; gap: 1rem; align-items: stretch; background: #fff; border: 1px solid var(--tt-border); border-radius: 14px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.tt-mini:hover { transform: translateY(-2px); box-shadow: var(--tt-shadow-md); border-color: transparent; text-decoration: none; }
.tt-mini__media { overflow: hidden; }
.tt-mini__media img { width: 100%; height: 100%; object-fit: cover; min-height: 96px; }
.tt-mini__body { padding: .7rem .9rem .7rem 0; display: flex; flex-direction: column; justify-content: center; gap: .25rem; min-width: 0; }
.tt-mini__cat { font-family: var(--tt-font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; color: var(--tt-accent); }
.tt-mini__title { font-family: var(--tt-font-head); font-weight: 600; color: var(--tt-secondary); font-size: .98rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tt-mini:hover .tt-mini__title { color: var(--tt-primary); }
.tt-mini__meta { font-size: .76rem; color: var(--tt-muted); }

/* ---- Bento topics ---- */
.tt-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 1.25rem; }
.tt-bento__item {
	position: relative; isolation: isolate; display: flex; align-items: flex-end; overflow: hidden;
	border-radius: 18px; background-size: cover; background-position: center; box-shadow: var(--tt-shadow-sm);
	transition: transform .25s ease, box-shadow .25s ease;
}
.tt-bento__item:hover { transform: translateY(-4px); box-shadow: var(--tt-shadow-lg); text-decoration: none; }
.tt-bento__item--nobg { background: linear-gradient(135deg, var(--tt-primary), var(--tt-accent)); }
.tt-bento__item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.tt-bento__item:nth-child(2) { grid-column: span 2; }
.tt-bento__item:nth-child(5) { grid-column: span 2; }
.tt-bento__item:nth-child(6) { grid-column: span 2; }
.tt-bento__overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(4,26,34,.88) 0%, rgba(4,26,34,.34) 55%, rgba(4,26,34,.10) 100%); transition: background .3s ease; }
.tt-bento__item:hover .tt-bento__overlay { background: linear-gradient(to top, rgba(7,59,76,.92) 0%, rgba(14,107,168,.5) 60%, rgba(14,107,168,.18) 100%); }
.tt-bento__body { position: relative; padding: 1.4rem; display: flex; flex-direction: column; gap: .3rem; color: #fff; width: 100%; }
.tt-bento__count { font-family: var(--tt-font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; color: #8fe8db; }
.tt-bento__title { font-family: var(--tt-font-head); font-weight: 700; color: #fff; font-size: 1.15rem; line-height: 1.2; }
.tt-bento__item:nth-child(1) .tt-bento__title { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.tt-bento__desc { color: rgba(255,255,255,.82); font-size: .92rem; margin-top: .2rem; }
.tt-bento__go { position: absolute; top: 1.2rem; right: 1.2rem; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: 1.1rem; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .25s ease, background .25s ease, border-color .25s ease; }
.tt-bento__item:hover .tt-bento__go { background: var(--tt-accent); border-color: var(--tt-accent); transform: translate(3px,-3px); }

/* ---- Split (most-read + author) ---- */
.tt-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: start; }
.tt-split__main .tt-toplist { grid-template-columns: 1fr; margin-top: 1rem; }
.tt-authorcard { position: relative; overflow: hidden; background: linear-gradient(160deg, #fff, var(--tt-surface)); border: 1px solid var(--tt-border); border-radius: 20px; padding: 2rem; box-shadow: var(--tt-shadow-md); }
.tt-authorcard::before { content: ""; position: absolute; top: -40px; right: -40px; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, rgba(0,168,150,.14), transparent 70%); }
.tt-authorcard > * { position: relative; }
.tt-authorcard__head { display: flex; align-items: center; gap: 1rem; margin: .6rem 0 1rem; }
.tt-authorcard__photo img.avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: var(--tt-shadow-sm); }
.tt-authorcard__name { font-family: var(--tt-font-head); font-weight: 700; color: var(--tt-secondary); font-size: 1.2rem; margin: 0; }
.tt-authorcard__role { color: var(--tt-muted); font-size: .88rem; margin: .15rem 0 0; }
.tt-authorcard__bio { color: var(--tt-text); font-size: .98rem; margin: 0 0 1.25rem; }

.tt-section-head--center { justify-content: center; text-align: center; }
.tt-section-head--center > div { max-width: 640px; }

/* ---- Responsive ---- */
@media (max-width: 980px) {
	.tt-showcase { grid-template-columns: 1fr; }
	.tt-showcase__hero { min-height: 380px; }
	.tt-split { grid-template-columns: 1fr; gap: 2rem; }
	.tt-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 178px; }
	.tt-bento__item { grid-column: auto !important; grid-row: auto !important; }
	.tt-bento__item:nth-child(1) { grid-column: span 2 !important; }
	.tt-bento__item:nth-child(6) { grid-column: span 2 !important; }
}
@media (max-width: 600px) {
	.tt-hero2 { min-height: 0; padding: calc(var(--tt-header-h) + 2rem) 0 4rem; }
	.tt-hero2__stats { gap: .6rem; margin-top: 2.25rem; }
	.tt-glass-stat { min-width: 0; flex: 1 1 42%; padding: .8rem .6rem; }
	.tt-glass-stat b { font-size: 1.5rem; }
	.tt-hero2__search { flex-wrap: wrap; border-radius: 18px; padding: .5rem .5rem .5rem .9rem; gap: .5rem; }
	.tt-hero2__search-icon { display: flex; align-self: center; }
	.tt-hero2__search input { flex: 1 1 0; min-width: 6rem; text-align: left; padding: .65rem .2rem; }
	.tt-hero2__search .tt-btn { flex: 1 1 100%; justify-content: center; }
	.tt-bento { grid-template-columns: 1fr; grid-auto-rows: 168px; }
	.tt-bento__item, .tt-bento__item:nth-child(1), .tt-bento__item:nth-child(6) { grid-column: auto !important; grid-row: auto !important; }
	.tt-showcase__body { padding: 1.4rem; }
	.tt-mini { grid-template-columns: 104px 1fr; }
	.tt-authorcard, .tt-showcase__hero { border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.tt-hero2__aurora i, .tt-pill__dot, .tt-hero2__link span { animation: none; }
	.tt-showcase__media img { transition: none; }
}