/* ==========================================================================
   TrendLife — main stylesheet
   Tokens come from theme.json (--wp--preset--*); aliases below keep this file readable.
   Mobile first. Breakpoints: 640 / 1024 / 1280.
   ========================================================================== */

:root {
	--ink: var(--wp--preset--color--ink, #1c1a17);
	--paper: var(--wp--preset--color--paper, #f7f2ea);
	--linen: var(--wp--preset--color--linen, #eee6d8);
	--stone: var(--wp--preset--color--stone, #d8cdbc);
	--taupe: var(--wp--preset--color--taupe, #6b6258);
	--blue: var(--wp--preset--color--blue, #50ade5);
	--deep: var(--wp--preset--color--deep-blue, #1d6a99);
	--white: #fff;
	--f-display: var(--wp--preset--font-family--display, "Cormorant Garamond", Garamond, serif);
	--f-serif: var(--wp--preset--font-family--serif, "Source Serif 4", Georgia, serif);
	--f-sans: var(--wp--preset--font-family--sans, Jost, "Helvetica Neue", Arial, sans-serif);
	--wrap: 1200px;
	--content: 720px;
	--gutter: clamp(16px, 4vw, 40px);
	--ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--f-serif);
	font-size: 1.0625rem;
	line-height: 1.65;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}
@media (min-width: 1024px) { body { font-size: 1.1875rem; } }
body.tl-locked { overflow: hidden; }
img, svg, video { max-width: 100%; height: auto; }
a { color: inherit; }
a:hover { color: var(--deep); }
:focus-visible { outline: 2px solid var(--deep); outline-offset: 3px; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6 { font-family: var(--f-display); font-weight: 500; line-height: 1.12; margin: 0; text-wrap: balance; }
p { text-wrap: pretty; }
.tl-main { display: block; outline: 0; }

.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;
}
.tl-skip {
	position: absolute; left: 1rem; top: -100px; z-index: 200;
	background: var(--ink); color: var(--white); padding: .75rem 1.25rem;
	font-family: var(--f-sans); font-size: .875rem; text-decoration: none;
}
.tl-skip:focus { top: 1rem; color: var(--white); }

.tl-wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.tl-wrap--narrow { max-width: calc(900px + var(--gutter) * 2); }
.tl-wrap--content { max-width: calc(var(--content) + var(--gutter) * 2); }

@media (max-width: 1023px) { .tl-hide-mobile { display: none !important; } }
@media (min-width: 1024px) { .tl-show-mobile { display: none !important; } }

/* ---------- Type helpers ---------- */
.tl-kicker,
.is-style-kicker {
	font-family: var(--f-sans); font-weight: 500; font-size: .75rem; line-height: 1.35;
	letter-spacing: .18em; text-transform: uppercase; color: var(--deep);
	margin: 0 0 .75rem;
}
.tl-kicker a { color: inherit; text-decoration: none; position: relative; z-index: 2; }
.tl-kicker a:hover { color: var(--ink); }
.tl-kicker__sep { margin: 0 .55em; }
.tl-kicker__partner { color: var(--taupe); }

.tl-label {
	font-family: var(--f-sans); font-weight: 500; font-size: .8125rem; line-height: 1.3;
	letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
	margin: 0 0 1.25rem; padding-bottom: .75rem; border-bottom: 1px solid var(--ink);
}

.tl-byline {
	font-family: var(--f-sans); font-size: .8125rem; line-height: 1.4; color: var(--taupe);
	margin: 0; letter-spacing: .01em;
}
.tl-byline a { color: var(--ink); text-decoration: none; position: relative; z-index: 2; }
.tl-byline a:hover { color: var(--deep); }
.tl-byline__sep { margin: 0 .5em; }

/* ---------- Buttons ---------- */
.tl-btn,
.wp-block-button__link,
.wp-element-button,
.comment-form .submit {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	font-family: var(--f-sans); font-weight: 500; font-size: .875rem; line-height: 1.2;
	letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
	padding: .875rem 1.75rem; border: 1px solid var(--ink); border-radius: 0;
	background: var(--ink); color: var(--white); cursor: pointer;
	transition: background-color .2s, border-color .2s, color .2s;
}
.tl-btn:hover, .wp-block-button__link:hover, .comment-form .submit:hover { background: var(--deep); border-color: var(--deep); color: var(--white); }
.tl-btn--accent { background: var(--deep); border-color: var(--deep); }
.tl-btn--accent:hover { background: var(--ink); border-color: var(--ink); }
.tl-btn--light { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.tl-btn--light:hover { background: var(--white); border-color: var(--white); color: var(--ink); }
.is-style-outline-ink .wp-block-button__link { background: transparent; color: var(--ink); }
.is-style-outline-ink .wp-block-button__link:hover { background: var(--ink); color: var(--white); }

.tl-iconbtn {
	display: inline-flex; align-items: center; gap: .55rem; min-width: 44px; min-height: 44px;
	padding: .5rem; margin-left: -.5rem; border: 0; background: none; cursor: pointer; color: var(--ink);
	font-family: var(--f-sans); font-weight: 500; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase;
}
.tl-iconbtn:hover { color: var(--deep); }
@media (max-width: 1023px) {
	.tl-iconbtn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.tl-more {
	display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
	font-family: var(--f-sans); font-weight: 500; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
	color: var(--ink); text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid currentColor;
}
.tl-more .tl-icon { transition: transform .2s var(--ease); }
.tl-more:hover { color: var(--deep); }
.tl-more:hover .tl-icon { transform: translateX(3px); }

/* ---------- Header ---------- */
.tl-header { background: var(--paper); border-bottom: 1px solid var(--stone); position: relative; z-index: 30; }
.tl-header__bar {
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
	min-height: 64px; column-gap: 1rem;
}
.tl-header__left { display: flex; align-items: center; gap: 1.25rem; }
.tl-header__right { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; }
.tl-header__right .tl-iconbtn { margin: 0 -.5rem 0 0; }
.tl-header__brand { margin: 0; line-height: 0; font-size: 0; }
.tl-header__brand a { display: block; }
.tl-header__logo { display: none; }
.tl-header__wordmark { display: block; width: 168px; height: auto; }
@media (min-width: 1024px) {
	.tl-header__bar { min-height: 0; padding-block: 2rem 1.75rem; }
	.tl-header__logo { display: block; width: 300px; height: auto; }
	.tl-header__wordmark { display: none; }
}

/* Section navigation (desktop) */
.tl-nav { display: none; border-top: 1px solid var(--stone); position: relative; }
@media (min-width: 1024px) { .tl-nav { display: block; } }
.tl-nav__list { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; column-gap: clamp(1.5rem, 2.6vw, 2.75rem); }
.tl-nav__list > li > a {
	display: block; position: relative; padding: 1.125rem 0;
	font-family: var(--f-sans); font-weight: 500; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase;
	color: var(--ink); text-decoration: none;
}
.tl-nav__list > li > a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: .8rem; height: 1px; background: currentColor;
	transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease);
}
.tl-nav__list > li > a:hover::after,
.tl-nav__list > li.is-current > a::after,
.tl-nav__list > li:focus-within > a::after { transform: scaleX(1); }
.tl-nav__list > li > a:hover { color: var(--ink); }
.tl-menu-item--print > a, .tl-nav__list > .menu-item-print > a { color: var(--deep) !important; }

.tl-drop {
	position: absolute; left: 0; right: 0; top: 100%;
	background: var(--paper); border-top: 1px solid var(--stone); border-bottom: 1px solid var(--stone);
	visibility: hidden; opacity: 0; transform: translateY(-4px);
	transition: opacity .18s, transform .18s var(--ease), visibility 0s .18s; z-index: 40;
}
.tl-nav__list > li:hover > .tl-drop,
.tl-nav__list > li:focus-within > .tl-drop { visibility: visible; opacity: 1; transform: none; transition-delay: .06s, .06s, 0s; }
.tl-drop__inner {
	max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 2.25rem var(--gutter) 2.5rem;
	display: grid; grid-template-columns: 240px 1fr; gap: 3.5rem;
}
.tl-drop__links { list-style: none; margin: 0; padding: 0; }
.tl-drop__links a { display: block; padding: .3rem 0; font-family: var(--f-display); font-weight: 500; font-size: 1.375rem; color: var(--ink); text-decoration: none; }
.tl-drop__links a:hover { color: var(--deep); }
.tl-drop__stories { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }

/* Compact sticky bar */
.tl-compact {
	position: fixed; top: 0; left: 0; right: 0; z-index: 60;
	background: var(--paper); border-bottom: 1px solid var(--stone);
	transform: translateY(-100%); transition: transform .28s var(--ease); visibility: hidden;
}
.tl-compact.is-visible { transform: none; visibility: visible; }
.tl-compact__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 56px; }
.tl-compact__bar > :last-child { justify-self: end; margin-right: -.5rem; }
.tl-compact__brand { line-height: 0; }
.tl-compact__brand img { width: 150px; height: auto; }
.tl-progress { height: 2px; background: transparent; }
.tl-progress span { display: block; height: 100%; width: 0; background: var(--blue); transform-origin: left; }
body.admin-bar .tl-compact { top: 32px; }
@media (max-width: 782px) { body.admin-bar .tl-compact { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .tl-compact { top: 0; } }

/* ---------- Overlays (menu + search) ---------- */
.tl-overlay { position: fixed; inset: 0; z-index: 100; background: var(--paper); overflow-y: auto; overscroll-behavior: contain; }
.tl-overlay[hidden] { display: none; }
body.admin-bar .tl-overlay { top: 32px; }
@media (max-width: 782px) { body.admin-bar .tl-overlay { top: 46px; } }
.tl-overlay__top { display: flex; align-items: center; justify-content: space-between; min-height: 64px; border-bottom: 1px solid var(--stone); }
.tl-overlay__top .tl-iconbtn { margin-right: -.5rem; }
.tl-overlay__brand { line-height: 0; }
.tl-overlay__brand img { width: 150px; height: auto; }
.tl-overlay__body { padding-block: 1.5rem 4rem; }
.tl-overlay__cols { display: grid; gap: 2.5rem; margin-top: 2rem; }
@media (min-width: 768px) { .tl-overlay__cols { grid-template-columns: 2fr 1fr; gap: 5rem; } }
.tl-overlay-menu { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.tl-overlay-menu > li { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--stone); }
.tl-overlay-menu > li > a { flex: 1; padding: .85rem 0; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.625rem, 4vw, 2.25rem); line-height: 1.15; text-decoration: none; color: var(--ink); }
.tl-overlay-menu > li > a:hover { color: var(--deep); }
.tl-sub-toggle { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; }
.tl-sub-toggle .tl-icon { transition: transform .2s; }
.tl-sub-toggle[aria-expanded="true"] .tl-icon { transform: rotate(180deg); }
.tl-overlay-menu .sub-menu { display: none; width: 100%; list-style: none; margin: 0; padding: 0 0 1rem; columns: 2; column-gap: 1.5rem; }
.tl-overlay-menu li.is-open > .sub-menu { display: block; }
.tl-overlay-menu .sub-menu a { display: block; padding: .35rem 0; font-size: 1.0625rem; color: var(--taupe); text-decoration: none; }
.tl-overlay-menu .sub-menu a:hover { color: var(--ink); }
.tl-overlay-links, .tl-overlay__body .tl-footer__list { list-style: none; margin: 0 0 2rem; padding: 0; border-top: 1px solid var(--ink); }
.tl-overlay-links a, .tl-overlay__body .tl-footer__list a { display: block; padding: .6rem 0; border-bottom: 1px solid var(--stone); color: var(--ink); text-decoration: none; font-size: 1.0625rem; }
.tl-searchbox { max-width: calc(900px + var(--gutter) * 2); padding-top: clamp(3rem, 14vh, 9rem); }

/* Search form */
.tl-search-form { display: flex; align-items: center; border-bottom: 2px solid var(--ink); }
.tl-search-form:focus-within { border-color: var(--deep); }
.tl-search-form__input {
	flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); padding: .6rem 0;
	font-family: var(--f-display); font-weight: 500; font-size: 1.5rem; outline: none; -webkit-appearance: none; border-radius: 0;
}
.tl-search-form__input::placeholder { color: var(--taupe); opacity: .8; }
.tl-search-form__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.tl-search-form__submit { width: 48px; height: 48px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; }
.tl-searchbox .tl-search-form__input { font-size: clamp(2rem, 5vw, 3.25rem); }

/* ---------- Bands & grids ---------- */
.tl-band { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.tl-band--top { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.tl-band--edit { background: var(--linen); }
.tl-band--related { border-top: 1px solid var(--stone); }
.tl-band--section + .tl-band--section { padding-top: 0; }
.tl-band__head {
	display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem;
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem); padding-top: 1.1rem; border-top: 1px solid var(--ink);
}
.tl-band__head .tl-kicker { margin-bottom: .4rem; }
.tl-band__title { font-family: var(--f-display); font-weight: 500; font-size: clamp(2rem, 3.6vw, 2.875rem); line-height: 1.04; }
.tl-band--edit .tl-band__head { border-top-color: var(--ink); }

.tl-grid { display: grid; gap: 2.5rem 1.5rem; }
@media (min-width: 640px) { .tl-grid--3, .tl-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
	.tl-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 2rem; }
	.tl-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3rem 1.75rem; }
}

.tl-top { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) {
	.tl-top { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 3.5rem; }
	.tl-top__latest { border-left: 1px solid var(--stone); padding-left: 2.5rem; }
}

.tl-split { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .tl-split { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 3.5rem; } }

/* ---------- Media ---------- */
.tl-media { position: relative; overflow: hidden; background: var(--linen); }
.tl-media--3x2 { aspect-ratio: 3 / 2; }
.tl-media--16x9 { aspect-ratio: 16 / 9; }
.tl-media--4x5 { aspect-ratio: 4 / 5; }
.tl-media--1x1 { aspect-ratio: 1 / 1; }
.tl-media__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease); }
.tl-media__empty { position: absolute; inset: 0; display: grid; place-items: center; }
.tl-media__empty img { width: 64px; height: 64px; opacity: .85; }

/* ---------- Cards ---------- */
.tl-card { position: relative; display: flex; flex-direction: column; gap: 1rem; }
.tl-card__media { display: block; }
.tl-card__body { display: flex; flex-direction: column; }
.tl-card__body .tl-kicker { margin-bottom: .55rem; }
.tl-card__title { font-family: var(--f-display); font-weight: 600; font-size: 1.5rem; line-height: 1.14; margin: 0 0 .65rem; }
.tl-card__title a { color: var(--ink); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .35s var(--ease); }
.tl-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
@media (hover: hover) {
	.tl-card:hover .tl-card__title a { background-size: 100% 1px; }
	.tl-card:hover .tl-media__img { transform: scale(1.035); }
}
.tl-card__summary { margin: 0 0 .9rem; color: var(--taupe); font-size: 1.0625rem; line-height: 1.55; }

.tl-card--lead { gap: 1.5rem; }
.tl-card--lead .tl-card__title { font-weight: 500; font-size: clamp(2.25rem, 4.8vw, 3.75rem); line-height: 1.03; letter-spacing: -.01em; margin-bottom: 1rem; }
.tl-card--lead .tl-card__summary { font-style: italic; font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.5; max-width: 38em; }

.tl-card--feature .tl-card__title { font-weight: 500; font-size: clamp(1.875rem, 3vw, 2.375rem); line-height: 1.06; }

.tl-card--list { gap: 0; padding: 1rem 0 1.15rem; border-bottom: 1px solid var(--stone); }
.tl-card--list:first-of-type { padding-top: 0; }
.tl-card--list:last-child { border-bottom: 0; }
.tl-card--list .tl-kicker { margin-bottom: .35rem; font-size: .6875rem; }
.tl-card--list .tl-card__title { font-size: 1.375rem; line-height: 1.18; margin-bottom: .4rem; }

.tl-card--compact { display: grid; grid-template-columns: 112px 1fr; gap: 1rem; align-items: start; }
.tl-card--compact .tl-card__title { font-size: 1.1875rem; line-height: 1.2; margin: 0; }

/* Phones: after the first story, grids become compact rows so long pages stay scannable. */
@media (max-width: 639px) {
	.tl-grid { gap: 0; }
	.tl-grid > .tl-card:first-child { padding-bottom: 1.5rem; }
	.tl-grid > .tl-card:not(:first-child),
	.tl-archive-grid > .tl-card {
		display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 1rem; align-items: start;
		padding: 1.25rem 0; border-top: 1px solid var(--stone);
	}
	.tl-archive-grid { gap: 0; }
	.tl-grid > .tl-card:not(:first-child) .tl-card__title,
	.tl-archive-grid > .tl-card .tl-card__title { font-size: 1.25rem; margin-bottom: .4rem; }
	.tl-grid > .tl-card:not(:first-child) .tl-kicker,
	.tl-archive-grid > .tl-card .tl-kicker { font-size: .6875rem; margin-bottom: .35rem; }
	.tl-grid > .tl-card:not(:first-child) .tl-byline__author,
	.tl-archive-grid > .tl-card .tl-byline__author,
	.tl-grid > .tl-card:not(:first-child) .tl-byline__sep,
	.tl-archive-grid > .tl-card .tl-byline__sep { display: none; }
	.tl-archive-grid__lead { padding-bottom: 1.5rem; border-bottom: 0; }
}

/* ---------- Print & newsletter bands ---------- */
.tl-band--print { background: var(--ink); color: var(--stone); }
.tl-print { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 768px) { .tl-print { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.tl-print .tl-kicker { color: var(--blue); }
.tl-print .tl-band__title { color: var(--white); margin: 0 0 1rem; }
.tl-print p { max-width: 28em; margin: 0 0 1.75rem; }
.tl-print__covers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
@media (min-width: 1024px) { .tl-print__covers { grid-template-columns: repeat(4, 1fr); } }
.tl-print__covers a { display: block; color: var(--stone); text-decoration: none; }
.tl-print__cover { display: block; width: 100%; height: auto; aspect-ratio: 148 / 210; object-fit: cover; box-shadow: 0 1px 0 rgba(255,255,255,.08); transition: transform .3s var(--ease); }
.tl-print__covers a:hover .tl-print__cover { transform: translateY(-4px); }
.tl-print__date { display: block; margin-top: .6rem; font-family: var(--f-sans); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.tl-print__stack { position: relative; height: clamp(260px, 32vw, 380px); }
.tl-print__stack span { position: absolute; top: 50%; left: 50%; width: clamp(170px, 20vw, 250px); aspect-ratio: 148 / 210; transform-origin: 50% 100%; background: linear-gradient(160deg, #6b5a46, #2a2621); border: 1px solid rgba(255,255,255,.08); }
.tl-print__stack span:nth-child(1) { transform: translate(-80%, -50%) rotate(-8deg); opacity: .55; }
.tl-print__stack span:nth-child(2) { transform: translate(-20%, -50%) rotate(7deg); opacity: .75; }
.tl-print__stack span:nth-child(3) { transform: translate(-50%, -50%); padding: 7%; background: linear-gradient(170deg, #7a6650 0%, #3a332b 55%, #1c1a17 100%); }
.tl-print__stack span:nth-child(3) img { width: 100%; height: auto; display: block; }

.tl-band--newsletter { background: var(--linen); }
.tl-news { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 1024px) { .tl-news { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.tl-news .tl-band__title { margin: 0 0 1rem; }
.tl-news p { margin: 0; color: var(--taupe); max-width: 32em; }

/* ---------- Single article ---------- */
.tl-single__head { text-align: center; padding-top: clamp(2rem, 5vw, 3.5rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.tl-single__title { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.375rem, 5.6vw, 4.5rem); line-height: 1.03; letter-spacing: -.012em; margin: 0 auto 1.25rem; max-width: 20ch; }
.tl-single__standfirst { font-style: italic; font-size: clamp(1.1875rem, 2vw, 1.4375rem); line-height: 1.5; color: var(--taupe); max-width: 36em; margin: 0 auto 1.5rem; }
.tl-single__head .tl-byline { font-size: .875rem; }
.tl-single__hero { margin: 0 auto clamp(2rem, 4vw, 3rem); }
.tl-single__hero figcaption { margin-top: .65rem; font-family: var(--f-sans); font-size: .8125rem; color: var(--taupe); }
@media (max-width: 639px) { .tl-single__hero { padding-inline: 0; } .tl-single__hero figcaption { padding-inline: var(--gutter); } }
.tl-single__share { display: flex; justify-content: center; margin-bottom: 2rem; }

.tl-breadcrumbs, .tl-breadcrumbs ol { margin: 0; padding: 0; }
.tl-breadcrumbs { margin-bottom: 1.25rem; }
.tl-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem .6rem; font-family: var(--f-sans); font-size: .75rem; color: var(--taupe); }
.tl-breadcrumbs li + li::before { content: "/"; margin-right: .6rem; color: var(--stone); }
.tl-breadcrumbs a { color: var(--taupe); text-decoration: none; }
.tl-breadcrumbs a:hover { color: var(--ink); }
.tl-breadcrumbs [aria-current] { display: none; }
.tl-breadcrumbs:has(li:first-child:nth-last-child(2)) { display: none; }

/* Prose */
.tl-prose { padding-inline: var(--gutter); }
.tl-prose > * { max-width: var(--content); margin-left: auto; margin-right: auto; }
.tl-prose > .alignwide { max-width: var(--wrap); }
.tl-prose > .alignfull { max-width: none; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); }
.tl-prose p, .tl-prose ul, .tl-prose ol, .tl-prose dl, .tl-prose table { margin-top: 0; margin-bottom: 1.35em; }
.tl-prose > p:first-child::first-line { font-variant-caps: normal; }
.tl-prose h2 { font-weight: 600; font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.15; margin-top: 2.5rem; margin-bottom: 1rem; }
.tl-prose h3 { font-weight: 600; font-size: clamp(1.4375rem, 2.4vw, 1.75rem); margin-top: 2.25rem; margin-bottom: .75rem; }
.tl-prose h4 { font-family: var(--f-sans); font-weight: 500; font-size: .875rem; letter-spacing: .14em; text-transform: uppercase; margin-top: 2rem; margin-bottom: .75rem; }
.tl-prose a { color: var(--deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.tl-prose a:hover { color: var(--ink); }
.tl-prose strong { font-weight: 600; }
.tl-prose ul, .tl-prose ol { padding-left: 1.25em; }
.tl-prose li { margin-bottom: .4em; }
.tl-prose figure, .tl-prose .wp-block-image { margin-top: 2rem; margin-bottom: 2rem; }
.tl-prose img { display: block; height: auto; }
.tl-prose figcaption, .tl-prose .wp-caption-text, .tl-prose .wp-element-caption {
	margin-top: .65rem; font-family: var(--f-sans); font-size: .8125rem; line-height: 1.45; color: var(--taupe); text-align: left;
}
.tl-prose .wp-caption { max-width: 100%; }
.tl-prose hr, .tl-prose .wp-block-separator { border: 0; border-top: 1px solid var(--stone); margin: 2.5rem auto; }
.tl-prose blockquote:not(.wp-block-pullquote blockquote) { margin: 2rem auto; padding-left: 1.5rem; border-left: 2px solid var(--blue); font-style: italic; }
.tl-prose blockquote p:last-child { margin-bottom: 0; }
.tl-prose .wp-block-pullquote { margin: 3rem auto; padding: 2rem 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--stone); text-align: center; }
.tl-prose .wp-block-pullquote blockquote { margin: 0; padding: 0; border: 0; }
.tl-prose .wp-block-pullquote p { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: clamp(1.75rem, 3.4vw, 2.375rem); line-height: 1.2; margin: 0 0 1rem; }
.tl-prose .wp-block-pullquote cite { font-family: var(--f-sans); font-style: normal; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--taupe); }
.tl-prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.tl-prose th, .tl-prose td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--stone); }
.tl-prose th { font-family: var(--f-sans); font-weight: 500; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.tl-prose iframe { max-width: 100%; }
.tl-prose .wp-block-embed { margin-top: 2rem; margin-bottom: 2rem; }
.tl-prose .wp-block-gallery { margin-top: 2rem; margin-bottom: 2rem; }
.tl-prose .has-drop-cap:not(:focus)::first-letter { font-family: var(--f-display); font-weight: 500; font-size: 4.6em; line-height: .8; margin: .06em .1em 0 0; color: var(--ink); }

.tl-prose .aligncenter { display: block; margin-left: auto; margin-right: auto; text-align: center; }
.tl-prose .alignleft, .tl-prose .alignright { max-width: 50%; margin-top: .4rem; margin-bottom: 1rem; }
@media (min-width: 640px) {
	.tl-prose .alignleft { float: left; margin-right: 1.75rem; }
	.tl-prose .alignright { float: right; margin-left: 1.75rem; }
}
@media (max-width: 639px) { .tl-prose .alignleft, .tl-prose .alignright { max-width: 100%; float: none; } }
.tl-prose > *::after { clear: both; }
.tl-prose .wp-caption img { margin: 0 auto; }
.tl-prose iframe[src*="youtube"], .tl-prose iframe[src*="vimeo"] { width: 100%; aspect-ratio: 16 / 9; height: auto; }

.is-style-standfirst { font-style: italic; font-size: clamp(1.1875rem, 2vw, 1.375rem); line-height: 1.5; color: var(--taupe); }
.is-style-panel, .tl-details { background: var(--linen); padding: 1.5rem 1.75rem !important; }
.tl-prose .is-style-panel > * { max-width: none; }
.tl-details p { margin: 0 0 .5rem; font-size: 1rem; }
.tl-details p:last-child { margin-bottom: 0; }
.is-style-dashes { list-style: none; padding-left: 0 !important; }
.is-style-dashes li { padding-left: 1.4em; position: relative; }
.is-style-dashes li::before { content: "—"; position: absolute; left: 0; color: var(--taupe); }

/* Verdict, tags, share, author */
.tl-verdict { margin-top: 2.5rem; margin-bottom: 0; text-align: center; }
.tl-verdict__inner { padding-top: 1.5rem; border-top: 1px solid var(--ink); }
.tl-verdict__item { font-family: var(--f-display); font-weight: 600; font-size: 1.75rem; line-height: 1.15; margin: 0 0 .5rem; }
.tl-stars { display: inline-flex; gap: .15rem; font-size: 1.5rem; line-height: 1; }
.tl-star::before { content: "★"; color: var(--stone); }
.tl-star--full::before { color: var(--blue); }
.tl-star--half::before { background: linear-gradient(90deg, var(--blue) 50%, var(--stone) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }

.tl-single__foot { margin-top: 2.5rem; padding-bottom: 1rem; }
.tl-tags { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.tl-tags a, .tl-chips a {
	display: inline-block; padding: .5rem .9rem; border: 1px solid var(--stone); color: var(--ink); text-decoration: none;
	font-family: var(--f-sans); font-weight: 500; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2;
}
.tl-tags a:hover, .tl-chips a:hover { border-color: var(--ink); color: var(--ink); }
.tl-chips a[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--white); }

.tl-share { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.tl-share__label { font-family: var(--f-sans); font-weight: 500; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--taupe); }
.tl-share ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .4rem; }
.tl-share a, .tl-share button {
	width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--stone); background: none;
	color: var(--ink); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; position: relative;
}
.tl-share a:hover, .tl-share button:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.tl-copy__done { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); font-family: var(--f-sans); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; background: var(--ink); color: var(--white); padding: .3rem .5rem; white-space: nowrap; }

.tl-author { display: flex; gap: 1.25rem; align-items: flex-start; margin-top: 2.25rem; padding: 2rem 0; border-top: 1px solid var(--stone); border-bottom: 1px solid var(--stone); }
.tl-author__avatar { width: 72px; height: 72px; flex: none; object-fit: cover; }
.tl-author__text .tl-kicker { margin-bottom: .3rem; }
.tl-author__name { font-family: var(--f-display); font-weight: 600; font-size: 1.5rem; line-height: 1.15; margin: 0 0 .5rem; }
.tl-author__name a { color: var(--ink); text-decoration: none; }
.tl-author__bio { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--taupe); }

/* Comments */
.tl-comments { padding-block: 3rem; }
.tl-comments__list { list-style: none; padding: 0; margin: 0 0 2rem; }
.tl-comments__list .comment-body { padding: 1.25rem 0; border-bottom: 1px solid var(--stone); font-size: 1rem; }
.tl-comments__list .comment-meta { font-family: var(--f-sans); font-size: .8125rem; color: var(--taupe); }
.tl-comments__list .avatar { float: left; margin-right: .75rem; }
.comment-form label { display: block; font-family: var(--f-sans); font-size: .8125rem; margin-bottom: .3rem; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
	width: 100%; padding: .75rem; border: 1px solid var(--stone); background: var(--white); font: inherit; font-size: 1rem; border-radius: 0;
}

/* ---------- Archives ---------- */
.tl-archive-head { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1.75rem, 4vw, 2.75rem); border-bottom: 1px solid var(--stone); text-align: center; }
.tl-archive-head__title { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.75rem, 7vw, 5rem); line-height: 1; letter-spacing: -.01em; margin: 0 0 1rem; }
.tl-archive-head__desc { max-width: 38em; margin: 0 auto; font-style: italic; color: var(--taupe); font-size: clamp(1.0625rem, 1.8vw, 1.25rem); }
.tl-archive-head__desc p { margin: 0 0 .5rem; }
.tl-archive-head__avatar { display: block; margin: 0 auto 1.25rem; width: 96px; height: 96px; object-fit: cover; }
.tl-archive-head__count { font-family: var(--f-sans); font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--taupe); margin: 1.25rem 0 0; }
.tl-archive-head__link { margin: 1rem 0 0; font-family: var(--f-sans); font-size: .875rem; }
.tl-archive-head--search .tl-search-form { max-width: 640px; margin: 1.5rem auto 0; text-align: left; }
.tl-chips { margin-top: 1.75rem; }
.tl-chips ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.tl-band--list { padding-top: clamp(2rem, 4vw, 3rem); }

.tl-archive-grid { display: grid; gap: 2.5rem 1.5rem; }
@media (min-width: 640px) { .tl-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tl-archive-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.25rem 2rem; } }
.tl-archive-grid__lead { grid-column: 1 / -1; padding-bottom: 2.5rem; border-bottom: 1px solid var(--stone); }
@media (min-width: 1024px) {
	.tl-archive-grid__lead .tl-card { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
	.tl-archive-grid__lead .tl-card__title { font-size: clamp(2.25rem, 3.6vw, 3rem); }
}

.tl-pagination { margin-top: 3.5rem; }
.tl-pagination .nav-links { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .25rem; }
.tl-pagination .page-numbers {
	min-width: 44px; height: 44px; padding: 0 .75rem; display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--f-sans); font-weight: 500; font-size: .875rem; color: var(--ink); text-decoration: none; border: 1px solid transparent;
}
.tl-pagination .page-numbers.current { border-color: var(--ink); }
.tl-pagination .page-numbers:hover { border-color: var(--stone); }
.tl-pagination .prev, .tl-pagination .next { letter-spacing: .1em; text-transform: uppercase; font-size: .75rem; }

.tl-suggest { max-width: var(--wrap); margin: 0 auto; }
.tl-suggest__msg { text-align: center; font-style: italic; color: var(--taupe); font-size: 1.25rem; margin: 0 auto 1.5rem; max-width: 32em; }
.tl-suggest .tl-chips { margin: 0 0 3.5rem; }
.tl-empty { text-align: center; color: var(--taupe); font-style: italic; }

/* ---------- Footer ---------- */
.tl-footer { background: var(--ink); color: var(--stone); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; margin-top: 0; }
.tl-footer a { color: var(--stone); text-decoration: none; }
.tl-footer a:hover { color: var(--white); }
.tl-footer__top { display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .tl-footer__top { grid-template-columns: 1.6fr 1fr 1fr; gap: 3rem; } .tl-footer__top:has(.tl-footer__news) { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; } }
.tl-footer__brand img { width: 230px; height: auto; display: block; }
.tl-footer__brand p { font-size: 1rem; line-height: 1.55; margin: 1.25rem 0 1.5rem; max-width: 22em; }
.tl-footer__heading { font-family: var(--f-sans); font-weight: 500; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--white); margin: 0 0 1rem; }
.tl-footer__list { list-style: none; margin: 0; padding: 0; }
.tl-footer__list li { margin-bottom: .55rem; }
.tl-footer__list a { font-size: 1rem; }
.tl-footer__news p { font-size: 1rem; margin: 0 0 1rem; }
.tl-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(216, 205, 188, .25); font-family: var(--f-sans); font-size: .8125rem; }
.tl-footer__bottom p { margin: 0; }
.tl-footer__legal { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.5rem; flex-wrap: wrap; }

.tl-social { list-style: none; margin: 0; padding: 0; display: flex; gap: .5rem; flex-wrap: wrap; }
.tl-social a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(216, 205, 188, .35); color: var(--stone); transition: background-color .2s, color .2s, border-color .2s; }
.tl-social a:hover { background: var(--white); border-color: var(--white); color: var(--ink); }
.tl-social--overlay a { border-color: var(--stone); color: var(--ink); }
.tl-social--overlay a:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* ---------- Motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
	.tl-card:hover .tl-media__img { transform: none; }
}
@media print {
	.tl-header, .tl-compact, .tl-overlay, .tl-footer, .tl-share, .tl-band--related, .tl-band--newsletter, .tl-band--print, .tl-breadcrumbs { display: none !important; }
	body { background: #fff; font-size: 11pt; }
	.tl-prose a::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}
