/* =============================================================================
   DGI — Record of the Nation
   -----------------------------------------------------------------------------
   The state record, set like a gazette. Bone paper, flag maroon, one gold
   hairline doing the work a printed border does on an official notice.

   Structure
     1. Semantic layer (light + dark)
     2. Base and language
     3. Masthead
     4. The plate (hero) and the wire
     5. Newsroom — breaking, cards, plates
     6. Article — rail, measure, apparatus
     7. Footer
     8. Motion
     9. Responsive

   Colour comes from theme.json presets; this file only ever names the semantic
   tokens below, so a palette change happens in one place.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Semantic layer
   ------------------------------------------------------------------------ */

:root {
	--dgi-surface: var(--wp--preset--color--paper);
	--dgi-surface-sunken: var(--wp--preset--color--paper-sunken);
	--dgi-surface-raised: var(--wp--preset--color--white);
	--dgi-surface-inverse: var(--wp--preset--color--maroon-deep);

	--dgi-text: var(--wp--preset--color--ink);
	--dgi-text-soft: var(--wp--preset--color--ink-soft);
	--dgi-text-muted: var(--wp--preset--color--muted);
	--dgi-text-inverse: var(--wp--preset--color--paper);

	--dgi-brand: var(--wp--preset--color--maroon);
	--dgi-brand-deep: var(--wp--preset--color--maroon-deep);
	--dgi-gold: var(--wp--preset--color--gold);
	--dgi-gold-ink: var(--wp--preset--color--gold-ink);

	--dgi-rule: var(--wp--preset--color--rule);
	--dgi-rule-soft: color-mix(in srgb, var(--wp--preset--color--rule) 55%, transparent);
	--dgi-focus: var(--wp--preset--color--gold);

	--dgi-radius: 2px;
	--dgi-hairline: 1px;

	--dgi-ease-in: cubic-bezier(0.22, 1, 0.36, 1);
	--dgi-ease-state: cubic-bezier(0.4, 0, 0.2, 1);
	--dgi-t-hover: 120ms;
	--dgi-t-reveal: 240ms;
	--dgi-t-stagger: 480ms;
	--dgi-t-plate: 720ms;
}

/* Dark is a first-class rendering, not an inversion filter. The paper becomes
   ink, the maroon lifts so it still reads as brand rather than as shadow, and
   the gold hairline is the one thing that does not change. */
@media (prefers-color-scheme: dark) {
	:root {
		--dgi-surface: #14120f;
		--dgi-surface-sunken: #0d0c0a;
		--dgi-surface-raised: #1c1a16;
		--dgi-surface-inverse: #2c0512;

		--dgi-text: #f2ede4;
		--dgi-text-soft: #d3ccc0;
		--dgi-text-muted: #a09889;
		--dgi-text-inverse: #f7f4ee;

		--dgi-brand: #d4667f;
		--dgi-brand-deep: #f0a8b8;
		--dgi-gold-ink: #e0b355;

		--dgi-rule: #3a352d;
		--dgi-rule-soft: color-mix(in srgb, #3a352d 60%, transparent);
	}

	body {
		background: var(--dgi-surface);
		color: var(--dgi-text);
	}
}

/* ---------------------------------------------------------------------------
   2. Base and language
   ------------------------------------------------------------------------ */

body {
	background: var(--dgi-surface);
	color: var(--dgi-text);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* Sinhala and Tamil have tall ascenders and deep descenders; at Latin leading
   they clip. This rule is carried over from the platform stylesheet — it is not
   a preference, it is a legibility requirement. */
.dgi-lang-si,
.dgi-lang-ta,
[lang="si"],
[lang="ta"] {
	line-height: 1.84;
}

:where(h1, h2, h3, h4)[lang="si"],
:where(h1, h2, h3, h4)[lang="ta"],
.dgi-lang-si :where(h1, h2, h3),
.dgi-lang-ta :where(h1, h2, h3) {
	line-height: 1.42;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--dgi-focus);
	outline-offset: 2px;
	border-radius: 1px;
}

.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 {
	z-index: 100000;
	padding: 1rem 1.5rem;
	background: var(--dgi-surface);
	color: var(--dgi-brand);
	font-weight: 600;
}

/* The one eyebrow style, used everywhere a label sits above content. */
.dgi-eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	line-height: 1.4;
}

/* Unfilled facts stay visibly unfilled. Never invent a phone number. */
.dgi-placeholder {
	padding: 0 0.25em;
	background: color-mix(in srgb, var(--dgi-gold) 22%, transparent);
	border-bottom: 1px dashed var(--dgi-gold-ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.9em;
}

/* The section rule: a gold hairline, a label, a display heading. */
.dgi-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 1rem;
	margin-block-end: 1.75rem;
	padding-block-start: 1rem;
	border-block-start: var(--dgi-hairline) solid var(--dgi-gold);
}

.dgi-section-head__label {
	color: var(--dgi-brand);
}

.dgi-section-head__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
}

.dgi-section-head__more {
	margin-inline-start: auto;
}

/* ---------------------------------------------------------------------------
   3. Masthead
   ------------------------------------------------------------------------ */

.dgi-utility {
	font-size: var(--wp--preset--font-size--eyebrow);
}

.dgi-utility a {
	color: inherit;
	text-decoration: none;
}

.dgi-utility a:hover {
	text-decoration: underline;
}

.dgi-utility__alert a {
	color: var(--dgi-gold);
}

.dgi-masthead {
	border-block-end: 3px solid var(--dgi-brand);
}

.dgi-masthead__row {
	gap: 1.25rem;
}

.dgi-wordmark__link {
	display: flex;
	align-items: center;
	gap: 1.125rem;
	color: inherit;
	text-decoration: none;
}

.dgi-emblem {
	width: auto;
	height: 3.25rem;
	flex-shrink: 0;
}

/* The emblem keeps its own colours on the maroon ground. Flattening it to a
   white silhouette throws away the lion, the vases and the dharmachakra — the
   parts that make it the emblem rather than a shape. */
.dgi-emblem--inverse {
	height: 2.625rem;
}

.dgi-wordmark__text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.dgi-wordmark__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.08;
	letter-spacing: -0.01em;
}

.dgi-wordmark__native {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	color: var(--dgi-text-muted);
	font-size: var(--wp--preset--font-size--meta);
}

.dgi-wordmark__pip {
	width: 1px;
	height: 0.7em;
	background: var(--dgi-rule);
}

.dgi-masthead__tools {
	gap: 0.875rem;
}

.dgi-search .wp-block-search__inside-wrapper {
	min-width: min(18rem, 60vw);
	border: var(--dgi-hairline) solid var(--dgi-rule);
	border-radius: var(--dgi-radius);
	background: var(--dgi-surface-raised);
	padding: 0.2rem;
}

.dgi-search .wp-block-search__input {
	border: 0;
	background: transparent;
	font-size: var(--wp--preset--font-size--meta);
}

/* Language switcher — three official languages, equal weight, own scripts. */
.dgi-langs__list {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	border: var(--dgi-hairline) solid var(--dgi-rule);
	border-radius: var(--dgi-radius);
	overflow: hidden;
}

.dgi-langs__link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0 0.9rem;
	color: var(--dgi-text-soft);
	font-size: var(--wp--preset--font-size--meta);
	text-decoration: none;
	transition: background var(--dgi-t-hover) var(--dgi-ease-state);
}

.dgi-langs__link:hover {
	background: var(--dgi-surface-sunken);
	text-decoration: none;
}

.dgi-langs__link.is-current {
	background: var(--dgi-brand);
	color: var(--wp--preset--color--paper);
	font-weight: 600;
}

.dgi-nav {
	margin-block-start: 1.25rem;
	gap: 2.125rem;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.dgi-nav a {
	color: var(--dgi-text-soft);
	padding-block-end: 0.45rem;
	border-block-end: 2px solid transparent;
}

.dgi-nav a:hover,
.dgi-nav .current-menu-item > a {
	color: var(--dgi-brand);
	border-block-end-color: var(--dgi-brand);
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
   4. The plate, and the wire
   ------------------------------------------------------------------------ */

.dgi-plate {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--gradient--plate);
	color: var(--wp--preset--color--paper);
}

.dgi-plate :where(h1, h2, h3, p, a, span) {
	color: inherit;
}

.dgi-plate__seal {
	position: absolute;
	inset-inline-end: -9.5rem;
	inset-block-start: -3.5rem;
	width: 35rem;
	height: 35rem;
	opacity: 0.13;
	pointer-events: none;
}

.dgi-plate__inner {
	position: relative;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 2rem;
	max-width: 76rem;
	margin-inline: auto;
	padding: 3.5rem var(--wp--preset--spacing--60);
}

.dgi-plate__lead {
	grid-column: span 7;
	display: flex;
	flex-direction: column;
	gap: 1.375rem;
}

.dgi-plate__kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.75rem;
	border-radius: var(--dgi-radius);
	background: var(--dgi-brand);
	color: #fff;
}

.dgi-plate__kicker::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--dgi-gold);
}

.dgi-plate__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--masthead);
	line-height: 0.99;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.dgi-hairline {
	height: 1px;
	border: 0;
	background: var(--wp--preset--gradient--hairline-gold);
}

.dgi-plate__standfirst {
	margin: 0;
	max-width: 54ch;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.56;
	color: color-mix(in srgb, var(--wp--preset--color--paper) 82%, transparent);
}

.dgi-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 2.75rem;
	padding: 0.85rem 1.5rem;
	border-radius: var(--dgi-radius);
	background: var(--wp--preset--color--paper);
	color: var(--dgi-brand-deep) !important;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	transition: transform var(--dgi-t-hover) var(--dgi-ease-state);
}

.dgi-cta:hover {
	transform: translateX(2px);
	text-decoration: none;
}

/* The wire — the day's dispatches as a teleprinter column, hairline separated,
   fading toward the bottom. Never a marquee. */
.dgi-wire {
	grid-column: span 5;
	display: flex;
	flex-direction: column;
	padding-inline-start: 2.5rem;
	border-inline-start: var(--dgi-hairline) solid color-mix(in srgb, var(--dgi-gold) 22%, transparent);
}

.dgi-wire__head {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding-block-end: 0.875rem;
	color: var(--dgi-gold);
}

.dgi-wire__row {
	display: flex;
	gap: 1rem;
	padding-block: 0.875rem;
	border-block-start: var(--dgi-hairline) solid color-mix(in srgb, var(--wp--preset--color--paper) 14%, transparent);
	text-decoration: none;
}

.dgi-wire__time {
	flex-shrink: 0;
	min-width: 2.75rem;
	padding-block-start: 0.2rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	color: var(--dgi-gold);
}

.dgi-wire__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem;
	line-height: 1.32;
}

/* Older rows recede — the record fading back into the archive. */
.dgi-wire__row:nth-child(3) { opacity: 0.88; }
.dgi-wire__row:nth-child(4) { opacity: 0.76; }
.dgi-wire__row:nth-child(5) { opacity: 0.62; }
.dgi-wire__row:nth-child(n+6) { opacity: 0.48; }
.dgi-wire__row:hover { opacity: 1; }

/* ---------------------------------------------------------------------------
   5. Newsroom
   ------------------------------------------------------------------------ */

.dgi-breaking {
	display: flex;
	align-items: stretch;
	gap: 0;
	min-height: 3.25rem;
	padding-inline: var(--wp--preset--spacing--60);
	background: var(--dgi-brand);
	color: #fff;
	overflow: hidden;
}

.dgi-breaking__label {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding-inline-end: 1.375rem;
	border-inline-end: var(--dgi-hairline) solid rgb(255 255 255 / 25%);
	white-space: nowrap;
}

.dgi-breaking__label::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--dgi-gold);
}

.dgi-breaking__items {
	display: flex;
	align-items: center;
	gap: 2.5rem;
	padding-inline-start: 1.375rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem;
}

.dgi-breaking a {
	color: #fff;
	text-decoration: none;
}

.dgi-breaking a:hover {
	text-decoration: underline;
}

/* Category coding — the flag's own hues, carrying meaning, never mood. */
.dgi-cat {
	display: inline-block;
	padding-inline-start: 0.5625rem;
	border-inline-start: 2px solid currentColor;
	color: var(--dgi-text-muted);
}

.dgi-cat--policy-rti     { color: var(--wp--preset--color--green); }
.dgi-cat--accreditation  { color: var(--wp--preset--color--saffron); }
.dgi-cat--media-welfare  { color: var(--dgi-brand); }
.dgi-cat--archives       { color: var(--dgi-gold-ink); }

/* A plate is a photograph. Until one exists it is a flat maroon field, which is
   honest; it is never a grey box with a camera icon in it. */
.dgi-plate-img {
	position: relative;
	overflow: hidden;
	border-radius: var(--dgi-radius);
	background: linear-gradient(150deg, #6d1030 0%, #8d153a 40%, #b4585f 100%);
	aspect-ratio: 16 / 10;
}

.dgi-plate-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: filter var(--dgi-t-plate) var(--dgi-ease-in);
}

.dgi-lede {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 2rem;
}

.dgi-lede__main,
.dgi-lede__list {
	grid-column: span 6;
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
}

.dgi-lede__list {
	gap: 0;
}

.dgi-card {
	display: flex;
	gap: 1.375rem;
	padding-block: 1.5rem;
	border-block-start: var(--dgi-hairline) solid var(--dgi-rule);
}

.dgi-card:first-child {
	border-block-start: 0;
	padding-block-start: 0;
}

.dgi-card__thumb {
	flex-shrink: 0;
	width: 10.5rem;
	aspect-ratio: 3 / 2;
	border-radius: var(--dgi-radius);
	overflow: hidden;
}

.dgi-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.5625rem;
}

.dgi-card__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
}

.dgi-card__title a {
	color: inherit;
	text-decoration: none;
}

.dgi-card__title a:hover {
	color: var(--dgi-brand);
}

.dgi-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	font-size: var(--wp--preset--font-size--meta);
	color: var(--dgi-text-muted);
}

/* Subject plates — four doors into the record. */
.dgi-subjects {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
}

.dgi-subject {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.625rem;
	background: var(--dgi-surface-raised);
	border: var(--dgi-hairline) solid var(--dgi-rule);
	border-block-start: 3px solid var(--dgi-brand);
	border-radius: var(--dgi-radius);
	text-decoration: none;
	transition: transform var(--dgi-t-reveal) var(--dgi-ease-in),
	            box-shadow var(--dgi-t-reveal) var(--dgi-ease-in);
}

.dgi-subject:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--plate);
	text-decoration: none;
}

.dgi-subject--policy-rti    { border-block-start-color: var(--wp--preset--color--green); }
.dgi-subject--accreditation { border-block-start-color: var(--wp--preset--color--saffron); }
.dgi-subject--media-welfare { border-block-start-color: var(--dgi-brand); }
.dgi-subject--archives      { border-block-start-color: var(--wp--preset--color--gold-ink); }

.dgi-subject__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	color: var(--dgi-text);
}

.dgi-subject__blurb {
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.55;
	color: var(--dgi-text-muted);
}

/* ---------------------------------------------------------------------------
   6. Article
   ------------------------------------------------------------------------ */

.dgi-article {
	display: flex;
	gap: 2.75rem;
	max-width: 76rem;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--60);
}

.dgi-article__body {
	flex-grow: 1;
	max-width: 47.5rem;
	min-width: 0;
}

.dgi-article__aside {
	flex-shrink: 0;
	width: 18.5rem;
	display: flex;
	flex-direction: column;
	gap: 2.125rem;
}

/* The share rail. Plain links, every one of them — a share button that loads a
   network's JavaScript puts that network's tracker on every reader of a public
   notice, which nobody consented to. */
.dgi-rail {
	position: sticky;
	inset-block-start: 1.5rem;
	flex-shrink: 0;
	width: 2.875rem;
	height: max-content;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.dgi-rail__label {
	writing-mode: vertical-rl;
	height: 4.625rem;
	margin-inline: auto;
	margin-block-end: 0.25rem;
	letter-spacing: 0.24em;
	color: var(--dgi-text-muted);
}

.dgi-share {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.875rem;
	height: 2.875rem;
	border: var(--dgi-hairline) solid var(--dgi-rule);
	border-radius: var(--dgi-radius);
	background: var(--dgi-surface-raised);
	color: var(--dgi-text-soft);
	transition: border-color var(--dgi-t-hover) var(--dgi-ease-state),
	            color var(--dgi-t-hover) var(--dgi-ease-state);
}

.dgi-share:hover {
	border-color: var(--dgi-brand);
	color: var(--dgi-brand);
}

.dgi-share svg {
	width: 1.1875rem;
	height: 1.1875rem;
}

/* The horizontal set at the foot of the article, with labels. */
.dgi-share-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
}

.dgi-share-row .dgi-share {
	width: auto;
	gap: 0.5625rem;
	padding-inline: 1rem;
	font-size: var(--wp--preset--font-size--meta);
	text-decoration: none;
}

.dgi-article__headline {
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.02;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.dgi-standfirst {
	margin: 0;
	max-width: 58ch;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-style: italic;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	color: var(--dgi-text-soft);
}

.dgi-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
	padding-block: 1.125rem;
	border-block: var(--dgi-hairline) solid var(--dgi-rule);
	font-size: var(--wp--preset--font-size--meta);
}

/* The measure. 68ch of Newsreader at 300 is the whole point of the type choice. */
.dgi-article__body .wp-block-post-content > * {
	max-width: var(--wp--custom--measure);
}

.dgi-article__body .wp-block-post-content > p:first-of-type::first-letter {
	float: inline-start;
	padding: 0.35rem 0.75rem 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 4.75rem;
	line-height: 0.78;
	color: var(--dgi-brand);
}

.dgi-notice {
	display: flex;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	border-radius: var(--dgi-radius);
	border-inline-start: 3px solid var(--dgi-brand);
	background: var(--dgi-surface-sunken);
}

.dgi-notice__icon {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	margin-block-start: 0.15rem;
	color: var(--dgi-brand);
}

.dgi-notice__body {
	display: flex;
	flex-direction: column;
	gap: 0.3125rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.dgi-aside-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.375rem;
	background: var(--dgi-surface-raised);
	border: var(--dgi-hairline) solid var(--dgi-rule);
	border-block-start: 3px solid var(--dgi-brand);
	border-radius: var(--dgi-radius);
}

.dgi-toc {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding-block-start: 1rem;
	border-block-start: var(--dgi-hairline) solid var(--dgi-gold);
}

.dgi-toc a {
	padding-inline-start: 0.75rem;
	border-inline-start: 2px solid var(--dgi-rule);
	color: var(--dgi-text-soft);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	text-decoration: none;
}

.dgi-toc a[aria-current] {
	border-inline-start-color: var(--dgi-brand);
	color: var(--dgi-brand);
}

/* Reading progress — a hairline, not a bar. */
.dgi-progress {
	position: sticky;
	inset-block-start: 0;
	z-index: 20;
	height: 2px;
	background: var(--dgi-rule);
}

.dgi-progress__fill {
	height: 2px;
	width: var(--dgi-read, 0%);
	background: var(--dgi-brand);
	transition: width var(--dgi-t-hover) linear;
}

/* ---------------------------------------------------------------------------
   7. Footer
   ------------------------------------------------------------------------ */

.dgi-footer a {
	color: inherit;
	text-decoration: none;
}

.dgi-footer a:hover {
	text-decoration: underline;
}

.dgi-footer__grid {
	display: grid;
	grid-template-columns: 4fr 2fr 2fr 4fr;
	gap: 2rem;
	padding-block-end: 2.5rem;
	border-block-end: var(--dgi-hairline) solid color-mix(in srgb, var(--dgi-gold) 25%, transparent);
}

.dgi-footer__col {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.dgi-footer__mark {
	display: flex;
	align-items: center;
	gap: 0.875rem;
}

.dgi-footer__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem;
	line-height: 1.2;
	max-width: 12ch;
}

.dgi-footer__address {
	font-style: normal;
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.7;
	max-width: 34ch;
}

.dgi-footer__heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--dgi-gold);
}

.dgi-footer__list {
	display: flex;
	flex-direction: column;
	gap: 0.6875rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--meta);
}

.dgi-footer__blurb {
	margin: 0;
	max-width: 40ch;
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.65;
}

.dgi-subscribe {
	display: flex;
	gap: 0.625rem;
}

.dgi-subscribe__input {
	flex-grow: 1;
	min-width: 0;
	min-height: 2.75rem;
	padding: 0.8rem 0.875rem;
	border: var(--dgi-hairline) solid rgb(247 244 238 / 20%);
	border-radius: var(--dgi-radius);
	background: rgb(247 244 238 / 8%);
	color: inherit;
	font-size: var(--wp--preset--font-size--meta);
}

.dgi-subscribe__input::placeholder {
	color: rgb(247 244 238 / 50%);
}

.dgi-subscribe__button {
	min-height: 2.75rem;
	padding: 0.8rem 1.25rem;
	border: 0;
	border-radius: var(--dgi-radius);
	background: var(--dgi-gold);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 700;
	cursor: pointer;
}

.dgi-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
	padding-block-start: 1.375rem;
	font-size: var(--wp--preset--font-size--meta);
	color: color-mix(in srgb, var(--wp--preset--color--paper) 60%, transparent);
}

.dgi-footer__langs {
	margin-inline-start: auto;
	color: color-mix(in srgb, var(--dgi-gold) 75%, transparent);
}

/* ---------------------------------------------------------------------------
   8. Motion — "set in type"
   ------------------------------------------------------------------------ */

/* Everything below is an enhancement. The document is complete without it: the
   .dgi-reveal default state is visible, and only a browser that has run
   motion.js — and has not been asked to reduce motion — ever hides it. */
.dgi-js .dgi-reveal {
	opacity: 0;
	transform: translateY(0.75rem);
}

.dgi-js .dgi-reveal.is-in {
	opacity: 1;
	transform: none;
	transition: opacity var(--dgi-t-stagger) var(--dgi-ease-in),
	            transform var(--dgi-t-stagger) var(--dgi-ease-in);
	transition-delay: var(--dgi-delay, 0ms);
}

/* Headline lines rise out of a clip mask — type being set, not content fading. */
.dgi-js .dgi-set-line {
	display: block;
	overflow: hidden;
}

.dgi-js .dgi-set-line > span {
	display: block;
	transform: translateY(105%);
}

.dgi-js .is-in .dgi-set-line > span,
.dgi-js .dgi-set-line.is-in > span {
	transform: none;
	transition: transform var(--dgi-t-stagger) var(--dgi-ease-in);
	transition-delay: var(--dgi-delay, 0ms);
}

/* The masthead rule draws left to right, once. */
.dgi-js .dgi-masthead {
	border-block-end-color: transparent;
	background-image: linear-gradient(90deg, var(--dgi-brand), var(--dgi-brand));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 3px;
	animation: dgi-rule-draw var(--dgi-t-plate) var(--dgi-ease-in) forwards;
}

@keyframes dgi-rule-draw {
	to { background-size: 100% 3px; }
}

/* The gold crosshair that snaps to the nearest headline baseline. Pointer-only:
   it is meaningless on touch and is never drawn there. */
.dgi-crosshair {
	position: fixed;
	z-index: 90;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--dgi-t-reveal) var(--dgi-ease-state);
}

.dgi-crosshair__v,
.dgi-crosshair__h {
	position: absolute;
	background: var(--dgi-gold);
}

@media (hover: none), (pointer: coarse) {
	.dgi-crosshair { display: none; }
}

/* One switch turns all of it off. Reduced motion is a instruction, not a hint. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.dgi-js .dgi-reveal,
	.dgi-js .dgi-set-line > span,
	.dgi-js .is-in .dgi-set-line > span {
		opacity: 1 !important;
		transform: none !important;
	}

	.dgi-js .dgi-masthead {
		border-block-end-color: var(--dgi-brand);
		background-image: none;
		animation: none;
	}

	.dgi-crosshair { display: none; }
}

/* ---------------------------------------------------------------------------
   9. Responsive
   ------------------------------------------------------------------------ */

@media (width <= 64rem) {
	.dgi-plate__inner,
	.dgi-lede {
		grid-template-columns: 1fr;
	}

	.dgi-plate__lead,
	.dgi-wire,
	.dgi-lede__main,
	.dgi-lede__list {
		grid-column: 1 / -1;
	}

	.dgi-wire {
		padding-inline-start: 0;
		padding-block-start: 2rem;
		border-inline-start: 0;
		border-block-start: var(--dgi-hairline) solid color-mix(in srgb, var(--dgi-gold) 22%, transparent);
	}

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

	.dgi-article {
		flex-direction: column;
		gap: 2rem;
	}

	.dgi-article__aside {
		width: 100%;
	}

	/* The rail unsticks and lies down under the headline on narrow screens. */
	.dgi-rail {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
	}

	.dgi-rail__label {
		writing-mode: horizontal-tb;
		height: auto;
		margin-inline: 0;
		align-self: center;
	}

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

@media (width <= 40rem) {
	.dgi-plate__inner {
		padding: 2rem var(--wp--preset--spacing--40);
	}

	.dgi-masthead__row {
		gap: 1rem;
	}

	.dgi-wordmark__native {
		display: none;
	}

	.dgi-card {
		gap: 0.875rem;
	}

	.dgi-card__thumb {
		width: 5.75rem;
	}

	.dgi-subjects,
	.dgi-footer__grid {
		grid-template-columns: 1fr;
	}

	.dgi-breaking {
		padding-inline: var(--wp--preset--spacing--40);
	}

	.dgi-article__body .wp-block-post-content > p:first-of-type::first-letter {
		font-size: 3.5rem;
	}
}

/* Print: the record on paper. Chrome, rails and motion all go. */
@media print {
	.dgi-utility,
	.dgi-nav,
	.dgi-rail,
	.dgi-share-row,
	.dgi-breaking,
	.dgi-langs,
	.dgi-search,
	.dgi-footer__col--alerts,
	.dgi-progress {
		display: none !important;
	}

	.dgi-plate {
		background: none !important;
		color: #000 !important;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 11pt;
	}
}

/* ---------------------------------------------------------------------------
   10. Query wrappers and band layout
   -----------------------------------------------------------------------------
   Core query/post-template blocks insert two wrappers between our grid parent
   and the content. Rather than fight them with :has() we let the wrappers carry
   the layout — they are the only children, so it is a straight pass-through.
   ------------------------------------------------------------------------ */

.dgi-plate__lead > .wp-block-post-template,
.dgi-plate__lead .wp-block-post-template > li,
.dgi-lede__main > .wp-block-post-template,
.dgi-lede__main .wp-block-post-template > li,
.dgi-card__body {
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dgi-wire > .wp-block-post-template,
.dgi-wire__rows,
.dgi-lede__list > .wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dgi-wire__rows > li,
.dgi-lede__list > .wp-block-post-template > li {
	list-style: none;
}

.dgi-band {
	max-width: 76rem;
	margin-inline: auto;
	padding: 4rem var(--wp--preset--spacing--60) 0;
}

.dgi-band__inner {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.dgi-main > * + * {
	margin-block-start: 0;
}

/* The plate */

.dgi-plate__kickerline {
	gap: 0.875rem;
}

.dgi-plate__stamp {
	color: color-mix(in srgb, var(--wp--preset--color--paper) 55%, transparent);
}

.dgi-plate__title a {
	color: inherit;
	text-decoration: none;
}

.dgi-plate__title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--dgi-gold);
	text-underline-offset: 0.12em;
}

.dgi-plate__actions {
	gap: 1.125rem;
	padding-block-start: 0.25rem;
}

.dgi-plate .wp-block-read-more {
	text-decoration: none;
}

.dgi-wire__more a {
	color: var(--dgi-gold);
	text-decoration: none;
}

.dgi-wire__more {
	margin-block-start: 1rem;
}

.dgi-wire__title a {
	color: inherit;
	text-decoration: none;
}

.dgi-wire__row:hover .dgi-wire__title a {
	text-decoration: underline;
	text-underline-offset: 0.12em;
}

/* Lede grid */

.dgi-lede__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.12;
	letter-spacing: -0.015em;
}

.dgi-lede__title a {
	color: inherit;
	text-decoration: none;
}

.dgi-lede__title a:hover {
	color: var(--dgi-brand);
}

.dgi-lede__excerpt {
	margin: 0;
	max-width: 52ch;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	line-height: 1.6;
	color: var(--dgi-text-soft);
}

.dgi-meta__date {
	color: var(--dgi-text-muted);
}

.dgi-meta .wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}

/* A featured image is optional. Without one the plate is a flat maroon field,
   which is honest — never a grey box with a camera icon in it. */
.dgi-plate-img:empty,
.dgi-card__thumb:empty {
	display: block;
}

.dgi-card__thumb:empty {
	background: linear-gradient(140deg, #45091c 0%, #8d153a 60%, #c98a9c 100%);
}

.dgi-subject__count {
	margin-block-start: 0.375rem;
	color: currentColor;
}

/* Accreditation band */

.dgi-cta-band {
	max-width: 76rem;
	margin: 4.75rem auto 0;
	padding-inline: var(--wp--preset--spacing--60);
}

.dgi-cta-band__inner {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: 2.5rem;
	align-items: center;
	padding: 3.375rem 3.5rem;
	border-radius: var(--dgi-radius);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.dgi-cta-band__copy {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.dgi-cta-band__eyebrow {
	color: var(--dgi-gold);
}

.dgi-cta-band__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: inherit;
}

.dgi-cta-band__blurb {
	margin: 0;
	max-width: 50ch;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	line-height: 1.6;
	color: color-mix(in srgb, var(--wp--preset--color--paper) 75%, transparent);
}

.dgi-cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-block-start: 0.5rem;
}

.dgi-cta--gold {
	background: var(--dgi-gold);
	color: var(--wp--preset--color--ink) !important;
	font-weight: 700;
}

.dgi-cta-band__link {
	color: inherit;
	border-block-end: var(--dgi-hairline) solid color-mix(in srgb, var(--dgi-gold) 50%, transparent);
	padding-block-end: 0.2rem;
	text-decoration: none;
}

.dgi-steps {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
	border: var(--dgi-hairline) solid rgb(247 244 238 / 16%);
	border-radius: var(--dgi-radius);
	counter-reset: none;
}

.dgi-steps__item {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 1rem 1.25rem;
	border-block-start: var(--dgi-hairline) solid rgb(247 244 238 / 12%);
	font-size: var(--wp--preset--font-size--small);
}

.dgi-steps__item:first-child {
	border-block-start: 0;
}

.dgi-steps__num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--meta);
	color: var(--dgi-gold);
}

@media (width <= 64rem) {
	.dgi-cta-band__inner {
		grid-template-columns: 1fr;
		padding: 2.25rem 1.75rem;
	}

	.dgi-band {
		padding-block-start: 3rem;
	}
}

/* ---------------------------------------------------------------------------
   11. Article page
   ------------------------------------------------------------------------ */

.dgi-crumbs {
	max-width: 76rem;
	margin-inline: auto;
	padding: 1.625rem var(--wp--preset--spacing--60) 0;
	color: var(--dgi-text-muted);
}

.dgi-crumbs a {
	color: inherit;
	text-decoration: none;
}

.dgi-article {
	padding-block-start: 2.125rem;
}

.dgi-article__body > * + * {
	margin-block-start: 1.625rem;
}

.dgi-byline__who {
	display: flex;
	flex-direction: column;
	gap: 0.1875rem;
}

.dgi-byline__name {
	font-weight: 600;
}

.dgi-byline__date {
	color: var(--dgi-text-muted);
}

.dgi-article__lead {
	margin-block: 1.625rem;
}

.dgi-article__lead img {
	width: 100%;
	border-radius: var(--dgi-radius);
}

/* The rail sits in the article grid; the horizontal set at the foot reuses the
   same markup, so it is unstacked and given labels here rather than duplicated. */
.dgi-share-foot {
	max-width: 76rem;
	margin-inline: auto;
	padding-block-start: 2.5rem;
}

.dgi-band > .dgi-rail {
	position: static;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
}

.dgi-band > .dgi-rail .dgi-rail__label {
	writing-mode: horizontal-tb;
	height: auto;
	align-self: center;
	margin-inline: 0 0.5rem;
	color: var(--dgi-text-muted);
}

.dgi-share-foot__note {
	max-width: 76rem;
	margin: 1rem auto 0;
	font-size: var(--wp--preset--font-size--meta);
	color: var(--dgi-text-muted);
}

.dgi-aside-card__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
}

.dgi-aside-card__blurb {
	margin: 0;
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.6;
	color: var(--dgi-text-muted);
}

.dgi-gazette {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0.375rem 0 0;
	padding: 0;
	list-style: none;
}

.dgi-gazette a {
	display: flex;
	align-items: center;
	gap: 0.5625rem;
	font-size: var(--wp--preset--font-size--meta);
	text-decoration: none;
}

.dgi-gazette svg {
	width: 0.9375rem;
	height: 0.9375rem;
	flex-shrink: 0;
}

.dgi-aside-block {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding-block-start: 1rem;
	border-block-start: var(--dgi-hairline) solid var(--dgi-rule);
}

.dgi-aside-block__label {
	color: var(--dgi-text-muted);
}

.dgi-aside-list > .wp-block-post-template {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dgi-aside-item {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.dgi-aside-item__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem;
	line-height: 1.25;
}

.dgi-aside-item__title a {
	color: inherit;
	text-decoration: none;
}

.dgi-aside-item__title a:hover {
	color: var(--dgi-brand);
}

.dgi-aside-item__date {
	font-size: var(--wp--preset--font-size--meta);
	color: var(--dgi-text-muted);
}

/* Primary navigation — built from the sections that exist, not from a menu
   someone has to remember to configure. */
.dgi-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2.125rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dgi-nav__item--end {
	margin-inline-start: auto;
}

.dgi-nav__link {
	display: inline-block;
	padding-block: 0.5rem 0.45rem;
	border-block-end: 2px solid transparent;
	color: var(--dgi-text-soft);
	text-decoration: none;
}

.dgi-nav__link:hover,
.dgi-nav__link.is-current {
	color: var(--dgi-brand);
	border-block-end-color: var(--dgi-brand);
}

.dgi-nav__item--end .dgi-nav__link {
	color: var(--dgi-gold-ink);
}

.dgi-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--meta);
}

.dgi-crumbs__item + .dgi-crumbs__item::before {
	content: "/";
	margin-inline-end: 0.625rem;
	color: var(--dgi-rule);
}

.dgi-crumbs__item--current {
	color: var(--dgi-text);
}

/* ---------------------------------------------------------------------------
   12. Document of record
   -----------------------------------------------------------------------------
   Most of the migrated archive is a PDF with a title on it. Treating that as a
   footnote under an empty article would misrepresent the record, so where the
   document IS the record it gets the weight — a bordered plate, the file's
   language and length stated, and the reason it looks like this said plainly.
   ------------------------------------------------------------------------ */

.dgi-record {
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
	padding: 1.625rem 1.75rem;
	border: var(--dgi-hairline) solid var(--dgi-rule);
	border-inline-start: 3px solid var(--dgi-gold);
	border-radius: var(--dgi-radius);
	background: var(--dgi-surface-sunken);
}

.dgi-record__head {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.dgi-record__label {
	color: var(--dgi-gold-ink);
}

.dgi-record__note,
.dgi-record__langnote {
	margin: 0;
	max-width: 62ch;
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.6;
	color: var(--dgi-text-muted);
}

.dgi-record__list {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dgi-record__link {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 3.5rem;
	padding: 0.875rem 1.125rem;
	background: var(--dgi-surface-raised);
	border: var(--dgi-hairline) solid var(--dgi-rule);
	border-radius: var(--dgi-radius);
	color: var(--dgi-text);
	text-decoration: none;
	transition: border-color var(--dgi-t-hover) var(--dgi-ease-state);
}

.dgi-record__link:hover {
	border-color: var(--dgi-brand);
	text-decoration: none;
}

.dgi-record__icon {
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.75rem;
	color: var(--dgi-brand);
}

.dgi-record__text {
	display: flex;
	flex-direction: column;
	gap: 0.1875rem;
	min-width: 0;
}

.dgi-record__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.0625rem;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.dgi-record__meta {
	font-size: var(--wp--preset--font-size--meta);
	color: var(--dgi-text-muted);
}

/* ---------------------------------------------------------------------------
   Header aligned to the snap.lkgov.org (NestJS) masthead
   -----------------------------------------------------------------------------
   One deep-maroon band carrying the wordmark, language switcher and nav, in
   white with a gold underline on the current item, closed by the flag's gold
   hairline and the saffron/green split bar — matching the platform header.
   Overrides the block-editor background classes, hence the !important on the
   two colour rules the editor would otherwise win.
   ------------------------------------------------------------------------ */

.dgi-header { background: var(--wp--preset--color--maroon-deep); }

.dgi-utility.has-ink-background-color {
  background: var(--wp--preset--color--maroon-deep) !important;
  border-block-end: 1px solid color-mix(in srgb, var(--dgi-gold) 25%, transparent);
}
.dgi-utility, .dgi-utility a { color: color-mix(in srgb, var(--wp--preset--color--paper) 80%, transparent); }
.dgi-utility__alert a { color: var(--dgi-gold); }

.dgi-masthead.has-paper-background-color {
  background: var(--wp--preset--color--maroon-deep) !important;
  border-block-end: 0;
}
.dgi-masthead .dgi-wordmark__name { color: #fff; }
.dgi-masthead .dgi-wordmark__native { color: color-mix(in srgb, var(--wp--preset--color--paper) 60%, transparent); }
.dgi-masthead .dgi-wordmark__pip { background: color-mix(in srgb, var(--dgi-gold) 40%, transparent); }

.dgi-nav__link { color: color-mix(in srgb, var(--wp--preset--color--paper) 88%, transparent); }
.dgi-nav__link:hover,
.dgi-nav__link.is-current { color: #fff; border-block-end-color: var(--dgi-gold); }
.dgi-nav__item--end .dgi-nav__link { color: var(--dgi-gold); }

/* Search and language switcher, restyled for the dark band. */
.dgi-search .wp-block-search__inside-wrapper {
  background: rgb(255 255 255 / 8%); border-color: color-mix(in srgb, var(--dgi-gold) 30%, transparent);
}
.dgi-search .wp-block-search__input { color: color-mix(in srgb, var(--wp--preset--color--paper) 80%, transparent); }
.dgi-search .wp-block-search__input::placeholder { color: color-mix(in srgb, var(--wp--preset--color--paper) 55%, transparent); }
.dgi-langs__list { border-color: color-mix(in srgb, var(--dgi-gold) 35%, transparent); }
.dgi-langs__link { color: color-mix(in srgb, var(--wp--preset--color--paper) 75%, transparent); }
.dgi-langs__link:hover { background: rgb(255 255 255 / 8%); }
.dgi-langs__link.is-current { background: var(--wp--preset--color--maroon); color: #fff; }

/* The flag bar under the whole header, as on the platform. */
.dgi-header { border-block-end: 3px solid var(--dgi-gold); }
.dgi-header::after {
  content: ''; display: block; height: 3px;
  background: linear-gradient(to right,
    var(--wp--preset--color--saffron) 0 50%,
    var(--wp--preset--color--green) 50% 100%);
}