*,*::before,*::after{box-sizing: border-box}html{-webkit-text-size-adjust: 100%}body{margin: 0;background: var(--sdi-background);color: var(--sdi-body);font-family: var(--sdi-font-body);font-size: var(--sdi-text-body);line-height: var(--sdi-leading-normal);-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}img,video,svg,iframe{max-width: 100%;height: auto}img{display: block}h1,h2,h3,h4,h5,h6{margin: 0 0 var(--sdi-space-sm);color: var(--sdi-heading);font-family: var(--sdi-font-display);font-weight: var(--sdi-weight-semibold);line-height: var(--sdi-leading-tight);letter-spacing: var(--sdi-tracking-tight);text-wrap: balance;font-optical-sizing: auto}h1{font-size: var(--sdi-text-h1)}h2{font-size: var(--sdi-text-h2)}h3{font-size: var(--sdi-text-h3);line-height: var(--sdi-leading-snug)}h4{font-size: var(--sdi-text-h4);line-height: var(--sdi-leading-snug)}h5{font-size: var(--sdi-text-h5);line-height: var(--sdi-leading-snug)}h6{font-size: var(--sdi-text-h6);font-family: var(--sdi-font-ui);font-weight: var(--sdi-weight-semibold);letter-spacing: var(--sdi-tracking-normal)}p,ul,ol,dl,blockquote,figure,table{margin: 0 0 var(--sdi-space-md)}p:last-child,ul:last-child,ol:last-child{margin-bottom: 0}.entry-content > p,.entry-content > ul,.entry-content > ol,.entry-content > blockquote{max-width: var(--sdi-measure)}a{color: var(--sdi-accent);text-underline-offset: 0.2em}a:hover{color: var(--sdi-primary-hover)}strong,b{font-weight: var(--sdi-weight-semibold)}blockquote{padding-left: var(--sdi-space-md);border-left: 3px solid var(--sdi-accent);color: var(--sdi-heading);font-family: var(--sdi-font-display);font-size: var(--sdi-text-body-lg);font-style: italic}code,kbd,samp{font-family: var(--sdi-font-mono);font-size: 0.9em;background: var(--sdi-surface-alt);padding: 0.1em 0.35em;border-radius: var(--sdi-radius-sm)}hr{height: 1px;margin: var(--sdi-space-xl) 0;border: 0;background: var(--sdi-line)}table{width: 100%;border-collapse: collapse;font-size: var(--sdi-text-body-sm)}th,td{padding: var(--sdi-space-xs) var(--sdi-space-sm);border-bottom: 1px solid var(--sdi-line);text-align: left;vertical-align: top}th{color: var(--sdi-heading);font-weight: var(--sdi-weight-semibold)}.sdi-eyebrow{display: block;margin-bottom: var(--sdi-space-2xs);color: var(--sdi-accent);font-family: var(--sdi-font-ui);font-size: var(--sdi-text-eyebrow);font-weight: var(--sdi-weight-semibold);letter-spacing: var(--sdi-tracking-eyebrow);text-transform: uppercase}.sdi-lead{font-size: var(--sdi-text-body-lg);line-height: var(--sdi-leading-relaxed)}.sdi-small{font-size: var(--sdi-text-body-sm)}.sdi-caption{font-size: var(--sdi-text-caption);color: var(--sdi-muted)}.sdi-muted{color: var(--sdi-muted)}:focus-visible{outline: var(--sdi-focus-width) solid var(--sdi-focus);outline-offset: var(--sdi-focus-offset);border-radius: var(--sdi-radius-sm)}#sdi-main:focus{outline: none}.screen-reader-text{position: absolute !important;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip-path: inset(50%);white-space: nowrap;border: 0}.skip-link:focus{position: fixed !important;top: var(--sdi-space-sm);left: var(--sdi-space-sm);z-index: var(--sdi-z-skiplink);width: auto;height: auto;margin: 0;padding: var(--sdi-space-xs) var(--sdi-space-md);overflow: visible;clip-path: none;background: var(--sdi-surface);color: var(--sdi-heading);border: 1px solid var(--sdi-line-interactive);border-radius: var(--sdi-radius);box-shadow: var(--sdi-shadow-lift);font-weight: var(--sdi-weight-semibold);text-decoration: none}.sdi-container,.site-header__inner,.site-footer__inner{width: 100%;max-width: var(--sdi-container);margin-inline: auto;padding-inline: var(--sdi-gutter)}.sdi-container--narrow{max-width: var(--sdi-container-narrow)}.sdi-container--wide{max-width: var(--sdi-container-wide)}.sdi-section{padding-block: var(--sdi-section-padding)}.sdi-section--tight{padding-block: var(--sdi-section-padding-tight)}.sdi-section--alt{background: var(--sdi-surface-alt)}.sdi-section--surface{background: var(--sdi-surface)}.sdi-section__header{max-width: var(--sdi-measure);margin-bottom: var(--sdi-space-xl)}.sdi-section__header--centred{margin-inline: auto;text-align: center}.site{display: flex;flex-direction: column;min-height: 100vh}.site-main{flex: 1 0 auto;width: 100%;max-width: var(--sdi-container);margin-inline: auto;padding-inline: var(--sdi-gutter);padding-block: var(--sdi-space-xl)}.has-sections .site-main{max-width: none;padding-inline: 0;padding-block: 0}.site-header{position: sticky;top: 0;z-index: var(--sdi-z-header);background: var(--sdi-surface);border-bottom: 1px solid var(--sdi-line);transition: box-shadow var(--sdi-duration) var(--sdi-ease)}.site-header.is-scrolled{box-shadow: var(--sdi-shadow)}#sdi-header-sentinel{height: 1px;margin-bottom: -1px}.site-header__inner{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: var(--sdi-space-md);padding-block: var(--sdi-space-sm)}.site-header .primary-navigation{margin-inline-start: auto}.site-header__actions{display: flex;flex-wrap: wrap;align-items: center;gap: var(--sdi-space-sm)}.site-header__signin,.site-header__account{display: inline-flex;align-items: center;gap: var(--sdi-space-3xs);padding-block: 0.35rem;color: var(--sdi-heading);font-family: var(--sdi-font-ui);font-size: var(--sdi-text-nav);font-weight: var(--sdi-weight-medium);text-decoration: none}.site-header__signin:hover,.site-header__account:hover{color: var(--sdi-accent)}/* A drawn mark rather than an icon font: one fewer request,and it inherits currentColor so it follows the link's own hover and focus states. */
.site-header__account-icon {
	width: 1.15rem;
	height: 1.15rem;
	border: 1.5px solid currentColor;
	border-radius: var(--sdi-radius-pill);
	position: relative;
}

.site-header__account-icon::before {
	content: "";
	position: absolute;
	inset-inline: 0.28rem;
	top: 0.18rem;
	height: 0.28rem;
	border: 1.5px solid currentColor;
	border-radius: var(--sdi-radius-pill);
}

.site-header__account-icon::after {
	content: "";
	position: absolute;
	inset-inline: 0.16rem;
	bottom: 0.06rem;
	height: 0.34rem;
	border: 1.5px solid currentColor;
	border-bottom: 0;
	border-radius: var(--sdi-radius-pill) var(--sdi-radius-pill) 0 0;
}

/* Target size comes from .sdi-link, which this carries. */
.site-header__signout { font-size: var(--sdi-text-caption); }

.site-branding { display: flex; align-items: center; gap: var(--sdi-space-xs); }

.site-title {
	margin: 0;
	font-size: var(--sdi-text-h4);
	letter-spacing: var(--sdi-tracking-tight);
}

/*
 * Standalone heading links — the site title, a card title, an entry title,
 * the footer's name. None of them is a link inside a sentence,so WCAG * 2.5.8's Inline exception does not cover them, and each measured 21-23px
 * from its text alone.
 *
 * A minimum height rather than padding, because padding has to be re-tuned
 * every time the type scale moves: shrinking the site title one step at the
 * mobile breakpoint had already taken it back under 24px once.
 */
.site-title a,
.site-footer__name a,
.sdi-card__title a,
.entry__title a {
	display: inline-flex;
	align-items: center;
	min-height: 1.5rem;
	text-decoration: none;
}

.site-title a { color: var(--sdi-heading); }

.site-description { margin: 0; color: var(--sdi-muted); font-size: var(--sdi-text-caption); }

/*
 * The tagline is hidden in the header, not removed: beside the title it took
 * enough width to wrap the whole header onto two rows at 1440px, and a
 * masthead that wraps on a desktop is a layout accident, not a design. The
 * footer prints it in full.
 */
.site-header .site-description {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.site-footer {
	flex-shrink: 0;
	background: var(--sdi-navy-900);
	color: var(--sdi-on-invert-muted);
	border-top: 3px solid var(--sdi-brass-700);
}

.site-footer a { color: var(--sdi-on-invert); }
.site-footer :focus-visible { outline-color: var(--sdi-focus-invert); }

.site-footer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--sdi-space-xl);
	padding-block: var(--sdi-space-2xl) var(--sdi-space-lg);
}

.site-footer__top {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--sdi-space-xl);
	align-items: start;
}

/*
 * The brand column gets more room than the links beside it. A fixed
 * three-column rule left a visible hole on a site with no footer widgets,
 * so the columns come from what is actually there.
 */
@media (min-width: 60rem) {
	.site-footer__top { grid-template-columns: minmax(16rem, 1fr) 2fr; }
}

.site-footer__identity { display: flex; flex-direction: column; gap: var(--sdi-space-2xs); }

.site-footer__name {
	margin: 0;
	font-family: var(--sdi-font-display);
	font-size: var(--sdi-text-h4);
	letter-spacing: var(--sdi-tracking-tight);
}

.site-footer__name a { color: var(--sdi-on-invert); }

.site-footer__tagline {
	margin: 0;
	max-width: 32ch;
	color: var(--sdi-on-invert-muted);
	font-size: var(--sdi-text-body-sm);
	line-height: var(--sdi-leading-normal);
}

/*
 * Legal statements. Set quieter than body copy but still above the 4.5:1
 * floor — a disclaimer nobody can read is not a disclaimer.
 */
.site-footer__disclaimers {
	display: flex;
	flex-direction: column;
	gap: var(--sdi-space-2xs);
	max-width: var(--sdi-measure);
	padding-top: var(--sdi-space-md);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.site-footer__disclaimer {
	margin: 0;
	color: var(--sdi-on-invert-muted);
	font-size: var(--sdi-text-caption);
	line-height: var(--sdi-leading-normal);
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sdi-space-md);
	padding-top: var(--sdi-space-md);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.site-footer__copyright {
	margin: 0;
	color: var(--sdi-on-invert-muted);
	font-size: var(--sdi-text-caption);
}

/* ── Grids ─────────────────────────────────────────────────────────── */

.sdi-grid { display: grid; gap: var(--sdi-grid-gap); }
.sdi-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.sdi-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.sdi-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/*
 * Exactly four: two rows of two.
 *
 * `auto-fit` chooses its column count from the available width and knows
 * nothing about how many items there are, so four cards became three and a
 * stray on its own row at every width where three happened to fit. Four is
 * the count where that reads worst — the set looks like it lost one — and it
 * is the count the section hubs and the "also in this section" rows keep
 * landing on.
 */
.sdi-grid--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 40rem) {
	.sdi-grid--pairs { grid-template-columns: 1fr; }
}

/* Split sections alternate which side the media sits on. */
.sdi-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
	gap: clamp(var(--sdi-space-lg), 5vw, var(--sdi-space-2xl));
	align-items: center;
}

.sdi-split__body { display: flex; flex-direction: column; gap: var(--sdi-space-sm); }

@media (min-width: 60rem) {
	.sdi-split--reverse .sdi-split__media { order: 2; }
}

/*
 * Centring is right for a media column beside text — it keeps the image
 * optically balanced against the paragraph. It is wrong for two text
 * columns, where it floats the shorter one down the page and the two
 * headings no longer line up.
 */
.sdi-split--top { align-items: start; }

.sdi-stack { display: flex; flex-direction: column; gap: var(--sdi-stack-gap); }
.sdi-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sdi-button-gap); }