/* =============================================================================
   TEN DIGITALS - BASE
   Reset, document defaults, typography scale, layout primitives.
   ========================================================================== */

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

* { margin: 0; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--td-header-h) + 24px);
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	background-color: var(--td-bg);
	color: var(--td-ink);
	font-family: var(--td-font-body);
	font-size: var(--td-fs-body);
	font-weight: 400;
	letter-spacing: var(--td-tracking-body);
	line-height: var(--td-lh-body);
	min-height: 100svh;
	overflow-x: hidden;
	transition: background-color var(--td-t-standard) var(--td-ease),
	            color var(--td-t-standard) var(--td-ease);
}

/* Suppress the theme-swap transition for one frame while the toggle fires,
   so switching feels instant rather than smeared. */
html.td-theme-switching,
html.td-theme-switching * {
	transition: none !important;
}

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

img, video { height: auto; }

input, button, textarea, select {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

button { background: none; border: 0; cursor: pointer; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul[class], ol[class] { list-style: none; padding: 0; }

hr {
	border: 0;
	border-top: 1px solid var(--td-line);
	margin: var(--td-s-7) 0;
}

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

/* -- Focus ------------------------------------------------------------------
   Visible, high-contrast and never removed. Spec 22. */
:focus-visible {
	outline: 2px solid var(--td-accent);
	outline-offset: 3px;
	border-radius: var(--td-r-xs);
}

:focus:not(:focus-visible) { outline: none; }

/* =============================================================================
   TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6, .td-h1, .td-h2, .td-h3, .td-h4 {
	font-family: var(--td-font-display);
	font-weight: 600;
	letter-spacing: var(--td-tracking-head);
	line-height: var(--td-lh-heading);
	text-wrap: balance;
}

.td-hero-type, h1, .td-h1 {
	font-size: var(--td-fs-h1);
	font-weight: 700;
	letter-spacing: var(--td-tracking-hero);
	line-height: var(--td-lh-snug);
}

.td-hero-type { font-size: var(--td-fs-hero); line-height: var(--td-lh-tight); }
h2, .td-h2 { font-size: var(--td-fs-h2); line-height: var(--td-lh-snug); }
h3, .td-h3 { font-size: var(--td-fs-h3); }
h4, .td-h4 { font-size: var(--td-fs-h4); font-weight: 600; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p { text-wrap: pretty; }

a {
	color: inherit;
	text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
	transition: color var(--td-t-micro) var(--td-ease),
	            text-decoration-color var(--td-t-micro) var(--td-ease);
}

a:hover { color: var(--td-accent); text-decoration-color: var(--td-accent); }

strong, b { font-weight: 600; }

small { font-size: var(--td-fs-sm); }

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

/* -- Named type roles -------------------------------------------------------- */

.td-eyebrow {
	align-items: center;
	color: var(--td-ink-3);
	display: inline-flex;
	font-family: var(--td-font-body);
	font-size: var(--td-fs-eyebrow);
	font-weight: 600;
	gap: 10px;
	letter-spacing: var(--td-tracking-eyebrow);
	line-height: 1;
	text-transform: uppercase;
}

.td-eyebrow::before {
	background: var(--td-grad-brand);
	border-radius: 1px;
	content: "";
	display: block;
	height: 2px;
	width: 26px;
}

.td-eyebrow--plain::before { display: none; }

/* Long eyebrows wrap awkwardly on narrow screens; tighten rather than break. */
@media (max-width: 639.98px) {
	.td-eyebrow { font-size: 0.6875rem; gap: 8px; letter-spacing: 0.13em; }
	.td-eyebrow::before { width: 18px; }
}

.td-lead {
	color: var(--td-ink-2);
	font-size: var(--td-fs-lead);
	line-height: var(--td-lh-body);
	max-width: var(--td-measure);
}

.td-body-lg { font-size: var(--td-fs-lead); }

.td-muted { color: var(--td-ink-3); }

.td-measure { max-width: var(--td-measure); }
.td-measure-tight { max-width: var(--td-measure-tight); }

.td-numeral {
	font-family: var(--td-font-editorial);
	font-size: var(--td-fs-numeral);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 0.86;
}

.td-accent-text {
	background: var(--td-grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Forced-colours users lose gradient text entirely, so restore a solid fill. */
@media (forced-colors: active) {
	.td-accent-text { background: none; color: CanvasText; }
}

.td-caps {
	font-weight: 600;
	letter-spacing: var(--td-tracking-button);
	text-transform: uppercase;
}

/* =============================================================================
   LAYOUT PRIMITIVES
   12 columns desktop / 8 tablet / 4 mobile - spec 1.
   ========================================================================== */

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

.td-container--narrow { max-width: var(--td-container-narrow); }
.td-container--flush  { padding-inline: 0; }

.td-section {
	padding-block: var(--td-section-y);
	position: relative;
}

.td-section--lg { padding-block: var(--td-section-y-lg); }
.td-section--tight { padding-block: clamp(48px, 5vw, 88px); }
.td-section--alt { background-color: var(--td-bg-alt); }

.td-grid {
	display: grid;
	gap: var(--td-s-5);
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (min-width: 768px) {
	.td-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--td-s-6); }
}

@media (min-width: 1024px) {
	.td-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

.td-stack { display: flex; flex-direction: column; }
.td-stack > * + * { margin-top: var(--td-stack-gap, var(--td-s-4)); }
.td-stack--sm  { --td-stack-gap: var(--td-s-3); }
.td-stack--lg  { --td-stack-gap: var(--td-s-6); }
.td-stack--xl  { --td-stack-gap: var(--td-s-7); }

.td-cluster {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--td-cluster-gap, var(--td-s-4));
}

.td-flow > * + * { margin-top: 1em; }

/* Section header: eyebrow + heading + copy + optional action. */
.td-section-head {
	display: grid;
	gap: var(--td-s-5);
	margin-bottom: clamp(40px, 4.6vw, 80px);
}

@media (min-width: 1024px) {
	.td-section-head--split {
		align-items: end;
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		gap: var(--td-s-8);
	}

	.td-section-head--split .td-section-head__aside {
		justify-self: end;
		text-align: right;
	}
}

.td-section-head__title { max-width: 20ch; }
.td-section-head__copy  { color: var(--td-ink-2); max-width: var(--td-measure); }

/* The header is fixed. Only the homepage hero sits underneath it; every other
   template needs the bar's height reserved at the top of the document. */
.td-main { min-height: 50vh; }

body:not(.td-has-overlay-header) .td-main { padding-top: var(--td-header-h); }

/* .td-page-head already reserves the header height itself. */
body:not(.td-has-overlay-header) .td-main > .td-page-head:first-child { padding-top: clamp(32px, 4vw, 64px); }

/* -----------------------------------------------------------------------------
   NO-JAVASCRIPT FALLBACKS
   Core content and navigation must stay usable if JavaScript fails
   (Vol 01 section 20). The boot script removes .td-no-js before first paint,
   so these rules only ever apply when nothing ran.
   -------------------------------------------------------------------------- */

/* The toggle cannot work without its controller; prefers-color-scheme still does. */
.td-no-js .td-theme-toggle { display: none; }

/* The drawer falls back to a :target disclosure driven purely by the URL hash. */
.td-no-js .td-drawer:target {
	opacity: 1;
	transform: none;
	visibility: visible;
}

/* Every sub-menu is expanded, since nothing can toggle it. */
.td-no-js .td-accordion__panel { grid-template-rows: 1fr; }
.td-no-js .td-accordion__icon { display: none; }

/* Utility */
.td-hidden { display: none !important; }
.td-relative { position: relative; }
.td-text-center { text-align: center; }
.td-mx-auto { margin-inline: auto; }
.td-full-bleed { margin-inline: calc(var(--td-gutter) * -1); }

@media (min-width: 1024px) {
	.td-desktop-only { display: initial; }
	.td-mobile-only { display: none !important; }
}

@media (max-width: 1023.98px) {
	.td-desktop-only { display: none !important; }
}

/* Print: strip motion, glass and decorative geometry. */
@media print {
	.td-header, .td-footer, .td-theme-toggle, .td-hero__stage, .td-decor { display: none !important; }
	body { background: #fff; color: #000; }
	* { box-shadow: none !important; backdrop-filter: none !important; }
}