@charset "UTF-8";
/*
 * Under the Hood — the whole design language, one stylesheet.
 * Target: themes/blocksy-child/assets/css/uth.css
 *
 * Design authority: _UTH-DESIGN/HANDOVER.md
 *   §5.1 colour · §5.2 type · §5.3 shape, shadow, motion · §5.4 the hero band
 *   §6   components C01 to C10
 *   §7   the counting voice C10
 *   §8   breakpoints
 *   §13  accessibility
 * Source of every declaration below: the 380 inline style attributes and the
 * two <style> blocks inside the delivered design template.
 *
 * Rules this file obeys and you must not break:
 *   - every token is declared in :root and nowhere else
 *   - hex values are copied from HANDOVER §5.1, never invented
 *   - the twelve keyframes are lifted verbatim from the design source
 *   - the eight hover states the design tool emitted as .scp0 to .scp7 are
 *     carried over value for value, given names, and aliased back to .scp*
 *   - prefers-reduced-motion: reduce stops every animation and restores solid
 *     text fills. Non negotiable.
 *   - @media print hides the animated layers and expands every scrollable table
 *   - nothing on this page is below 10.5px
 *   - NO @font-face here. DM Sans, Instrument Serif and JetBrains Mono are
 *     already self hosted sitewide by assets/css/teas-local-fonts.css. See
 *     css-notes.md §5 for the byte arithmetic behind that decision.
 *   - the announce bar, topbar, mega menu, Ask Lee pill, drawer and the deep
 *     teal footer are shipped by the theme (HANDOVER §11.6). The only chrome
 *     rules in this file are the [data-th] show and hide switches the room
 *     navigation depends on, and they are scoped so they cannot touch the
 *     theme's own header markup.
 *
 * Selector strategy: every component answers to BOTH the .uth-* class the
 * PHP component library already emits AND the [data-uh="..."] hook the new
 * markup carries. That means this stylesheet can deploy before, with or after
 * the template work without breaking the live page.
 */

/* ================================================================== *
 * 1 · Tokens — :root only. HANDOVER §5.1, §5.2, §5.3.                 *
 * ================================================================== */

:root {
	/* --- §5.1 Colour. Copy these values, invent none. --- */
	--uth-page: #E8EAEE;            /* page canvas                        */
	--uth-card: #FFFFFF;            /* every white panel                  */
	--uth-cream: #eff7f6;           /* soft panels, accent cards          */
	--uth-tint: #F2F4F7;            /* row hovers, chips, mono path pills */
	--uth-ink: #042220;             /* all text, dark panels              */
	--uth-slate: #5C6270;           /* secondary text, eyebrows           */
	--uth-mist: #8A8F9C;            /* captions, mono notes               */
	--uth-hairline: rgba(14, 15, 18, .10);      /* dividers               */
	--uth-hairline-soft: rgba(14, 15, 18, .08); /* card borders           */
	--uth-cyan: #30d8c8;            /* pips, accent bars, text on dark    */
	--uth-teal: #0b8b7a;            /* italic serif accent, gradient end  */
	--uth-deep-teal: #0a4444;       /* links                              */
	--uth-link-hover: #0e6868;      /* a:hover                            */
	--uth-clay: #c44b4b;            /* hero kicker and pip, warnings      */
	--uth-pink: #e84898;            /* Ask Lee, newsletter. Chrome only.  */

	/* Derived, and used throughout the delivered markup. Not in the §5.1
	   table, so each one is named here rather than left loose in a rule. */
	--uth-ink-body: #2a3a37;                    /* running body copy      */
	--uth-numeral: #C7CDD6;                     /* section numeral        */
	--uth-label-dim: #4b5551;                   /* hero index, tile label */
	--uth-on-dark: #EBF2F1;                     /* body text on ink       */
	--uth-on-dark-soft: rgba(235, 242, 241, .82);
	--uth-on-dark-mute: rgba(235, 242, 241, .72);
	--uth-on-dark-line: rgba(239, 247, 246, .16);
	--uth-ms-kicker: #2A4E97;                   /* Microsoft attribution  */
	--uth-ms-figure: #B0761B;                   /* Microsoft figure       */

	/* Backwards compatibility with the classes already on the live page.
	   --uth-hero-green predates the §5.1 name. Keep both, one value. */
	--uth-hero-green: var(--uth-teal);
	--uth-dark-bg: var(--uth-ink);
	--uth-dark-kicker: var(--uth-cyan);
	--uth-dark-body: rgba(235, 242, 241, .9);

	/* Dark panels use the sitewide footer gradient, never flat ink. §5.1. */
	--uth-dark-grad: linear-gradient(155deg, #0e6868 0%, #062828 55%, #042220 100%);
	--uth-dark-glow:
		radial-gradient(120% 90% at 85% 8%, rgba(48, 216, 200, .20), rgba(48, 216, 200, 0) 62%),
		radial-gradient(90% 70% at 0% 100%, rgba(48, 216, 200, .10), rgba(48, 216, 200, 0) 60%);
	--uth-dark-dots: radial-gradient(rgba(239, 247, 246, .10) 1px, transparent 1px);

	/* Hero band base, §5.4 layer 1. */
	--uth-hero-base: linear-gradient(155deg, #eff7f6, #dff2ec 52%, #f7fbf6);

	/* Numerals are gradient filled, §5.3. Solid fallback is mandatory. */
	--uth-num-grad: linear-gradient(135deg, #042220 30%, #0b8b7a);
	--uth-spine-grad: linear-gradient(180deg, #30d8c8, #0b8b7a);
	--uth-rule-grad: linear-gradient(90deg, #0b8b7a, #30d8c8, rgba(48, 216, 200, 0));
	--uth-bar-grad: linear-gradient(90deg, #0b8b7a, #30d8c8);
	--uth-sechead-grad: linear-gradient(90deg, #30d8c8, rgba(14, 15, 18, .10) 30%);

	/* --- §5.2 Type. Three families, one job each. --- */
	--uth-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--uth-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
	--uth-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	--uth-t-h1: clamp(36px, 5.2vw, 58px);
	--uth-t-h1-ls: -.032em;
	--uth-t-h2: clamp(26px, 5.6vw, 36px);
	--uth-t-h2-ls: -.026em;
	--uth-t-h2-lead: clamp(28px, 5.8vw, 42px);   /* the room lead heading */
	--uth-t-h2-sm: clamp(25px, 5.6vw, 32px);     /* in body section heads */
	--uth-t-h3: clamp(19px, 2.2vw, 23px);        /* essay h3, §5.2        */
	--uth-t-body: 16px;
	--uth-t-body-lead: 1.7;
	--uth-t-intro: 15.5px;
	--uth-t-cell: 14px;
	--uth-t-mono: 12px;
	--uth-t-mono-sm: 11px;
	--uth-t-chip: 10.5px;      /* the floor. Nothing on this page is lower. */
	--uth-t-statement: clamp(21px, 2.9vw, 32px);
	--uth-t-secnum: clamp(34px, 4vw, 48px);

	/* --- §5.3 Shape. --- */
	--uth-r-hero: clamp(22px, 3vw, 32px);
	--uth-r-panel: clamp(20px, 3vw, 32px);
	--uth-r-card: clamp(20px, 2.6vw, 28px);
	--uth-r-tile: 18px;
	--uth-r-row: 12px;
	--uth-r-row-sm: 10px;
	--uth-r-pill: 999px;
	--uth-r-footer: 40px;

	/* --- §5.3 Shadow and motion. --- */
	--uth-shadow: 0 .5px 1px rgba(14, 15, 18, .04), 0 1px 2px rgba(14, 15, 18, .04), 0 8px 24px rgba(14, 15, 18, .05);
	--uth-shadow-tile: 0 .5px 1px rgba(14, 15, 18, .04), 0 8px 24px rgba(14, 15, 18, .05);
	--uth-shadow-card-hover: 0 16px 38px rgba(4, 34, 32, .10);
	--uth-shadow-tile-hover: 0 14px 34px rgba(14, 15, 18, .10);
	--uth-shadow-lift: 0 10px 28px rgba(14, 15, 18, .08);
	--uth-shadow-dark: 0 18px 44px rgba(4, 34, 32, .18);
	--uth-ease: cubic-bezier(.32, .72, 0, 1);
	--uth-ease-rise: cubic-bezier(.22, .68, 0, 1);
	--uth-lift: .18s cubic-bezier(.32, .72, 0, 1);
	--uth-lift-slow: .2s cubic-bezier(.32, .72, 0, 1);

	/* --- Layout, §5.3. --- */
	--uth-max: 1340px;
	--uth-gutter: clamp(14px, 2.4vw, 28px);
	--uth-gap: clamp(30px, 4vw, 44px);
	--uth-anchor-offset: 80px;   /* room nav height. Keeps anchors visible. */
}

/* ================================================================== *
 * 2 · Keyframes — all twelve, verbatim from the design source.        *
 *     HANDOVER §5.4. Do not retime, do not rename.                    *
 * ================================================================== */

@keyframes uh-hue { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
@keyframes uh-blob-a { 0%{transform:translate3d(0,0,0) scale(1)} 33%{transform:translate3d(90px,40px,0) scale(1.18)} 66%{transform:translate3d(30px,-52px,0) scale(.92)} 100%{transform:translate3d(0,0,0) scale(1)} }
@keyframes uh-blob-b { 0%{transform:translate3d(0,0,0) scale(1.05)} 40%{transform:translate3d(-110px,54px,0) scale(.88)} 75%{transform:translate3d(-40px,-36px,0) scale(1.22)} 100%{transform:translate3d(0,0,0) scale(1.05)} }
@keyframes uh-blob-c { 0%{transform:translate3d(0,0,0) scale(.95)} 50%{transform:translate3d(64px,-70px,0) scale(1.3)} 100%{transform:translate3d(0,0,0) scale(.95)} }
@keyframes uh-grid { from { background-position: 0 0; } to { background-position: 44px 44px; } }
@keyframes uh-dotpulse { 0%,100%{ opacity:.40 } 50%{ opacity:.95 } }
@keyframes uh-sheen { 0%{transform:translateX(-40%) skewX(-12deg);opacity:0} 45%{opacity:.55} 100%{transform:translateX(140%) skewX(-12deg);opacity:0} }
@keyframes uh-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(1.35)} }
@keyframes th-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes uh-rise { from { opacity:0; transform:translate3d(0,16px,0); } to { opacity:1; transform:none; } }
@keyframes uh-sweep { from { background-position: -140% 0; } to { background-position: 240% 0; } }
@keyframes uh-tick { 0%,100%{ transform:scaleX(.35); opacity:.5 } 50%{ transform:scaleX(1); opacity:1 } }

/* ================================================================== *
 * 3 · Shell and page primitives                                       *
 * ================================================================== */

.uth {
	background: var(--uth-page);
	color: var(--uth-ink);
	font-family: var(--uth-sans);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
	min-height: 100vh;
}

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

.uth-shell,
.uth [data-uh="shell"] {
	max-width: var(--uth-max);
	margin: 0 auto;
	padding: clamp(14px, 2vw, 24px) var(--uth-gutter) 0;
}

/* The live template puts the bottom padding on the shell. Keep it, but only
   where the room is not followed by the theme footer's own spacing. */
.uth-shell { padding-bottom: clamp(40px, 6vw, 72px); }

.uth a { color: var(--uth-deep-teal); text-decoration: none; }
.uth a:hover { color: var(--uth-link-hover); text-decoration: underline; text-underline-offset: 3px; }

.uth a:focus-visible,
.uth button:focus-visible,
.uth summary:focus-visible,
.uth [tabindex]:focus-visible {
	outline: 3px solid var(--uth-deep-teal);
	outline-offset: 2px;
	border-radius: 4px;
}

.uth p { margin: 0; }
.uth table { border-collapse: collapse; }

/* Numbers are quiet and exact. HANDOVER §5.2. Never abbreviated, always
   tabular, never bold as decoration. */
.uth [class*="__value"],
.uth [class*="__val"],
.uth .uth-td--num,
.uth .uth-metric__value,
.uth .uth-stat__value,
.uth .uth-voice__val,
.uth .uth-card__figure,
.uth .uth-stage__figure { font-variant-numeric: tabular-nums; }

/* Every anchored heading and panel clears the sticky room nav. §13. */
.uth [id],
.uth-sec,
.uth-sechead,
.uth-tablewrap,
.uth [data-uh="glossrow"] { scroll-margin-top: var(--uth-anchor-offset); }

.uth-sec { margin-top: var(--uth-gap); }

/* ================================================================== *
 * 4 · Entrance and the statement sweep — verbatim from the source.     *
 * ================================================================== */

.uth [data-uh="sechead"],
.uth [data-uh="statement"],
.uth [data-uh="essay"],
.uth [data-uh="card"],
.uth-sechead,
.uth-statement,
.uth-essay,
.uth-stat,
.uth-metric {
	animation: uh-rise .5s cubic-bezier(.22, .68, 0, 1) both;
}

.uth [data-uh="statement"] p:first-of-type,
.uth-statement__head {
	background: linear-gradient(100deg, #FFFFFF 0%, #FFFFFF 38%, #30d8c8 50%, #FFFFFF 62%, #FFFFFF 100%);
	background-size: 240% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: uh-sweep 7s ease-in-out infinite;
}

/* ================================================================== *
 * 5 · Hover states                                                    *
 *                                                                     *
 * The design tool emitted eight scoped hover classes, .scp0 to .scp7. *
 * Their values are carried over unchanged. Each one is given a real   *
 * name so a template author can read it, and the .scp* alias is kept  *
 * so a straight paste of the mockup markup still behaves.             *
 *                                                                     *
 *   scp0  Ask Lee pill          chrome, theme owned                   *
 *   scp1  mega menu link        chrome, theme owned                   *
 *   scp2  jump pill                                                   *
 *   scp3  tint row              ladder rows, table rows, list rows    *
 *   scp4  stat tile lift        -3px, §5.3                            *
 *   scp5  card lift             -4px + ink border, §5.3               *
 *   scp6  where next card       -2px                                  *
 *   scp7  footer link           chrome, theme owned                   *
 * ================================================================== */

/* scp0, scp1 and scp7 belong to chrome the theme owns. They are kept
   unscoped so a straight paste of the mockup chrome still behaves, and
   they match nothing the theme itself renders. */
.scp0:hover {
	border-color: #e84898;
	background: #fff5fa;
}

.scp1:hover {
	background: #F2F4F7;
	color: #0a4444;
	text-decoration: none;
}

.scp2:hover,
.uth [data-uh="jumps"] a:hover,
.uth .uth-jumps__link:hover {
	background: #042220;
	color: #30d8c8;
	border-color: #042220;
	text-decoration: none;
}

.scp3:hover,
.uth [data-uh="listrow"]:hover,
.uth [data-uh="ladderrow"]:hover,
.uth .uth-ladder__row:hover,
.uth .uth-listrow:hover,
.uth .uth-table tbody tr:hover > * { background: #F2F4F7; }

.scp4:hover,
.uth [data-uh="card"]:hover,
.uth .uth-stat:hover,
.uth .uth-metric:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 34px rgba(14, 15, 18, .10);
}

.scp5:hover,
.uth [data-uh="card"].uth-card--framed:hover,
.uth .uth-stat--card:hover,
.uth .uth-card--framed:hover {
	border-color: #042220;
	transform: translateY(-4px);
	box-shadow: 0 16px 38px rgba(4, 34, 32, .10);
}

.scp6:hover,
.uth .uth-next__card:hover {
	border-color: #042220;
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .05);
	text-decoration: none;
	color: inherit;
}

.scp7:hover { color: #30d8c8; }

/* ================================================================== *
 * 6 · Chrome switches — HANDOVER §11.6                                *
 *                                                                     *
 * The theme renders the real header, mega menu, drawer and footer.    *
 * These three rules are the show and hide logic the delivered markup  *
 * depends on and nothing more. They are carried over verbatim, then   *
 * repeated inside the breakpoint blocks exactly as the source had     *
 * them. If the theme already owns this behaviour, delete this block   *
 * and nothing else in the file changes.                               *
 * ================================================================== */

[data-th="burger"] { display: none; }

@media (max-width: 1180px) {
	[data-th="nav"] { display: none !important; }
	[data-th="burger"] { display: inline-flex !important; }
	[data-th="asklee"] span:last-child { display: none; }
	[data-th="asklee"] { padding: 0 6px !important; }
}

@media (min-width: 1181px) {
	[data-th="drawer"] { display: none !important; }
}

/* ================================================================== *
 * 7 · Typography primitives                                           *
 * ================================================================== */

.uth-h1,
.uth [data-uh="hero"] h1 {
	font-family: var(--uth-sans);
	font-weight: 800;
	font-size: var(--uth-t-h1);
	line-height: .95;
	letter-spacing: var(--uth-t-h1-ls);
	color: var(--uth-ink);
	margin: 16px 0 0;
	text-wrap: balance;
}

.uth-h2 {
	font-family: var(--uth-sans);
	font-weight: 800;
	font-size: var(--uth-t-h2);
	line-height: 1.02;
	letter-spacing: var(--uth-t-h2-ls);
	color: var(--uth-ink);
	margin: 14px 0 0;
	max-width: 24ch;
	text-wrap: balance;
}

.uth-h2--lead {
	font-size: var(--uth-t-h2-lead);
	letter-spacing: -.028em;
	max-width: 20ch;
}

.uth-h2--sm {
	font-size: var(--uth-t-h2-sm);
	letter-spacing: -.022em;
	max-width: none;
}

/* The one italic serif accent word. Instrument Serif, accent words only. */
.uth-em,
.uth h1 em,
.uth h2 em {
	font-family: var(--uth-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--uth-teal);
	letter-spacing: -.012em;
}

.uth h2 em { letter-spacing: -.010em; }

/* Serif is for accent words, card titles, list titles, glossary terms,
   section numerals and the wordmark. Never a paragraph. §5.2. */
.uth-serif {
	font-family: var(--uth-serif);
	font-weight: 400;
	line-height: 1.15;
}

.uth-serif--italic { font-style: italic; }

/* Mono is for small UPPERCASE labels only, never a sentence. §5.2. */
.uth-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--uth-mono);
	font-weight: 700;
	font-size: var(--uth-t-mono);
	line-height: 1;
	letter-spacing: .10em;
	text-transform: uppercase;
	color: var(--uth-slate);
}

.uth-eyebrow--mist { color: var(--uth-mist); }
.uth-eyebrow--cyan { color: var(--uth-cyan); }
.uth-eyebrow--clay { color: var(--uth-clay); }
.uth-eyebrow--teal { color: var(--uth-teal); }
.uth-eyebrow--sm { font-size: var(--uth-t-mono-sm); }

.uth-pip {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--uth-cyan);
	box-shadow: 0 0 0 4px rgba(48, 216, 200, .18);
	flex: 0 0 auto;
}

.uth-pip--sm { width: 6px; height: 6px; box-shadow: none; }

/* Mono path pill. The live template's route and endpoint rows use it. */
.uth-path {
	display: inline-block;
	font-family: var(--uth-mono);
	font-weight: 400;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--uth-deep-teal);
	word-break: break-all;
	background: var(--uth-tint);
	border-radius: 8px;
	padding: 5px 9px;
}

.uth-mono-note {
	font-family: var(--uth-mono);
	font-weight: 400;
	font-size: var(--uth-t-mono);
	line-height: 1.5;
	color: var(--uth-mist);
}

/* ================================================================== *
 * 8 · Breadcrumb and room navigation                                  *
 * ================================================================== */

.uth-crumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--uth-slate);
	padding: 4px 0 14px;
}

.uth-crumb span[aria-hidden] { color: var(--uth-mist); }
.uth-crumb [aria-current] { color: var(--uth-ink); font-weight: 600; }

/*
 * The bar is safe in either position. The delivered markup puts it above
 * the shell; the live template puts it inside. The base rule assumes the
 * former, and the child rule breaks it out to the shell edges when it is
 * the latter, so neither arrangement produces a horizontal scrollbar.
 */
.uth-rooms {
	position: sticky;
	top: 0;
	z-index: 40;
	margin: 18px 0 0;
	background: rgba(232, 234, 238, .92);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--uth-hairline);
}

.uth-shell > .uth-rooms {
	margin-left: calc(var(--uth-gutter) * -1);
	margin-right: calc(var(--uth-gutter) * -1);
}

.uth-rooms__inner,
.uth [data-uh="roomnav"] {
	max-width: var(--uth-max);
	margin: 0 auto;
	padding: 10px var(--uth-gutter);
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.uth-rooms__brand,
.uth [data-uh="roomtitle"] {
	display: flex;
	align-items: baseline;
	gap: 8px;
	white-space: nowrap;
}

.uth-rooms__title {
	font-weight: 800;
	font-size: 15px;
	line-height: 1;
	letter-spacing: -.022em;
}

.uth-rooms__host {
	font-family: var(--uth-mono);
	font-weight: 400;
	font-size: var(--uth-t-chip);
	line-height: 1;
	letter-spacing: .08em;
	color: var(--uth-slate);
}

.uth-rooms__list {
	display: flex;
	gap: 6px;
	flex-wrap: nowrap;
	overflow-x: auto;
	list-style: none;
	margin: 0 0 0 auto;
	padding: 2px;
	scrollbar-width: thin;
}

.uth-rooms__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	white-space: nowrap;
	cursor: pointer;
	border: 1px solid var(--uth-hairline);
	background: var(--uth-card);
	color: var(--uth-ink);
	font-family: var(--uth-sans);
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
	padding: 9px 15px;
	border-radius: var(--uth-r-pill);
	transition: all .16s var(--uth-ease);
}

.uth-rooms__link:hover,
.uth-rooms__link.is-current,
.uth-rooms__link[aria-current] {
	background: var(--uth-ink);
	color: var(--uth-cyan);
	border-color: var(--uth-ink);
	text-decoration: none;
}

/* ================================================================== *
 * 9 · The animated hero band. HANDOVER §5.4 — four stacked layers,     *
 *     content at z-index 1, every layer aria-hidden and inert.         *
 * ================================================================== */

.uth-hero,
.uth [data-uh="hero"] {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border: 1px solid rgba(4, 34, 32, .10);
	border-radius: var(--uth-r-hero);
	padding: clamp(26px, 3.6vw, 46px);
	/* Layer 1 — base */
	background: var(--uth-hero-base);
}

/* Layer 2 — blob layer, hue rotating as a whole. */
.uth-hero__blobs {
	position: absolute;
	inset: 0;
	pointer-events: none;
	animation: uh-hue 26s linear infinite;
}

.uth-hero__blobs > * {
	position: absolute;
	border-radius: 50%;
	display: block;
}

.uth-hero__blobs [data-anim="a"] {
	width: 540px;
	height: 540px;
	left: -140px;
	top: -190px;
	background: radial-gradient(circle at 40% 40%, rgba(94, 234, 212, .85), rgba(94, 234, 212, 0) 68%);
	animation: uh-blob-a 19s ease-in-out infinite;
}

.uth-hero__blobs [data-anim="b"] {
	width: 480px;
	height: 480px;
	right: -110px;
	top: -140px;
	background: radial-gradient(circle at 50% 50%, rgba(255, 190, 132, .62), rgba(255, 190, 132, 0) 66%);
	animation: uh-blob-b 23s ease-in-out infinite;
}

.uth-hero__blobs [data-anim="c"] {
	width: 560px;
	height: 560px;
	left: 34%;
	bottom: -300px;
	background: radial-gradient(circle at 50% 50%, rgba(140, 196, 255, .58), rgba(140, 196, 255, 0) 68%);
	animation: uh-blob-c 29s ease-in-out infinite;
}

/* Layer 3 — dot grid. */
.uth-hero__dots {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(4, 34, 32, .11) 1px, transparent 1px);
	background-size: 22px 22px;
	animation: uh-grid 7s linear infinite, uh-dotpulse 8s ease-in-out infinite;
}

/* Layer 4 — sheen. */
.uth-hero__sheenwrap {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.uth-hero__sheen {
	position: absolute;
	top: -10%;
	bottom: -10%;
	width: 24%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .6), rgba(255, 255, 255, 0));
	animation: uh-sheen 11s ease-in-out infinite;
}

.uth-hero__inner,
.uth [data-uh="herorow"] {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 28px 44px;
	align-items: flex-start;
}

.uth-hero__main { flex: 1 1 480px; min-width: 0; }

.uth-hero__side,
.uth [data-uh="herostats"] {
	flex: 1 1 250px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.uth-hero__kicker {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--uth-mono);
	font-weight: 700;
	font-size: var(--uth-t-mono);
	line-height: 1;
	letter-spacing: .10em;
	text-transform: uppercase;
	color: var(--uth-clay);
}

.uth-hero__pip {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--uth-clay);
	box-shadow: 0 0 14px rgba(196, 75, 75, .45);
	animation: uh-pulse 1.9s ease-in-out infinite;
	flex: 0 0 auto;
}

.uth-hero__lede {
	font-size: 17px;
	line-height: 1.6;
	color: var(--uth-ink-body);
	max-width: 58ch;
	margin: 20px 0 0;
}

/* C10, the one line summary every room hero carries. §7. */
.uth-hero__voice {
	font-weight: 600;
	font-size: 16px;
	line-height: 1.6;
	color: var(--uth-teal);
	max-width: 58ch;
	margin: 14px 0 0;
}

.uth-hero__promises {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	max-width: 820px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 14px 22px;
}

.uth-hero__promises li {
	position: relative;
	padding-left: 17px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--uth-ink-body);
}

.uth-hero__promises li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .5em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--uth-teal);
}

.uth-hero__index,
.uth [data-uh="heroindex"] {
	font-family: var(--uth-mono);
	font-weight: 700;
	font-size: var(--uth-t-mono);
	line-height: 1;
	letter-spacing: .10em;
	text-transform: uppercase;
	color: var(--uth-label-dim);
	text-align: right;
}

.uth-hero__counters {
	background: rgba(255, 255, 255, .86);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(4, 34, 32, .10);
	border-radius: var(--uth-r-tile);
	padding: 22px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
	gap: 18px 14px;
}

/* Gradient numeral with the mandatory solid fallback. §5.3. */
.uth-hero__cval {
	display: block;
	font-weight: 800;
	font-size: 30px;
	line-height: 1;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
	color: var(--uth-ink);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.uth-hero__cval {
		background: linear-gradient(135deg, #042220 25%, #0b8b7a);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

.uth-hero__clab {
	display: block;
	font-family: var(--uth-mono);
	font-weight: 700;
	font-size: var(--uth-t-chip);
	line-height: 1.3;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--uth-label-dim);
	margin-top: 6px;
}

/* ================================================================== *
 * 10 · Jump bar — on this page, plus the generation stamp             *
 * ================================================================== */

.uth-jumps,
.uth [data-uh="jumps"] {
	background: var(--uth-card);
	border-radius: var(--uth-r-panel);
	padding: 18px 22px;
	margin-top: 18px;
	box-shadow: var(--uth-shadow);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 14px;
}

.uth-jumps__lab {
	font-family: var(--uth-mono);
	font-weight: 700;
	font-size: var(--uth-t-mono);
	line-height: 1;
	letter-spacing: .10em;
	text-transform: uppercase;
	color: var(--uth-mist);
}

.uth-jumps__list { display: flex; gap: 8px; flex-wrap: wrap; }

.uth-jumps__link {
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
	padding: 8px 14px;
	border-radius: var(--uth-r-pill);
	border: 1.5px solid var(--uth-hairline);
	color: var(--uth-ink);
	background: var(--uth-card);
	transition: all .16s var(--uth-ease);
}

/* Generated / next / chain. Computed server side, never typed. §7.1. */
.uth-jumps__stamp {
	margin-left: auto;
	font-family: var(--uth-mono);
	font-weight: 400;
	font-size: var(--uth-t-mono-sm);
	line-height: 1;
	letter-spacing: .06em;
	color: var(--uth-mist);
}

/* ================================================================== *
 * 11 · C06 · Section head                                             *
 *      Serif numeral · mono eyebrow with cyan pip · h2 with one        *
 *      italic serif word · 15.5px intro at 72ch. Cyan to hairline top. *
 * ================================================================== */

.uth-sechead,
.uth [data-uh="sechead"] {
	border-top: 2px solid transparent;
	border-image: var(--uth-sechead-grad) 1;
	padding-top: 20px;
	margin: var(--uth-gap) 0 18px;
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	gap: 10px 28px;
	align-items: start;
}

.uth-sechead__num,
.uth [data-uh="secnum"] {
	font-family: var(--uth-serif);
	font-weight: 400;
	font-size: var(--uth-t-secnum);
	line-height: .9;
	color: var(--uth-numeral);
	flex: 0 0 auto;
}

.uth-sechead__body { min-width: 0; }

.uth-sechead__intro {
	font-size: var(--uth-t-intro);
	line-height: 1.6;
	color: var(--uth-slate);
	max-width: 72ch;
	margin: 12px 0 0;
	text-wrap: pretty;
}

/* The lighter in body head used above prose and tables. */
.uth-blockhead {
	margin: var(--uth-gap) 0 16px;
	scroll-margin-top: var(--uth-anchor-offset);
}

.uth-blockhead--split {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
}

.uth-blockhead__intro {
	font-size: 14px;
	line-height: 1.55;
	color: var(--uth-slate);
	max-width: 74ch;
	margin: 10px 0 0;
}

/* ================================================================== *
 * 12 · C01 · Chip                                                     *
 *      teas · ms · window · rule · live · frozen.                      *
 *      Window chips carry rendered dates, never "week to date".        *
 * ================================================================== */

.uth-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 16px 0 0;
}

.uth-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--uth-mono);
	font-weight: 700;
	font-size: var(--uth-t-chip);
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 7px 11px;
	border-radius: var(--uth-r-pill);
	background: var(--uth-tint);
	color: var(--uth-ink);
}

.uth-chip__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--uth-teal);
	flex: 0 0 auto;
}

.uth-chip--teas .uth-chip__dot { background: var(--uth-teal); }
.uth-chip--ms .uth-chip__dot { background: var(--uth-ms-kicker); }
.uth-chip--live .uth-chip__dot { background: var(--uth-teal); }
.uth-chip--frozen .uth-chip__dot { background: var(--uth-mist); }
.uth-chip--window { background: var(--uth-cream); }
.uth-chip--rule { background: var(--uth-cream); }

/* Freshness is stated as a word, never colour alone. §13. The tick is a
   quiet motion cue beside the word, never a replacement for it. */
.uth-chip--live .uth-chip__dot {
	animation: uh-tick 2.4s ease-in-out infinite;
	transform-origin: center;
}

/* ================================================================== *
 * 13 · C02 · Metric                                                   *
 *      Fails loudly. A bare number is the failure mode that let four   *
 *      different figures all be called "successful".                   *
 * ================================================================== */

.uth-metric {
	background: var(--uth-card);
	border-radius: var(--uth-r-tile);
	padding: 20px;
	box-shadow: var(--uth-shadow);
	transition: transform var(--uth-lift), box-shadow var(--uth-lift);
}

.uth-metric__value {
	font-weight: 800;
	font-size: clamp(30px, 3.4vw, 40px);
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--uth-ink);
}

.uth-metric--sm .uth-metric__value { font-size: 24px; }
.uth-metric--lg .uth-metric__value { font-size: clamp(38px, 4.4vw, 50px); }

.uth-metric__unit {
	font-size: .5em;
	font-weight: 700;
	color: var(--uth-slate);
	margin-left: 4px;
}

.uth-metric__label {
	font-family: var(--uth-mono);
	font-weight: 700;
	font-size: var(--uth-t-mono-sm);
	line-height: 1.3;
	letter-spacing: .10em;
	text-transform: uppercase;
	color: var(--uth-slate);
	margin-top: 10px;
}

.uth-metric__note {
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--uth-slate);
	margin-top: 8px;
}

.uth-metric__prov {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 8px 14px;
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--uth-hairline);
}

.uth-metric__prov dt {
	font-family: var(--uth-mono);
	font-weight: 700;
	font-size: var(--uth-t-chip);
	line-height: 1.3;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--uth-mist);
}

.uth-metric__prov dd {
	margin: 3px 0 0;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--uth-ink-body);
}

/* Loud failure. Never a quiet bare number. HANDOVER §6 C02. */
.uth-fail {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	border: 2px solid var(--uth-clay);
	background: #fdf1f1;
	color: #7a1f1f;
	border-radius: var(--uth-r-row);
	padding: 8px 12px;
	max-width: 100%;
}

.uth-fail__tag {
	font-family: var(--uth-mono);
	font-weight: 700;
	font-size: var(--uth-t-chip);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--uth-clay);
}

.uth-fail__msg { font-size: 13px; line-height: 1.4; }

/* ================================================================== *
 * 14 · C07 · Stat tile and card                                       *
 *      Gradient figure first, 2px cyan rule, mono label, note.         *
 *      Cards carry a gradient left spine, tiles a gradient top line.   *
 * ================================================================== */

.uth-stats,
.uth-statgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	margin: 18px 0 0;
}

.uth-cardgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 14px;
	margin: 18px 0;
}

.uth-cardgrid--wide { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.uth-cardgrid--stages { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }

/* Tile — the top line variant. Hover lift -3px, §5.3. */
.uth-stat,
.uth [data-uh="card"] {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: var(--uth-card);
	border-radius: var(--uth-r-tile);
	padding: 20px;
	box-shadow: var(--uth-shadow-tile);
	transition: all var(--uth-lift);
	min-height: 44px;
	color: inherit;
}

.uth-stat__topline {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	background: var(--uth-rule-grad);
}

/* Card — the left spine variant. Hover lift -4px + ink border, §5.3. */
.uth-stat--card,
.uth-card--framed,
.uth [data-uh="card"].uth-card--framed {
	border: 1px solid var(--uth-hairline-soft);
	border-radius: var(--uth-r-card);
	padding: 22px;
	box-shadow: none;
	transition: all var(--uth-lift-slow);
}

.uth-stat__spine {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--uth-spine-grad);
}

.uth-stat--link { color: inherit; text-decoration: none; }
.uth-stat--link:hover { text-decoration: none; color: inherit; }

/* The figure. Gradient fill with a solid fallback, always tabular. §5.3. */
.uth-stat__value,
.uth-card__figure {
	font-weight: 800;
	font-size: clamp(28px, 3.2vw, 34px);
	line-height: 1;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
	color: var(--uth-ink);
}

.uth-card__figure { font-size: clamp(30px, 3.4vw, 38px); margin: 16px 0 0; }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.uth-stat__value,
	.uth-card__figure {
		background: var(--uth-num-grad);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

.uth-stat__rule {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--uth-cyan);
	margin: 12px 0 10px;
	border: 0;
}

.uth-stat__label {
	font-family: var(--uth-mono);
	font-weight: 700;
	font-size: var(--uth-t-chip);
	line-height: 1.3;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--uth-slate);
}

.uth-stat__note {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--uth-mist);
	margin-top: 6px;
}

.uth-card__kicker {
	font-family: var(--uth-mono);
	font-weight: 700;
	font-size: 10.5px;
	line-height: 1.3;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--uth-clay);
}

.uth-card__title {
	font-family: var(--uth-serif);
	font-style: italic;
	font-weight: 400;
	font-size: 23px;
	line-height: 1.15;
	margin: 10px 0 0;
	color: var(--uth-ink);
}

.uth-card__blurb {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--uth-slate);
	margin: 12px 0 0;
}

.uth-stat__prov {
	font-family: var(--uth-mono);
	font-weight: 400;
	font-size: var(--uth-t-chip);
	line-height: 1.5;
	letter-spacing: .03em;
	color: var(--uth-mist);
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--uth-hairline-soft);
}

/* The four stage cards on the home room. Serif line, then the reading. */
.uth-stages {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 18px;
	margin: 18px 0 0;
}

.uth-stage {
	background: var(--uth-card);
	border-radius: var(--uth-r-card);
	padding: clamp(16px, 2.2vw, 22px);
	box-shadow: var(--uth-shadow);
	display: flex;
	flex-direction: column;
}

.uth-stage--cream { background: var(--uth-cream); }

.uth-stage--dark {
	background: var(--uth-dark-grad);
	color: var(--uth-on-dark);
	box-shadow: var(--uth-shadow-dark);
}

.uth-stage__figure {
	font-weight: 800;
	font-size: clamp(38px, 4.4vw, 50px);
	line-height: 1;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
	margin: 18px 0 0;
}

.uth-stage--dark .uth-stage__figure { color: var(--uth-cyan); }

.uth-stage__line {
	font-family: var(--uth-serif);
	font-style: italic;
	font-weight: 400;
	font-size: 24px;
	line-height: 1.15;
	margin: 10px 0 0;
}

.uth-stage--dark .uth-stage__line { color: #FFFFFF; }

.uth-stage__note {
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--uth-slate);
	margin: 10px 0 0;
}

.uth-stage--dark .uth-stage__note { color: var(--uth-on-dark-mute); }

.uth-stage__note strong { font-weight: 700; color: var(--uth-ink); }
.uth-stage--dark .uth-stage__note strong { color: var(--uth-cyan); }

/* ================================================================== *
 * 15 · C04 · Table and reconciliation                                 *
 *      A table without a computed reconciliation line does not render. *
 *      Tables never collapse into stacked cards on mobile: a forensic  *
 *      table loses meaning when rows leave their headers. §6.          *
 * ================================================================== */

.uth-tablewrap,
.uth [data-uh="table"] {
	background: var(--uth-card);
	border-radius: var(--uth-r-panel);
	padding: clamp(18px, 2.4vw, 28px);
	box-shadow: var(--uth-shadow-tile);
	margin: 18px 0 0;
	scroll-margin-top: var(--uth-anchor-offset);
}

.uth-tablescroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background:
		linear-gradient(90deg, var(--uth-card) 30%, rgba(255, 255, 255, 0)),
		linear-gradient(90deg, rgba(255, 255, 255, 0), var(--uth-card) 70%) 100% 0,
		radial-gradient(farthest-side at 0 50%, rgba(14, 15, 18, .14), rgba(14, 15, 18, 0)),
		radial-gradient(farthest-side at 100% 50%, rgba(14, 15, 18, .14), rgba(14, 15, 18, 0)) 100% 0;
	background-repeat: no-repeat;
	background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
	background-attachment: local, local, scroll, scroll;
}

.uth-table {
	width: 100%;
	min-width: 560px;
}

.uth-table--wide { min-width: 720px; }

.uth-table__caption {
	caption-side: top;
	text-align: left;
	font-weight: 800;
	font-size: 17px;
	line-height: 1.3;
	letter-spacing: -.018em;
	color: var(--uth-ink);
	padding: 0 12px 14px;
}

/* Sticky header on a white background. §6 C04. */
.uth-th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--uth-card);
	text-align: left;
	padding: 8px 12px 12px;
	border-bottom: 1px solid rgba(14, 15, 18, .16);
	font-family: var(--uth-mono);
	font-weight: 700;
	font-size: var(--uth-t-mono-sm);
	line-height: 1;
	letter-spacing: .10em;
	text-transform: uppercase;
	color: var(--uth-slate);
	white-space: nowrap;
}

.uth-td {
	padding: 12px;
	border-bottom: 1px solid var(--uth-hairline-soft);
	font-size: var(--uth-t-cell);
	line-height: 1.4;
	color: var(--uth-ink);
	text-align: left;
	vertical-align: top;
}

.uth-td--name { font-weight: 600; line-height: 1.32; border-radius: var(--uth-r-row-sm) 0 0 var(--uth-r-row-sm); }
.uth-td--num { font-weight: 500; white-space: nowrap; color: var(--uth-ink-body); font-variant-numeric: tabular-nums; }
.uth-td--note { font-weight: 400; font-size: 13.5px; line-height: 1.45; color: var(--uth-slate); }
.uth-td--link { font-weight: 600; color: var(--uth-deep-teal); }

.uth-td--mono {
	font-family: var(--uth-mono);
	font-weight: 700;
	font-size: var(--uth-t-mono-sm);
	letter-spacing: .04em;
	color: var(--uth-mist);
}

.uth-td__sub {
	font-family: var(--uth-mono);
	font-weight: 400;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--uth-mist);
	margin-top: 5px;
}

th.uth-td { font-weight: 600; }
.uth-r,
.uth-th--r,
.uth-td--r { text-align: right; }

/* A table without this line does not render at all. Computed, never typed. */
.uth-recon {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 18px 0 0;
	padding: 10px 14px;
	border-radius: var(--uth-r-pill);
	background: linear-gradient(120deg, #eff7f6, #dff2ec);
	border: 1px solid rgba(11, 139, 122, .18);
	font-family: var(--uth-mono);
	font-weight: 700;
	font-size: var(--uth-t-chip);
	line-height: 1.4;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--uth-teal);
	max-width: 100%;
}

.uth-recon__text { text-transform: none; letter-spacing: .02em; }

.uth-recon--warn {
	background: #fdf3ea;
	border-color: rgba(196, 75, 75, .22);
	color: #8a3a12;
}

.uth-recon__mark { font-weight: 700; flex: 0 0 auto; }
.uth-recon--ok .uth-recon__mark { color: var(--uth-teal); }
.uth-recon--warn .uth-recon__mark { color: var(--uth-clay); }

.uth-tablewrap__source {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--uth-slate);
	margin: 12px 0 0;
}

/* ================================================================== *
 * 16 · C05 · Dual register                                            *
 *      In plain words, then Precisely. Plain words always first.       *
 * ================================================================== */

.uth-dual {
	border-top: 1px solid var(--uth-hairline);
	margin-top: 16px;
	padding-top: 14px;
}

.uth-dual__title {
	font-family: var(--uth-serif);
	font-weight: 400;
	font-size: 23px;
	line-height: 1.2;
	color: var(--uth-ink);
	margin: 0 0 10px;
}

.uth-dual__lab {
	font-family: var(--uth-mono);
	font-weight: 700;
	font-size: var(--uth-t-mono);
	line-height: 1;
	letter-spacing: .10em;
	text-transform: uppercase;
	color: var(--uth-mist);
}

.uth-dual__body {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--uth-ink-body);
	margin: 7px 0 14px;
}

.uth-dual__body:last-child { margin-bottom: 0; }

.uth-dual--dark {
	background: var(--uth-dark-grad);
	border: 0;
	border-radius: var(--uth-r-card);
	padding: clamp(18px, 2.4vw, 26px);
	margin-top: 18px;
	box-shadow: var(--uth-shadow-dark);
}

.uth-dual--dark .uth-dual__title { color: #FFFFFF; }
.uth-dual--dark .uth-dual__lab { color: var(--uth-cyan); }
.uth-dual--dark .uth-dual__body { color: rgba(235, 242, 241, .86); }
.uth-dual--dark { border-top: 1px solid var(--uth-on-dark-line); }

/* ================================================================== *
 * 17 · C03 · The Gap — the hatched A5 band. Exactly once on the site.  *
 * ================================================================== */

.uth-gap {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	margin: 12px 0;
	border: 2px solid var(--uth-ink);
	background: repeating-linear-gradient(-45deg, transparent 0 7px, rgba(4, 34, 32, .10) 7px 8px);
	padding: 24px 20px;
}

.uth-gap__kicker {
	font-family: var(--uth-mono);
	font-weight: 700;
	font-size: var(--uth-t-chip);
	line-height: 1;
	letter-spacing: .10em;
	text-transform: uppercase;
	color: var(--uth-clay);
}

.uth-gap__line {
	font-family: var(--uth-serif);
	font-weight: 400;
	font-size: 23px;
	line-height: 1.2;
	color: var(--uth-ink);
	margin: 12px 0 8px;
}

.uth-gap__under {
	font-family: var(--uth-mono);
	font-weight: 700;
	font-size: var(--uth-t-mono-sm);
	line-height: 1.4;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--uth-slate);
	margin: 0;
}

/* The two proof ladders either side of the Gap. */
.uth-ladder {
	background: var(--uth-card);
	border-radius: var(--uth-r-card);
	padding: clamp(16px, 2.2vw, 22px);
	box-shadow: var(--uth-shadow-tile);
}

.uth-ladder__head {
	border-bottom: 1px solid var(--uth-hairline);
	padding-bottom: 12px;
	font-family: var(--uth-mono);
	font-weight: 700;
	font-size: var(--uth-t-mono-sm);
	line-height: 1;
	letter-spacing: .10em;
	text-transform: uppercase;
	color: var(--uth-slate);
}

.uth-ladder__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	align-items: baseline;
	padding: 11px;
	border-radius: var(--uth-r-row);
	transition: background .14s var(--uth-ease);
}

.uth-ladder__event { font-weight: 600; font-size: 13.5px; line-height: 1.32; }

.uth-ladder__id {
	font-family: var(--uth-mono);
	font-weight: 700;
	font-size: var(--uth-t-chip);
	color: var(--uth-mist);
	margin-right: 8px;
}

.uth-ladder__who { font-weight: 400; font-size: 12px; color: var(--uth-mist); }

.uth-ladder__figure {
	font-weight: 600;
	font-size: 13.5px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ================================================================== *
 * 18 · C08 · Statement — one per room, maximum.                       *
 *      Dark gradient panel (§5.1: never flat ink), cyan chip kicker,   *
 *      headline on a 34ch measure with the light sweep, 15px support.  *
 * ================================================================== */

.uth-statement,
.uth [data-uh="statement"] {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--uth-dark-grad);
	color: var(--uth-on-dark);
	border-radius: var(--uth-r-panel);
	padding: clamp(24px, 3.4vw, 40px);
	margin-bottom: 18px;
	box-shadow: var(--uth-shadow-dark);
}

/* Two cyan radial glows and a 22px dot grid at .5 opacity, for depth. §5.1. */
.uth-statement::before,
.uth [data-uh="statement"]::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: -1;
	background: var(--uth-dark-glow);
}

.uth-statement::after,
.uth [data-uh="statement"]::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: -1;
	opacity: .5;
	background-image: var(--uth-dark-dots);
	background-size: 22px 22px;
}

.uth-statement__spine {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--uth-cyan);
}

.uth-statement__kicker {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--uth-mono);
	font-weight: 700;
	font-size: var(--uth-t-mono-sm);
	line-height: 1;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--uth-cyan);
	background: rgba(48, 216, 200, .13);
	border: 1px solid rgba(48, 216, 200, .22);
	border-radius: var(--uth-r-pill);
	padding: 7px 13px;
}

.uth-statement__kicker--plain {
	background: none;
	border: 0;
	padding: 0;
	letter-spacing: .10em;
}

.uth-statement__head {
	font-weight: 800;
	font-size: var(--uth-t-statement);
	line-height: 1.24;
	letter-spacing: -.024em;
	margin: 14px 0 0;
	max-width: 34ch;
	color: #FFFFFF;
	text-wrap: balance;
}

.uth-statement__head--lg {
	font-size: clamp(23px, 3.4vw, 38px);
	line-height: 1.16;
	letter-spacing: -.028em;
	max-width: 26ch;
	margin: 20px 0 0;
}

.uth-statement__sub {
	font-size: 15px;
	line-height: 1.65;
	color: var(--uth-on-dark-soft);
	margin: 14px 0 0;
	max-width: 74ch;
}

.uth-statement__rule {
	height: 1px;
	border: 0;
	background: linear-gradient(90deg, rgba(48, 216, 200, .55), rgba(239, 247, 246, .06));
	margin: 26px 0 24px;
}

.uth-statement__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 22px 40px;
}

.uth-statement__cols p {
	font-size: var(--uth-t-intro);
	line-height: 1.7;
	color: rgba(235, 242, 241, .84);
	margin: 0;
	text-wrap: pretty;
}

.uth-statement strong { font-weight: 700; color: var(--uth-cyan); }

/* ================================================================== *
 * 19 · Essay, prose and dark prose                                    *
 * ================================================================== */

.uth-essay,
.uth [data-uh="essay"] {
	background: var(--uth-card);
	border-radius: var(--uth-r-panel);
	padding: clamp(20px, 3vw, 36px);
	margin-bottom: 18px;
	box-shadow: var(--uth-shadow-tile);
}

.uth-essay__block { max-width: 74ch; padding-bottom: 22px; }
.uth-essay__block:last-child { padding-bottom: 0; }

.uth-essay__head {
	position: relative;
	font-weight: 800;
	font-size: var(--uth-t-h3);
	line-height: 1.2;
	letter-spacing: -.018em;
	margin: 0 0 12px;
	padding-left: 16px;
}

.uth-essay__head::before {
	content: "";
	position: absolute;
	left: 0;
	top: .18em;
	bottom: .18em;
	width: 4px;
	border-radius: var(--uth-r-pill);
	background: var(--uth-spine-grad);
}

.uth-essay p,
.uth-essay__body {
	font-size: var(--uth-t-body);
	line-height: var(--uth-t-body-lead);
	color: var(--uth-ink-body);
	margin: 0 0 14px;
	text-wrap: pretty;
}

.uth-essay p:last-child { margin-bottom: 0; }

.uth-prose--dark {
	background: var(--uth-dark-grad);
	color: var(--uth-on-dark);
	border-radius: var(--uth-r-panel);
	padding: clamp(18px, 2.4vw, 28px);
	margin-top: 18px;
	box-shadow: var(--uth-shadow-dark);
}

.uth-prose--dark .uth-eyebrow { color: var(--uth-cyan); }

.uth-prose__title {
	font-family: var(--uth-serif);
	font-style: italic;
	font-weight: 400;
	font-size: 27px;
	line-height: 1.1;
	margin: 14px 0 0;
	color: #FFFFFF;
}

.uth-prose--dark p {
	font-size: 15px;
	line-height: 1.6;
	color: rgba(235, 242, 241, .9);
	max-width: 76ch;
	margin: 14px 0 0;
}

/* Body copy outside a panel. */
.uth-body { margin-top: 4px; }

/* Shared room grids and top-level rhythm.
 *
 * Room One uses these primitives for its method and verdict groups. The
 * four-stage group already has its own grid rule; without the shared rules
 * the other groups fall back to block flow and their cards touch. Keep the
 * same 18px rhythm used by the established stat, card and stage grids. */
.uth-grid {
	display: grid;
	gap: 18px;
	margin: 18px 0 0;
	align-items: stretch;
}

.uth-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.uth-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.uth-body > .uth-thesis,
.uth-body > .uth-panel,
.uth-body > .uth-statement { margin-top: 18px; }

.uth-body > p,
.uth-body > ul,
.uth-body > ol {
	font-size: var(--uth-t-intro);
	line-height: 1.6;
	color: var(--uth-ink-body);
	max-width: 72ch;
}

/* ================================================================== *
 * 20 · C10 · The counting voice                                       *
 *      One number per line. Fixed order: total in days, per day, last  *
 *      month, last week, yesterday, today. Bars are relative to the    *
 *      panel peak with a 4% floor, computed in PHP, never here. §7.    *
 * ================================================================== */

.uth-voice {
	background: var(--uth-card);
	border-radius: var(--uth-r-card);
	padding: clamp(18px, 2.4vw, 26px);
	box-shadow: var(--uth-shadow-tile);
	margin: 18px 0;
}

.uth-voice__head {
	font-weight: 800;
	font-size: clamp(22px, 2.8vw, 30px);
	line-height: 1.15;
	letter-spacing: -.022em;
	color: var(--uth-ink);
	margin: 12px 0 0;
}

.uth-voice__lede {
	font-size: 15px;
	line-height: 1.6;
	color: var(--uth-ink-body);
	max-width: 70ch;
	margin: 10px 0 18px;
}

.uth-voice__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.uth-voice__row,
.uth [data-uh="voicerow"] {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 14px;
	border-left: 3px solid var(--uth-cyan);
	padding: 8px 0 8px 16px;
}

.uth-voice__lab {
	font-size: 16px;
	line-height: 1.5;
	color: var(--uth-ink-body);
	min-width: 16ch;
}

.uth-voice__val {
	font-weight: 800;
	font-size: 20px;
	line-height: 1.2;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
	color: var(--uth-ink);
}

/* The bar always sits beside the number it encodes, never replacing it. §13. */
.uth-voice__bar {
	flex: 1 1 120px;
	min-width: 80px;
	height: 8px;
	border-radius: var(--uth-r-pill);
	background: var(--uth-page);
	overflow: hidden;
}

.uth-voice__fill {
	display: block;
	height: 100%;
	border-radius: var(--uth-r-pill);
	background: var(--uth-bar-grad);
	transition: width .6s var(--uth-ease-rise);
}

.uth-voice__foot {
	font-family: var(--uth-mono);
	font-weight: 400;
	font-size: var(--uth-t-mono-sm);
	line-height: 1.4;
	letter-spacing: .04em;
	color: var(--uth-mist);
	margin: 16px 0 0;
}

/* The older grid form of the same component, still on the live page. */
.uth-voice__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
}

.uth-voice__cell {
	background: var(--uth-tint);
	border-radius: var(--uth-r-row);
	padding: 14px 16px;
}

.uth-voice__cell .uth-voice__lab {
	display: block;
	min-width: 0;
	font-family: var(--uth-mono);
	font-weight: 700;
	font-size: var(--uth-t-chip);
	line-height: 1.3;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--uth-slate);
}

.uth-voice__cell .uth-voice__val { display: block; font-size: 24px; line-height: 1; margin-top: 8px; }

/* ================================================================== *
 * 21 · Route rows and glossary rows                                   *
 * ================================================================== */

.uth-listrow,
.uth [data-uh="listrow"] {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: 10px 26px;
	padding: 16px 12px;
	margin: 0 -12px;
	border-top: 1px solid var(--uth-hairline);
	border-radius: var(--uth-r-row);
	transition: background .14s var(--uth-ease);
}

.uth-listrow__kicker {
	font-family: var(--uth-mono);
	font-weight: 700;
	font-size: 10px;
	line-height: 1.4;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--uth-clay);
	margin-top: 8px;
}

.uth-listrow__title {
	font-family: var(--uth-serif);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.2;
}

.uth-listrow__text {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--uth-slate);
	margin: 6px 0 0;
	max-width: 74ch;
}

.uth-glossrow,
.uth [data-uh="glossrow"] {
	scroll-margin-top: var(--uth-anchor-offset);
	display: grid;
	grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
	gap: 14px 26px;
	padding: 18px 0;
	border-top: 1px solid var(--uth-hairline);
}

.uth-glossrow__term {
	font-family: var(--uth-serif);
	font-style: italic;
	font-weight: 400;
	font-size: 26px;
	line-height: 1.1;
	margin: 0;
	color: var(--uth-clay);
}

.uth-glossrow__counts {
	font-family: var(--uth-mono);
	font-weight: 700;
	font-size: 10px;
	line-height: 1.4;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--uth-mist);
	margin-top: 8px;
}

.uth-glossrow p {
	font-size: 14px;
	line-height: 1.55;
	color: var(--uth-ink-body);
	margin: 6px 0 14px;
}

.uth-glossrow__source {
	font-family: var(--uth-mono);
	font-weight: 400;
	font-size: 12px;
	line-height: 1.5;
	color: var(--uth-mist);
}

/* ================================================================== *
 * 22 · Callouts, notes, mint state, pending, preview bar              *
 *                                                                     *
 * A warn callout means the reader is about to be told something that   *
 * counts against us, so it gets the clay accent and a real border.     *
 * Never colour on its own: the words carry the meaning. §13.           *
 * ================================================================== */

.uth-callout,
.uth-note {
	background: var(--uth-card);
	border: 1px solid var(--uth-hairline);
	border-left: 3px solid var(--uth-cyan);
	border-radius: 0 var(--uth-r-row) var(--uth-r-row) 0;
	padding: 18px 22px;
	margin: 20px 0 0;
	box-shadow: var(--uth-shadow);
}

.uth-callout p,
.uth-note p {
	margin: 0 0 10px;
	max-width: 72ch;
	font-size: var(--uth-t-intro);
	line-height: 1.65;
	color: var(--uth-ink-body);
}

.uth-callout p:last-child,
.uth-note p:last-child { margin-bottom: 0; }

.uth-callout strong,
.uth-note strong { color: var(--uth-ink); }

.uth-callout--warn { border-left-color: var(--uth-clay); background: var(--uth-tint); }
.uth-note { border-left-color: var(--uth-slate); background: var(--uth-tint); box-shadow: none; }

/* The cream accent panel used for asides inside a section. */
.uth-panel--cream {
	background: var(--uth-cream);
	border-radius: var(--uth-r-card);
	padding: clamp(18px, 2.4vw, 26px);
}

.uth-panel--plain {
	background: var(--uth-card);
	border: 1px solid var(--uth-hairline-soft);
	border-radius: var(--uth-r-panel);
	padding: clamp(18px, 2.4vw, 28px);
}

/* Microsoft's view. The one attribution that is not our own telemetry, so
   it carries its own kicker and figure colours and says so in words. */
.uth-witness {
	scroll-margin-top: var(--uth-anchor-offset);
	background: var(--uth-card);
	border-radius: var(--uth-r-panel);
	padding: clamp(18px, 2.4vw, 28px);
	margin-top: 18px;
	box-shadow: var(--uth-shadow-tile);
	display: flex;
	flex-wrap: wrap;
	gap: 24px 44px;
	align-items: flex-start;
}

.uth-witness__body { flex: 1 1 420px; }
.uth-witness__side { flex: 0 1 240px; }

.uth-witness__kicker {
	font-family: var(--uth-mono);
	font-weight: 700;
	font-size: var(--uth-t-mono-sm);
	line-height: 1;
	letter-spacing: .10em;
	text-transform: uppercase;
	color: var(--uth-ms-kicker);
}

.uth-witness__title {
	font-family: var(--uth-serif);
	font-style: italic;
	font-weight: 400;
	font-size: 27px;
	line-height: 1.1;
	margin: 12px 0 0;
}

.uth-witness__figure {
	font-weight: 800;
	font-size: clamp(38px, 4.4vw, 50px);
	line-height: 1;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
	color: var(--uth-ms-figure);
}

.uth-witness__label {
	font-family: var(--uth-mono);
	font-weight: 700;
	font-size: var(--uth-t-chip);
	line-height: 1.3;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--uth-slate);
	margin-top: 8px;
}

/* Mint state strip. A mint that is running and issuing nothing reads as
   broken unless its state is stated where the zero is. */
.uth-mintstate {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.uth-mintstate li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: var(--uth-card);
	border: 1px solid var(--uth-hairline);
	border-radius: var(--uth-r-row);
	padding: 10px 16px;
	box-shadow: var(--uth-shadow);
}

.uth-mintstate__lab {
	font-family: var(--uth-mono);
	font-size: var(--uth-t-chip);
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--uth-slate);
}

.uth-mintstate__val {
	font-family: var(--uth-mono);
	font-size: var(--uth-t-cell);
	font-variant-numeric: tabular-nums;
	color: var(--uth-ink);
}

.uth-pending {
	background: var(--uth-cream);
	border-radius: var(--uth-r-card);
	padding: clamp(18px, 2.4vw, 26px);
	margin: var(--uth-gap) 0 0;
	font-size: var(--uth-t-intro);
	line-height: 1.6;
	color: var(--uth-ink-body);
	max-width: 72ch;
}

.uth-previewbar {
	background: var(--uth-ink);
	color: var(--uth-dark-body);
	border-radius: var(--uth-r-row);
	padding: 12px 16px;
	margin: 0 0 14px;
	font-family: var(--uth-mono);
	font-size: var(--uth-t-mono-sm);
	line-height: 1.5;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* The CI check list on the workings room. */
.uth-ci-checks {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: grid;
	gap: 8px;
	font-family: var(--uth-mono);
	font-size: var(--uth-t-mono-sm);
	line-height: 1.5;
	letter-spacing: .03em;
	color: var(--uth-slate);
}

.uth-spine {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--uth-spine-grad);
}

/* ================================================================== *
 * 23 · Where next — three links per room, so the rooms form a graph.   *
 * ================================================================== */

.uth-next {
	margin: var(--uth-gap) 0 0;
	border-top: 1px solid var(--uth-hairline);
	padding-top: 24px;
}

.uth-next__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 14px;
	margin-top: 16px;
}

.uth-next__card {
	display: flex;
	flex-direction: column;
	text-align: left;
	cursor: pointer;
	background: var(--uth-card);
	border: 1px solid var(--uth-hairline-soft);
	border-radius: var(--uth-r-tile);
	padding: 20px;
	color: inherit;
	transition: all var(--uth-lift);
}

.uth-next__title {
	font-family: var(--uth-serif);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.2;
}

.uth-next__blurb {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--uth-slate);
	margin-top: 8px;
}

.uth-next__go {
	font-weight: 600;
	font-size: 12.5px;
	line-height: 1;
	color: var(--uth-deep-teal);
	margin-top: 14px;
}

/* ================================================================== *
 * 24 · Breakpoints — HANDOVER §8, carried over verbatim.              *
 *      Verify at 1440 · 1366 · 1194 · 1180 · 1024 · 834 · 810 · 768   *
 *      · 430 · 390 · 360. No horizontal scrollbar at any of them.     *
 * ================================================================== */

/* ---- iPad landscape: 1181 to 1366 (1194 Air, 1366 Pro) ---- */
@media (min-width: 1181px) and (max-width: 1366px) {
	[data-uh="shell"],
	.uth-shell { padding-left: 20px !important; padding-right: 20px !important; }
	[data-uh="hero"],
	.uth-hero { padding: 30px 26px !important; }
	[data-uh="essay"],
	.uth-essay { padding: 26px 22px !important; }
	[data-uh="secnum"],
	.uth-sechead__num { font-size: 34px !important; }
	[data-th="nav"] a { padding-left: 12px !important; padding-right: 12px !important; }
	[data-th="nav"] span > a { padding-left: 12px !important; padding-right: 12px !important; }
}

/* ---- iPad portrait: 700 to 1180 ---- */
@media (min-width: 700px) and (max-width: 1180px) {
	[data-uh="listrow"],
	.uth-listrow { grid-template-columns: minmax(0, 230px) minmax(0, 1fr) !important; }
	[data-uh="glossrow"],
	.uth-glossrow { grid-template-columns: minmax(0, 180px) minmax(0, 1fr) !important; }
	[data-uh="statement"] p:first-of-type,
	.uth-statement__head { font-size: 26px !important; }
	[data-uh="essay"] > div,
	.uth-essay__block { padding-bottom: 18px !important; }
	[data-th="burger"],
	[data-uh="roomnav"] button,
	.uth-rooms__link,
	[data-th="drawer"] a { min-height: 44px !important; }
}

/* ---- tablet and phone shared: 1180 and below ---- */
@media (max-width: 1180px) {
	[data-uh="shell"],
	.uth-shell { padding-left: 18px !important; padding-right: 18px !important; }
	[data-uh="hero"],
	.uth-hero { padding: 26px 20px !important; }
	[data-uh="herorow"],
	.uth-hero__inner { gap: 22px !important; }
	[data-uh="herostats"],
	.uth-hero__side { flex: 1 1 100% !important; }
	[data-uh="heroindex"],
	.uth-hero__index { text-align: left !important; }
	[data-uh="sechead"],
	.uth-sechead { grid-template-columns: 1fr !important; gap: 6px !important; }
	[data-uh="secnum"],
	.uth-sechead__num { font-size: 26px !important; }
	[data-uh="jumps"],
	.uth-jumps { border-radius: 22px !important; }
}

/* ---- phone: 760 and below ---- */
@media (max-width: 760px) {
	[data-uh="shell"],
	.uth-shell { padding-left: 14px !important; padding-right: 14px !important; }
	[data-uh="hero"],
	.uth-hero { border-radius: 22px !important; padding: 22px 16px !important; }
	[data-uh="voicerow"],
	.uth-voice__row {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 2px !important;
		padding-left: 14px !important;
	}
	[data-uh="voicerow"] > span:first-child,
	.uth-voice__lab { min-width: 0 !important; }
	[data-uh="essay"],
	.uth-essay { padding: 20px 16px !important; }
	[data-uh="card"],
	[data-uh="panel"],
	.uth-stat,
	.uth-stat--card,
	.uth-card--framed,
	.uth-voice,
	.uth-panel--cream { border-radius: 20px !important; padding: 18px 16px !important; }
	[data-uh="statement"],
	.uth-statement { padding: 22px 18px !important; }
	[data-uh="glossrow"],
	.uth-glossrow { grid-template-columns: 1fr !important; gap: 8px !important; }
	[data-uh="listrow"],
	.uth-listrow { grid-template-columns: 1fr !important; gap: 6px !important; }
	[data-uh="table"],
	.uth-tablewrap { padding: 16px 14px !important; }
	[data-uh="roomnav"],
	.uth-rooms__inner { padding-left: 14px !important; padding-right: 14px !important; }
	[data-uh="roomtitle"],
	.uth-rooms__brand { display: none !important; }
	[data-uh="roomnav"] nav,
	.uth-rooms__list { margin-left: 0 !important; }
	footer,
	.uth-footer { border-radius: 26px !important; }
	.uth-witness { gap: 18px !important; }
	.uth-metric__prov { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.uth-grid--2,
	.uth-grid--3 { grid-template-columns: 1fr; }
}

/* ---- small phone: 420 and below ---- */
@media (max-width: 420px) {
	[data-uh="hero"] h1,
	.uth-h1 { font-size: 32px !important; }
	[data-uh="jumps"],
	.uth-jumps { padding: 14px 16px !important; }
	.uth-stats,
	.uth-statgrid,
	.uth-cardgrid,
	.uth-voice__grid,
	.uth-next__grid { grid-template-columns: 1fr; }
	.uth-mintstate li { flex: 1 1 100%; }
}

/* 44px minimum tap target on every touch layer. §8, §13. */
@media (pointer: coarse) {
	.uth a,
	.uth button { min-height: 44px; }
	.uth-crumb a,
	.uth-jumps__link { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ================================================================== *
 * 25 · Mobile performance: preserve the designed static composition   *
 *      without continuously repainting decorative layers on phones.   *
 * ================================================================== */

@media (max-width: 767px) {
	[data-uh="sechead"],
	[data-uh="statement"],
	[data-uh="essay"],
	[data-uh="card"],
	.uth-sechead,
	.uth-statement,
	.uth-essay,
	.uth-stat,
	.uth-metric,
	.uth [data-anim],
	.uth-hero__blobs,
	.uth-hero__blobs > *,
	.uth-hero__dots,
	.uth-hero__sheen,
	.uth-hero__pip,
	.uth-chip--live .uth-chip__dot {
		animation: none !important;
	}

	[data-uh="statement"] p:first-of-type,
	.uth-statement__head {
		animation: none !important;
		background: none !important;
		-webkit-text-fill-color: #FFFFFF !important;
		color: #FFFFFF !important;
	}
}

/* ================================================================== *
 * 25 · prefers-reduced-motion: reduce stops every one of them, and     *
 *      the statement's gradient text falls back to solid white.        *
 *      Non negotiable. HANDOVER §5.4, §13.                             *
 * ================================================================== */

@media (prefers-reduced-motion: reduce) {
	[data-uh="sechead"],
	[data-uh="statement"],
	[data-uh="essay"],
	[data-uh="card"],
	.uth-sechead,
	.uth-statement,
	.uth-essay,
	.uth-stat,
	.uth-metric { animation: none !important; }

	[data-uh="statement"] p:first-of-type,
	.uth-statement__head {
		animation: none !important;
		background: none !important;
		-webkit-text-fill-color: #FFFFFF !important;
		color: #FFFFFF !important;
	}

	[data-anim] { animation: none !important; }

	.uth [data-anim],
	.uth-hero__blobs,
	.uth-hero__blobs > *,
	.uth-hero__dots,
	.uth-hero__sheen,
	.uth-hero__pip,
	.uth-chip--live .uth-chip__dot { animation: none !important; }

	.uth *,
	.uth *::before,
	.uth *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ================================================================== *
 * 26 · Print — animation layers hidden, every scrollable table         *
 *      expanded to full width. HANDOVER §5.4, §14.                     *
 * ================================================================== */

@media print {
	[data-anim],
	.no-print,
	.uth-hero__blobs,
	.uth-hero__dots,
	.uth-hero__sheenwrap,
	.uth-hero__sheen,
	.uth-hero__pip,
	.uth .no-print,
	.uth-rooms,
	.uth-jumps,
	.uth-next,
	.uth-previewbar { display: none !important; }

	.uth,
	.uth-hero,
	.uth-statement,
	.uth-prose--dark,
	.uth-dual--dark,
	.uth-stage--dark {
		background: #fff !important;
		color: #000 !important;
		box-shadow: none !important;
		border-color: #000 !important;
	}

	.uth-statement__head,
	.uth-stat__value,
	.uth-card__figure,
	.uth-hero__cval {
		background: none !important;
		-webkit-text-fill-color: #000 !important;
		color: #000 !important;
	}

	.uth-tablescroll {
		overflow: visible !important;
		background: none !important;
	}

	.uth-table {
		min-width: 0 !important;
		width: 100% !important;
		font-size: 10.5px;
	}

	.uth-th { position: static !important; }

	.uth-tablewrap,
	.uth-voice,
	.uth-metric,
	.uth-stat,
	.uth-essay,
	.uth-witness {
		box-shadow: none !important;
		border: 1px solid #000;
		break-inside: avoid;
	}

	.uth a { color: #000 !important; text-decoration: underline; }
}