/* =================================================================
   Chat with Girls - design system
   Palette A-4 Morning Sky | Direction C-2 Pastel Neo-Brutalism
   Edges E2-2 hard offset | Header E1-3 hairline | Gate D-3 editorial caret
   Accent strategy 2: tinted grounds behind blocks
   ================================================================= */

:root {
	--bg: #F2F7FC;
	--surface: #FCFEFF;
	--text: #16283A;
	--muted: #51647A;
	--accent: #2B6CB0;
	--accent-2: #9CC6EC;

	/* Derived tokens. Every one of these was contrast-measured; see BRIEF. */
	--link: #2B6CB0;            /* 5.03 on bg, 5.36 on surface */
	--on-accent: #FCFEFF;       /* 5.36 on accent */
	--on-accent-2: #16283A;     /* 8.37 on accent-2 - never --muted, which is 3.39 */
	--ink: #16283A;             /* the 2px outline of the whole direction */
	--hard: #9CC6EC;            /* the offset block shadow */
	--tint: #E4EFFA;            /* tinted grounds */
	--tint-2: #F7FBFE;
	--gate-grad: linear-gradient(160deg, #EAF3FB, #D8E8F7 50%, #C5DCF2);

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;

	--fs-0: 0.8125rem;
	--fs-1: 0.9375rem;
	--fs-2: 1.0625rem;
	--fs-3: 1.3125rem;
	--fs-4: 1.625rem;

	--r-card: 14px;
	--r-small: 10px;
	--r-pill: 999px;
	--edge: 2px;
	--drop: 4px;

	--col: 44rem;
	--head-h: 66px;

	--font-head: 'Geologica', 'Trebuchet MS', system-ui, sans-serif;
	--font-body: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

[data-theme="dark"] {
	--bg: #101924;
	--surface: #16222F;
	--text: #E4EEF7;
	--muted: #9DB4CC;
	--accent: #3674B5;
	--accent-2: #6FA3D8;

	--link: #6FA3D8;            /* 6.66 on bg - the raw accent is 3.64 and fails */
	--on-accent: #FCFEFF;       /* 4.80 on accent */
	--on-accent-2: #16222F;     /* 6.06 on accent-2 */
	--ink: #6D879E;
	--hard: #2A4763;
	--tint: #1A2836;
	--tint-2: #14202C;
	--gate-grad: linear-gradient(160deg, #16222F, #1A2A3A 50%, #203243);
}

/* ---------- base ---------- */

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--fs-2);
	line-height: 1.7;
	overflow-x: hidden;
}

h1, h2, h3 {
	font-family: var(--font-head);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -0.015em;
	/* margin-block only: touching margin-inline breaks the centred column */
	margin-block: var(--space-6) var(--space-4);
}

h1 { font-size: clamp(1.9rem, 1.35rem + 2.6vw, 3rem); }
h2 { font-size: clamp(1.4rem, 1.12rem + 1.35vw, 2rem); }
h3 { font-size: var(--fs-3); font-weight: 700; }

p { margin-block: 0 var(--space-5); }

strong { font-weight: 700; }

::selection { background: var(--accent-2); color: var(--on-accent-2); }

/* F-12 custom scrollbar */
html { scrollbar-color: var(--accent) var(--tint); scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--tint); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: var(--r-pill); border: 3px solid var(--tint); }

:where(a, button, summary, details):focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
	border-radius: var(--r-small);
}

.ltl-skip {
	position: absolute;
	left: -9999px;
	top: var(--space-2);
	z-index: 60;
	background: var(--surface);
	color: var(--text);
	border: var(--edge) solid var(--ink);
	border-radius: var(--r-small);
	padding: var(--space-2) var(--space-4);
}
.ltl-skip:focus { left: var(--space-4); }

/* ---------- header E1-3: hairline, gains a ground on scroll ---------- */

.ltl-bar {
	position: sticky;
	top: 0;
	z-index: 40;
	background: transparent;
	border-bottom: var(--edge) solid transparent;
	transition: background-color 0.22s ease, border-color 0.22s ease;
}
.ltl-bar.is-stuck {
	background: var(--surface);
	border-bottom-color: var(--ink);
}

.ltl-bar__inner {
	max-width: 1160px;
	margin-inline: auto;
	padding: var(--space-3) clamp(16px, 4vw, 32px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	min-height: var(--head-h);
}

.ltl-brand {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	text-decoration: none;
	color: var(--text);
	min-width: 0;
}
.ltl-brand__mark { flex: 0 0 auto; }
.ltl-mark__plate { fill: var(--accent-2); stroke: var(--ink); stroke-width: 2; }
.ltl-mark__pane  { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.ltl-mark__lens  { fill: var(--accent); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.ltl-mark__dot   { fill: var(--accent); }

.ltl-brand__word {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: var(--fs-2);
	letter-spacing: -0.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.ltl-bar__actions {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex: 0 0 auto;
}

/* icon-only buttons: fixed box, centred child, no max-width on the svg */
.ltl-icon {
	width: 42px;
	height: 42px;
	display: inline-grid;
	place-items: center;
	padding: 0;
	background: var(--surface);
	color: var(--text);
	border: var(--edge) solid var(--ink);
	border-radius: var(--r-small);
	box-shadow: var(--drop) var(--drop) 0 var(--hard);
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.ltl-icon:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--hard); }
.ltl-icon:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--hard); }

.ltl-toggle__moon { display: none; }
[data-theme="dark"] .ltl-toggle__sun { display: none; }
[data-theme="dark"] .ltl-toggle__moon { display: block; }
.ltl-toggle svg { transition: transform 0.3s ease; }
.ltl-toggle:hover svg { transform: rotate(18deg); }

/* the burger is a 3-bar column, NOT a single centred svg */
.ltl-burger {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
}
.ltl-burger__bar {
	display: block;
	width: 19px;
	height: 2px;
	margin: 0;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.22s ease, opacity 0.15s ease;
}
.ltl-burger.is-open .ltl-burger__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ltl-burger.is-open .ltl-burger__bar:nth-child(2) { opacity: 0; }
.ltl-burger.is-open .ltl-burger__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- language ---------- */

/* Scoped to the header row on purpose: an unscoped .ltl-lang{display:none}
   would take the in-drawer list with it. */
.ltl-lang--desk { position: relative; display: none; }
@media (min-width: 769px) {
	.ltl-lang--desk { display: block; }
	.ltl-burger { display: none; }
}

.ltl-lang__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	height: 42px;
	padding-inline: var(--space-4);
	background: var(--surface);
	color: var(--text);
	border: var(--edge) solid var(--ink);
	border-radius: var(--r-small);
	box-shadow: var(--drop) var(--drop) 0 var(--hard);
	font-size: var(--fs-1);
	font-weight: 500;
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.ltl-lang__btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--hard); }
.ltl-lang__btn[aria-expanded="true"] .ltl-lang__chev { transform: rotate(180deg); }
.ltl-lang__chev { transition: transform 0.22s ease; }

.ltl-lang__pop {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	min-width: 220px;
	padding: var(--space-2);
	background: var(--surface);
	border: var(--edge) solid var(--ink);
	border-radius: var(--r-card);
	box-shadow: var(--drop) var(--drop) 0 var(--hard);
	z-index: 45;
}
.ltl-lang__pop[hidden] { display: none; }

.ltl-lang__list { list-style: none; margin: 0; padding: 0; }
.ltl-lang__list li { margin: 0; }
.ltl-lang__list a,
.ltl-lang .trp-language-switcher-container a,
.ltl-lang .trp-ls-shortcode-language a {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 44px;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--r-small);
	color: var(--text);
	text-decoration: none;
	font-size: var(--fs-1);
}
.ltl-lang__list a:hover { background: var(--tint); }
.ltl-lang__list img,
.ltl-lang img { width: 18px; height: auto; display: inline-block; }

/* TranslatePress renders its shortcode as a collapsed hover dropdown -
   flatten it into a plain list wherever we place it. */
.ltl-lang .trp-language-switcher-container,
.ltl-lang .trp-language-switcher {
	position: static;
	height: auto;
	width: auto;
	padding: 0;
	background: none;
	border: 0;
}
.ltl-lang .trp-language-switcher > div {
	position: static;
	display: block;
	opacity: 1;
	visibility: visible;
	height: auto;
	width: auto;
	box-shadow: none;
	background: none;
	border: 0;
}
.ltl-lang .trp-ls-shortcode-current-language { display: none; }
.ltl-lang .trp-ls-shortcode-arrow { display: none; }
.ltl-lang .trp-ls-shortcode-language {
	position: static;
	display: block;
	height: auto;
	width: auto;
	max-height: none;
	overflow: visible;
	border: 0;
	background: none;
}

/* ---------- drawer (right slide-in) ---------- */

.ltl-scrim {
	position: fixed;
	inset: 0;
	z-index: 48;
	background: rgba(10, 20, 32, 0.5);
	opacity: 0;
	transition: opacity 0.24s ease;
}
.ltl-scrim[hidden] { display: none; }
.ltl-scrim.is-open { opacity: 1; }

.ltl-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	width: min(320px, 86vw);
	padding: var(--space-4) var(--space-4) var(--space-6);
	background: var(--surface);
	border-left: var(--edge) solid var(--ink);
	transform: translateX(100%);
	transition: transform 0.26s ease;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.ltl-drawer[hidden] { display: none; }
.ltl-drawer.is-open { transform: translateX(0); }

.ltl-drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-4);
}
.ltl-drawer__title {
	font-family: var(--font-head);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: var(--fs-0);
	color: var(--muted);
}
.ltl-drawer__label {
	font-size: var(--fs-0);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--muted);
	margin-block: var(--space-4) var(--space-2);
}
/* a 7-locale list must scroll inside itself, not push the links off a phone */
.ltl-lang--drawer { max-height: 34vh; overflow-y: auto; }
.ltl-drawer__links { list-style: none; margin: 0; padding: 0; }
.ltl-drawer__links a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--r-small);
	text-decoration: none;
	color: var(--text);
	font-size: var(--fs-1);
}
.ltl-drawer__links a:hover { background: var(--tint); }

/* ---------- reading column ---------- */

.ltl-main { padding-bottom: var(--space-8); }

.ltl-entry {
	padding-inline: clamp(16px, 4vw, 32px);
	padding-top: var(--space-5);
}
.ltl-entry > :where(*:not(.ltl-gate)) {
	max-width: var(--col);
	margin-inline: auto;
}
.ltl-entry h1,
.ltl-entry h2 { scroll-margin-top: calc(var(--head-h) + 16px); }

.ltl-kicker {
	max-width: var(--col);
	margin-inline: auto;
	color: var(--muted);
	font-size: var(--fs-1);
	margin-block: 0 var(--space-4);
}

/* ---------- buttons ---------- */

.ltl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 48px;
	padding: var(--space-3) var(--space-6);
	background: var(--accent);
	color: var(--on-accent);
	background-image: none;
	border: var(--edge) solid var(--ink);
	border-radius: var(--r-small);
	box-shadow: var(--drop) var(--drop) 0 var(--hard);
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--fs-2);
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.ltl-btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--hard); }
.ltl-btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--hard); }
.ltl-btn--small { min-height: 42px; padding: var(--space-2) var(--space-4); font-size: var(--fs-1); }

/* body links are accent + underline; buttons are excluded by class so their
   label is never painted link-colour on an accent ground */
.ltl-entry a:not([class]),
.ltl-faq a:not([class]),
.ltl-cookie__text a {
	color: var(--link);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
}
.ltl-entry a.ltl-btn,
.ltl-entry a.ltl-btn:hover { color: var(--on-accent); text-decoration: none; background-image: none; }

/* ---------- age gate D-3 editorial caret ---------- */

.ltl-gate {
	max-width: 62rem;
	margin-inline: auto;
	margin-block: 0 var(--space-7);
	padding: clamp(20px, 5vw, 44px);
	background: var(--gate-grad);
	border: var(--edge) solid var(--ink);
	border-radius: var(--r-card);
	box-shadow: 6px 6px 0 var(--hard);
	position: relative;
	overflow: hidden;
}
.ltl-gate__grid { display: block; }
.ltl-gate__body { position: relative; z-index: 2; }

.ltl-gate__over {
	font-family: var(--font-head);
	font-size: var(--fs-0);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--text);
	margin-block: 0 var(--space-3);
}
.ltl-gate__q {
	font-family: var(--font-head);
	font-size: clamp(1.5rem, 1.1rem + 2vw, 2.4rem);
	font-weight: 800;
	line-height: 1.15;
	color: var(--text);
	margin-block: 0 var(--space-3);
}
.ltl-gate__caret {
	display: inline-block;
	width: 3px;
	height: 0.95em;
	margin-left: 6px;
	vertical-align: -0.12em;
	background: var(--accent);
	animation: ltl-blink 1.1s steps(2, start) infinite;
}
@keyframes ltl-blink { to { visibility: hidden; } }

.ltl-gate__sub {
	color: var(--text);
	font-size: var(--fs-2);
	max-width: 34rem;
	margin-block: 0 var(--space-5);
}

/* F-17: a hard ring, no blur - a glow would fight the flat direction */
.ltl-btn--gate { position: relative; z-index: 2; }
.ltl-btn--gate::after {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: inherit;
	box-shadow: 0 0 0 0 var(--accent);
	animation: ltl-ring 2.4s ease-out infinite;
	pointer-events: none;
}
@keyframes ltl-ring {
	0%   { box-shadow: 0 0 0 0 var(--accent); opacity: 0.5; }
	70%  { box-shadow: 0 0 0 12px var(--accent); opacity: 0; }
	100% { box-shadow: 0 0 0 0 var(--accent); opacity: 0; }
}

.ltl-gate__figure {
	position: absolute;
	right: -6px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
	pointer-events: none;
	opacity: 0.16;
}
.ltl-gate__num {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 190px;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 3px var(--text);
	display: block;
	transform: rotate(-6deg);
}

@media (min-width: 769px) {
	.ltl-gate__grid {
		display: grid;
		grid-template-columns: 60% 40%;
		align-items: center;
		gap: var(--space-5);
	}
	.ltl-gate__figure {
		position: static;
		transform: none;
		opacity: 1;
		display: grid;
		place-items: center;
	}
	.ltl-gate__num { font-size: clamp(120px, 13vw, 210px); }
}

@media (prefers-reduced-motion: reduce) {
	.ltl-gate__caret { animation: none; }
	.ltl-btn--gate::after { animation: none; box-shadow: 0 0 0 3px var(--accent); opacity: 0.35; }
}

/* ---------- illustration H-11 ---------- */

.ltl-illus {
	margin-block: var(--space-6);
	padding: var(--space-4);
	background: var(--tint-2);
	border: var(--edge) solid var(--ink);
	border-radius: var(--r-card);
	box-shadow: var(--drop) var(--drop) 0 var(--hard);
}
.ltl-illus svg { width: 100%; height: auto; }
.ltl-illus__plate { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.ltl-illus__up rect { fill: var(--accent); stroke: var(--ink); stroke-width: 2; }
.ltl-illus__down rect { fill: var(--accent-2); stroke: var(--ink); stroke-width: 2; }
.ltl-illus__rule { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }

/* ---------- compare cards E3-5 ---------- */

.ltl-compare {
	display: grid;
	gap: var(--space-4);
	margin-block: var(--space-5) var(--space-6);
}
@media (min-width: 601px) {
	.ltl-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ltl-card {
	padding: var(--space-5);
	border: var(--edge) solid var(--ink);
	border-radius: var(--r-card);
	box-shadow: var(--drop) var(--drop) 0 var(--hard);
	background: var(--surface);
}
.ltl-card--here { background: var(--tint); }
.ltl-card__head {
	font-size: var(--fs-2);
	font-weight: 700;
	margin-block: 0 var(--space-4);
	padding-bottom: var(--space-2);
	border-bottom: var(--edge) solid var(--ink);
}
.ltl-card__rows { margin: 0; }
.ltl-card__rows dt {
	font-size: var(--fs-0);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--muted);
	margin-top: var(--space-3);
}
.ltl-card__rows dd {
	margin: 0;
	font-size: var(--fs-1);
	line-height: 1.6;
}

/* ---------- pull quote ---------- */

.ltl-entry .wp-block-quote {
	margin-block: var(--space-6);
	padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
	background: var(--tint);
	border: var(--edge) solid var(--ink);
	border-left-width: 8px;
	border-radius: var(--r-card);
	box-shadow: var(--drop) var(--drop) 0 var(--hard);
	font-family: var(--font-head);
	font-size: var(--fs-3);
	font-weight: 600;
	line-height: 1.4;
}
.ltl-entry .wp-block-quote p:last-child { margin-bottom: 0; }

/* ---------- lists ---------- */

.ltl-entry .wp-block-list {
	margin-block: 0 var(--space-6);
	padding-left: 1.35em;
	list-style: disc;
}
.ltl-entry .wp-block-list li { margin-bottom: var(--space-3); }
.ltl-entry .wp-block-list li::marker { color: var(--accent); }

/* ---------- FAQ F-6 accordion ---------- */

.ltl-faq { margin-block: var(--space-5) var(--space-6); display: grid; gap: var(--space-3); }
.ltl-faq__item {
	background: var(--surface);
	border: var(--edge) solid var(--ink);
	border-radius: var(--r-card);
	box-shadow: var(--drop) var(--drop) 0 var(--hard);
	overflow: hidden;
}
.ltl-faq__item summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	min-height: 52px;
	padding: var(--space-3) var(--space-4);
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--fs-2);
}
.ltl-faq__item summary::-webkit-details-marker { display: none; }
.ltl-faq__item summary::after {
	content: "";
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	border-right: 2.5px solid var(--accent);
	border-bottom: 2.5px solid var(--accent);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.22s ease;
}
.ltl-faq__item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
/* F-6. The open animation moves the answer, it never sizes or fades it:
   a stalled or skipped animation leaves the text fully readable a few pixels
   off, where a 0fr or 0-opacity first frame would leave it invisible. */
.ltl-faq__body { padding: 0 var(--space-4) var(--space-4); overflow: hidden; }
.ltl-faq__body p { margin: 0; font-size: var(--fs-1); color: var(--text); }
.ltl-faq__item[open] .ltl-faq__body { animation: ltl-faq-in 0.24s ease; }
@keyframes ltl-faq-in {
	from { transform: translateY(-8px); }
	to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.ltl-faq__item[open] .ltl-faq__body { animation: none; }
}

/* ---------- chips E3-7 ---------- */

.ltl-chips {
	list-style: none;
	margin-block: var(--space-4) var(--space-6);
	padding: var(--space-4);
	background: var(--tint);
	border: var(--edge) solid var(--ink);
	border-radius: var(--r-card);
	box-shadow: var(--drop) var(--drop) 0 var(--hard);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	/* stays inside the reading column and wraps; never a full-width row */
	max-width: var(--col);
	margin-inline: auto;
	overflow: hidden;
}
.ltl-chips li {
	background: var(--surface);
	border: var(--edge) solid var(--ink);
	border-radius: var(--r-pill);
	padding: 6px var(--space-4);
	font-size: var(--fs-1);
	line-height: 1.45;
}

/* ---------- inner pages / 404 ---------- */

.ltl-entry--inner { padding-block: var(--space-7) var(--space-8); }
.ltl-inner__title { margin-top: 0; }
.ltl-404 { text-align: center; }
.ltl-404__num {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: clamp(5rem, 3rem + 16vw, 12rem);
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 3px var(--accent);
	margin-block: 0 var(--space-4);
}

/* ---------- footer ---------- */

.ltl-foot {
	border-top: var(--edge) solid var(--ink);
	background: var(--tint-2);
	padding-block: var(--space-6);
}
.ltl-foot__inner {
	max-width: 1160px;
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 32px);
	display: grid;
	gap: var(--space-3);
}
.ltl-foot__copy { margin: 0; font-family: var(--font-head); font-weight: 600; }
.ltl-foot__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-5);
}
.ltl-foot__list a {
	color: var(--link);
	text-decoration: underline;
	text-underline-offset: 3px;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: var(--fs-1);
}
.ltl-foot__note { margin: 0; color: var(--muted); font-size: var(--fs-0); }

@media (min-width: 769px) {
	.ltl-foot__inner {
		grid-template-columns: auto 1fr;
		align-items: center;
	}
	.ltl-foot__list { justify-content: flex-end; }
	.ltl-foot__note { grid-column: 1 / -1; }
}

/* ---------- cookie notice: floating corner card ---------- */

.ltl-cookie {
	position: fixed;
	right: clamp(12px, 3vw, 24px);
	bottom: clamp(12px, 3vw, 24px);
	left: clamp(12px, 3vw, 24px);
	z-index: 46;
	transform: translateY(14px);
	opacity: 0;
	transition: transform 0.28s ease, opacity 0.28s ease;
	/* while it is measuring itself it must not swallow a tap */
	pointer-events: none;
}
.ltl-cookie[hidden] { display: none; }
.ltl-cookie.is-up { transform: translateY(0); opacity: 1; pointer-events: auto; }

.ltl-cookie__card {
	margin-left: auto;
	max-width: 27rem;
	padding: var(--space-4);
	background: var(--surface);
	border: var(--edge) solid var(--ink);
	border-radius: var(--r-card);
	box-shadow: var(--drop) var(--drop) 0 var(--hard);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	align-items: flex-start;
}
.ltl-cookie__text { margin: 0; font-size: var(--fs-1); line-height: 1.55; }

@media (min-width: 601px) {
	.ltl-cookie__card {
		flex-direction: row;
		align-items: center;
		/* basis stays auto so a direction flip can never turn it into a height */
		max-width: 34rem;
	}
	.ltl-cookie__card .ltl-btn { flex: 0 0 auto; }
}

/* ---------- widths ---------- */

@media (min-width: 1024px) {
	.ltl-entry { padding-top: var(--space-6); }
}