/* ============================================================================
   DOHA MUN — the conference's own identity

   This file is what makes dohamun.org look like Doha MUN rather than like a
   Qatar Foundation microsite with a conference inside it. It does three jobs and
   nothing else:

     1. Re-points the design system's tokens onto Doha MUN's palette and type.
     2. Re-skins the handful of qf-chrome.css primitives that name a QF colour
        directly instead of a token (the button variants, mainly).
     3. Carries the conference's own header and footer — the `.dmc-*` block.

   ── Why the chrome is Doha MUN's own now ────────────────────────────────────
   The previous build wore the shared Pre-University Education chrome: the PUE
   lockup in the header, the Sidra-green PueFooter at the bottom, and the
   conference reduced to a text co-brand beside somebody else's mark. That is the
   right answer for a PUE hub page. It is the wrong answer for a conference that
   has a name, four hundred delegates, two working languages and its own front
   door — on its own domain, a visitor arriving at dohamun.org should be met by
   Doha MUN.

   So the endorsement moved rather than disappeared. Pre-University Education now
   appears once, deliberately, in a band of its own above the legal line — "An
   initiative of", the official lockup at the same 56px the frozen baseline sets,
   with clearspace on all four sides and nothing competing with it. That is a
   stronger statement of who runs this than the same lockup used as decoration at
   the top of every page, and it is the one QF brand element on the site that is
   still the untouched official artwork.

   ── The identity ───────────────────────────────────────────────────────────
   Everything here is derived from what the conference actually is, in the order
   those things matter:

     · **Maroon** is Qatar's colour. Doha MUN is Qatar hosting a global argument,
       and the flag is the plainest available way to say so. It is the brand: the
       mark, the theme band, links, the active tab. It is deliberately *not* QF's
       Adham (#8A1538, reserved for national projects) — this is Doha MUN's own
       value, near it and not it.
     · **Chamber navy** is the room. Deep, formal, and the ground the header and
       footer sit on, so the page is bracketed by the colour of a debating hall
       rather than by a brand field.
     · **Brass** is the gavel. One accent, used once per screen: the header's
       call to action, an eyebrow on a dark ground, a countdown digit. The moment
       it appears twice in a viewport it has stopped being an accent.
     · **Sand** replaces the design system's cold #F1F1F1 tint. A conference runs
       on paper — position papers, resolutions, placards — and a warm ground says
       that before a single word is read.
     · **A serif for display type.** The single biggest departure, and the reason
       the page reads as institutional rather than as a product: Latin headings
       set in IBM Plex Serif, everything else in QF sans. Arabic never takes the
       serif — Naskh at display size wants the sans, and IBM Plex Sans Arabic is
       drawn for screens in a way the fallback stack is not.

   ── Load order ─────────────────────────────────────────────────────────────
   Loads after dohamun.css and before dohamun-rtl.css. After, because it has to
   beat the design layer's own heading font-family and the dark theme's token
   block; before the RTL file, because direction fixes are the last word.

   Custom properties resolve at use, not at definition, so the token re-points
   below reach every rule in every earlier stylesheet regardless of order. Only
   the actual rulesets in sections 5–9 depend on being late.
   ============================================================================ */

/* ---------------------------------------------------------------- 1. Faces
   Self-hosted subsets of IBM Plex Serif and IBM Plex Sans Arabic (OFL 1.1 — see
   assets/fonts/LICENSE-IBM-PLEX.txt). No fonts.gstatic.com request: a school
   network that blocks it would otherwise fall the whole identity back to
   Georgia, and the site would be quietly wearing somebody else's face.

   unicode-range is what makes the Arabic family safe to put in a Latin stack.
   The browser downloads the Arabic subset only if an Arabic codepoint is
   actually painted, so an English reader never pays for it. */

@font-face {
	font-family: "Doha Serif";
	src: url("../fonts/dm-serif-400.woff2") format("woff2");
	font-weight: 400; font-style: normal; font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Doha Serif";
	src: url("../fonts/dm-serif-ext-400.woff2") format("woff2");
	font-weight: 400; font-style: normal; font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Doha Serif";
	src: url("../fonts/dm-serif-600.woff2") format("woff2");
	font-weight: 600; font-style: normal; font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Doha Serif";
	src: url("../fonts/dm-serif-ext-600.woff2") format("woff2");
	font-weight: 600; font-style: normal; font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Doha Arabic";
	src: url("../fonts/dm-arabic-400.woff2") format("woff2");
	font-weight: 400; font-style: normal; font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
	font-family: "Doha Arabic";
	src: url("../fonts/dm-arabic-latin-400.woff2") format("woff2");
	font-weight: 400; font-style: normal; font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Doha Arabic";
	src: url("../fonts/dm-arabic-600.woff2") format("woff2");
	font-weight: 600; font-style: normal; font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
	font-family: "Doha Arabic";
	src: url("../fonts/dm-arabic-latin-600.woff2") format("woff2");
	font-weight: 600; font-style: normal; font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Doha Arabic";
	src: url("../fonts/dm-arabic-700.woff2") format("woff2");
	font-weight: 700; font-style: normal; font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
	font-family: "Doha Arabic";
	src: url("../fonts/dm-arabic-latin-700.woff2") format("woff2");
	font-weight: 700; font-style: normal; font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------ 2. Primitives
   Doha MUN's own values. Named for what they are in the conference, not for
   where they sit on a colour wheel — `--dm-brass` survives a redesign of the
   button it currently paints; `--dm-gold-3` would not. */

:root {
	/* The brand. Qatar's maroon, and this conference's own cut of it. */
	--dm-maroon:      #8A1338;
	--dm-maroon-deep: #650D28;
	--dm-maroon-60:   #B36B84;
	--dm-maroon-40:   #CE9FAF;
	--dm-maroon-20:   #EFDDE3;

	/* The room. Header, footer and every inverse ground. */
	--dm-chamber:     #0F2436;
	--dm-chamber-90:  #16324A;
	--dm-chamber-70:  #3C5568;
	--dm-chamber-60:  #6F8695;
	--dm-chamber-40:  #9FAFBA;

	/* The gavel. One accent, once per screen. */
	--dm-brass:       #B8862B;
	--dm-brass-lite:  #E0BC6B;
	--dm-brass-20:    #F6EDD9;

	/* The third categorical colour.
	   Not an identity colour and never used as one — it exists because the design
	   layer codes three things at once in several places (a committee's working
	   language: English, Arabic, or both) and three categories need three
	   distinguishable values. Muted and UN-adjacent, so it reads as information
	   rather than as a second brand. */
	--dm-sky:         #2E7C9B;
	--dm-sky-lite:    #7FBCD4;

	/* Paper. */
	--dm-sand:        #F3EEE7;
	--dm-sand-2:      #FAF7F2;
	--dm-line:        #E2D9CD;
	--dm-line-strong: #CFC2B2;

	/* Ink, warmed. QF's #111 is a true neutral and reads cold against sand. */
	--dm-ink:         #16191C;
	--dm-ink-70:      #4C5257;
	--dm-ink-50:      #797F84;
	--dm-ink-30:      #A9AFB4;

	/* ---- Re-point: the neutral ramp ----
	   The design layer consumes --qf-ink and --qf-line directly in a few hundred
	   places. Re-pointing them here is what re-skins those places without editing
	   dohamun.css line by line. The DS file itself is untouched; this is the
	   sanctioned lever, and it is why qf-tokens.css can still be overwritten by a
	   design-system refresh. */
	--qf-ink:            var(--dm-ink);
	--qf-ink-70:         var(--dm-ink-70);
	--qf-ink-50:         var(--dm-ink-50);
	--qf-ink-30:         var(--dm-ink-30);
	--qf-line:           var(--dm-line);
	--qf-surface-tint:   var(--dm-sand);
	--qf-surface-tint-2: var(--dm-sand-2);

	/* Sidra green is deliberately NOT re-pointed. It still has one job on this
	   site — the endorsement band's ground reference and the PUE lockup's own
	   colourway — and a token that lies about its name is worse than an unused
	   one. */

	/* ---- Re-point: the QF secondary palette ----
	   dohamun.css names these six directly in about thirty places, because at the
	   time it was written they *were* the accent vocabulary. Left alone, QF's acid
	   yellow and orange sit next to maroon and brass and the page looks like two
	   identities arguing. Re-pointed by the role each one actually plays in that
	   file rather than by hue:

	     yellow → the editorial accent on a dark or brand ground
	     orange → the same accent on paper, and the Arabic language code
	     mint   → the highlight on dark, and the "both languages" code
	     cyan   → informational, the one place a cool colour is wanted
	     leaf   → used twice, and never as green in particular
	     adham  → "this one is serious": advanced level, priority desk

	   The tint ramps below them are not re-pointed. Nothing in this project uses
	   them, and inventing five screens of a colour nobody asks for is how a token
	   file doubles in size for no reader. */
	--qf-yellow: var(--dm-brass-lite);
	--qf-orange: var(--dm-brass);
	--qf-mint:   var(--dm-sky-lite);
	--qf-cyan:   var(--dm-sky);
	--qf-leaf:   var(--dm-sky);
	--qf-adham:  var(--dm-maroon-deep);

	/* ---- Re-point: the semantic layer ----
	   These are the aliases that used to resolve to Sidra green, QF orange, QF
	   yellow and QF mint. Everything downstream follows from these six lines. */
	--text-brand:      var(--dm-maroon);
	--text-link:       var(--dm-maroon);
	--text-link-hover: var(--dm-maroon-deep);

	--surface-brand:   var(--dm-maroon);
	--surface-inverse: var(--dm-chamber);
	--surface-tint:    var(--dm-sand);
	--surface-card:    #FFFFFF;

	--border-default:  var(--dm-line);
	--border-subtle:   var(--dm-line);
	--border-strong:   var(--dm-ink);

	--accent-primary:   var(--dm-maroon);
	--accent-highlight: var(--dm-brass-lite);
	--accent-editorial: var(--dm-brass);
	--focus-ring:       var(--dm-maroon);

	/* ---- Type ----
	   --font-display is new. --font-sans and --font-arabic are re-points: the QF
	   face keeps the Latin body (it is a good text sans and the site is still a
	   QF property), and Arabic moves wholesale to Plex Arabic, which is drawn for
	   screen reading in a way the Noto Naskh fallback is not. */
	--font-display: "Doha Serif", "Doha Arabic", Georgia, "Times New Roman", serif;
	--font-sans:    "QF", "Doha Arabic", "Helvetica Neue", Arial, sans-serif;
	--font-arabic:  "Doha Arabic", "QF", "Noto Naskh Arabic", sans-serif;

	/* The DS aliases this to the QF serif; the display face is the serif now. */
	--font-serif-display: var(--font-display);

	/* Display type is set in a serif, which carries negative tracking badly. */
	--tracking-display: -0.008em;

	/* Squared, not rounded: a placard has corners. Restated rather than assumed,
	   because Astra sets its own radius on buttons and inputs. */
	--radius-sm: 0;
	--radius-xs: 0;

	/* Chrome metrics, so the sticky-header scroll offset and the header itself
	   cannot drift apart. */
	--dmc-masthead-h: 74px;
	--dmc-navbar-h:   52px;
}

/* ----------------------------------------------------------------- 3. Dark
   Mirrors qf-theme-dark.css's three-state pattern exactly — explicit dark,
   explicit light, and the system default with no attribute stamped — and loads
   after it, so these win.

   On a dark ground maroon is unreadable as text and chamber navy is invisible as
   a surface. Both invert: the brand becomes its 60% tint for type, the grounds
   become near-black with a blue cast rather than the DS's green-cast neutrals,
   and brass — which was the one accent — becomes the primary readable colour
   because it is the only one in the palette with enough luminance to carry
   links. */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--qf-ink:            #ECEEF0;
		--qf-ink-70:         #B6BCC2;
		--qf-ink-50:         #8B9299;
		--qf-ink-30:         #5F676E;
		--qf-line:           #2A3239;
		--qf-surface-tint:   #161C22;
		--qf-surface-tint-2: #12181D;

		--surface-page:    #0B1015;
		--surface-card:    #141A20;
		--surface-tint:    #161C22;
		--surface-inverse: #05090D;
		--surface-brand:   var(--dm-maroon-deep);

		--text-brand:      var(--dm-maroon-40);
		--text-link:       var(--dm-brass-lite);
		--text-link-hover: #F0D79A;

		--border-default: #2A3239;
		--border-subtle:  #232A31;
		--border-strong:  var(--qf-ink-50);

		--accent-highlight: var(--dm-brass-lite);
		--focus-ring:       var(--dm-brass-lite);

		/* Maroon-deep is invisible on a near-black page; the "serious" marker has
		   to invert to a tint that reads as text. */
		--qf-adham:  var(--dm-maroon-40);
		--qf-orange: var(--dm-brass-lite);

		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--qf-ink:            #ECEEF0;
	--qf-ink-70:         #B6BCC2;
	--qf-ink-50:         #8B9299;
	--qf-ink-30:         #5F676E;
	--qf-line:           #2A3239;
	--qf-surface-tint:   #161C22;
	--qf-surface-tint-2: #12181D;

	--surface-page:    #0B1015;
	--surface-card:    #141A20;
	--surface-tint:    #161C22;
	--surface-inverse: #05090D;
	--surface-brand:   var(--dm-maroon-deep);

	--text-brand:      var(--dm-maroon-40);
	--text-link:       var(--dm-brass-lite);
	--text-link-hover: #F0D79A;

	--border-default: #2A3239;
	--border-subtle:  #232A31;
	--border-strong:  var(--qf-ink-50);

	--accent-highlight: var(--dm-brass-lite);
	--focus-ring:       var(--dm-brass-lite);

	/* Maroon-deep is invisible on a near-black page; the "serious" marker has
	   to invert to a tint that reads as text. */
	--qf-adham:  var(--dm-maroon-40);
	--qf-orange: var(--dm-brass-lite);

	color-scheme: dark;
}

/* ------------------------------------------------------------- 4. The voice
   Where the serif goes, and — more importantly — where it does not.

   Display sizes only: the page's two or three largest strings. A serif at 16px
   in a table of committee seat counts is harder to read than the sans and buys
   nothing, so body, UI, labels, nav and buttons all stay in QF. This is the
   split that makes the type read as a decision rather than as a font swap. */

.dm :is(h1, h2),
.dm .dm-bititle,
.dm .dm-hero-title,
.dm .dm-pagehero h1,
.dm .dm-stat-value,
.dm .dm-countdown-value,
.dm .dm-tri-n,
.dm .dm-step-n,
.dm .dm-topics-n {
	font-family: var(--font-display);
	font-weight: 400;
	letter-spacing: var(--tracking-display);
}

/* Section headings carry the semibold cut; the hero and the numerals stay at
   400, where the serif has the most air and the least shout. */
.dm :is(h2),
.dm .dm-bititle-primary {
	font-weight: 600;
}

/* Arabic never takes the serif.

   Two reasons, and the second is the one that matters: Plex Serif has no Arabic
   glyphs, so an Arabic heading would fall through to whatever the stack found
   next and the two languages would be set in unrelated faces; and Naskh at 48px
   with the leading a Latin serif wants is genuinely harder to read than the
   sans. The bilingual pairing is serif-Latin against sans-Arabic on purpose. */
.dm [lang="ar"],
.dm-lang-ar :is(h1, h2),
.dm-lang-ar .dm-bititle,
.dm-lang-ar .dm-hero-title,
.dm-lang-ar .dm-pagehero h1 {
	font-family: var(--font-arabic);
	font-weight: 600;
	/* Negative tracking breaks cursive joins. Restated because the rule above
	   sets it and this selector has to undo it, not inherit it. */
	letter-spacing: normal;
}

/* Arabic numerals in the display face: Plex Arabic's figures are drawn to sit
   with its own letterforms, and the countdown mixes the two constantly. */
.dm-lang-ar :is(.dm-stat-value, .dm-countdown-value, .dm-tri-n, .dm-step-n, .dm-topics-n) {
	font-family: var(--font-arabic);
	letter-spacing: normal;
}

/* Latin body text keeps QF, so the serif never has to carry a paragraph. */
.dm .dm-lede,
.dm .dm-prose p,
.dm .dm-hero-lede { font-family: var(--font-sans); }

/* ------------------------------------------------------ 5. Re-skinned prims
   qf-chrome.css names four QF colours directly instead of going through a
   token — the button variants, the selection colour and the icon button. Those
   are the only places a token re-point cannot reach, so they are restated here
   and nowhere else. Scoped to `.dm` so nothing leaks to another PUE project
   sharing the stylesheet. */

.dm ::selection { background: var(--dm-brass-20); color: var(--dm-ink); }

.dm .qf-btn {
	font-family: var(--font-sans);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.01em;
	border-radius: 0;
	transition: background var(--duration-base) var(--ease-standard),
	            border-color var(--duration-base) var(--ease-standard),
	            color var(--duration-base) var(--ease-standard);
}

.dm .qf-btn--brand,
.dm a.qf-btn--brand {
	background: var(--dm-maroon);
	border-color: var(--dm-maroon);
	color: #FFFFFF;
}
.dm .qf-btn--brand:hover,
.dm a.qf-btn--brand:hover {
	background: var(--dm-maroon-deep);
	border-color: var(--dm-maroon-deep);
	color: #FFFFFF;
}

.dm .qf-btn--accent,
.dm a.qf-btn--accent {
	background: var(--dm-brass);
	border-color: var(--dm-brass);
	/* Brass is a mid-tone: white on it is 3.1:1 and fails, the chamber ink is
	   8.9:1 and passes. The accent button is dark-on-gold, not white-on-gold. */
	color: var(--dm-chamber);
}
.dm .qf-btn--accent:hover,
.dm a.qf-btn--accent:hover {
	background: var(--dm-brass-lite);
	border-color: var(--dm-brass-lite);
	color: var(--dm-chamber);
}

.dm .qf-btn--primary,
.dm a.qf-btn--primary {
	background: var(--dm-chamber);
	border-color: var(--dm-chamber);
	color: #FFFFFF;
}
.dm .qf-btn--primary:hover,
.dm a.qf-btn--primary:hover {
	background: var(--dm-chamber-90);
	border-color: var(--dm-chamber-90);
}

.dm .qf-btn--secondary,
.dm a.qf-btn--secondary { border-color: var(--dm-line-strong); }
.dm .qf-btn--secondary:hover,
.dm a.qf-btn--secondary:hover {
	background: var(--dm-maroon);
	border-color: var(--dm-maroon);
	color: #FFFFFF;
}

/* ============================================================================
   6. The masthead

   Chamber navy, edge to edge, carrying the mark, the bilingual wordmark, the
   language switch and one call to action. A dark band across the top of the page
   is the single loudest signal that this is not a QF microsite, and it is also
   just correct: the room this conference happens in is dark and formal, and the
   page should open on it.
   ============================================================================ */

.dm .dmc-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 30;
	background: var(--dm-chamber);
	color: #FFFFFF;
}

.dm .dmc-masthead {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	min-block-size: var(--dmc-masthead-h);
	padding-block: var(--space-3);
}

/* ---- The lockup ----
   Built from live type rather than shipped as one piece of artwork, unlike the
   PUE lockup in the footer. That is a deliberate difference and not laziness:
   this lockup is bilingual and it has to switch language with the page, so a
   flat SVG would need two files that then drift. The mark is the artwork; the
   name is type, set in the identity's own faces at a fixed ratio to it. */
.dm .dmc-lockup {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	min-inline-size: 0;
	color: inherit;
	text-decoration: none;
}

.dm a.dmc-lockup:hover { color: inherit; text-decoration: none; }

/* The masthead lockup takes the whole left of the row and pushes the tools to the
   far edge; the footer one sits in a grid cell and must not grow. */
.dm .dmc-lockup--masthead { margin-inline-end: auto; }

.dm .dmc-lockup-mark {
	flex: 0 0 auto;
	color: #FFFFFF;
	transition: color var(--duration-base) var(--ease-standard);
}

.dm .dmc-lockup-mark svg { inline-size: 100%; block-size: 100%; }

.dm .dmc-lockup--masthead .dmc-lockup-mark { inline-size: 42px; block-size: 42px; }
.dm .dmc-lockup--footer   .dmc-lockup-mark { inline-size: 48px; block-size: 48px; }

/* The dot is the delegate holding the floor, so it is the thing that lights up
   when you point at the conference's own name. */
.dm a.dmc-lockup:hover .dmc-lockup-mark { color: var(--dm-brass-lite); }

.dm .dmc-brand-words {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-areas:
		"name year"
		"ar   year";
	align-items: center;
	column-gap: var(--space-3);
	min-inline-size: 0;
}

.dm .dmc-brand-name {
	grid-area: name;
	font-family: var(--font-display);
	font-size: 1.3125rem;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: 0.002em;
	white-space: nowrap;
}

.dm .dmc-brand-ar {
	grid-area: ar;
	font-family: var(--font-arabic);
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--dm-chamber-40);
	white-space: nowrap;
}

/* The year sits in a maroon block the height of both lines — the placard edge,
   which is the identity's one repeating shape. */
.dm .dmc-brand-year {
	grid-area: year;
	align-self: stretch;
	display: grid;
	place-items: center;
	padding-inline: var(--space-2);
	background: var(--dm-maroon);
	color: #FFFFFF;
	font-family: var(--font-sans);
	font-size: var(--text-micro);
	font-weight: var(--weight-bold);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	transition: background var(--duration-base) var(--ease-standard);
}

.dm a.dmc-lockup:hover .dmc-brand-year { background: var(--dm-brass); color: var(--dm-chamber); }

/* ---- Masthead controls ---- */
.dm .dmc-tools {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex: 0 0 auto;
}

/* The language switch. The most-used control in the chrome on a site that
   genuinely runs in two languages, so it is a bordered control with a hit area
   rather than one more small word in a grey row. Its label is the name of the
   other language set in that language's own script — no globe icon, because the
   word العربية is a clearer signal than any glyph beside it. */
.dm .dmc-lang {
	display: inline-flex;
	align-items: center;
	padding: 7px var(--space-4);
	border: 1px solid rgba(255, 255, 255, .34);
	color: #FFFFFF;
	font-size: var(--text-body-sm);
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: var(--transition-base);
}

.dm a.dmc-lang:hover {
	background: #FFFFFF;
	border-color: #FFFFFF;
	color: var(--dm-chamber);
}

.dm .dmc-lang[lang="ar"] { font-family: var(--font-arabic); }
.dm .dmc-lang[lang="en"] { font-family: var(--font-sans); }

.dm .dmc-cta { white-space: nowrap; }

/* The theme toggle ships from the design system styled for a light header. On
   the navy masthead its track and its ink both have to invert. */
.dm .dmc-tools .qf-theme {
	background: rgba(255, 255, 255, .16);
	border-color: rgba(255, 255, 255, .28);
	color: #FFFFFF;
}
.dm .dmc-tools .qf-theme:hover { background: rgba(255, 255, 255, .26); }
.dm .qf-theme[hidden] { display: none; }

/* ============================================================================
   7. The nav bar

   On the page ground rather than the masthead, so the two tiers read as two
   different things: who this is, then where you can go. The active item is
   marked with a maroon bar under the label — the placard edge again, and the
   third place that shape appears after the mark and the year block.
   ============================================================================ */

.dm .dmc-navbar {
	background: var(--surface-page);
	border-block-end: 1px solid var(--border-default);
}

.dm .dmc-navbar > .qf-shell {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	min-block-size: var(--dmc-navbar-h);
}

.dm .dmc-nav {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	/* Wraps onto a second line rather than scrolling. A horizontally scrolling
	   nav with a hidden scrollbar reads on a phone as a clipped last item. */
	flex-wrap: wrap;
	min-inline-size: 0;
}

/* `> a` and the summary, not `a`: the group's panel is full of anchors that are laid
   out as stacked rows and would otherwise inherit the row's metrics — and a nav item
   is now either a link or a disclosure, which have to be indistinguishable here. */
.dm .dmc-nav > a,
.dm .dmc-nav-summary {
	position: relative;
	display: inline-block;
	padding-block: var(--space-4) calc(var(--space-4) - 3px);
	border-block-end: 3px solid transparent;
	font-family: var(--font-sans);
	font-size: 1rem;
	font-weight: var(--weight-medium);
	color: var(--text-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--duration-base) var(--ease-standard),
	            border-color var(--duration-base) var(--ease-standard);
}

.dm .dmc-nav > a:hover,
.dm .dmc-nav-summary:hover {
	color: var(--qf-ink);
	border-block-end-color: var(--dm-line-strong);
}

/* --text-brand, not --dm-maroon: the token is the one that knows about the dark
   theme, where the brand resolves to its 40% tint because flat maroon on the
   near-black ground is unreadable. Hardcoding the raw colour here left the
   current page's own nav item at 2:1 on dark — the one label that has to be the
   most legible in the row was the least. */
.dm .dmc-nav > a[aria-current="page"],
.dm .dmc-nav-group.is-inside > .dmc-nav-summary {
	color: var(--text-brand);
	font-weight: var(--weight-semibold);
	border-block-end-color: var(--text-brand);
}

/* ---------------------------------------------------------------- nav group

   One nav item is a <details> holding the three pages dohamun.org has no
   equivalent of. It is styled to be indistinguishable from its neighbours in the
   closed state — same metrics, same colours, same maroon bar when the reader is
   inside it — because it is a nav item, and a control that announces itself as a
   different kind of thing invites the question "why is that one special?" before
   the panel has had a chance to answer it.

   The panel is the answer: one row per page with the sentence that says what the
   page is, so nothing has to be opened to find out.
   ---------------------------------------------------------------------------- */

.dm .dmc-nav-group {
	position: relative;
	min-inline-size: 0;
}

.dm .dmc-nav-summary {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	cursor: pointer;
	/* Both are needed and neither is redundant: `list-style` removes the marker in
	   every engine that follows the spec, the pseudo-element covers Safari, which
	   does not. */
	list-style: none;
}

.dm .dmc-nav-summary::-webkit-details-marker { display: none; }

.dm .dmc-nav-caret {
	flex: 0 0 auto;
	transition: transform var(--duration-base) var(--ease-standard);
}

.dm .dmc-nav-group[open] > .dmc-nav-summary .dmc-nav-caret { transform: rotate(180deg); }

/* Anchored to the bottom of the nav row rather than floated clear of it: the row
   has a hairline under it, and a panel that starts on that line reads as the row
   having opened rather than as a card that appeared over the page. */
.dm .dmc-nav-panel {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	z-index: 5;
	min-inline-size: 22rem;
	max-inline-size: min(26rem, calc(100vw - var(--space-8)));
	/* --surface-card, not --surface-page. On the light theme the two are the same
	   white and the border and shadow do the separating; on the dark theme the page
	   is #0B1015 and a panel painted the same colour is text floating over the hero
	   behind a hairline. The card token is one step up from the page in dark and
	   identical to it in light, which is exactly the difference needed. */
	background: var(--surface-card);
	border: 1px solid var(--border-default);
	box-shadow: var(--shadow-overlay);
}

.dm .dmc-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dm .dmc-nav-panel a {
	display: grid;
	gap: var(--space-1);
	padding: var(--space-3) var(--space-4);
	font-family: var(--font-sans);
	text-decoration: none;
	/* The notes are sentences. The row above sets nowrap for a one-word nav label
	   and it must not reach in here. */
	white-space: normal;
}

/* A wash of the ink rather than a named surface: --surface-tint is warm sand in
   light and #161C22 in dark, and the dark value is two values off the card it would
   sit on — a hover state nobody can see. Mixing the ink is the one formula that
   lightens on dark and darkens on light without a second rule. */
.dm .dmc-nav-panel a:hover { background: color-mix(in srgb, var(--qf-ink) 7%, transparent); }

.dm .dmc-nav-label {
	font-size: 0.9375rem;
	font-weight: var(--weight-semibold);
	color: var(--qf-ink);
}

.dm .dmc-nav-note {
	font-size: var(--text-body-sm);
	line-height: var(--leading-body);
	color: var(--text-muted);
}

/* The bar moves to the leading edge inside the panel — under the label it would be
   an underline on a row that is two lines tall. Border rather than an inset shadow
   so it flips with the writing direction on its own. */
.dm .dmc-nav-panel a[aria-current="page"] {
	border-inline-start: 3px solid var(--text-brand);
	padding-inline-start: calc(var(--space-4) - 3px);
}

.dm .dmc-nav-panel a[aria-current="page"] .dmc-nav-label { color: var(--text-brand); }

/* Selector deliberately more specific than `.dmc-nav-panel a` above, which sets
   `display: grid` for the two-line rows. Left at one class this rule loses the
   display and the arrow drops onto its own line under the label. */
.dm .dmc-nav-panel a.dmc-nav-all {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	border-block-start: 1px solid var(--border-default);
	font-size: var(--text-body-sm);
	font-weight: var(--weight-medium);
	color: var(--text-brand);
}

/* The conference's dates, sitting opposite the nav. The one piece of standing
   information every visitor is looking for, and the nav row is the only place on
   an interior page it can live without being invented furniture. */
.dm .dmc-when {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	flex: 0 0 auto;
	font-size: var(--text-body-sm);
	color: var(--text-muted);
	white-space: nowrap;
}

.dm .dmc-when svg { color: var(--dm-maroon); flex: 0 0 auto; }

/* ============================================================================
   8. The footer

   Chamber navy again, so the page closes on the room it opened on. Three tiers:
   the conference's own footer, then the Pre-University Education endorsement in
   a band of its own, then the legal line.
   ============================================================================ */

.dm .dmc-footer {
	margin-block-start: 0;
	background: var(--dm-chamber);
	color: #FFFFFF;
}

.dm .dmc-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.dm .dmc-footer a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 0.2em; }

.dm .dmc-footer-main {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
	gap: var(--space-12) var(--space-10);
	padding-block: var(--space-20) var(--space-16);
}

.dm .dmc-footer-brand { display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; }

/* The footer lockup is the same markup one step larger, and it keeps its Arabic
   line at every width — the footer has the room the masthead does not. */
.dm .dmc-lockup--footer .dmc-brand-name { font-size: var(--text-title-2); }
.dm .dmc-lockup--footer .dmc-brand-ar   { font-size: var(--text-body-sm); }

.dm .dmc-footer-blurb {
	max-inline-size: 34ch;
	font-size: var(--text-body-sm);
	line-height: var(--leading-body);
	color: rgba(255, 255, 255, .72);
}

.dm .dmc-footer-col h2 {
	font-family: var(--font-sans);
	font-size: var(--text-caption);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--dm-brass-lite);
	margin-block-end: var(--space-5);
}

.dm-lang-ar .dmc-footer-col h2 { text-transform: none; letter-spacing: normal; }

.dm .dmc-footer-list { display: flex; flex-direction: column; gap: var(--space-3); }
.dm .dmc-footer-list a { font-size: var(--text-body-sm); }

.dm .dmc-footer-socials { display: flex; gap: var(--space-4); margin-block-start: var(--space-2); }
.dm .dmc-footer-socials a { display: inline-flex; color: rgba(255, 255, 255, .72); }
.dm .dmc-footer-socials a:hover { color: var(--dm-brass-lite); }

/* ---- The endorsement ------------------------------------------------------
   The one place Pre-University Education appears, and the reason it can appear
   at full strength: it is alone in its own band, on its own ground, with the
   official lockup at the 56px the frozen baseline specifies and clearspace of
   half that on every side. Nothing sits beside it, nothing scales it, nothing
   recolours it — the white colourway on a dark ground is the correct artwork.

   An endorsement band is a stronger and more honest statement than a co-brand
   in the header was. A co-brand says "these two things are peers". This says
   "Doha MUN is run by Pre-University Education", which is the fact. */
.dm .dmc-endorse {
	border-block-start: 1px solid rgba(255, 255, 255, .16);
	background: rgba(255, 255, 255, .04);
}

.dm .dmc-endorse > .qf-shell {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-5) var(--space-8);
	padding-block: var(--space-10);
}

.dm .dmc-endorse-label {
	font-size: var(--text-caption);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: rgba(255, 255, 255, .58);
}

.dm-lang-ar .dmc-endorse-label { text-transform: none; letter-spacing: normal; }

/* Clearspace: the brand guidelines define it as half the lockup's height. At
   56px that is 28px, and the flex gap plus this margin never lets anything
   closer. */
.dm .dmc-endorse-lockup { display: inline-flex; margin-inline: var(--space-2); }
.dm .dmc-endorse-lockup img { block-size: 56px; inline-size: auto; }
.dm .dmc-footer a.dmc-endorse-lockup:hover { text-decoration: none; }

.dm .dmc-endorse-note {
	flex: 1 1 22ch;
	font-size: var(--text-body-sm);
	line-height: var(--leading-body);
	color: rgba(255, 255, 255, .72);
}

/* ---- Legal ---- */
.dm .dmc-legal { border-block-start: 1px solid rgba(255, 255, 255, .16); }

.dm .dmc-legal > .qf-shell {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-4);
	padding-block: var(--space-6);
	font-size: var(--text-caption);
	color: rgba(255, 255, 255, .62);
}

.dm .dmc-legal-links { display: flex; flex-wrap: wrap; gap: var(--space-5); }

/* The PUE Digital credit keeps its animated gradient — it is the shared chrome's
   one signature and it belongs to the team that built this. It is restated here
   only because it was styled against a Sidra-green ground. */
.dm .dmc-legal .pue-credit { color: rgba(255, 255, 255, .62); }
.dm .dmc-legal .pue-credit:hover { text-decoration: none; }

/* ============================================================================
   9. Narrow screens

   The masthead loses the Arabic line first — it is the only element on the row
   that is a duplicate of something already there, since the wordmark beside it
   says the same name. Then the call to action moves to the nav row, where there
   is width for it. Below 560px the two tiers stack and the nav wraps.
   ============================================================================ */

@media (max-width: 900px) {
	.dm .dmc-footer-main {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		padding-block: var(--space-16) var(--space-12);
	}
	.dm .dmc-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
	.dm .dmc-lockup--masthead .dmc-brand-ar { display: none; }
	.dm .dmc-lockup--masthead .dmc-brand-words { grid-template-areas: "name year"; }
	.dm .dmc-when { display: none; }
	.dm .dmc-nav { gap: var(--space-6); }
}

@media (max-width: 620px) {
	.dm .dmc-masthead { gap: var(--space-4); padding-block: var(--space-3); }
	.dm .dmc-lockup--masthead .dmc-lockup-mark { inline-size: 34px; block-size: 34px; }
	.dm .dmc-lockup--masthead .dmc-brand-name { font-size: 1.125rem; }
	.dm .dmc-cta { display: none; }

	/* The call to action is not lost — the nav row picks it up, where a full
	   width line is available and it can be the last thing in reading order
	   rather than competing with the name. */
	.dm .dmc-navbar > .qf-shell { flex-wrap: wrap; padding-block: var(--space-2); }
	.dm .dmc-nav { gap: var(--space-4) var(--space-5); }
	.dm .dmc-nav > a,
	.dm .dmc-nav-summary { padding-block: var(--space-3) calc(var(--space-3) - 3px); font-size: 0.9375rem; }

	/* Its own line, open or closed. Sharing a line and then pushing a panel out
	   below it would move the items beside it every time the group is opened. */
	.dm .dmc-nav-group { flex: 0 0 100%; }

	.dm .dmc-nav-panel {
		position: static;
		inline-size: 100%;
		min-inline-size: 0;
		max-inline-size: none;
		margin-block-end: var(--space-3);
		border-inline: 0;
		box-shadow: none;
	}
	.dm .dmc-cta-narrow { display: inline-flex; inline-size: 100%; justify-content: center; margin-block-end: var(--space-3); }
}

/* Above 620px the narrow call to action is the duplicate, so it is the one that
   goes. Stated as its own rule rather than as a `display:none` inside the query
   above, because the default state of a progressive-enhancement pair should be
   the desktop one. */
@media (min-width: 621px) {
	.dm .dmc-cta-narrow { display: none; }
}

/* 420px is where the masthead finally runs out of room. Laid out at 390px the row
   wants about 426px — lockup 191, tools 171, gaps and gutters the rest — and the
   item that gives is the lockup, because it carries min-inline-size: 0 so that a
   long name can shrink. The wordmark inside it will not shrink, though, so what
   actually happens is that the year block slides out of the squeezed box and comes
   to rest on top of the magnifier. The search control is unreachable underneath it.

   Two rules are needed, one for the widths where trimming is enough and one for the
   widths where it is not.

   Trim first: a step off the row gap, the lockup's own gap, the wordmark and the
   language switch's padding buys back the ~40px a 390px phone is short, and the row
   stays on one line down to about 360px.

   Then let it wrap, because trimming cannot win at 320px and the failure mode of a
   nowrap row is one control resting on another. flex-shrink: 0 on the lockup is what
   makes wrapping the thing that happens instead of squeezing — it is also the fix for
   the overlap itself, since a lockup that keeps its own width cannot spill its year
   block onto its neighbour. The tools keep to the end of the line so that narrowing
   the viewport moves them down rather than sideways. */
@media (max-width: 420px) {
	.dm .dmc-masthead { flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
	.dm .dmc-lockup--masthead { flex-shrink: 0; }
	.dm .dmc-lockup--masthead .dmc-brand-name { font-size: 1rem; }
	.dm .dmc-lockup { gap: var(--space-3); }
	.dm .dmc-tools { gap: var(--space-2); margin-inline-start: auto; }
	.dm .dmc-lang { padding-inline: var(--space-3); }

	.dm .dmc-endorse > .qf-shell { padding-block: var(--space-8); }
	.dm .dmc-endorse-lockup img { block-size: 44px; }
	.dm .dmc-legal > .qf-shell { justify-content: flex-start; }
}

/* ============================================================================
   Site search

   The control in the masthead and the overlay behind it. Chrome rather than page, so
   it lives here beside the header and the footer rather than in dohamun.css.
   ============================================================================ */

/* ---- The control ---- */

.dm .dmc-search-open {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 6px 10px 6px 8px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	color: rgba(255, 255, 255, .82);
	font-size: var(--text-caption);
	text-decoration: none;
	transition: border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out);
}

.dm .dmc-search-open:hover,
.dm .dmc-search-open:focus-visible {
	border-color: rgba(255, 255, 255, .5);
	color: var(--qf-white);
	background: rgba(255, 255, 255, .07);
}

/* The shortcut hint. Monospace digits are not the point — the point is that it reads
   as a key rather than as a word, which is what makes it legible as a hint at 11px. */
.dm .dmc-search-key {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 10px;
	line-height: 1;
	padding: 3px 5px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 4px;
	color: rgba(255, 255, 255, .6);
}

/* Below the point where the masthead starts dropping things, the word goes and the
   magnifier stays. A search control is recognisable without its label; the language
   switch beside it is not, so that one keeps its text. */
@media (max-width: 700px) {
	.dm .dmc-search-word,
	.dm .dmc-search-key { display: none; }
	.dm .dmc-search-open { padding: 7px; }
}

/* ---- The overlay ---- */

/* Scroll lock. overflow on the root rather than position: fixed on the body, which
   would scroll the page back to the top the moment the panel opened. */
.dm-search-locked { overflow: hidden; }

/* The hidden attribute's display: none comes from the UA stylesheet at zero
   specificity, so the display: grid below would beat it and the overlay would sit open
   over every page on the site. This rule is the whole reason the panel is ever closed. */
.dm-search[hidden] { display: none; }

.dm-search {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	/* Not centred: a panel that grows downward from near the top does not move the
	   rows a reader is already reading as more of them arrive. */
	align-content: start;
	justify-items: center;
	padding: clamp(var(--space-8), 9vh, var(--space-24, 96px)) var(--space-4) var(--space-8);
}

.dm-search-scrim {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--dm-chamber) 72%, transparent);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity var(--duration-base) var(--ease-out);
}

.dm-search.is-open .dm-search-scrim { opacity: 1; }

.dm-search-panel {
	position: relative;
	inline-size: min(46rem, 100%);
	max-block-size: min(78vh, 44rem);
	display: flex;
	flex-direction: column;
	background: var(--surface-page);
	border: var(--border-hairline);
	box-shadow: 0 24px 64px -12px rgba(11, 16, 21, .45);
	/* Starts a little above where it lands and a hair small. Eight pixels and 1.5% —
	   enough to read as arriving, not enough to read as a bounce. */
	opacity: 0;
	transform: translateY(-8px) scale(.985);
	transition: opacity 180ms var(--ease-out), transform 220ms var(--ease-out);
}

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

/* ---- The field ---- */

.dm-search-bar {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	border-block-end: var(--border-hairline);
}

.dm-search-icon { display: inline-flex; color: var(--text-brand); }

.dm-search-input {
	appearance: none;
	inline-size: 100%;
	padding: var(--space-2) 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: var(--text-body-lg);
	color: var(--qf-ink);
}

.dm-search-input::placeholder { color: var(--text-subtle); }

/* The field is the panel's whole subject, so the focus ring belongs on the panel edge,
   not around a borderless input inside it. */
.dm-search-input:focus { outline: none; }
.dm-search-input::-webkit-search-cancel-button { filter: grayscale(1); }

.dm-search-close {
	appearance: none;
	display: inline-flex;
	padding: var(--space-2);
	border: 0;
	background: none;
	color: var(--text-subtle);
	cursor: pointer;
	transition: color var(--duration-base) var(--ease-out);
}

.dm-search-close:hover { color: var(--qf-ink); }

/* ---- Results ---- */

.dm-search-status {
	padding: var(--space-3) var(--space-5) 0;
	margin: 0;
	font-size: var(--text-micro);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--text-subtle);
}

/* Empty when there is nothing to say, and it must not then reserve a line: the panel
   would open with a gap in it that a reader reads as a missing element. */
.dm-search-status:empty { display: none; }

.dm-search-list {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
	margin: 0;
	padding: var(--space-2) 0 var(--space-2);
}

.dm-search-item {
	opacity: 0;
	transform: translateY(6px);
	animation: dm-search-in 260ms var(--ease-out) forwards;
	/* Capped: twelve rows at 22ms is a quarter of a second before the last one lands,
	   and the reader is looking at the first. */
	animation-delay: calc(min(var(--dm-i, 0), 8) * 22ms);
}

@keyframes dm-search-in {
	to { opacity: 1; transform: none; }
}

.dm-search-link {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2px;
	padding: var(--space-3) var(--space-5);
	text-decoration: none;
	color: inherit;
	border-inline-start: 2px solid transparent;
}

/* Hover and the arrow-key selection are the same state. Two different highlights for
   "the mouse is here" and "the keyboard is here" is how a reader ends up looking at
   one row and pressing Enter on another. */
.dm-search-item.is-active .dm-search-link,
.dm-search-link:hover {
	background: var(--surface-tint);
	border-inline-start-color: var(--dm-maroon);
}

.dm-search-kind {
	font-size: 10px;
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--text-brand);
}

.dm-search-title {
	font-family: var(--font-display);
	font-size: var(--text-body-lg);
	line-height: 1.3;
	color: var(--qf-ink);
}

.dm-search-meta,
.dm-search-snippet {
	font-size: var(--text-body-sm);
	color: var(--text-muted);
}

.dm-search-snippet {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* The matched words. A wash rather than a highlighter: the row is already the answer,
   and the mark is there to show why it is. */
.dm-search-list mark {
	background: color-mix(in srgb, var(--dm-brass) 30%, transparent);
	color: inherit;
	border-radius: 2px;
}

/* ---- Suggestions, and the foot ---- */

.dm-search-start { padding: var(--space-4) var(--space-5) var(--space-5); }

.dm-search-start-label {
	margin: 0 0 var(--space-3);
	font-size: var(--text-micro);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--text-subtle);
}

.dm-search-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.dm-search-chip {
	appearance: none;
	padding: 6px 12px;
	border: var(--border-hairline);
	border-radius: 999px;
	background: none;
	font-family: inherit;
	font-size: var(--text-body-sm);
	color: var(--qf-ink);
	cursor: pointer;
	transition: border-color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out);
}

.dm-search-chip:hover,
.dm-search-chip:focus-visible {
	border-color: var(--dm-maroon);
	background: var(--surface-tint);
}

.dm-search-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin: 0;
	padding: var(--space-3) var(--space-5);
	border-block-start: var(--border-hairline);
	background: var(--surface-tint);
	font-size: var(--text-micro);
	color: var(--text-subtle);
}

.dm-search-all {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--text-brand);
	text-decoration: none;
	font-weight: var(--weight-medium);
}

.dm-search-all:hover { text-decoration: underline; }

/* The hint is a keyboard legend and there is no keyboard on a phone. */
@media (max-width: 620px) {
	.dm-search-hint { display: none; }
	.dm-search { padding-block-start: var(--space-4); }
	.dm-search-panel { max-block-size: 88vh; }
}

@media (prefers-reduced-motion: reduce) {
	/* The panel still needs its end state, so the transitions are removed rather than
	   the states: without this the overlay would open at opacity 0 and stay there. */
	.dm-search-scrim,
	.dm-search-panel { transition: none; }
	.dm-search-panel { opacity: 1; transform: none; }
	.dm-search-item { animation: none; opacity: 1; transform: none; }
	.dm-search-scrim { backdrop-filter: none; }
}