/*
Theme Name: LegalTech Lab
Theme URI: https://legaltech.edu.ge
Author: LegalTech Lab
Author URI: https://legaltech.edu.ge
Description: Custom theme for LegalTech Lab - an interdisciplinary research, educational and clinical laboratory at the intersection of law, technology and business administration. Research-instrument aesthetic: near-black, spectrum accents, expanded display type, built for bilingual Georgian/English content.
Version: 2.46.1
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: legaltech-lab
Tags: education, research, custom-menu, translation-ready, block-styles
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	--bg:        #07070C;
	--bg-2:      #0B0B13;
	--bg-3:      #10111C;
	--bg-4:      #151622;
	--bg-inset:  #05050A;

	--line:      rgba(255, 255, 255, 0.07);
	--line-2:    rgba(255, 255, 255, 0.14);
	--line-3:    rgba(255, 255, 255, 0.22);

	--text:      #EDEEF5;
	/* Body prose weight, one step below --text at 14.42:1 against --bg, where
	   --text is 17.37:1 and --muted 7.74:1. It had lived as a bare literal in
	   .ltl-prose since that rule was written; it became a palette member when
	   the UCBP credit line needed the same value, because two copies of a hex
	   is how a palette starts to drift. */
	--text-2:    #D7DAE6;
	--muted:     #9BA0B4;
	--faint:     #6A7085;

	--cyan:      #22D3EE;
	--violet:    #8B5CF6;
	--magenta:   #F0479B;
	/* Softer pink, used only for the homepage wordmark. */
	--magenta-soft: #E27BA8;
	/* Lighter violet, for small text. --violet measures 4.7:1 against the
	   background and passes, but next to --cyan at 11.1:1 it reads as the quiet
	   one; this sits at 7.4:1, close enough to --magenta's 5.8:1 to let a row of
	   terms carry equal weight. A palette member, not a one-off literal. */
	--violet-soft: #A78BFA;
	--lime:      #A3E635;
	--amber:     #FBBF24;
	--sky:       #38BDF8;

	/* The one light surface on the site. Every funder mark is dark ink on a
	   transparent ground drawn for white paper, and a government seal cannot be
	   recoloured to suit a near-black page, so the ribbon and the acknowledgement
	   block stand on their own ground. --plate-faint measures 6.4:1 on white. */
	--plate:       #FFFFFF;
	--plate-line:  rgba(7, 7, 12, 0.12);
	--plate-faint: #5A6068;
	--plate-ink:   #3A4048;

	--cyan-wash:    rgba(34, 211, 238, 0.10);
	--violet-wash:  rgba(139, 92, 246, 0.10);
	--magenta-wash: rgba(240, 71, 155, 0.10);
	--lime-wash:    rgba(163, 230, 53, 0.10);

	--grad:  linear-gradient(92deg, var(--cyan) 0%, var(--violet) 38%, var(--magenta) 64%, var(--cyan) 100%);
	--grad-2: linear-gradient(92deg, var(--cyan), var(--lime));

	--f-display: "Archivo", "Noto Sans Georgian", system-ui, -apple-system, sans-serif;
	--f-body:    "Inter", "Noto Sans Georgian", system-ui, -apple-system, sans-serif;
	--f-mono:    "JetBrains Mono", "Noto Sans Georgian", ui-monospace, Menlo, monospace;

	--container:        1240px;
	--container-narrow: 880px;
	--prose:            70ch;

	--gutter:    clamp(1.15rem, 4vw, 3rem);

	/* -----------------------------------------------------------------------
	   VERTICAL RHYTHM

	   One geometric series, ratio 1.618, seven steps. Three of those steps are
	   the only three break sizes on the site, and they sit two and three steps
	   apart so a reader can tell them apart without being invited to compare.

	   What this replaces: --section-y, set as padding-block on both neighbours
	   of every boundary, so every gap was the sum of two decisions. The 200px
	   between peer sections was 100px twice and nobody had chosen 200. Worse,
	   where one neighbour was a tinted panel half the gap fell inside the tint
	   and read as the panel's own inset, so identical markup produced visibly
	   different spacing. Worst, the six peer boundaries came out LARGER than
	   the two boundaries where the page changes subject, so the hierarchy read
	   backwards.

	   Here a boundary is owned by the LOWER element only, as margin-top, and it
	   is reduced by whatever bezel already sits in the gap. Content to content
	   comes out at the tier value whether a tint edge is in the way or not.

	   At 1440 the series is additive: 10, 16, 26, 42, 68, 110, 178, each the
	   sum of the two before it, which is what a golden series rounded to whole
	   pixels becomes. That is what makes the arithmetic land: a bezel plus a
	   band is a tier exactly, not nearly.

	   Steps are rem + vw, not plain vw. Plain vw with a rem floor is what the
	   page had, and 7vw did not pass 3.5rem until about 800px, which is why 390
	   and 820 both measured about 112 and a mid-width laptop was served phone
	   spacing. A rem term also survives 200% browser zoom, which pure vw does
	   not.
	   ----------------------------------------------------------------------- */
	--space-1: 0.625rem;                                     /*  10 /  10 /  10 */
	--space-2: 1rem;                                         /*  16 /  16 /  16 */
	--space-3: clamp(1.125rem, 0.94rem + 0.76vw, 1.625rem);  /*  18 /  21 /  26 */
	--space-4: clamp(1.625rem, 1.25rem + 1.52vw, 2.625rem);  /*  26 /  32 /  42 */
	--space-5: clamp(2.5rem,   1.85rem + 2.67vw, 4.25rem);   /*  40 /  51 /  68 */
	--space-6: clamp(3.875rem, 2.76rem + 4.57vw, 6.875rem);  /*  62 /  82 / 110 */
	--space-7: clamp(6.25rem,  4.44rem + 7.43vw, 11.125rem); /* 100 / 132 / 178 */

	/* Three breaks. A ratio of 2.0 between them was tried and rejected: it put
	   the group break at 272px, a worse accident than the 200 it replaces. The
	   section break lands at 110, near the 100 chosen before it got doubled,
	   and the major break at 178, near the 176 already above the call to
	   action. */
	/*
	   Set to reproduce the spacing the live site had, on his instruction after
	   seeing the tighter version on staging: he wanted the room back from the
	   stat band down, on desktop and on phones alike. So these are not steps of
	   the series above; they are the live page's own measurements, restated as
	   single values so no boundary is a sum of two any more.

	   The series still governs bezels and everything inside a section, which is
	   what keeps a gap inside a section from being mistaken for a boundary.

	   These reproduce live's own flat-then-linear vw curve deliberately, so the
	   result matches what he approved at every width. It does mean a mid-width
	   screen near 820px gets closer to phone spacing than a strict ramp would
	   give it, which is how live behaves and is the thing he is comparing to.
	*/
	--break-bind:    clamp(4.75rem, 8.6vw,  7.75rem);  /*  76 /  71 / 124 */
	--break-section: clamp(7rem,    14vw,  12.5rem);   /* 112 / 115 / 200 */
	--break-major:   clamp(6.25rem, 12.2vw,  11rem);   /* 100 / 100 / 176 */

	/* A box's own inset, inside its hairline. Sized against --gutter, which is
	   the horizontal distance from the tint's edge to the content: 18/33/48
	   against this bezel's 26/32/42, so the tint reads as an evenly inset box.
	   --space-3 was tried and rejected: content pressed on the hairlines while
	   sitting clear of the sides, and the panel read as a band, not a box.
	   Because the break absorbs the bezel, this can be retuned a step either
	   way without moving a single boundary on the home page. */
	--bezel-box: var(--space-4);      /*  26 /  32 /  42 */

	/* One step deeper, for the two boxes that close the document at each end.
	   The hero and the page head are the only bordered boxes whose hairline has
	   no tint change behind it, so the line reads as an annotation rather than
	   a change of surface and the inset carries more of the separating. The
	   footer is the mirror case: --bg-inset is darker than the page. It also
	   keeps two settled values almost exactly: the hero's bottom padding was
	   44/45/72 and the footer's top was 48/49/72. */
	--bezel-hero: var(--space-5);     /*  40 /  51 /  68 */

	/* The smallest strip of visible page background this design accepts between
	   two drawn edges. Below about 18px a strip between two hairlines stops
	   reading as space and starts reading as a mistake. The floor is what lets
	   the discount subtract the SUM of both bezels rather than the larger of
	   the two, so content-to-content lands on the tier exactly instead of
	   overshooting by a whole bezel wherever two boxes meet. */
	--band-min: var(--space-3);       /*  18 /  21 /  26 */

	--r:    10px;
	--r-lg: 16px;
	--r-xl: 22px;

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   2. Base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 120px;
}

body {
	margin: 0;
	background-color: var(--bg);
	color: var(--text);
	font-family: var(--f-body);
	font-size: 1rem;
	line-height: 1.68;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	position: relative;
}

/* Fine film of noise so the flat black reads as a surface, not a void. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0.028;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

a {
	color: var(--cyan);
	text-decoration-color: rgba(34, 211, 238, 0.35);
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
	transition: color 0.18s var(--ease), text-decoration-color 0.18s var(--ease);
}

/*
 * Guarded, and this is the one that matters most: it is every link on the site.
 * A phone applies :hover on tap and never clears it, so tapping a link and
 * coming back left it stuck in its hover colour. Worse than cosmetic on the
 * hero buttons, where a:hover (0,1,1) outranks .ltl-btn's own colour (0,1,0)
 * and turned near-black button text into light cyan on a light gradient.
 *
 * :focus-visible is deliberately left outside the guard. A tablet with a
 * keyboard is a touch device that still needs a visible focus state, and
 * :focus-visible does not fire on a tap in the first place, so it cannot stick.
 */
a:focus-visible { color: #67E8F9; text-decoration-color: currentColor; }

@media (hover: hover) {
	a:hover { color: #67E8F9; text-decoration-color: currentColor; }
}

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 3px; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--f-display);
	font-weight: 700;
	font-stretch: 105%;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--text);
	margin: 0 0 0.6em;
	text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 5.4vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.1vw, 1.5rem); }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

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

blockquote {
	margin: 2rem 0;
	padding: 0.25rem 0 0.25rem 1.5rem;
	border-left: 2px solid var(--violet);
	color: var(--muted);
	font-size: 1.1rem;
}

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

code, kbd, pre, samp { font-family: var(--f-mono); font-size: 0.9em; }

code {
	background: var(--bg-inset);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 0.1em 0.38em;
	color: var(--cyan);
}

pre {
	background: var(--bg-inset);
	border: 1px solid var(--line-2);
	border-radius: var(--r);
	padding: 1.15rem 1.25rem;
	overflow-x: auto;
	line-height: 1.7;
}

pre code { background: none; border: 0; padding: 0; color: inherit; }

table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: 0.94rem; }
th, td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); vertical-align: top; }

th {
	font-family: var(--f-mono);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--faint);
	font-weight: 500;
}

::selection { background: var(--violet); color: #fff; }

/* ==========================================================================
   3. Layout
   ========================================================================== */

.ltl-wrap {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.ltl-wrap--narrow { max-width: var(--container-narrow); }

/* ---------------------------------------------------------------------------
   The rhythm, spent in one place. See the VERTICAL RHYTHM note in section 1.
   --------------------------------------------------------------------------- */

/* Zero specificity on purpose, so every rule below wins deterministically and
   nothing here depends on source order - which is how this stylesheet has lost
   before. Custom properties resolve where they are USED, so the consumer rule
   can sit anywhere in the file. The values must carry units: 0px, not 0, or the
   calc() is invalid. */
:where(.ltl-section, .ltl-cta, .ltl-footer) {
	--break:       var(--break-section);
	--bezel:       0px;
	--bezel-above: 0px;
}

/* The only place a boundary is spent, and the only place a bezel is drawn. The
   lower element owns the gap, so no boundary is ever a sum. The discount takes
   both bezels; the floor is what makes that safe. .ltl-cta is named explicitly
   because it carries neither .ltl-section nor .ltl-section--panel - it hand
   rolls the panel look - so no .ltl-section selector reaches it. */
.ltl-section, .ltl-cta, .ltl-footer {
	margin-top: max(var(--band-min), calc(var(--break) - var(--bezel) - var(--bezel-above)));
	padding-block: var(--bezel) var(--bezel-end, var(--bezel));
}

/* The footer sits OUTSIDE main, so it is not the call to action's sibling and
   no adjacent combinator can reach it. Asking what main ENDS in needs :has(),
   at (1,3,0) against .ltl-footer at (0,1,0), so it wins outright. This supplies
   the bezel the footer cannot otherwise see above itself, so the gap comes out
   at its stated value instead of overshooting by a whole bezel.

   An earlier version closed this seam completely, on the reasoning that a strip
   of --bg between --bg-2 and the darker --bg-inset reads as a hole in the
   surface. He asked for live's spacing back from the stat band down, and live
   drew the seam open, so the strip and the footer's own hairline are restored.
   Where :has() is missing the rule drops and the footer overshoots by one
   bezel, which is the safe direction to fail in. */
#ltl-main:has(> .ltl-cta:last-child) + .ltl-footer,
#ltl-main:has(> .ltl-section--panel:last-child) + .ltl-footer {
	--bezel-above: var(--bezel-box);
}

.ltl-section { position: relative; }

/* Tinted box, so it has an edge, so it has an inset. */
.ltl-section.ltl-section--panel { --bezel: var(--bezel-box); }

/* Tier overrides. --tight is kept as a synonym for --bind so existing markup
   keeps working, though its meaning moves from "less padding on both sides" to
   "bound to the thing above me". Both classes are doubled on .ltl-section on
   purpose: alone they are (0,1,0) and would tie with the consumer rule above,
   which is exactly the tie this stylesheet has lost before. */
.ltl-section.ltl-section--bind,
.ltl-section.ltl-section--tight { --break: var(--break-bind); }
.ltl-section.ltl-section--major { --break: var(--break-major); }

/* This is the whole reason a panel no longer changes how its neighbours look:
   the lower element discounts the bezel it can see above itself, so the gap
   comes out the same size whether or not a tint edge is inside it. */
.ltl-section--panel + .ltl-section,
.ltl-section--panel + .ltl-cta,
.ltl-cta + .ltl-section,
.ltl-phead + .ltl-section { --bezel-above: var(--bezel-box); }

/* A page head is not a neighbouring section, it is the title of the thing
   immediately below it, so the two are bound rather than separated. On the
   section tier that join measured 86/82/158px below the hairline, and he called
   the desktop figure huge - a heading and its own body cannot be 158px apart
   when the hairline has already done the separating. The bind tier brings it to
   50/44/82px. Every template but the home page opens .ltl-phead + .ltl-section,
   so this one rule reaches all of them; the home page opens .ltl-hero and is
   untouched. Stated separately from the --bezel-above rule above because that
   one is also about panels and calls to action, and this is only about heads. */
.ltl-phead + .ltl-section { --break: var(--break-bind); }

/* Two selectors because .ltl-rail sits between the hero and the first section
   in front-page.php. The rail is position:fixed and occupies no space, but it
   is still a DOM sibling, so the plain adjacent form never matches on the home
   page. Both forms are kept so the rule survives the rail moving or going. */
.ltl-hero + .ltl-section,
.ltl-hero + .ltl-rail + .ltl-section { --bezel-above: var(--bezel-hero); }

/* Contain the first child's margin so it cannot collapse out through main and
   move the page instead of the element. A :first-child { margin-top: 0 } rule
   was drafted and rejected: on a template opening straight into a plain section
   it would put content flush against the fixed header. */
#ltl-main { display: flow-root; }

/* Defensive. Every template but the home page opens with a .ltl-phead, so this
   should never match. If one ever opens with a bare section, a section-tier
   break would put its first line 62px from the top of the page on a phone,
   under the fixed header. The major break keeps the 100px the page has today. */
#ltl-main > .ltl-section:first-child,
#ltl-main > .ltl-cta:first-child { --break: var(--break-major); }


.ltl-section--panel {
	background:
		radial-gradient(900px 340px at 12% 0%, var(--violet-wash), transparent 70%),
		var(--bg-2);
	border-block: 1px solid var(--line);
}

.ltl-skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	background: var(--cyan);
	color: #04141A;
	padding: 0.75rem 1.25rem;
	font-family: var(--f-mono);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	border-radius: 0 0 var(--r) 0;
}

.ltl-skip-link:focus { left: 0; top: 0; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Decorative dot lattice */
.ltl-grid-bg {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.10) 1px, transparent 1px);
	background-size: 32px 32px;
	mask-image: radial-gradient(ellipse 80% 68% at 50% 24%, #000 8%, transparent 78%);
	-webkit-mask-image: radial-gradient(ellipse 80% 68% at 50% 24%, #000 8%, transparent 78%);
	pointer-events: none;
	z-index: 0;
}

/* Colour bloom behind hero / CTA */
.ltl-glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: 0.5;
	pointer-events: none;
	z-index: 0;
}

.ltl-glow--a { width: 46vw; height: 46vw; left: -10vw; top: -16vw; background: radial-gradient(circle, rgba(34, 211, 238, 0.34), transparent 66%); }
.ltl-glow--b { width: 42vw; height: 42vw; right: -12vw; top: -6vw; background: radial-gradient(circle, rgba(240, 71, 155, 0.28), transparent 66%); }
.ltl-glow--c { width: 40vw; height: 40vw; left: 32vw; bottom: -22vw; background: radial-gradient(circle, rgba(139, 92, 246, 0.30), transparent 66%); }

/* ==========================================================================
   4. Micro type
   ========================================================================== */

.ltl-mono {
	font-family: var(--f-mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--faint);
}

.ltl-kicker {
	font-family: var(--f-mono);
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--cyan);
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin: 0 0 1.3rem;
}

.ltl-kicker::before {
	content: "";
	width: 26px;
	height: 1px;
	background: var(--grad-2);
	flex: none;
}

.ltl-tag,
.ltl-badge {
	display: inline-block;
	font-family: var(--f-mono);
	font-size: 0.66rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 500;
	line-height: 1.35;
	padding: 0.3rem 0.65rem;
	border-radius: 999px;
	color: var(--lime);
	background: var(--lime-wash);
	border: 1px solid rgba(163, 230, 53, 0.3);
	white-space: normal;
}

.ltl-tag--neutral {
	color: var(--muted);
	background: rgba(255, 255, 255, 0.03);
	border-color: var(--line-2);
}

/* Metadata rows */
.ltl-meta { margin: 0; display: grid; }

.ltl-meta__row {
	display: grid;
	grid-template-columns: minmax(86px, 128px) 1fr;
	gap: 0.35rem 1.2rem;
	padding-block: 0.65rem;
	border-top: 1px solid var(--line);
	align-items: baseline;
}

.ltl-meta__row:last-child { border-bottom: 1px solid var(--line); }

.ltl-meta__key {
	font-family: var(--f-mono);
	font-size: 0.66rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--faint);
	font-weight: 500;
}

.ltl-meta__val { color: var(--text); font-size: 0.94rem; margin: 0; }

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.ltl-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--f-mono);
	font-size: 0.76rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 0.9rem 1.5rem;
	border-radius: 999px;
	border: 0;
	background: var(--grad);
	background-size: 220% 100%;
	color: #05060C;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

/*
 * Hover is guarded, focus is not, and the two are split on purpose.
 *
 * A phone has no pointer to move away, so a browser applies :hover on tap and
 * leaves it applied: tap a button, come back with the back arrow, and it is
 * still lit. (hover: hover) is false on every touch primary input, which is
 * the precise question to ask. :focus-visible stays outside the guard, because
 * a tablet with a keyboard attached is a touch device that still needs a
 * visible focus ring.
 */
.ltl-btn:focus-visible {
	color: #05060C;
	transform: translateY(-2px);
	box-shadow: 0 10px 34px rgba(139, 92, 246, 0.34);
}

@media (hover: hover) {
	.ltl-btn:hover {
		color: #05060C;
		transform: translateY(-2px);
		box-shadow: 0 10px 34px rgba(139, 92, 246, 0.34);
	}
}

.ltl-btn--ghost {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--line-2);
	color: var(--text);
	box-shadow: none;
}

/* "About the Lab" in the hero is this one. Same split as above. */
.ltl-btn--ghost:focus-visible {
	color: var(--cyan);
	border-color: rgba(34, 211, 238, 0.5);
	background: var(--cyan-wash);
	box-shadow: none;
}

@media (hover: hover) {
	.ltl-btn--ghost:hover {
		color: var(--cyan);
		border-color: rgba(34, 211, 238, 0.5);
		background: var(--cyan-wash);
		box-shadow: none;
	}
}

.ltl-btn__arrow { transition: transform 0.18s var(--ease); }

@media (hover: hover) {
	.ltl-btn:hover .ltl-btn__arrow { transform: translateX(3px); }
}

.ltl-more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--f-mono);
	font-size: 0.72rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--cyan);
	text-decoration: none;
	white-space: nowrap;
}

.ltl-more span { transition: transform 0.18s var(--ease); }
@media (hover: hover) {
	.ltl-more:hover span { transform: translateX(4px); }
}

/* ==========================================================================
   6. Floating pill header
   ========================================================================== */

.ltl-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding: 0.9rem var(--gutter);
	pointer-events: none;
}

.ltl-header__inner {
	position: relative;
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: 1.25rem;
	max-width: var(--container);
	margin-inline: auto;
	padding: 0.55rem 0.7rem 0.55rem 1.15rem;
	border-radius: 999px;
	background: rgba(8, 8, 14, 0.74);
	backdrop-filter: blur(16px) saturate(150%);
	-webkit-backdrop-filter: blur(16px) saturate(150%);
}

/* Animated gradient hairline around the pill */
.ltl-header__inner::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(90deg, var(--cyan), var(--violet), var(--magenta), var(--cyan));
	background-size: 300% 100%;
	animation: ltl-slide 9s linear infinite;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	opacity: 0.85;
}

@keyframes ltl-slide { to { background-position: 300% 0; } }

.ltl-brand {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	color: var(--text);
	margin-right: auto;

	/*
	 * Shrinkable, not fixed. With flex: none the brand could never yield, so
	 * once the row ran out of room the controls were pushed straight out of the
	 * rounded pill - the language switcher hung 21px past its right edge
	 * between roughly 400 and 425px wide. Letting the brand give way, and its
	 * name ellipsis as the very last resort, makes the overflow impossible at
	 * any width rather than at the widths a breakpoint happens to cover.
	 */
	flex: 0 1 auto;
	min-width: 0;
}

@media (hover: hover) {
	.ltl-brand:hover { color: var(--text); }
}
.ltl-brand__mark { flex: none; }

.ltl-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
	min-width: 0;
	overflow: hidden;
}

.ltl-brand__name {
	font-family: var(--f-display);
	font-size: 1.02rem;
	font-weight: 700;
	font-stretch: 108%;
	letter-spacing: 0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ltl-brand__sub {
	font-family: var(--f-mono);
	font-size: 0.56rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--faint);
	margin-top: 0.25rem;
}

.ltl-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.2rem; }
.ltl-nav li { margin: 0; position: relative; }

.ltl-nav a {
	font-size: 0.86rem;
	color: var(--muted);
	text-decoration: none;
	padding: 0.5rem 0.75rem;
	border-radius: 999px;
	display: block;
	transition: color 0.18s var(--ease), background 0.18s var(--ease);
	white-space: nowrap;
}

/*
 * Georgian carries roughly twice the letters of English in this menu - 65
 * characters against 33 for the same six items - so at the shared size the row
 * measured 734px against English's 399px and swallowed the bar. Tightening the
 * type recovers about 110px of that. The rest is simply more letters, and
 * shrinking further would cost legibility for no real gain, so the Georgian
 * menu also folds into the burger earlier than the English one does.
 * Sized at 0.91 of the Latin face, which Georgian's tall x-height carries well.
 */
.ltl-nav a:lang(ka) { font-size: 0.78rem; padding-inline: 0.45rem; }

@media (hover: hover) {
	.ltl-nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
}

.ltl-nav .current-menu-item > a,
.ltl-nav .current_page_item > a,
.ltl-nav .current-menu-parent > a,
.ltl-nav .current-menu-ancestor > a {
	color: var(--text);
	background: linear-gradient(180deg, var(--violet-wash), rgba(139, 92, 246, 0.04));
	box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.34);
}

.ltl-nav .sub-menu {
	display: none;
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 0;
	min-width: 210px;
	flex-direction: column;
	gap: 0;
	background: rgba(12, 13, 20, 0.97);
	backdrop-filter: blur(14px);
	border: 1px solid var(--line-2);
	border-radius: var(--r-lg);
	padding: 0.4rem;
	box-shadow: 0 22px 50px rgba(0, 0, 0, 0.6);
}

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

.ltl-nav .sub-menu a { border-radius: var(--r); }

/* Language switcher */
.ltl-lang {
	display: flex;
	align-items: center;
	gap: 0.1rem;
	list-style: none;
	margin: 0;
	padding: 0.15rem;
	border: 1px solid var(--line-2);
	border-radius: 999px;
	flex: none;
}

.ltl-lang li { margin: 0; }

.ltl-lang a, .ltl-lang span {
	display: block;
	font-family: var(--f-mono);
	font-size: 0.6rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 0.26rem 0.52rem;
	border-radius: 999px;
	text-decoration: none;
	color: var(--faint);
	transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

@media (hover: hover) {
	.ltl-lang a:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
}

/* Active language marker: cyan into violet, no pink. */
.ltl-lang .current-lang > a,
.ltl-lang .current-lang > span {
	background: linear-gradient(92deg, var(--cyan), var(--violet));
	color: #05060C;
}

.ltl-lang img { display: none; }

/* A language with no translation of this page: shown, so the control never
   vanishes, but dimmed and not clickable, so it never promises a page that
   does not exist. */
.ltl-lang li.is-untranslated span {
	opacity: 0.38;
	cursor: not-allowed;
}

.ltl-burger {
	display: none;
	flex: none;
	width: 40px; height: 40px;
	align-items: center; justify-content: center;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--line-2);
	border-radius: 999px;
	color: var(--text);
	cursor: pointer;
	padding: 0;
}

@media (hover: hover) {
	.ltl-burger:hover { border-color: rgba(34, 211, 238, 0.5); color: var(--cyan); }
}
.ltl-burger__bars { display: block; width: 17px; height: 11px; position: relative; }

.ltl-burger__bars::before,
.ltl-burger__bars::after,
.ltl-burger__bars span {
	content: "";
	position: absolute; left: 0; right: 0;
	height: 1.5px;
	background: currentColor;
	transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}

.ltl-burger__bars::before { top: 0; }
.ltl-burger__bars span { top: 4.75px; }
.ltl-burger__bars::after { bottom: 0; }

.ltl-burger[aria-expanded="true"] .ltl-burger__bars::before { transform: translateY(4.75px) rotate(45deg); }
.ltl-burger[aria-expanded="true"] .ltl-burger__bars span { opacity: 0; }
.ltl-burger[aria-expanded="true"] .ltl-burger__bars::after { transform: translateY(-4.75px) rotate(-45deg); }

/* ==========================================================================
   7. Right-hand section index
   ========================================================================== */

.ltl-rail {
	position: fixed;
	right: 1.1rem;
	top: 50%;
	transform: translateY(-50%);
	z-index: 60;
	display: none;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.1rem;
}

@media (min-width: 1340px) { .ltl-rail { display: flex; } }

.ltl-rail a {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.55rem;
	font-family: var(--f-mono);
	font-size: 0.6rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--faint);
	text-decoration: none;
	padding: 0.28rem 0;
	transition: color 0.22s var(--ease);
}

.ltl-rail a::after {
	content: "";
	width: 13px;
	height: 1px;
	background: currentColor;
	transition: width 0.28s var(--ease);
	flex: none;
}

@media (hover: hover) {
	.ltl-rail a:hover { color: var(--text); }
}
@media (hover: hover) {
	.ltl-rail a:hover::after { width: 22px; }
}
.ltl-rail a.is-active { color: var(--lime); }
.ltl-rail a.is-active::after { width: 32px; }

/* ==========================================================================
   8. Hero
   ========================================================================== */

.ltl-hero {
	position: relative;
	overflow: hidden;
	/* Top padding is composition, not a boundary: it clears the fixed header
	   pill and it is settled. Rewritten only because 9.5vw did not pass 6rem
	   until about 1010px, so a 900px laptop got phone spacing above the
	   wordmark while 1440 got 120. The bottom is now a bezel like every other
	   box, so the stat band below can discount it. With the domain line gone
	   the buttons are last in the hero, and this is the space beneath them:
	   40/51/68 against the 44/45/72 that sat under the domain line. */
	padding-block: clamp(6rem, 5.44rem + 2.29vw, 7.5rem) var(--bezel-hero);
	border-bottom: 1px solid var(--line);
	text-align: center;
}

.ltl-hero__inner { position: relative; z-index: 2; max-width: 1000px; margin-inline: auto; }

/* Node network sits above the wordmark, in normal flow, so the two never
   collide the way an absolutely positioned canvas did. */
.ltl-hero__canvas {
	width: min(560px, 84vw);
	/*
	 * Shorter than it was, 170px down to 130px at a laptop width. The credit
	 * plate now sits directly above it at the same width, and with the status
	 * strip back on desktop the hero had run 36px past the fold. This is the
	 * cheapest 40px on the page: the node network is decoration, and the
	 * alternative was shrinking the site's own name.
	 */
	height: clamp(96px, 11vw, 130px);
	margin: 0 auto clamp(0.75rem, 1.4vw, 1rem);
	opacity: 0.9;
	pointer-events: none;
}

/* Live status strip - fed by real content counts */
.ltl-statline {
	position: relative;
	z-index: 2;
	font-family: var(--f-mono);
	font-size: clamp(0.6rem, 1.1vw, 0.72rem);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--lime);
	margin: 0 0 1.2rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.35rem 0.9rem;
}

.ltl-statline__sep { color: var(--line-3); }
.ltl-statline__dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--lime);
	align-self: center;
	box-shadow: 0 0 10px var(--lime);
	animation: ltl-pulse 2.4s ease-in-out infinite;
}

@keyframes ltl-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.35; transform: scale(0.8); }
}

/* Oversized gradient wordmark */
.ltl-wordmark {
	font-family: var(--f-display);
	font-weight: 800;
	font-stretch: 115%;
	/*
	 * Capped at 6.25rem, not 7rem. Measured in real Archivo at 115% width:
	 * "LEGALTECH LAB" needs 1062px at 112px against .ltl-hero__inner's 1000px, so
	 * it was silently wrapping to two lines on every desktop and costing the hero
	 * 103px. At 100px it needs 948px and sits on one line with 52px to spare,
	 * which is enough margin for font metrics to differ across platforms.
	 * The 9vw term is unchanged, so nothing below about 1111px moves.
	 */
	font-size: clamp(2.4rem, 9vw, 6.25rem);
	line-height: 0.92;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	margin: 0 0 1.1rem;
	/* The wordmark alone uses the softer pink; everything else uses the full
	   strength --magenta. */
	background: linear-gradient(96deg, var(--cyan) 0%, var(--violet) 34%, var(--magenta-soft) 58%, var(--cyan) 100%);
	background-size: 220% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: ltl-slide 14s linear infinite;
	text-wrap: balance;
}

/* Georgian sits taller; ease the tracking so it does not crowd */
.ltl-wordmark:lang(ka) { letter-spacing: -0.005em; font-stretch: 100%; font-size: clamp(2rem, 7.6vw, 5.6rem); }

.ltl-hero__sub {
	font-family: var(--f-display);
	font-weight: 600;
	font-size: clamp(1.05rem, 2.3vw, 1.6rem);
	line-height: 1.32;
	letter-spacing: -0.01em;
	margin: 0 auto 1.5rem;
	max-width: 34ch;
	background: var(--grad-2);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* His instruction, 2026-09-04: slightly smaller in Georgian. The two languages
   were set at exactly the same size, but the Georgian sentence is half again as
   long as the English one and Georgian letters carry no capitals to break the
   run, so it took three lines where the English takes two and read as the
   loudest thing under the wordmark. About 10% down, the same easing already
   applied to `.ltl-wordmark:lang(ka)` and `.ltl-nav a:lang(ka)` above.

   `max-width` is left in `ch`, which is measured in the current font, so the
   column narrows with the text and the line count is unchanged by design - he
   asked for smaller type, not for a reflow. Widen the measure here if he ever
   asks for two lines. */
.ltl-hero__sub:lang(ka) { font-size: clamp(0.95rem, 2.05vw, 1.44rem); }

/*
 * The lab's one-sentence description. It lives in the page body, below the stat
 * band, where there is room to set it as a standing statement - and it is also
 * printed here in the hero, above the buttons, for phones only.
 *
 * The duplication is deliberate and exactly one copy is ever rendered: on a
 * phone the body copy is hidden and this shows, above the buttons where he
 * asked for it; from 721px up this is hidden and the body copy shows. On a
 * narrow screen the sentence has to be read before the buttons make sense, and
 * putting it below the stat band there would push the buttons off the first
 * screen. display:none rather than visibility, so the hidden copy is out of the
 * accessibility tree too and a screen reader never hears it twice.
 */
.ltl-hero__lede {
	display: none;
	font-size: clamp(0.98rem, 1.5vw, 1.1rem);
	line-height: 1.72;
	color: var(--muted);
	max-width: 66ch;
	margin: 0 auto var(--space-4);
}

@media (max-width: 720px) {
	.ltl-hero__lede { display: block; }
	.ltl-section--intro { display: none; }
}

/*
 * The sentence, at the widths where it stands in the page body, is a lone
 * centred statement between two drawn lines: the stat card's bottom border
 * above it, the pillars panel's top border below.
 *
 * The rest of the page spaces content to content, which is right everywhere
 * else, but it left this sentence sitting low. The pillars panel's own inset
 * lives INSIDE its top border, so it separates that panel's heading from the
 * line without putting any distance between the line and the sentence. He read
 * it as closer to the section above and he was right, by 21px at 1440.
 *
 * So this one element owns both of its gaps and the section below stands down.
 * The height is not increased: live spent three helpings of its --tight padding
 * here (52 below the stat band, 52 above the sentence, 52 below it, so the
 * sentence sat 104 from the line above and 52 from the line below at 1440).
 * That same total is split evenly instead, one and a half helpings each side.
 *
 * Scoped to min-width so it exists only where the sentence does. Below 720px
 * the body copy is hidden and the hero prints it instead, and the section below
 * has to keep its own margin or it would butt against the stat band.
 */
@media (min-width: 721px) {
	/* Doubled to (0,2,0) so it beats the shared consumer rule at (0,1,0)
	   outright. A single class would tie with it and be decided by source
	   order, which is the tie this stylesheet has lost before. */
	.ltl-section.ltl-section--intro {
		margin-block: calc(clamp(2rem, 4vw, 3.25rem) * 1.5);   /* 48 / 49 / 78 */
	}

	/* Adjacent margins collapse to the larger of the two, so zeroing this hands
	   the boundary to the sentence's own margin-bottom. */
	.ltl-section--intro + .ltl-section { margin-top: 0; }
}

.ltl-hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }

/* ==========================================================================
   9. Stat band
   ========================================================================== */

.ltl-stats {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--space-3) var(--space-2);
	padding: var(--space-4) clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008));
	backdrop-filter: blur(8px);
}

.ltl-stat { text-align: center; }

.ltl-stat__num {
	font-family: var(--f-display);
	font-weight: 800;
	font-stretch: 110%;
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	line-height: 1;
	letter-spacing: -0.03em;
	display: block;
	margin-bottom: 0.5rem;
}

.ltl-stat:nth-child(6n + 1) .ltl-stat__num { color: var(--cyan); }
.ltl-stat:nth-child(6n + 2) .ltl-stat__num { color: var(--amber); }
.ltl-stat:nth-child(6n + 3) .ltl-stat__num { color: var(--lime); }
.ltl-stat:nth-child(6n + 4) .ltl-stat__num { color: var(--magenta); }
.ltl-stat:nth-child(6n + 5) .ltl-stat__num { color: var(--violet); }
.ltl-stat:nth-child(6n + 6) .ltl-stat__num { color: #38BDF8; }

.ltl-stat__label {
	font-family: var(--f-mono);
	font-size: 0.63rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	display: block;
	line-height: 1.5;
}

.ltl-stat__note { font-size: 0.7rem; color: var(--faint); display: block; margin-top: 0.3rem; }

/* ==========================================================================
   10. Numbered section headers
   ========================================================================== */

.ltl-shead { margin-bottom: var(--space-4); }

.ltl-shead__top {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem;
	margin-bottom: 1.1rem;
	min-height: 46px;
}

/* Watermark numeral, offset up-left so the index disc reads as sitting on
   top of it rather than repeating it. */
.ltl-shead__ghost {
	position: absolute;
	left: 1.15rem;
	top: -0.3em;
	font-family: var(--f-display);
	font-weight: 800;
	font-stretch: 120%;
	font-size: clamp(3.2rem, 6.5vw, 5rem);
	line-height: 1;
	letter-spacing: -0.05em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, 0.075);
	pointer-events: none;
	z-index: 0;
	user-select: none;
}

.ltl-shead__glyph {
	position: relative;
	z-index: 1;
	width: 44px; height: 44px;
	flex: none;
	border-radius: 50%;
	border: 1px solid var(--line-2);
	background: rgba(7, 7, 12, 0.85);
	display: grid;
	place-items: center;
	color: var(--cyan);
}

.ltl-shead__glyph svg { width: 18px; height: 18px; }

.ltl-shead__title {
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: clamp(1.5rem, 3.2vw, 2.2rem);
	background: var(--grad-2);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ltl-shead__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 2rem;
}

.ltl-shead__lede { color: var(--muted); font-size: 1rem; margin: 0; max-width: 62ch; }

/* ==========================================================================
   11. Cards
   ========================================================================== */

.ltl-grid { display: grid; gap: var(--space-3); }
.ltl-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }
.ltl-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.ltl-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }

/* Pin to four columns on wide screens so eight pillars fill two clean rows
   instead of leaving orphans in a five-column auto-fit. */
@media (min-width: 1024px) {
	.ltl-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ltl-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	background: var(--bg-3);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 1.5rem;
	overflow: hidden;
	transition: border-color 0.22s var(--ease), background 0.22s var(--ease), transform 0.22s var(--ease);
}

/* Gradient hairline that ignites on hover */
.ltl-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: var(--grad);
	background-size: 200% 100%;
	opacity: 0;
	transition: opacity 0.25s var(--ease);
}

@media (hover: hover) {
	.ltl-card:hover {
		border-color: var(--line-2);
		background: var(--bg-4);
		transform: translateY(-3px);
	}
}

@media (hover: hover) {
	.ltl-card:hover::before { opacity: 1; }
}

.ltl-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

.ltl-card__title { font-size: 1.2rem; line-height: 1.28; margin: 0; }
.ltl-card__title a { color: var(--text); text-decoration: none; }
@media (hover: hover) {
	.ltl-card__title a:hover { color: var(--cyan); }
}

.ltl-card__excerpt { color: var(--muted); font-size: 0.93rem; margin: 0; }

.ltl-card__foot {
	margin-top: auto;
	padding-top: 0.4rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.7rem;
}

.ltl-card__thumb {
	margin: -1.5rem -1.5rem 0;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--bg-inset);
	border-bottom: 1px solid var(--line);
}

.ltl-card__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Whole-block hit area.
   The overlay sits ABOVE the content so the pointer cursor and the click
   apply anywhere on the block, not just on the headline. The only nested
   link inside these blocks is the title, which points at the same URL, so
   nothing becomes unreachable. */
.ltl-card__link {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	z-index: 2;
	cursor: pointer;
}

.ltl-card > *:not(.ltl-card__link),
.ltl-pub > *:not(.ltl-card__link),
.ltl-news > *:not(.ltl-card__link),
.ltl-person > *:not(.ltl-card__link) { position: relative; z-index: 1; }

/* The pointer now rests on the overlay rather than the title anchor, so the
   title highlight has to come from hovering the block. */
@media (hover: hover) {
	.ltl-card:hover .ltl-card__title a, .ltl-pub:hover .ltl-pub__title a, .ltl-news:hover .ltl-news__title a, .ltl-person:hover .ltl-person__name a { color: var(--cyan); }
}

/* --- Focus / pillar cards --- */
.ltl-focus {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--space-3) 1.4rem;
	background: var(--bg-3);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: background 0.22s var(--ease), border-color 0.22s var(--ease), transform 0.22s var(--ease);
}

.ltl-focus::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background: var(--grad);
	background-size: 200% 100%;
	opacity: 0.42;
	transition: opacity 0.25s var(--ease);
}

@media (hover: hover) {
	.ltl-focus:hover { background: var(--bg-4); border-color: var(--line-2); transform: translateY(-3px); }
}
@media (hover: hover) {
	.ltl-focus:hover::before { opacity: 1; }
}

.ltl-focus__num {
	font-family: var(--f-mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	font-weight: 600;
	color: var(--cyan);
}

.ltl-focus:nth-child(4n + 2) .ltl-focus__num { color: var(--violet); }
.ltl-focus:nth-child(4n + 3) .ltl-focus__num { color: var(--magenta); }
.ltl-focus:nth-child(4n + 4) .ltl-focus__num { color: var(--lime); }

.ltl-focus__title { font-size: 1.04rem; line-height: 1.3; margin: 0; font-weight: 700; }
.ltl-focus__desc { color: var(--muted); font-size: 0.88rem; margin: 0; line-height: 1.58; }

/* --- Publication rows ---
   Rows carry inline padding so the hover highlight has breathing room around
   the text; the list is pulled out by the same amount so the text still lines
   up with the section heading above it. */
.ltl-publist { display: grid; margin-inline: -0.9rem; }

.ltl-pub {
	position: relative;
	display: grid;
	grid-template-columns: 80px 1fr auto;
	gap: 0.5rem 1.6rem;
	align-items: baseline;
	padding: 1.5rem 0.9rem;
	border-top: 1px solid var(--line);
	transition: background 0.2s var(--ease);
}

.ltl-publist .ltl-pub:last-child { border-bottom: 1px solid var(--line); }
@media (hover: hover) {
	.ltl-pub:hover { background: linear-gradient(90deg, var(--violet-wash), transparent 72%); }
}

.ltl-pub__year {
	font-family: var(--f-mono);
	font-size: 0.85rem;
	color: var(--cyan);
	font-weight: 600;
	letter-spacing: 0.04em;
}

.ltl-pub__body { min-width: 0; }
.ltl-pub__title { font-size: 1.12rem; line-height: 1.34; margin: 0 0 0.4rem; }
.ltl-pub__title a { color: var(--text); text-decoration: none; }
@media (hover: hover) {
	.ltl-pub__title a:hover { color: var(--cyan); }
}
.ltl-pub__venue { color: var(--muted); font-size: 0.9rem; margin: 0; }
.ltl-pub__aside { display: flex; align-items: center; gap: 0.5rem; flex: none; }

@media (max-width: 720px) {
	.ltl-pub { grid-template-columns: 1fr; gap: 0.5rem; }
	.ltl-pub__aside { order: -1; }
}

/* --- News rows (same inset treatment as publication rows) --- */
.ltl-newslist { margin-inline: -0.9rem; }

.ltl-news {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	/* The inline 0.9rem is pinned: .ltl-newslist cancels it with
	   margin-inline: -0.9rem, so only the block axis is in scope here. */
	padding: var(--space-3) 0.9rem;
	border-top: 1px solid var(--line);
	transition: background 0.2s var(--ease);
}

.ltl-newslist .ltl-news:last-child { border-bottom: 1px solid var(--line); }
@media (hover: hover) {
	.ltl-news:hover { background: linear-gradient(90deg, var(--cyan-wash), transparent 72%); }
}

.ltl-news__date {
	font-family: var(--f-mono);
	font-size: 0.68rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--faint);
}

.ltl-news__title { font-size: 1.1rem; line-height: 1.34; margin: 0; }
.ltl-news__title a { color: var(--text); text-decoration: none; }
@media (hover: hover) {
	.ltl-news__title a:hover { color: var(--cyan); }
}
.ltl-news__excerpt { color: var(--muted); font-size: 0.92rem; margin: 0; }

/* --- People --- */
.ltl-person {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	background: var(--bg-3);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 1.5rem;
	overflow: hidden;
	transition: border-color 0.22s var(--ease), background 0.22s var(--ease), transform 0.22s var(--ease);
}

.ltl-person::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: var(--grad);
	opacity: 0;
	transition: opacity 0.25s var(--ease);
}

@media (hover: hover) {
	.ltl-person:hover { border-color: var(--line-2); background: var(--bg-4); transform: translateY(-3px); }
}
@media (hover: hover) {
	.ltl-person:hover::before { opacity: 1; }
}

.ltl-person__photo {
	width: 74px; height: 74px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--bg-inset);
	border: 1px solid var(--line-2);
	flex: none;
}

.ltl-person__photo img { width: 100%; height: 100%; object-fit: cover; }

.ltl-person__initials {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--f-display);
	font-weight: 800;
	font-size: 1.5rem;
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ltl-person__name { font-size: 1.14rem; margin: 0 0 0.2rem; }
.ltl-person__name a { color: var(--text); text-decoration: none; }
@media (hover: hover) {
	.ltl-person__name a:hover { color: var(--cyan); }
}

.ltl-person__role {
	font-family: var(--f-mono);
	font-size: 0.68rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--lime);
	margin: 0 0 0.3rem;
}

.ltl-person__affil { color: var(--faint); font-size: 0.86rem; margin: 0; }
.ltl-person__bio { color: var(--muted); font-size: 0.92rem; margin: 0; }

/* --- Partners --- */
.ltl-partners { display: flex; flex-wrap: wrap; gap: 0.7rem; list-style: none; margin: 0; padding: 0; }

.ltl-partner {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1rem 1.2rem;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--bg-3);
	text-decoration: none;
	color: var(--text);
	transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
	flex: 1 1 240px;
}

@media (hover: hover) {
	.ltl-partner:hover { border-color: rgba(34, 211, 238, 0.45); background: var(--bg-4); color: var(--text); }
}

.ltl-partner__name { font-family: var(--f-display); font-size: 1rem; font-weight: 700; line-height: 1.3; }
.ltl-partner__kind { font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint); }

/* ==========================================================================
   12. Terminal panel
   ========================================================================== */

.ltl-term {
	border: 1px solid var(--line-2);
	border-radius: var(--r-lg);
	overflow: hidden;
	background: #06060C;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.ltl-term__bar {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.7rem 1rem;
	border-bottom: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.022);
}

.ltl-term__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ltl-term__dot--r { background: #FF5F57; }
.ltl-term__dot--y { background: #FEBC2E; }
.ltl-term__dot--g { background: #28C840; }

.ltl-term__title {
	font-family: var(--f-mono);
	font-size: 0.64rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--faint);
	margin-left: 0.5rem;
}

.ltl-term__body {
	padding: 1.15rem 1.25rem;
	font-family: var(--f-mono);
	font-size: 0.8rem;
	line-height: 2;
	overflow-x: auto;
}

.ltl-term__line { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.55rem; white-space: pre; color: var(--muted); }
.ltl-term__mark { color: var(--faint); }
.ltl-term__line--in { color: var(--magenta); }
.ltl-term__line--in .ltl-term__mark { color: var(--magenta); }
.ltl-term__line--ok { color: var(--lime); }
.ltl-term__line--ok .ltl-term__mark { color: var(--lime); }
.ltl-term__line--key { color: var(--cyan); }
.ltl-term__line--key .ltl-term__mark { color: var(--cyan); }

/* ==========================================================================
   13. CTA
   ========================================================================== */

.ltl-cta {
	position: relative;
	overflow: hidden;
	border-block: 1px solid var(--line);
	background: var(--bg-2);
	--break: var(--break-major);
	--bezel: var(--bezel-box);
}

.ltl-cta__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.ltl-cta__text { max-width: 56ch; }

.ltl-cta h2 {
	margin-bottom: var(--space-1);
	background: var(--grad);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: ltl-slide 14s linear infinite;
}

.ltl-cta p { color: var(--muted); margin: 0; }

/* ==========================================================================
   14. Page / archive headers
   ========================================================================== */

.ltl-phead {
	position: relative;
	overflow: hidden;
	/* Same treatment as the hero, standard bezel: the bottom was already
	   28/29/44, which is --space-4 to within 2px. The section below discounts
	   it through the --bezel-above rule. Top padding untouched. */
	padding-block: clamp(6rem, 11vw, 8.5rem) var(--bezel-box);
	border-bottom: 1px solid var(--line);
}

.ltl-phead__inner { position: relative; z-index: 2; max-width: 900px; }

.ltl-phead h1 {
	margin-bottom: 1rem;
	font-size: clamp(2rem, 5.6vw, 3.6rem);
	background: linear-gradient(96deg, var(--cyan), var(--violet) 42%, var(--magenta) 70%, var(--cyan));
	background-size: 220% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: ltl-slide 16s linear infinite;
}

/* His instruction, 2026-09-04: the page headline reads too large in Georgian.
   It was set identically in both languages - he guessed that himself and was
   right - so the weight comes from length, not from size. Georgian words are
   long, the script has no capitals to break a run, and its letters carry more
   ink per line than Latin ones, so the same clamp() lands heavier.

   About 9% down, matching the easing already applied to `.ltl-wordmark:lang(ka)`,
   `.ltl-nav a:lang(ka)` and `.ltl-hero__sub:lang(ka)`. This is the fourth member
   of that set - **follow it rather than inventing a fifth approach.**

   The landing page is deliberately untouched: it has no `.ltl-phead` at all, it
   opens with `.ltl-hero`, so this selector cannot reach it. He asked for it to
   be left alone. */
.ltl-phead h1:lang(ka) { font-size: clamp(1.8rem, 5.1vw, 3.28rem); }

.ltl-phead__lede { color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.12rem); max-width: 64ch; margin: 0; }

/* .ltl-hero__actions centres its buttons, which is right on the home page,
   where the whole hero is centred. A page head is left aligned - kicker, title
   and lede all start at the gutter - so the same rule left the one button on
   Partner with us stranded in the middle of the column with nothing above it to
   line up against. Stated at (0,2,0) so it beats the base rule on specificity
   rather than on source order. Partner with us is the only page in either
   language with a head button, so this rule reaches exactly those two pages. */
.ltl-phead .ltl-hero__actions { justify-content: flex-start; }

.ltl-breadcrumb {
	font-family: var(--f-mono);
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--faint);
	margin-bottom: 1.2rem;
	display: flex;
	align-items: center;
	gap: 0.55rem;
	flex-wrap: wrap;
}

.ltl-breadcrumb a { color: var(--faint); text-decoration: none; }
@media (hover: hover) {
	.ltl-breadcrumb a:hover { color: var(--cyan); }
}
.ltl-breadcrumb__sep { color: var(--line-3); }

/* ==========================================================================
   15. Prose
   ========================================================================== */

.ltl-prose { max-width: var(--prose); font-size: 1.03rem; line-height: 1.78; color: var(--text-2); }

.ltl-prose > * + * { margin-top: 1.3em; }
.ltl-prose h2 { margin-top: 2em; font-size: clamp(1.4rem, 2.6vw, 1.8rem); }
.ltl-prose h3 { margin-top: 2em; font-size: 1.22rem; color: var(--cyan); }
.ltl-prose h2:first-child, .ltl-prose h3:first-child { margin-top: 0; }
.ltl-prose > h2 + *, .ltl-prose > h3 + * { margin-top: 0.8em; }
.ltl-prose img, .ltl-prose figure { border-radius: var(--r-lg); }
.ltl-prose figcaption { font-family: var(--f-mono); font-size: 0.78rem; color: var(--faint); margin-top: 0.6rem; }
.ltl-prose strong { color: var(--text); font-weight: 600; }
.ltl-prose ul, .ltl-prose ol { padding-left: 1.4em; }
.ltl-prose li::marker { color: var(--violet); }
.ltl-prose--wide { max-width: none; }

.ltl-single {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.ltl-single__aside { position: sticky; top: 130px; display: grid; gap: 1.75rem; }
.ltl-aside__block { display: grid; gap: 0.75rem; }

.ltl-aside__title {
	font-family: var(--f-mono);
	font-size: 0.66rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--faint);
	margin: 0;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--line);
}

@media (max-width: 980px) {
	.ltl-single { grid-template-columns: minmax(0, 1fr); }
	.ltl-single__aside { position: static; }
}

.ltl-abstract {
	position: relative;
	background: var(--bg-2);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 1.5rem 1.7rem;
	margin: 0 0 2rem;
	max-width: var(--prose);
	overflow: hidden;
}

.ltl-abstract::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 2px;
	background: var(--grad);
}

.ltl-abstract__label {
	font-family: var(--f-mono);
	font-size: 0.66rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--cyan);
	margin: 0 0 0.75rem;
	font-weight: 500;
}

.ltl-abstract p { color: var(--muted); margin-bottom: 0.9em; }
.ltl-abstract p:last-child { margin-bottom: 0; }

.ltl-keywords { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }

/* ==========================================================================
   16. Pagination / post nav
   ========================================================================== */

.ltl-pagination { margin-top: 3.5rem; display: flex; justify-content: center; }
.ltl-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.ltl-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 0.7rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-family: var(--f-mono);
	font-size: 0.78rem;
	color: var(--muted);
	text-decoration: none;
	transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}

@media (hover: hover) {
	.ltl-pagination .page-numbers:hover { border-color: rgba(34, 211, 238, 0.5); color: var(--cyan); }
}
.ltl-pagination .page-numbers.current { background: var(--grad); border-color: transparent; color: #05060C; }

.ltl-postnav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1rem;
	margin-top: 3.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--line);
}

.ltl-postnav__item {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.2rem 1.35rem;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	text-decoration: none;
	color: var(--text);
	background: var(--bg-3);
	transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}

@media (hover: hover) {
	.ltl-postnav__item:hover { border-color: var(--line-2); background: var(--bg-4); color: var(--text); }
}
.ltl-postnav__item--next { text-align: right; }

.ltl-postnav__label {
	font-family: var(--f-mono);
	font-size: 0.64rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--faint);
}

.ltl-postnav__title { font-family: var(--f-display); font-size: 1.02rem; font-weight: 700; line-height: 1.32; }

/* ==========================================================================
   17. Footer
   ========================================================================== */

.ltl-footer {
	position: relative;
	background: var(--bg-inset);
	border-top: 1px solid var(--line);
	/* Its own value, not the major break: live put 148px between the call to
	   action and the footer, and he asked for live's spacing back from the stat
	   band down, so this reproduces it rather than inheriting the 176 that sits
	   above the call to action. */
	--break: clamp(5.75rem, 11.2vw, 9.25rem);   /*  92 /  92 / 148 */
	--bezel: var(--bezel-hero);
	--bezel-end: var(--space-4);   /* the page's last edge, outside every boundary */
	overflow: hidden;
}

.ltl-footer__top {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(260px, 1.7fr) 1fr 1fr;
	gap: 2.5rem;
	padding-bottom: 3rem;
	border-bottom: 1px solid var(--line);
}

.ltl-footer__about p { color: var(--muted); font-size: 0.92rem; max-width: 42ch; margin: 1rem 0 0; }

.ltl-footer__col h3 {
	font-family: var(--f-mono);
	font-size: 0.66rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--faint);
	font-weight: 500;
	margin-bottom: 1rem;
}

.ltl-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.ltl-footer__col li { margin: 0; }
.ltl-footer__col a { color: var(--muted); text-decoration: none; font-size: 0.9rem; }
@media (hover: hover) {
	.ltl-footer__col a:hover { color: var(--cyan); }
}

.ltl-footer__bottom { position: relative; z-index: 2; padding-top: 1.75rem; }

/*
 * The two footer notes: the funder acknowledgement left, the institutional
 * disclaimer right, stacking on a phone with the funder first.
 *
 * Equal columns, and that is the proportion he asked me to get right. The
 * right note is 357 characters against the left's 232, so on text alone the
 * right would run longer, but the left carries the marks and their margin
 * above it, which is worth about 50px. Measured, those two effects very nearly
 * cancel at equal width: 112px against 103px at 1440. A first attempt at
 * 1fr 1.2fr over-corrected and made the LEFT the taller one by 30px.
 *
 * minmax(0, …) because a bare fr floors at min-content, and justified text
 * with long unbreakable words can otherwise push a column past its share.
 */
.ltl-footer__notes {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 2rem 3rem;
	align-items: start;
}

/*
 * The tallest mark, and the gap under the row, in one place. The right note's
 * desktop offset is derived from these, so changing a mark size cannot leave
 * the two notes out of alignment.
 */
.ltl-fnote {
	--mark-h: 36px;
	--mark-gap: 0.9rem;
}

.ltl-fnote__marks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.1rem;
	margin-bottom: var(--mark-gap);
}

/*
 * Smaller than the hero's 41/50/25/44: this is a footnote, and the same marks
 * shouted at hero size at the bottom of every page would compete with the
 * page itself. These are the hero's phone sizes, which are already a tested
 * proportional set, and the optical relationship is unchanged: the circular
 * seal still runs taller than the flag lockup.
 */
.ltl-fnote__logo { display: block; width: auto; border-radius: 0; }
.ltl-fnote .ltl-fnote__logo--flag             { height: 29px; }
.ltl-fnote .ltl-fnote__logo--seal             { height: var(--mark-h); }
.ltl-fnote .ltl-fnote__logo--americancouncils { height: 18px; }
.ltl-fnote .ltl-fnote__logo--ucbp             { height: 32px; }

/*
 * Justified at every width, as he asked. The measure runs from 89 characters
 * at 1440 down to 51 on a phone.
 *
 * A first attempt turned justification off below 860px. That was backwards:
 * the moment the notes stack they get the FULL page width, so at 820px the
 * measure is 102 characters, wider than anywhere else, and that is where
 * justification sets best of all. The tight measure is the two-column desktop
 * case and the phone, not the tablet.
 *
 * hyphens: auto is declared because it is the right thing to ask for and it
 * costs nothing, but do not assume it is doing any work: tested by toggling it
 * against hyphens: none at 390 and 1440, the line breaks came out identical
 * both times, so this browser is not hyphenating at all. Chrome needs a
 * hyphenation dictionary present and headless does not always have one, and
 * Safari and Firefox will hyphenate where Chrome does not. So the
 * justification has to look acceptable with no hyphenation at all, which is
 * the state it was judged in. On a phone that means some visible word gaps at
 * 51 characters a line: the honest cost of justified text in a narrow column,
 * and one line of CSS away from left-aligned if he prefers.
 *
 * The funder note carries lang="en" in the template regardless, because it
 * stays English on the Georgian side and a screen reader should know.
 */
.ltl-fnote__text {
	font-size: 0.78rem;
	color: var(--faint);
	line-height: 1.65;
	margin: 0;
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
}

.ltl-fnote__text a { color: var(--muted); }

/*
 * Desktop only, on his instruction: the right note's first line of text starts
 * on the same line as the left note's first line of text, not level with the
 * logos above it. That is a padding of exactly the marks row plus its gap, and
 * both come from the custom properties above so the two cannot drift.
 *
 * And the copyright ends on the line the right note ends on. The three blocks
 * are placed rather than flowed: funder note in column 1 row 1, copyright in
 * column 1 row 2, right note spanning both rows of column 2.
 *
 * The row sizing is what makes the alignment exact, and it took two attempts.
 * `1fr auto` gives row 2 exactly the copyright's own height and lets row 1
 * absorb everything left over, so the grid's total height is set by the right
 * note and row 2's bottom edge lands precisely on the right note's box bottom.
 * Both blocks share font-size and line-height, so their last lines then share
 * a baseline rather than merely finishing near each other.
 *
 * The first attempt used `align-self: end` on auto rows, which anchors the
 * copyright to the ROW bottom, and grid's distribution of a spanning item puts
 * that 9 to 10px below where the right note's text actually stops. It measured
 * as aligned at 1000px and out at 1440, 1280 and 880, which is the signature
 * of relying on distribution rather than fixing the track.
 *
 * Two rows rather than overlapping both blocks in one cell, which would also
 * align exactly but overlaps if the left column ever outgrows the right. This
 * degrades to "copyright a little low" instead.
 */
@media (min-width: 861px) {
	.ltl-footer__notes {
		grid-template-rows: 1fr auto;
		row-gap: 0.6rem;
	}

	.ltl-fnote--ucbp   { grid-column: 1; grid-row: 1; }
	.ltl-footer__copy  { grid-column: 1; grid-row: 2; }
	.ltl-fnote--about  {
		grid-column: 2;
		grid-row: 1 / -1;
		padding-top: calc(var(--mark-h) + var(--mark-gap));
	}
}

@media (max-width: 860px) {
	/*
	 * One column, source order: funder note, disclaimer, copyright. No offset
	 * on the right note here, because there is no right: it sits under the
	 * funder note, and padding above it would just be a gap.
	 */
	.ltl-footer__notes { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }

	/* One clear line of its own text below the second note. */
	.ltl-footer__copy { margin-top: 1.65em; }
}

/* One clear blank line between the disclaimer and the copyright. The margin is
   in em of this element, so it always equals exactly one line of its own text. */
/*
 * Same size and line-height as the notes, which is what lets its last line
 * share a baseline with the right note's on desktop.
 *
 * No margin here, and that matters. The margin used to live on this rule, and
 * because this rule sits LATER in the stylesheet than the desktop grid block
 * above, it quietly beat the `margin: 0` that block was setting at equal
 * specificity. The margin stayed, went into the grid row, and left the
 * copyright exactly one line-height below where it was meant to be. The
 * spacing a phone needs is now declared in the phone's own block instead, so
 * nothing has to be undone later in the cascade.
 */
.ltl-footer__copy {
	font-size: 0.78rem;
	color: var(--faint);
	line-height: 1.65;
	margin: 0;
}

/* ==========================================================================
   18. Misc
   ========================================================================== */

.ltl-empty {
	border: 1px dashed var(--line-2);
	border-radius: var(--r-lg);
	padding: 2.5rem;
	text-align: center;
	color: var(--muted);
}

.ltl-empty p { margin: 0; }

.ltl-fallback-note {
	margin: 0 0 2rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--line);
	border-left: 2px solid var(--amber);
	border-radius: var(--r);
	background: rgba(251, 191, 36, 0.05);
	color: var(--muted);
	text-transform: none;
	letter-spacing: 0.01em;
	font-size: 0.78rem;
	max-width: 70ch;
}

.ltl-searchform { display: flex; gap: 0.5rem; max-width: 480px; }

.ltl-searchform input[type="search"],
.ltl-searchform input[type="text"] {
	flex: 1;
	background: var(--bg-3);
	border: 1px solid var(--line-2);
	border-radius: 999px;
	color: var(--text);
	padding: 0.8rem 1.1rem;
	font-family: var(--f-body);
	font-size: 0.94rem;
}

.ltl-searchform input::placeholder { color: var(--faint); }

/* The icon in the submit button is for the phone menu only; everywhere the form
   has room the lettered label is the right affordance. */
.ltl-searchform__icon { display: none; }

/* Scroll reveal */
.ltl-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.ltl-reveal.is-in { opacity: 1; transform: none; }

/* WordPress core */
.alignleft { float: left; margin: 0.4rem 1.6rem 1.2rem 0; }
.alignright { float: right; margin: 0.4rem 0 1.2rem 1.6rem; }
.aligncenter { margin-inline: auto; }
.alignwide { width: min(1100px, 100%); margin-inline: auto; max-width: none; }
.alignfull { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); }
.wp-caption { max-width: 100%; }
.sticky, .gallery-caption, .bypostauthor { }
.wp-block-separator { border-top: 1px solid var(--line); }
.wp-block-quote { border-left: 2px solid var(--violet); padding-left: 1.5rem; }
.wp-block-table td, .wp-block-table th { border-color: var(--line); }

/* ==========================================================================
   19. Responsive
   ========================================================================== */

@media (max-width: 1080px) {
	.ltl-burger { display: flex; }

	.ltl-nav {
		display: none;
		position: absolute;
		top: calc(100% + 0.6rem);
		left: 0;
		right: 0;
		background: rgba(11, 11, 19, 0.98);
		backdrop-filter: blur(16px);
		border: 1px solid var(--line-2);
		border-radius: var(--r-xl);
		padding: 0.75rem;
		max-height: 70vh;
		overflow-y: auto;
		box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
	}

	.ltl-nav.is-open { display: block; }
	.ltl-nav ul { flex-direction: column; align-items: stretch; gap: 0.1rem; }
	.ltl-nav a { padding: 0.8rem 0.9rem; font-size: 0.98rem; border-radius: var(--r); }

	/*
	 * Undo the Georgian shrink here. `.ltl-nav a:lang(ka)` drops to 0.78rem so
	 * six longer Georgian words fit the horizontal desktop row, and it wins on
	 * specificity (0,2,0 against 0,1,1), so it was leaking into the dropdown
	 * and setting Georgian items at 12.5px against English at 15.7px. A column
	 * has no width pressure, so there is nothing to pay for: same size, same
	 * padding, same tap target in both languages.
	 */
	.ltl-nav a:lang(ka) { font-size: 0.98rem; padding-inline: 0.9rem; }

	/*
	 * The page you are on, made visible. The shared marker is a 10% violet
	 * wash, which measures 1.09:1 against this panel's rgb(11,11,19) and so is
	 * effectively not there: he could not tell which item was current. No
	 * amount of wash fixes it, because a translucent violet over near-black
	 * tops out around 1.55:1 even at 36%. It needs something solid, so the
	 * marker becomes a 3px bar in --violet-soft, which is 7.20:1 against the
	 * panel, with the wash raised to 0.18 behind it so the whole row reads as
	 * a band rather than just a tick. The bar follows the border radius
	 * because it is drawn as an inset shadow rather than a border.
	 */
	.ltl-nav .current-menu-item > a,
	.ltl-nav .current_page_item > a,
	.ltl-nav .current-menu-parent > a,
	.ltl-nav .current-menu-ancestor > a {
		background: rgba(139, 92, 246, 0.18);
		box-shadow: inset 3px 0 0 0 var(--violet-soft);
	}

	.ltl-nav .sub-menu {
		display: flex;
		position: static;
		border: 0;
		box-shadow: none;
		background: transparent;
		padding: 0 0 0.4rem 0.9rem;
		min-width: 0;
	}

	.ltl-footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
	.ltl-footer__top { grid-template-columns: 1fr; gap: 2rem; }
	.ltl-brand__sub { display: none; }
	.ltl-cta__inner { flex-direction: column; align-items: flex-start; }
	.ltl-postnav__item--next { text-align: left; }
	.ltl-shead__ghost { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
	.ltl-reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   20. Touch and small-screen refinements
   ========================================================================== */

@media (max-width: 1080px) {
	/* Comfortable hit areas. Several links were only 17-26px tall, well under
	   the ~44px that is reliably tappable. */
	.ltl-nav a,
	.ltl-more,
	.ltl-breadcrumb a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	.ltl-brand { min-height: 44px; }

	.ltl-lang a,
	.ltl-lang span {
		min-height: 38px;
		display: inline-flex;
		align-items: center;
		padding-inline: 0.8rem;
	}

	.ltl-footer__col a {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
	}

	.ltl-footer__col ul { gap: 0.15rem; }

	/* iOS zooms the page when focusing an input below 16px. */
	.ltl-searchform input[type="search"],
	.ltl-searchform input[type="text"] { font-size: 16px; }

	/* The terminal block scrolls horizontally by design; keep that gesture
	   inside the block rather than letting it chain to the page. */
	.ltl-term__body {
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
	}
}

@media (max-width: 560px) {
	/* Stat band reads better as two clear columns than four cramped ones. */
	.ltl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* Keep the decorative blooms from forcing layout width on small screens. */
	.ltl-glow { max-width: 100vw; }

	.ltl-term__body { font-size: 0.74rem; }
}

@media (max-width: 400px) {
	/* On the narrowest phones the header row (brand + burger + language pill)
	   runs out of room, so tighten it rather than let the pill be clipped.
	   Back at 400px, where it was designed: the search toggle that had pushed
	   the row over its budget is no longer in it below 1080px. */
	.ltl-header__inner { gap: 0.6rem; padding-left: 0.85rem; padding-right: 0.5rem; }
	.ltl-brand__name   { font-size: 0.95rem; }
	.ltl-brand         { gap: 0.45rem; }

	.ltl-lang { padding: 0.15rem; gap: 0.1rem; }

	.ltl-lang a,
	.ltl-lang span {
		padding-inline: 0.5rem;
		font-size: 0.58rem;
	}
}

/* ==========================================================================
   21. Tools
   ========================================================================== */

/* The whole-card overlay link sits at z-index 2 and covers everything, so a
   button inside a card has to be lifted above it or it cannot be clicked.
   margin-top:auto pins the row to the bottom of the flex column, so cards in
   a row line their buttons up regardless of how long the summaries are. */
.ltl-card__actions {
	position: relative;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: auto;
	padding-top: 0.35rem;
}

.ltl-tool__teaches { margin: 0; padding-left: 1.15em; display: grid; gap: 0.45rem; }
.ltl-tool__teaches li { margin: 0; color: var(--muted); }
.ltl-tool__teaches li::marker { color: var(--cyan); }

/* --- Brand lockup -------------------------------------------------------- */

/* The name stays plain. The mark beside it already carries the identity's
   colour, and every attempt at colouring the letters themselves - a ramp on one
   word, a sheen across the whole name, a rule beneath it - competed with the
   mark instead of supporting it. */
.ltl-brand__name { color: var(--text); }
.ltl-brand__accent { color: inherit; }

/* Colour moves to the tagline instead: one hue per discipline, in the same
   order as the three nodes in the mark. All three are palette tokens.
   --violet-soft rather than --violet so the three terms carry roughly equal
   weight; --magenta-soft is deliberately not used here, the softer pink
   belongs to the homepage wordmark alone. */
.ltl-brand__seg--1 { color: var(--cyan); }
.ltl-brand__seg--2 { color: var(--violet-soft); }
.ltl-brand__seg--3 { color: var(--magenta); }

.ltl-brand__sep { color: var(--faint); margin-inline: 0.42em; }

.ltl-brand { transition: opacity 0.18s var(--ease); }
@media (hover: hover) {
	.ltl-brand:hover { opacity: 0.82; }
}

/* --- Tools call to action ------------------------------------------------ */

/* Green, matching the "Active" status tag, so the one thing in the nav that is
   a live running thing is marked the same way a live project is. */
.ltl-nav .ltl-nav__cta > a {
	color: var(--lime);
	border: 1px solid rgba(163, 230, 53, 0.34);
	background: var(--lime-wash);
	margin-left: 0.4rem;
}

.ltl-nav .ltl-nav__cta > a:focus-visible, .ltl-nav .ltl-nav__cta.current-menu-item > a {
	color: #0D1400;
	background: var(--lime);
	border-color: var(--lime);
}

@media (hover: hover) {
	.ltl-nav .ltl-nav__cta > a:hover {
		color: #0D1400;
		background: var(--lime);
		border-color: var(--lime);
	}
}

@media (max-width: 1080px) {
	/*
	 * In the dropdown the Tools pill was the odd one out: a bordered, filled
	 * box wrapped tight around its own text, sitting in a column of plain text
	 * links, with an extra top margin pushing it out of the list's rhythm. It
	 * read as a misplaced button rather than a nav item.
	 *
	 * So on a phone it drops the box and keeps only the lime, which is what
	 * carries the meaning: Tools is the one item in the nav that is a live
	 * running thing, marked the same way a live project is. Padding, height
	 * and alignment now match every other item exactly. The desktop pill is
	 * untouched, where a bordered CTA in a horizontal row is right.
	 */
	.ltl-nav .ltl-nav__cta > a {
		margin-left: 0;
		margin-top: 0;
		/* border: 0, not a transparent border. A transparent one still takes
		   its 1px, which left this item 54px tall against everything else's
		   52px, which is the "not proportional" of it. */
		border: 0;
		background: none;
		text-align: left;
	}

	.ltl-nav .ltl-nav__cta.current-menu-item > a {
		background: var(--lime-wash);
		box-shadow: inset 3px 0 0 0 var(--lime);
		color: var(--lime);
	}
}

/* --- Featured image figure ----------------------------------------------- */

/* Border and radius sit on the image, not the figure, so the credit line falls
   outside the frame where a credit belongs. Replaces four inline-styled copies,
   three of which drew their border with tokens that do not exist. */
.ltl-figure { margin: 0 0 2.5rem; max-width: 1000px; }

.ltl-figure img {
	display: block;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
}

.ltl-figure__credit {
	font-family: var(--f-mono);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	color: var(--faint);
	margin-top: 0.7rem;
}

.ltl-figure--round { max-width: 220px; }
.ltl-figure--round img { border-radius: 50%; border-color: var(--line-2); }

/* --- UCBP funder acknowledgement ----------------------------------------- */

/* A white plate inside dark prose, deliberately. Four of the five marks are
   dark ink on a transparent ground and would all but vanish on the site's
   near-black; recolouring a government seal is not an option, and a light
   plate is the conventional treatment for a funder strip anyway. Colours are
   literal rather than tokenised because the palette tokens are all built for
   the dark ground and none of them apply inside this block. */
.ltl-ucbp {
	margin: clamp(2rem, 4vw, 2.75rem) 0 0;
	padding: clamp(1.15rem, 2.6vw, 1.6rem) clamp(1.15rem, 2.6vw, 1.75rem);
	background: var(--plate);
	border: 1px solid var(--plate-line);
	border-radius: var(--r-lg);
}

.ltl-ucbp__label {
	margin: 0 0 clamp(0.9rem, 2vw, 1.15rem);
	color: var(--plate-faint);
	font-size: 0.66rem;
}

.ltl-ucbp__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1rem, 2.6vw, 1.85rem);
}

/* Each mark carries its own height so the strip reads as optically even: the
   American Councils lockup is nearly four times as wide as it is tall, so
   matching it to the others by height would make it dominate the row.
   Selectors are descendant-qualified because these sit inside .ltl-prose,
   whose `.ltl-prose img` rule outranks a bare class and was rounding off the
   corners - which on a 44px-tall mark clips the ends of the wordmark. */
.ltl-ucbp img { display: block; width: auto; border-radius: 0; }
.ltl-ucbp .ltl-ucbp__logo--flag             { height: 52px; }
.ltl-ucbp .ltl-ucbp__logo--freedom250       { height: 50px; }
.ltl-ucbp .ltl-ucbp__logo--americancouncils { height: 28px; }
.ltl-ucbp .ltl-ucbp__logo--sabauni          { height: 48px; }
.ltl-ucbp .ltl-ucbp__logo--ucbp             { height: 46px; }

.ltl-ucbp__text {
	margin: clamp(1rem, 2.2vw, 1.3rem) 0 0;
	color: var(--plate-ink);
	font-size: 0.8125rem;
	line-height: 1.62;
}

.ltl-ucbp__text + .ltl-ucbp__text { margin-top: 0.6rem; }

@media (max-width: 560px) {
	.ltl-ucbp .ltl-ucbp__logo--flag             { height: 40px; }
	.ltl-ucbp .ltl-ucbp__logo--freedom250       { height: 38px; }
	.ltl-ucbp .ltl-ucbp__logo--americancouncils { height: 21px; }
	.ltl-ucbp .ltl-ucbp__logo--sabauni          { height: 37px; }
	.ltl-ucbp .ltl-ucbp__logo--ucbp             { height: 35px; }
}

/* The contract-assembly note, previously an inline style on the homepage. Now
   that the panel is a shortcode it can sit inside prose, where the margin has
   to work against surrounding paragraphs rather than a section edge. */
.ltl-term__note {
	margin: 1rem 0 0;
	text-transform: none;
	letter-spacing: 0.01em;
	color: var(--faint);
	font-size: 0.78rem;
}

/* --- Header search ------------------------------------------------------- */

/* A toggle rather than a permanent field: the header pill already carries the
   brand, the nav and the language switcher, and at narrow widths there is no
   room for an input. Sized and coloured like the language pill so it reads as
   part of the same control group rather than an addition. */
.ltl-searchtoggle {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid var(--line-2);
	border-radius: 999px;
	background: none;
	color: var(--faint);
	cursor: pointer;
	transition: color 0.18s var(--ease), background 0.18s var(--ease), border-color 0.18s var(--ease);
}

.ltl-searchtoggle[aria-expanded="true"] {
	color: var(--text);
	border-color: var(--line-3);
	background: rgba(255, 255, 255, 0.06);
}

@media (hover: hover) {
	.ltl-searchtoggle:hover {
		color: var(--text);
		border-color: var(--line-3);
		background: rgba(255, 255, 255, 0.06);
	}
}

/* The panel sits under the pill, inside the same rounded container, so it reads
   as the bar opening rather than a floating box. */
.ltl-search {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 0.5rem);
	padding: 0.85rem;
	border: 1px solid var(--line-2);
	border-radius: var(--r-lg);
	background: rgba(8, 8, 14, 0.94);
	backdrop-filter: blur(16px) saturate(150%);
	-webkit-backdrop-filter: blur(16px) saturate(150%);
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}

.ltl-search.is-open { opacity: 1; transform: none; }

/* The form is capped at 480px on its own; in the panel it should fill it. */
.ltl-search .ltl-searchform { max-width: none; }

@media (prefers-reduced-motion: reduce) {
	.ltl-search { transition: none; transform: none; }
}

/* Search inside the menu, on phones only. The dropdown is already open and
   already full width, so it has the room the header row does not - and it puts
   the field itself in front of the reader rather than a button that reveals one. */
.ltl-nav__search { display: none; }

@media (max-width: 1080px) {
	/* The toggle and its panel are the desktop arrangement. On phones the form
	   moves into the menu, which frees the header row of a fourth control - the
	   thing that pushed the language switcher outside the pill. */
	.ltl-searchtoggle,
	.ltl-search { display: none; }

	.ltl-nav__search {
		display: block;
		margin-top: 0.5rem;
		padding-top: 0.75rem;
		border-top: 1px solid var(--line);
	}

	/*
	 * One field with a round button tucked inside it, rather than a lettered
	 * pill beside a squeezed input. In a 390px dropdown the old arrangement left
	 * the field 251px wide next to an 85px gradient button - two competing
	 * rounded shapes, and the Georgian label sat oddly in a font styled for
	 * uppercase Latin. This gives the field the full 344px.
	 */
	.ltl-nav__search .ltl-searchform {
		position: relative;
		max-width: none;
		gap: 0;
	}

	.ltl-nav__search .ltl-searchform input[type="search"],
	.ltl-nav__search .ltl-searchform input[type="text"] {
		width: 100%;
		padding-right: 3.1rem;
	}

	.ltl-nav__search .ltl-btn {
		position: absolute;
		right: 4px;
		top: 4px;
		bottom: 4px;
		width: 40px;
		padding: 0;
		gap: 0;
		justify-content: center;
		letter-spacing: 0;
	}

	.ltl-nav__search .ltl-searchform__icon { display: block; width: 17px; height: 17px; }

	/* Kept in the accessible name, out of the picture. */
	.ltl-nav__search .ltl-searchform__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		white-space: nowrap;
	}
}


/* ==========================================================================
   22. Accounts

   The forms behind member registration and the tool gate. Deliberately quiet:
   an authentication form is not a place for the site's display voice, so the
   fields are square-cornered rather than pill-shaped (a column of pills reads
   as a row of buttons), the labels are the small mono style used for metadata
   everywhere else, and the only accent is on the state messages.
   ========================================================================== */

.ltl-auth { max-width: 460px; }
.ltl-account { max-width: 640px; }

.ltl-auth__lede { color: var(--muted); font-size: 0.95rem; margin: 0 0 1.75rem; }

.ltl-field { margin: 0 0 1.15rem; }

.ltl-field label,
.ltl-check label > span:first-child {
	display: block;
	font-family: var(--f-mono);
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--faint);
	font-weight: 500;
	margin-bottom: 0.45rem;
}

.ltl-field input {
	width: 100%;
	background: var(--bg-3);
	border: 1px solid var(--line-2);
	border-radius: var(--r);
	color: var(--text);
	padding: 0.8rem 1rem;
	font-family: var(--f-body);
	font-size: 0.95rem;
	transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
}

.ltl-field input:focus {
	outline: none;
	border-color: rgba(34, 211, 238, 0.55);
	background: var(--bg-4);
}

.ltl-field input:autofill { box-shadow: 0 0 0 100px var(--bg-3) inset; }

.ltl-field__hint,
.ltl-field__note {
	display: block;
	margin-top: 0.45rem;
	font-size: 0.78rem;
	line-height: 1.55;
	color: var(--faint);
}

.ltl-field__note { margin: 0 0 1.25rem; }

/* Name and surname side by side, and stacked where that would crowd them. */
.ltl-field__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }

.ltl-check { margin: 0 0 1.4rem; }

.ltl-check label {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	cursor: pointer;
}

.ltl-check input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.05rem;
	height: 1.05rem;
	margin: 0.1rem 0 0;
	accent-color: var(--cyan);
}

.ltl-check label > span {
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--muted);
}

.ltl-check a { color: var(--cyan); }

.ltl-auth__actions { margin-top: 0.35rem; }

.ltl-auth__links {
	list-style: none;
	margin: 1.6rem 0 0;
	padding: 1.4rem 0 0;
	border-top: 1px solid var(--line);
	display: grid;
	gap: 0.6rem;
}

.ltl-auth__links a { color: var(--muted); font-size: 0.86rem; text-decoration: none; }
@media (hover: hover) {
	.ltl-auth__links a:hover { color: var(--cyan); }
}

/* State messages. One shape, three tones: done, needs attention, wrong. */
.ltl-flash {
	margin: 0 0 1.75rem;
	padding: 0.85rem 1.1rem;
	border: 1px solid var(--line);
	border-left: 2px solid var(--line-3);
	border-radius: var(--r);
	background: rgba(255, 255, 255, 0.02);
	color: var(--muted);
	font-size: 0.87rem;
	line-height: 1.6;
}

.ltl-flash--ok   { border-left-color: var(--lime);    background: var(--lime-wash); }
.ltl-flash--warn { border-left-color: var(--amber);   background: rgba(251, 191, 36, 0.06); }
.ltl-flash--bad  { border-left-color: var(--magenta); background: var(--magenta-wash); }

.ltl-flash ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.4rem; }
.ltl-flash a { color: var(--cyan); }

/* The account page: one panel per thing a member can change. */
.ltl-panel {
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--bg-2);
	padding: 1.75rem;
	margin-bottom: 1.5rem;
}

.ltl-panel__title {
	font-family: var(--f-mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--faint);
	font-weight: 500;
	margin: 0 0 1.35rem;
}

.ltl-panel__foot { margin: 1.35rem 0 0; }
.ltl-panel .ltl-meta { margin-bottom: 0; }
.ltl-panel .ltl-flash:last-child { margin-bottom: 0; }

.ltl-inline-form { display: inline-block; margin: 0; }

/* Closing an account is folded away: a destructive control should take a
   deliberate act to reach, not sit under a thumb. */
.ltl-danger { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }

.ltl-danger summary {
	cursor: pointer;
	font-family: var(--f-mono);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--faint);
}

@media (hover: hover) {
	.ltl-danger summary:hover { color: var(--magenta); }
}
.ltl-danger[open] summary { margin-bottom: 1.25rem; }

.ltl-btn--danger {
	background: transparent;
	border: 1px solid rgba(240, 71, 155, 0.45);
	color: var(--magenta);
	box-shadow: none;
}

.ltl-btn--danger:focus-visible {
	background: var(--magenta-wash);
	color: var(--magenta);
	box-shadow: none;
}

@media (hover: hover) {
	.ltl-btn--danger:hover {
		background: var(--magenta-wash);
		color: var(--magenta);
		box-shadow: none;
	}
}

/* A Launch button that is not yet open to this visitor. Same shape as the real
   one, so the page does not reflow when it becomes clickable, and quiet enough
   that it reads as a step rather than as a refusal. */
.ltl-btn--locked {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--line-2);
	color: var(--muted);
	box-shadow: none;
	letter-spacing: 0.08em;
}

.ltl-btn--locked:focus-visible {
	color: var(--text);
	border-color: var(--line-3);
	background: rgba(255, 255, 255, 0.06);
	box-shadow: none;
}

@media (hover: hover) {
	.ltl-btn--locked:hover {
		color: var(--text);
		border-color: var(--line-3);
		background: rgba(255, 255, 255, 0.06);
		box-shadow: none;
	}
}

.ltl-lock { flex: 0 0 auto; }

.ltl-tools-note {
	margin: 0 0 2rem;
	color: var(--faint);
	font-size: 0.78rem;
	line-height: 1.65;
	text-transform: none;
	letter-spacing: 0.01em;
}

.ltl-tools-note a { color: var(--cyan); }


/* Present in the accessible name and to a script, out of sight of a reader. */
.ltl-offscreen {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 520px) {
	.ltl-field__pair { grid-template-columns: 1fr; }
	.ltl-panel { padding: 1.35rem; }

	/* Under 16px, iOS Safari zooms the page on focus and does not zoom back. */
	.ltl-field input { font-size: 16px; }
}

/* ==========================================================================
   24. The UCBP credit, and the account control
   ========================================================================== */

/*
 * The four marks from the UCBP handbook cover at the top of the home page
 * hero, with the credit line beneath them, linking to the About page.
 *
 * There is no white plate behind them any more. Three of the four carry a
 * ground of their own in the artwork: the seal has a white disc, UCBP a solid
 * navy field, and American Councils reads in its lighter blue. The flag lockup
 * did not, so it uses a reversed copy whose caption is white; see the note in
 * ltl_ucbp_credit(). The acknowledgement block on the About page keeps its
 * white panel, which is where the marks appear as supplied.
 *
 * Nothing here applies opacity, filter or mix-blend-mode, to the marks or to
 * any ancestor of them. A U.S. government seal must not be recoloured, dimmed
 * or blended, and the one reversal we do make was made in the file, on the
 * caption only, rather than by CSS across the whole mark.
 */
.ltl-credit {
	display: block;
	text-decoration: none;
	color: inherit;
	margin: 0 auto clamp(0.9rem, 2vw, 1.4rem);
}

.ltl-credit:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: var(--r); }

/*
 * Width is still tied to the node animation directly below it, min(560px,
 * 84vw), so the marks and the animation read as one column even though the
 * plate that used to make that alignment visible has gone.
 */
.ltl-credit__row {
	display: flex;
	align-items: center;
	width: min(560px, 84vw);
	margin-inline: auto;
}

.ltl-credit__marks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-evenly;
	width: 100%;
	gap: 0.55rem 0.9rem;
}

/*
 * Heights are optical, not equal. A circle reads smaller than a rectangle of
 * the same height, so the seal runs taller than the flag lockup. American
 * Councils anchors the row: at this scale its "FOR INTERNATIONAL EDUCATION"
 * line is comfortably clear. UCBP gets a tall box because roughly a third of
 * its navy field is baked-in padding, so its ink is smaller than its box.
 * Descendant-qualified, like the acknowledgement block's rules, so no bare
 * class can be outranked by an img selector elsewhere.
 *
 * Raised 20% on his instruction, from 34/42/21/37, and the ratios between them
 * are carried across unchanged. The row is 267px of ink in a 560px column, so
 * space-evenly still has plenty to distribute, and every mark stays inside its
 * own pixels on a 2x screen: the widest ask is American Councils at 194px of
 * the 543px it holds.
 */
.ltl-credit img { display: block; width: auto; border-radius: 0; }
.ltl-credit .ltl-credit__logo--flag             { height: 41px; }
.ltl-credit .ltl-credit__logo--seal             { height: 50px; }
.ltl-credit .ltl-credit__logo--americancouncils { height: 25px; }
.ltl-credit .ltl-credit__logo--ucbp             { height: 44px; }

/*
 * On the dark ground, in --text-2, the same weight the body prose is set in, so
 * the credit reads as a statement rather than as fine print. Held to the same
 * width as the marks so the two line up.
 *
 * Raised 15% on his instruction, and the tracking is what pays for it. At the
 * old 0.06em the sentence measures 570px inside its 560px column and would wrap
 * to two lines, which breaks the one-line rule he set for desktop. At 0.03em it
 * is 551px, one line with 9px spare. A tighter setting is also the better one
 * here: this is an 88 character sentence, not a label, and wide tracking hurts
 * a sentence in caps more than it helps.
 */
.ltl-credit__text {
	display: block;
	max-width: min(560px, 84vw);
	margin: 0.6rem auto 0;
	font-family: var(--f-mono);
	font-size: 0.62rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	line-height: 1.55;
	text-align: center;
	color: var(--text-2);
	transition: color 0.18s var(--ease);
}

/*
 * The whole credit is one link, and with the plate gone there is no longer a
 * box to put a ring around, so the colour change is the affordance.
 *
 * --cyan, matching .ltl-signin. His instruction, and the better call than the
 * wordmark gradient this replaced: --cyan is already what every hover on the
 * site resolves to, from the sign-in pill to the burger to a card title to a
 * name in the people list, so the credit joins that language instead of
 * inventing one of its own for a single line of text. It also drops the
 * background-clip machinery a gradient needed, which was the only @supports
 * block in the stylesheet.
 *
 * 11.12:1 against the background, against 14.42:1 at rest, so both ends of the
 * state clear AA comfortably at this size. Keyboard focus still gets the
 * outline above, which is the path that does not depend on a pointer.
 */
/*
 * Guarded, because a phone applies :hover on tap and never clears it: he
 * tapped this line, came back with the back arrow and found it still cyan.
 * (hover: hover) is false on a touch primary input, so on a phone the line
 * simply stays at --text-2. The focus-visible outline above is unguarded and
 * still works, which is the keyboard path.
 */
@media (hover: hover) {
	.ltl-credit:hover .ltl-credit__text { color: var(--cyan); }
}

@media (max-width: 560px) {
	/*
	 * Phone sizes are deliberately NOT the desktop ones. The +20% on the marks
	 * and +15% on the sentence apply above 560px only: on his instruction the
	 * phone keeps the sizes it had before that round, so this block is the one
	 * place the two diverge. Tracking goes back to 0.05em with the smaller
	 * type, since 0.03em existed only to buy width in the 560px desktop column
	 * and a phone is allowed two lines anyway.
	 */
	.ltl-credit__marks { gap: 0.5rem 0.7rem; }
	.ltl-credit .ltl-credit__logo--flag             { height: 29px; }
	.ltl-credit .ltl-credit__logo--seal             { height: 36px; }
	.ltl-credit .ltl-credit__logo--americancouncils { height: 18px; }
	.ltl-credit .ltl-credit__logo--ucbp             { height: 32px; }
	.ltl-credit__text { font-size: 0.55rem; letter-spacing: 0.05em; margin-top: 0.55rem; }

	/*
	 * The credit takes the node canvas's slot rather than adding to the hero.
	 * Measured: the hero has +4px of room below the buttons at 390x844 and is
	 * already 41px over at 360x640, so on a phone this has to be paid for.
	 */
	.ltl-hero__canvas { display: none; }

	/* His correction: the live status strip goes on a phone, where the credit
	   above it already fills that role, and stays on a desktop. */
	.ltl-statline { display: none; }
}

@media (min-width: 561px) {
	/* Pulled up toward the header pill. Safe despite .ltl-hero having
	   overflow:hidden, because the hero's top padding is far larger than the
	   offset, so the marks never cross the hero's top edge. */
	.ltl-credit { margin-top: -2rem; }

}

@media (forced-colors: active) {
	/*
	 * The flag caption is white in the artwork now, so in a high contrast theme
	 * with a light background it would disappear. The marks keep a dark ground
	 * of their own here, which puts them back in the situation the design was
	 * drawn for. The About page panel stays white, where the marks are the
	 * ones as supplied and dark ink is what it needs.
	 */
	.ltl-credit__row {
		forced-color-adjust: none;
		background: #07070C;
		padding: 0.5rem 0.7rem;
		border-radius: var(--r);
	}
	.ltl-ucbp          { forced-color-adjust: none; background: #FFFFFF; }
}

/*
 * Account, desktop surface: an outlined pill to the right of the language
 * switcher. Hidden at 1080px and below, where it would be a sixth control in a
 * row that has already overflowed once, and where the copy inside the menu
 * dropdown takes over instead.
 */
.ltl-signin {
	flex: none;
	margin-left: -0.6rem;
	padding: 0.42rem 1rem;
	border: 1px solid var(--line-2);
	border-radius: 999px;
	font-family: var(--f-display);
	font-weight: 600;
	font-size: 0.8rem;
	white-space: nowrap;
	text-decoration: none;
	color: var(--text);
	transition: color 0.18s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease);
}

.ltl-signin:focus-visible {
	color: var(--cyan);
	border-color: rgba(34, 211, 238, 0.5);
	background: rgba(255, 255, 255, 0.04);
}

@media (hover: hover) {
	.ltl-signin:hover {
		color: var(--cyan);
		border-color: rgba(34, 211, 238, 0.5);
		background: rgba(255, 255, 255, 0.04);
	}
}

/* Account, phone surface: full width at the foot of the menu, the same shape
   the search form already takes there. */
.ltl-nav__account { display: none; }

@media (max-width: 1080px) {
	.ltl-signin { display: none; }

	.ltl-nav__account { display: block; margin-top: 0.5rem; }

	/*
	 * The colour is the load-bearing part. .ltl-btn sets its own near-black
	 * text for the bright cyan-to-violet gradient it sits on, but this button
	 * lives inside .ltl-nav, and `.ltl-nav a` (0,1,1) outranks `.ltl-btn`
	 * (0,1,0), so it was inheriting the nav's --muted grey. Muted grey-blue on
	 * that gradient measured about 1.6:1 and he could barely read "Sign in".
	 * Stated here at (0,2,0) so the button's own colour wins back.
	 */
	.ltl-nav__account .ltl-btn {
		width: 100%;
		justify-content: center;
		color: #05060C;
	}
}

/* ==========================================================================
   25. Folded page sections
   ========================================================================== */

/*
 * The About page is the Lab's founding description in sixteen sections. Read
 * end to end it is a wall of text, and a visitor who came for one answer had
 * to scroll for it, so everything under "In brief" is folded away and the page
 * opens as an index of its own contents. Built on native <details>, so there
 * is no script to fail and the keyboard and screen reader behaviour is the
 * browser's own. See ltl_fold_sections() for which pages get this.
 *
 * A hairline stack rather than a row of cards: sixteen bordered boxes would
 * read as sixteen separate things, when this is one document.
 */
.ltl-folds {
	margin-top: 2.75rem;
	border-top: 1px solid var(--line);
}

/*
 * Stated a second time at (0,2,0) because the block sits inside .ltl-prose,
 * where `> * + *` (0,1,0) and `> h2 + *` (0,1,1) both set a top margin of
 * their own. The bare class above only wins those on source order, and source
 * order is not something a later edit should have to know about.
 */
.ltl-prose .ltl-folds { margin-top: 2.75rem; }

/* On About the stack is the whole page body, so it opens directly under the
   page header and has nothing above it to be spaced from. The gap up to the
   lede is no longer pulled in from here - `.ltl-phead + .ltl-section` fixes
   that join for every page, so doing it twice would leave About too tight. */
.ltl-prose .ltl-folds:first-child { margin-top: 0; }

.ltl-fold {
	border-bottom: 1px solid var(--line);
}

.ltl-fold__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 0 1rem;
	padding: 1.15rem 0.2rem;
	cursor: pointer;
	/* Both of these are needed to retire the browser's own disclosure
	   triangle: `list-style` covers Chrome and Firefox, the -webkit- marker is
	   what Safari draws instead. */
	list-style: none;
}

.ltl-fold__head::-webkit-details-marker { display: none; }

/*
 * Doubled selector on purpose. The heading keeps its own <h2> so the page
 * outline survives folding, but that puts it inside `.ltl-prose h2` (0,1,1),
 * which sets a 2em top margin and a larger size for a heading standing in
 * open prose. At (0,2,1) this wins wherever the block is used, rather than
 * only while it happens to sit later in this file.
 */
.ltl-fold .ltl-fold__head h2 {
	margin: 0;
	font-size: clamp(1.12rem, 2.1vw, 1.32rem);
	line-height: 1.25;
	text-wrap: pretty;
	transition: color 0.18s var(--ease);
}

/* A chevron drawn from two borders: down when shut, up when open. */
.ltl-fold__sign {
	width: 0.5rem;
	height: 0.5rem;
	align-self: center;
	border-right: 1.5px solid var(--muted);
	border-bottom: 1.5px solid var(--muted);
	/* The optical nudge is a margin, not part of the transform, so the open
	   and shut states differ by a rotation alone and the tween is a clean
	   turn rather than a turn plus a drift. */
	margin-bottom: 0.14rem;
	transform: rotate(45deg);
	transition: transform 0.22s var(--ease), border-color 0.18s var(--ease);
}

.ltl-fold[open] .ltl-fold__sign {
	transform: rotate(225deg);
	border-color: var(--cyan);
}

/* Guarded: a phone applies :hover on tap and never clears it, which would
   leave the row that was just opened stuck in its hover colour. */
@media (hover: hover) {
	.ltl-fold__head:hover h2 { color: var(--cyan); }
	.ltl-fold__head:hover .ltl-fold__sign { border-color: var(--cyan); }
}

/*
 * `.ltl-prose > * + *` cannot reach in here - the child combinator stops at
 * .ltl-folds - so the flow spacing inside a section is the base `p` and `ul`
 * bottom margins, and the first and last child are flattened against the
 * section's own padding.
 */
.ltl-fold__body { padding: 0.1rem 0.2rem 1.7rem; }
.ltl-fold__body > :first-child { margin-top: 0; }
.ltl-fold__body > :last-child { margin-bottom: 0; }

.ltl-fold[open] .ltl-fold__body { animation: ltl-fold-in 0.26s var(--ease) both; }

@keyframes ltl-fold-in {
	from { opacity: 0; transform: translateY(-0.35rem); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ltl-fold__sign { transition: none; }
	.ltl-fold[open] .ltl-fold__body { animation: none; }
}